/nornj

A multipurpose javascript template engine, support both the rendering string and the react component.

Primary LanguageJavaScriptMIT LicenseMIT

NornJ

  ____        __   
/\  __ \     /\ \  
\ \ \/\ \   _\_\ \ `<div>
 \ \_\ \_\ /\_____\   Hello World!
  \/_/\/_/ \/_____/ </div>`();

NornJ是一个渲染效率高,语法可读性好,可扩展性超强,适用场景丰富的javascript模板引擎。

NPM Version Travis CI Status Codecov NPM Downloads

概述

NornJ是一款同时支持渲染html(或xml)字符串HyperScript的模板引擎。

什么是HyperScript?

HyperScript可以说是一种创建用户界面元素的语法规范,即:h (tag, attrs, [text?, Elements?,...])语法。各大前端框架中对于它的应用,最著名的当属ReactReactcreateElement方法即为HyperScript的一种实现,React使用它来创建virtual dom对象。

NornJ可将同样语法规范的模板,转换为多种方式渲染:

                  +-----------------+
                  ¦ template string ¦
                  +-----------------+
                           |
                           |
           +-------------------------------+
           |                               |
           |                               |
 +------------------+      +--------------------------------+
 ¦ html(xml) string ¦      ¦ HyperScript(React virtual dom) ¦
 +------------------+      +--------------------------------+

NornJ不但可以作为Express服务器的界面模板引擎,还可以替代JSX作为React的界面模板引擎。它的语法和JSX并不互相排斥,可共存一起运行。

模板基本示例

<template name="partial">
  <#if {{i > 0 || (i <= -10)}}>
    <input id=test onclick={{click}} />
  </#if>
</template>

<template>
  <div>
    <#each {{msgs}}>
      this the test demo Hello {{msg | format}}
    </#each>
    <#include name="partial" />
  </div>
</template>

如上例,NornJ的语法在可以展现一定逻辑性的同时结构与html几乎一致,而且ifeach><=等都是支持自定义扩展的模板语法!^_^

在线演示地址

在线文档

特色

传统js模板引擎如HandlebarsEJS等通常只支持渲染html字符串,NornJ与它们相比,相同点和不同点都有:

  • 支持渲染Reactvirtual dom对象,作为JSX的替代模板语言。
  • 支持渲染html字符串,故它也可以像传统js模板引擎一样支持BackboneExpress等。
  • 它的语法注重表现与逻辑的隔离性,和Handlebars更类似一些,但也有很多独特的地方。
  • 语法拥有非常强大的可扩展性,例如模板中的每个运算符语句都是可以扩展的。
  • 它有多种使用方式适应不同场景,可用单独的模板文件定义;可以写在html中;还可以支持直接在js文件中编写。
  • 可支持模板预编译,也可以直接在浏览器中运行。

与React配合示例

NornJ可以替代JSX输出React组件,用它可以将React组件的表现与逻辑更优雅地实现解藕:

import { Component } from 'react';
import { render } from 'react-dom';
import nj from 'nornj';
import { registerTmpl } from 'nornj-react';

@registerTmpl({
  name: 'TestComponent',
  template: `
    <div id=test1>
      this the test demo{no}.
      <#for {1} {no}>
        <i>test{@index}</i>
      </#for>
    </div>
  `
})
class TestComponent extends Component {
  render() {
    return this.template(this.props);
  }
}

render(nj`<TestComponent no=100 />`(), document.body);

/* output:
<div id="test1">
  this the test demo100.
  <i>test0</i>
  <i>test1</i>
  <i>test2</i>
  ...
  <i>test99</i>
</div>
*/

还可以替代ReactDOM.render来在html内渲染React组件:

...
<body>
  <script type="text/nornj" autoRender>
    <TestComponent no="100" />
  </script>
</body>

在ES5环境下使用

除了使用ES6模板字符串外,NornJ也可以支持在es5环境下使用普通的字符串:

<script id="template" type="text/nornj">
  <div>
    this the test demo Hello {{msg}}
    <input id="test" onclick="{{click}}" />
  </div>
</script>
<script type="text/javascript">
  var tmpl = document.querySelector('#template').innerHTML;
</script>

然后可以这样渲染html字符串:

let html = nj.render(tmpl, {
  msg: 'Hello world!',
  click: "alert('test')"
});

console.log(html);
/*输出:
<div>
  this the test demo Hello world!
  <input id='test' onclick="alert('test')" />
</div>
*/

安装

使用npm安装:

npm install nornj

相关项目

语法高亮插件

示例项目

浏览器支持

  • 可支持所有现代浏览器以及Internet Explorer 9+。

License

MIT