基于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 相关文章推荐
jQuery 学习 几种常用方法
Jun 11 Javascript
js清空form表单中的内容示例
May 20 Javascript
jQuery移除元素自动解绑事件实现思路及代码
May 31 Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
Jun 12 Javascript
node.js中的http.response.setHeader方法使用说明
Dec 14 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
Jun 14 Javascript
ES6中的rest参数与扩展运算符详解
Jul 18 Javascript
移动web开发之touch事件实例详解
Jan 17 Javascript
Vue父子组件之间的通信实例详解
Sep 28 Javascript
js限制输入框只能输入数字(onkeyup触发)
Sep 28 Javascript
Vue作用域插槽实现方法及作用详解
Jul 08 Javascript
jquery插件实现搜索历史
Apr 24 jQuery
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 header示例代码(推荐)
2010/09/08 PHP
PHP加密函数 Javascript/Js 解密函数
2013/09/23 PHP
php内核解析:PHP中的哈希表
2014/01/30 PHP
用脚本调用样式的几种方法
2006/12/09 Javascript
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
2009/09/09 Javascript
JS延迟加载加快页面打开速度示例代码
2013/12/30 Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
2015/09/23 Javascript
详解Matlab中 sort 函数用法
2016/03/20 Javascript
jQuery实现磁力图片跟随效果完整示例
2016/09/16 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
2018/02/05 Javascript
JS实现十分钟倒计时代码实例
2018/10/18 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
2018/10/18 Javascript
详解Angular模板引用变量及其作用域
2018/11/23 Javascript
JS实现二维数组元素的排列组合运算简单示例
2019/01/28 Javascript
记录一次完整的react hooks实践
2019/03/11 Javascript
vue+express+jwt持久化登录的方法
2019/06/14 Javascript
浅谈python中scipy.misc.logsumexp函数的运用场景
2016/06/23 Python
python安装numpy&amp;安装matplotlib&amp; scipy的教程
2017/11/02 Python
python使用turtle绘制分形树
2018/06/22 Python
Python面向对象之类和对象实例详解
2018/12/10 Python
使用wxpy实现自动发送微信消息功能
2020/02/28 Python
keras中的backend.clip用法
2020/05/22 Python
django rest framework 过滤时间操作
2020/07/12 Python
mac系统下安装pycharm、永久激活、中文汉化详细教程
2020/11/24 Python
Python 排序最长英文单词链(列表中前一个单词末字母是下一个单词的首字母)
2020/12/14 Python
基于CSS3 animation动画属性实现轮播图效果
2017/09/12 HTML / CSS
初中生评语大全
2014/04/24 职场文书
遗失说明具结保证书
2015/02/26 职场文书
淘宝客服专员岗位职责
2015/04/07 职场文书
汽车销售员岗位职责
2015/04/11 职场文书
祝寿主持词
2015/07/02 职场文书
Python GUI编程之tkinter 关于 ttkbootstrap 的使用详解
2022/03/03 Python
MySQL实战记录之如何快速定位慢SQL
2022/03/23 MySQL
MYSQL优化之数据表碎片整理详解
2022/04/03 MySQL
Python调用腾讯API实现人脸身份证比对功能
2022/04/04 Python
基于Python编写一个监控CPU的应用系统
2022/06/25 Python