请问nj文件如何用html的解析,使用新一代js模板引擎NornJ提高React.js开发体验-CSDN博客

当前的前端世界中有不少著名的开源javascript模板引擎如Handlebars、Nunjucks、EJS等等，相信不少人对它们都并不陌生。javascript

js模板引擎的现状

一般来说，这些js模板引擎项目都有一个共同的特性：只专一渲染字符串(html)html

早在几年前Backbone等mv*框架流行的时候，js模板引擎遇到了它们的春天，由于Backbone能够支持选配用户本身喜爱的模板，并提供了接入方案。可是在新一代前端mv*框架盛行的今天，人们更多的关注点在于React的JSX支持的逻辑何等地强大、Vue的v-show等指令使用起来多么地方便，而js模板引擎呢？它们彷佛只能在Node.js服务器端找到它们的归宿，并且还被React及Vue的 SSR(服务端渲染) 继续蚕食着仅有的市场。前端

为何各类各样的js模板引擎都只专一于渲染html字符串？这或许跟历史缘由有关，毕竟五、6年前的时候并无虚拟dom，使用jQuery等框架的$('div').html(str)方法渲染dom是理所固然的事情。vue

新型js模板引擎

咱们不妨试想一下，其实js模板引擎在当前的时代只要也能作到渲染虚拟dom对象，或许就能够再次找到它们被重用的机会：java

+---------------------+

¦ ¦

+---------------------+

| render to |

| |

+-------------+ +-------------------+

¦ html string ¦ ¦ React virtual dom ¦

+-------------+ +-------------------+

复制代码

然而目前有一个新的js模板引擎能够作到上述的同时支持渲染html和React组件，它就是NornJ。react

安装

npm install nornj

npm install nornj-react # React开发请一块儿安装此包

npm install nornj-loader # webpack环境请一块儿安装此包

复制代码

在线演示地址

渲染html字符串

渲染React组件

在React开发中的基本使用方法

React在介绍本身时常说JSX是"可选的"，但实际上，脱离了JSX的React根本就几乎没法正常地开发。若是有了另外一种DSL(js模板引擎)可适配React开发，那么JSX才能真正地成为可选的技术。web

NornJ的模板语法在参考自Handlebars、Nunjucks、Vue等多个著名项目的基础上，也有不少本身独特的语法如tagged template string、自定义语句与运算符等等，与html+js很是类似可快速上手。须要提一下另外一个React的模板项目react-templates，它是React生态中惟一一个比较完善的模板项目，但很惋惜的是它如今已经几乎不维护了，并且功能很是有限。

每一个React组件都需要在render返回组件的标签代码，如在HelloWorld组件中渲染一个下拉框，用JSX和NornJ的语法分别实现：

JSX

export default class HelloWorld extends Component{

render() {

return (

{[1, 2, 3].map((item, i) => i > 1

? {item + 1}

: {item}

)}

);

}

}复制代码

NornJ

import { template as t } from 'nornj';

import 'nornj-react';

import { Input } from 'antd';

export default class HelloWorld extends Component{

render() {

return t`

1}>

{@item + 1}

{@item}#else>

#if>

#each>

}

复制代码

如上例，这就是NornJ最基本的使用方法了，开箱即用。它可使用ES6+的tagged template literals语法在js文件中描述模板，模板语法在处理逻辑时的结构比JSX更加易读，且语法和html更为接近：

能够写class替代className。

style可使用html中写style属性的方式，固然写对象也一样支持。

模板语法提供了#if、#each等扩展标签用于处理逻辑，可替代三目运算符与数组map方法。

input和img等标签支持只写开标签，如，JSX中必定要写为。

可直接在组件的render中返回同一级别的多个标签，外面不用套上数组。

双花括号{{}}和单花括{}号语法在React开发中都支持，除特殊场景外依我的喜爱而定。

模板和JSX同样支持嵌入任意js变量，这固然也包含第三方React组件和JSX变量，NornJ模板和JSX是能够共存的!

NornJ的tagged template literals语法更多细节请查看官方文档。

上面的例子也能够这样改写：

import nj from 'nornj';

import 'nornj-react';

import { Input } from 'antd';

const tmplFn = nj`

...

export default class HelloWorld extends Component{

render() {

return tmplFn();

}

复制代码

能够看出，实质上tagged template literals语法就是建立了一个模板函数，而后再在render中执行了而已。这时不难想到，使用第一种方法将模板函数放到render中执行，这样会不会每次执行render时都进行模板编译(内部涉及各类正则析取)会形成性能降低？并不会，由于NornJ模板在编译时会进行缓存，只有第一次render时会进行模板编译，以后的每次render就会走缓存了。

另外，NornJ和JSX还能够嵌套编写，仅仅在很小的粒度使用NornJ模板也彻底没有问题，具体请见官方文档。

单文件模板

NornJ模板除了能够在js文件中编写以外，还能够编写在单独的模板文件中，用来作组件(或页面)展示层与结构层的分离(具体请参考官方文档)。例如编写一个helloWorld.nj.html文件：

1}>

{@item + 1}

{@item}#else>

#if>

#each>

复制代码

而后能够在js文件中引入后使用：

import tmpls from './helloWorld.nj.html';

export default class HelloWorld extends Component{

state = {

value: 'test'

};

render() {

return tmpls.helloWorld(this.state, this.props);

}

复制代码

如上，每一个*.nj.html文件内均可以定义一个或多个template标签。这些template标签会在引用它的js文件中经过nornj-loader进行解析，生成一个以template标签的name属性为key的模板函数集合对象，在各个组件的render中调用它们就会生成相应的React vdom对象。

针对NornJ的单文件模板，咱们也提供了一些IDE的语法高亮与提示工具。

扩展模板

NornJ与Handlebars比较相似具备很是强大的可扩展性，#if、#each等实际上都是扩展出来的语法，您彻底能够本身扩展出#customIf、#customEach等新语句。在可扩展性这一点上，不难想到JSX也能够经过babel进行扩展，也能够搞新的语法出来，例如jsx-control-statements。可是babel扩展上手门槛不低，要学各类babel AST的用法，开发一个完美的插件出来彷佛并不是易事。

因为NornJ继承于Handlebars的扩展方式，它内部的每一个扩展均可以用一个函数简单地开发出来，例如为NornJ扩展一个**运算符，做用是乘方运算：

import nj from 'nornj';

nj.registerFilter('**', (val1, val2) => Math.pow(val1, val2));

复制代码

而后就能够直接使用了：

复制代码

固然上述只是个最简单的例子，更多模板扩展描述请参考官方文档。

结合Mobx建立双向数据绑定

利用NornJ的可扩展性，模板语法在理论上能够实现无限的可能性。#mobx-model是NornJ实现的一个行内扩展标签(相似于vue及ng的指令)，具体用法以下：

import { Component } from 'react';

import { observable } from 'mobx';

import nj from 'nornj';