基于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 相关文章推荐
判断用户是否在线的代码
Mar 05 Javascript
js中哈希表的几种用法总结
Jan 28 Javascript
Jquery 垂直多级手风琴菜单附源码下载
Nov 17 Javascript
Bootstrap对话框使用实例讲解
Sep 24 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
Sep 27 Javascript
ES6新特性三: Generator(生成器)函数详解
Apr 21 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
Aug 16 Javascript
javascript实现文字无缝滚动效果
Aug 26 Javascript
vue实现文件上传功能
Aug 13 Javascript
Koa代理Http请求的示例代码
Oct 10 Javascript
vue 之 css module的使用方法
Dec 04 Javascript
vuex(vue状态管理)的特殊应用案例分享
Mar 03 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可逆加密函数(分享)
2013/06/06 PHP
探讨:使用XMLSerialize 序列化与反序列化
2013/06/08 PHP
2014年最新推荐的10款 PHP 开发框架
2014/08/01 PHP
PHP二分查找算法示例【递归与非递归方法】
2016/09/29 PHP
PHP token验证生成原理实例分析
2019/06/05 PHP
JavaScript 匿名函数(anonymous function)与闭包(closure)
2011/10/04 Javascript
jquery.post用法之type设置问题
2014/02/24 Javascript
jQuery中nextUntil()方法用法实例
2015/01/07 Javascript
JavaScript内存管理介绍
2015/03/13 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
2015/08/21 Javascript
Bootstrap中表单控件状态(验证状态)
2016/08/04 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
2016/12/26 Javascript
微信小程序页面上下滚动效果
2020/11/18 Javascript
jQuery实现动态向上滚动
2020/12/21 jQuery
node.js 基于 STMP 协议和 EWS 协议发送邮件
2021/02/14 Javascript
基于python的汉字转GBK码实现代码
2012/02/19 Python
浅谈终端直接执行py文件,不需要python命令
2017/01/23 Python
ubuntu中配置pyqt4环境教程
2017/12/27 Python
wtfPython—Python中一组有趣微妙的代码【收藏】
2018/08/31 Python
关于python多重赋值的小问题
2019/04/17 Python
Python Django中间件,中间件函数,全局异常处理操作示例
2019/11/08 Python
Django添加bootstrap框架时无法加载静态文件的解决方式
2020/03/27 Python
Python调用.net动态库实现过程解析
2020/06/05 Python
CSS3教程(5):网页背景图片
2009/04/02 HTML / CSS
基于css3 animate制作绚丽的动画效果
2015/11/24 HTML / CSS
HTML5拖放API实现自动生成相框功能
2020/04/07 HTML / CSS
联想墨西哥官方网站:Lenovo墨西哥
2016/08/17 全球购物
会计专业个人求职信范文
2014/01/08 职场文书
3分钟演讲稿
2014/04/30 职场文书
优秀语文教师事迹
2014/05/18 职场文书
清正廉洁演讲稿
2014/05/22 职场文书
学生干部培训方案
2014/06/12 职场文书
群众路线教育实践活动调研报告
2014/11/03 职场文书
英文产品推荐信
2015/03/27 职场文书
小学教师岗位职责
2015/04/02 职场文书
Python利用Turtle绘制哆啦A梦和小猪佩奇
2022/04/04 Python