基于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 相关文章推荐
window.js 主要包含了页面的一些操作
Dec 23 Javascript
再谈javascript 动态添加样式规则 W3C校检
Dec 25 Javascript
浅析Prototype的模板类 Template
Dec 07 Javascript
如何减少浏览器的reflow和repaint
Feb 26 Javascript
js中javascript:void(0) 真正含义
Nov 05 Javascript
js实现导航吸顶效果
Feb 24 Javascript
Vue进度条progressbar组件功能
Apr 17 Javascript
微信小程序如何获取用户收货地址
Nov 27 Javascript
基于vue实现探探滑动组件功能
May 29 Javascript
vue proxy 的优势与使用场景实现
Jun 15 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
Aug 20 Javascript
解决vue请求接口第一次成功,第二次失败问题
Sep 08 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.ini中文版(2)
2006/10/09 PHP
人大复印资料处理程序_补充篇
2006/10/09 PHP
PHP开发中常用的字符串操作函数
2011/02/08 PHP
Mysql的Root密码忘记,查看或修改的解决方法(图文介绍)
2013/06/14 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
CSDN轮换广告图片轮换效果
2007/03/27 Javascript
让Firefox支持event对象实现代码
2009/11/07 Javascript
网站404页面3秒后跳到首页的实例代码
2013/08/16 Javascript
JavaScript函数定义的常见注意事项小结
2014/09/16 Javascript
JQuery复制DOM节点的方法
2015/06/11 Javascript
JavaScript前端开发之实现二进制读写操作
2015/11/04 Javascript
详解JavaScript常量定义
2017/01/03 Javascript
简单谈谈Javascript函数中的arguments
2017/02/09 Javascript
Vue.js父与子组件之间传参示例
2017/02/28 Javascript
AngularJS使用拦截器实现的loading功能完整实例
2017/05/17 Javascript
微信小程序仿RadioGroup改变样式的处理方案
2018/07/13 Javascript
详解vuex 渐进式教程实例代码
2018/11/27 Javascript
学前端,css与javascript重难点浅析
2020/06/11 Javascript
JavaScript实现图片放大预览效果
2020/11/02 Javascript
Vue-router中hash模式与history模式的区别详解
2020/12/15 Vue.js
Python中的FTP通信模块ftplib的用法整理
2016/07/08 Python
Python如何生成树形图案
2018/01/03 Python
Python递归实现打印多重列表代码
2020/02/27 Python
python 实现一个简单的线性回归案例
2020/12/17 Python
HTML5中判断用户是否正在浏览页面的方法
2014/05/03 HTML / CSS
美国知名的百货清仓店:Neiman Marcus Last Call
2016/08/03 全球购物
销售所有的狗狗产品:Dog.com
2016/10/13 全球购物
波兰香水和化妆品购物网站:Notino.pl
2017/11/07 全球购物
Solid & Striped官网:美国泳装品牌
2019/06/19 全球购物
CSS实现fullpage.js全屏滚动效果的示例代码
2021/03/24 HTML / CSS
积极分子思想汇报
2014/01/04 职场文书
市场营销专业大学生职业生涯规划文
2014/03/06 职场文书
12岁生日演讲稿
2014/05/14 职场文书
师范学院毕业生求职信
2014/06/24 职场文书
关于国庆节的演讲稿
2014/09/05 职场文书
2014年优秀班主任工作总结
2014/12/16 职场文书