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

NornJ(读音[ˈnɔ:ndʒeɪ]，简称nj)是一个可以同React一起工作的模板引擎，JSX的增强或替代工具。

概述

React的JSX几乎可以使用javascript的全部语法且非常灵活，可配合babel适应各种复杂的使用场景。但是，使用NornJ配合React开发还能做得更好，因为它能给JSX带来模板引擎的特性：

支持流程控制语法：

<each of={[1, 2, 3]}><i>{item}</i></each>

支持指令语法：

<img n-show={false} />

支持过滤器语法：

<button>{n`${foo} | capitalize`}</button>

支持自定义运算符：

<input value={n`(1 .. 100).join('-')`} />

NornJ不仅有预置的上述几类可增强JSX的语法，并且还实现了支持用户扩展更多的语法。NornJ还同时提供了JSX和tagged templates两套几乎相同的语法API，以适应不同用户的口味

基本示例

直接在JSX中使用(结合styled-jsx)：

class App extends Component {
  addTodo = e => {
    const { todos = [] } = this.state;
    this.setState({ todos: todos.concat(`Item ${todos.length}`) });
  };

  render({ page }, { todos = [] }) {
    return (
      <div className="app">
        <style jsx>`
          .app {
            padding: 20px;
            font-size: .75rem;
          }
        `</style>
        <ul>
          <Each of={todos} item="todo">
            <If condition={index > 5}>
              <li>{todo * 2}</li>
              <Elseif condition={index > 10}>
                <li>{todo * 3}</li>
              </Elseif>
            </If>
          </Each>
        </ul>
        <button n-show={todos.length > 0} onClick={this.addTodo}>Add Todo</button>
      </div>
    );
  }
}

如上例，配合NornJ提供的配套babel插件，便可以在JSX中编写各种新的增强语法。

使用tagged templates语法(结合styled-components)：

const template = nj`
  <Container>
    <ul>
      <each of={todos}>
        <if {@index > 5}>
          <li>{@item * 2}</li>
          <elseif {@index > 10}>
            <li>{@item * 3}</li>
          </elseif>
        </if>
      </each>
    </ul>
    <button n-show="{todos.length > 0}" :onClick="addTodo">Add Todo</button>
  </Container>
`;

const Container = styled.div`
  padding: 20px;
  font-size: .75rem;
`;

class App extends Component {
  addTodo = e => {
    const { todos = [] } = this.state;
    this.setState({ todos: todos.concat(`Item ${todos.length}`) });
  };

  render() {
    return template({ components: { Container } }, this.state, this);
  }
}

上例中使用了NornJ的tagged templates API创建了一个模板函数，它可以做到与React组件的逻辑代码分离，并且还能支持比JSX API更加简练的写法。

在线演示地址

使用JSX

在线Playground(codesandbox)

使用tagged templates

在线Playground(codepen)

安装

npm install babel-plugin-nornj-in-jsx@next  #or yarn add babel-plugin-nornj-in-jsx@next

然后配置.babelrc:

{
  "plugins": [
    "nornj-in-jsx"
  ]
}

示例项目

NornJ + React + Redux + React-Router + Webpack: react-redux-nornj-todomvc
NornJ + React + Redux + React-Router(无需webpack打包): react-redux-nornj-todomvc-es5
NornJ + Backbone + Marionette(渲染html字符串): backbone-marionette-nornj-todomvc
NornJ + React-Native + Styled-Components: nornj-react-native-counter
NornJ + React + Mobx + React-Router: nornj-react-mst-boilerplate

概述

概述

基本示例

在线演示地址

使用JSX

使用tagged templates

安装

示例项目

相关项目及工具

语法高亮插件

浏览器支持

License

results matching ""

No results matching ""