基于react后端渲染模板引擎noox发布使用


Posted in Javascript onJanuary 11, 2018

React 组件化思想受到越来越多开发者的关注,组件化思想帮助开发者将页面解耦成一个一个组件,代码更加模块化, 更易扩展。而目前流行的后端模板引擎如 ejs, swig, jade, art 共同的问题是:

  1. 需要学习各类模板引擎定义的语法,如 {{if}}, {{loop}}
  2. 对组件化支持不够强,实现复杂,不易用

针对以上痛点,笔者基于 React 造出了 noox 这样一个工具,专注于后端模板的解析,让模板解析更加简单,易用。

使用方法

安装

npm install noox

简单的 demo

模板代码

首先创建组件目录和增加模板文件

mkdir components && cd components
vi Head.jsx

Head.jsx 内容如下:

<head>
 <title>{title}</title>
 <meta name="description" content={props.description} />
 <link rel="stylesheet" href="./css/style.css" rel="external nofollow" rel="external nofollow" />
</head>

Node.js Code

const noox = require('noox');
const nx = new noox(path.resolve(__dirname, './components'), {title: 'noox'});
let output = nx.render('Head', {description: 'hello, noox.'})

输出

<head>
 <title>noox</title>
 <meta name="description" content="hello, noox." />
 <link rel="stylesheet" href="./css/style.css" rel="external nofollow" rel="external nofollow" />
</head>

原理

Noox 在 React 的 Jsx 的基础上,简化了组件引用和创建,假设创建一个目录结构如下:

components/
 Header.jsx
 Body.jsx
 Layout.jsx

运行如下 nodejs 的代码:

nx = new noox(path.resolve(__dirname, './components'))

将会创建三个组件:

  1. Header
  2. Body
  3. Layout

然后通过 nx.render 渲染

nx.render('Body', props)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
DHTML 中的绝对定位
Nov 26 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
Mar 25 Javascript
jquery对元素拖动排序示例
Jan 16 Javascript
JavaScript实现简单的数字倒计时
May 15 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
Nov 17 Javascript
原生js实现验证码功能
Mar 16 Javascript
Node.js的Koa实现JWT用户认证方法
May 05 Javascript
对angularJs中ng-style动态改变样式的实例讲解
Sep 30 Javascript
详解Vue2.5+迁移至Typescript指南
Aug 01 Javascript
使用flow来规范javascript的变量类型
Sep 12 Javascript
JS实现滑动导航效果
Jan 14 Javascript
Antd下拉选择,自动匹配功能的实现
Oct 24 Javascript
Router解决跨模块下的页面跳转示例
Jan 11 #Javascript
vuex 使用文档小结篇
Jan 11 #Javascript
js判断传入时间和当前时间大小实例(超简单)
Jan 11 #Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
Jan 11 #Javascript
纯js代码生成可搜索选择下拉列表的实例
Jan 11 #Javascript
web前端vue之vuex单独一文件使用方式实例详解
Jan 11 #Javascript
vue-cli webpack 引入jquery的方法
Jan 10 #jQuery
You might like
PHP实现的比较完善的购物车类
2014/12/02 PHP
php实现读取内存顺序号
2015/03/29 PHP
php解析url并得到url中的参数及获取url参数的四种方式
2015/10/26 PHP
CodeIgniter框架常见用法工作总结
2017/03/16 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
使用javascript实现ListBox左右全选,单选,多选,全请
2013/11/07 Javascript
JQuery实现防止退格键返回的方法
2015/02/12 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
2015/12/08 Javascript
三种带箭头提示框总结实例
2016/06/14 Javascript
JS奇技之利用scroll来监听resize详解
2017/06/15 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
2017/06/16 Javascript
[01:11:48]Fnatic vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python多线程编程(五):死锁的形成
2015/04/05 Python
Django使用Celery异步任务队列的使用
2018/03/13 Python
Python实现按逗号分隔列表的方法
2018/10/23 Python
Python闭包和装饰器用法实例详解
2019/05/22 Python
30秒学会30个超实用Python代码片段【收藏版】
2019/10/15 Python
python实现一个点绕另一个点旋转后的坐标
2019/12/04 Python
更新升级python和pip版本后不生效的问题解决
2020/04/17 Python
Python爬虫教程之利用正则表达式匹配网页内容
2020/12/08 Python
css3 仿写阿里云水纹效果的示例代码
2018/02/10 HTML / CSS
HTML5 textarea高度自适应的两种方案
2020/04/08 HTML / CSS
英国领先的亚洲旅游专家:Wendy Wu Tours
2018/01/21 全球购物
美国酒店控股公司:Choice Hotels
2018/06/15 全球购物
阿迪达斯英国官方网站:adidas英国
2019/08/13 全球购物
集体婚礼证婚词
2014/01/13 职场文书
《乌鸦和狐狸》教学反思
2014/02/08 职场文书
《小动物过冬》教学反思
2014/04/17 职场文书
护理专业毕业生自荐书
2014/05/24 职场文书
水污染治理工程专业自荐信
2014/06/21 职场文书
工作态度检讨书范文
2015/05/06 职场文书
2015年妇产科工作总结
2015/05/18 职场文书
房屋产权证明书
2015/06/19 职场文书
写作技巧:如何撰写商业计划书
2019/08/08 职场文书
2019年学校消防安全责任书(2篇)
2019/10/09 职场文书