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

js模板引擎的现状

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

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

为什么各种各样的js模板引擎都只专注于渲染html字符串？这或许跟历史原因有关，毕竟5、6年前的时候并没有虚拟dom，使用jQuery等框架的$('div').html(str)方法渲染dom是理所当然的事情。

新型js模板引擎

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

         +---------------------+          ¦ <Template string /> ¦          +---------------------+                     |                     |          +---------------------+          |      render to      |          |                     |   +-------------+    +-------------------+   ¦ html string ¦    ¦ React virtual dom ¦   +-------------+    +-------------------+

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

NornJ是我们京东Y事业部供应链协同部前端团队开发的新一代js模板引擎，它已经在京东Y事业部下的几十上百个项目中经历了两年的战火洗礼。如今，它的API已稳定，各种功能也趋于完善。

github：https://github.com/joe-sky/nornj
官方文档(github pages)：https://joe-sky.github.io/nornj-guide/
官方文档(gitbook)：https://joe-sky.gitbooks.io/nornj-guide/

安装

npm install nornj npm install nornj-react   # React开发请一起安装此包 npm install nornj-loader  # webpack环境请一起安装此包

在线演示地址

渲染html字符串

• 在线Playground(jsfiddle)
• 在线Playground(codepen)

渲染React组件

• 在线Playground(jsfiddle)
• 在线Playground(codepen)

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

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

NornJ的模板语法在参考自Handlebars、Nunjucks、Vue等多个著名项目的基础上，也有很多自己独特的语