DDR爱好者之家 Design By 杰米
React 组件化思想受到越来越多开发者的关注,组件化思想帮助开发者将页面解耦成一个一个组件,代码更加模块化, 更易扩展。而目前流行的后端模板引擎如 ejs, swig, jade, art 共同的问题是:
- 需要学习各类模板引擎定义的语法,如 {{if}}, {{loop}}
- 对组件化支持不够强,实现复杂,不易用
针对以上痛点,笔者基于 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'))
将会创建三个组件:
- Header
- Body
- Layout
然后通过 nx.render 渲染
nx.render('Body', props)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年04月19日
2024年04月19日
- 爵士女伶(1)《JazzVocalsVol.1》[WAV+CUE]
- 大嘴巴.2007-大嘴巴【环球】【FLAC分轨】
- 群星.1991-飞鹰群星龙虎榜金曲收集版2辑【飞鹰】【WAV+CUE】
- 张蓉蓉.2018-为情所害【豪记】【WAV+CUE】
- 张信哲《宽容》[WAV分轨][467M]
- 群星《原音精选 香港高级视听展20周年纪念 SACD》[ISO][1.1G]
- 林忆莲《精选16首》[DFF][2.2G]
- 李小沛-粉墨是梦[瑞鸣限量版]2023年12月28日SACDISO
- 三盲鼠《无敌超级录音至尊精选集第一集第二集第三集》[WAV+CUE]
- 张可儿《闻故乡》纯银[低速原抓WAV+CUE]
- 叶佩雯.2000-Amazing.Grace【英皇娱乐】【WAV+CUE】
- 周治平.1996-那一個春天浪漫夜晚Live(96年演唱会纪实)【宝丽金】【WAV+CUE】
- 杨丽珍.1989-怨叹你无情【华歌】【WAV+CUE】
- 刁寒.1995-春水似年华【京文】【WAV+CUE】
- 梁咏琪.2005-顺时针新歌+精选CD【丰华】【WAV+CUE】