NornJ 开源项目教程

2024-09-19 08:29:40作者：戚魁泉Nursing

1. 项目介绍

NornJ（发音为 [ˌnɔ:nˈdʒeɪ]，缩写为 nj）是一个基于模板引擎的 JS/JSX 扩展解决方案。它允许开发者在 React 开发中使用几乎所有的 JavaScript 语法，并且非常灵活。通过结合 NornJ 和 React/JSX，开发者可以获得更多新特性，如支持控制语句、指令、过滤器和自定义操作符。

NornJ 提供了两种类似的 API：JSX 和 Tagged templates，以适应不同用户的偏好。它还支持自定义扩展更多语法，提供了完备的 IDE 代码提示体验。

2. 项目快速启动

安装

首先，通过 npm 或 yarn 安装 babel-plugin-nornj-in-jsx：

npm install babel-plugin-nornj-in-jsx
# 或者
yarn add babel-plugin-nornj-in-jsx

配置 Babel

在 Babel 配置文件中添加 nornj-in-jsx 插件：

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

示例代码

以下是一个简单的 React 组件示例，展示了如何在 JSX 中使用 NornJ 的扩展语法：

import React, { Component } from 'react';

class App extends Component {
  state = {
    todos: []
  };

  addTodo = e => {
    const { todos } = this.state;
    this.setState({
      todos: todos.concat(`Item ${todos.length}`)
    });
  };

  render() {
    const { todos } = this.state;
    return (
      <div className="app">
        <style jsx>{`
          .app {
            padding: 20px;
            font-size: 0.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>
    );
  }
}

export default App;

3. 应用案例和最佳实践

应用案例

NornJ 可以用于构建复杂的 React 应用，特别是在需要大量控制流和自定义逻辑的场景中。例如，在一个待办事项列表应用中，可以使用 NornJ 的 <each> 和 <if> 语法来动态渲染列表项。

最佳实践

模块化开发：将模板和逻辑代码分离，使用 Tagged templates 来创建模板函数，这样可以更清晰地组织代码。
自定义扩展：利用 NornJ 的扩展能力，根据项目需求自定义新的语法和操作符。
IDE 支持：确保配置好 Babel 和 IDE 插件，以获得最佳的代码提示和开发体验。

4. 典型生态项目

NornJ 生态项目

nornj-react：NornJ 的 React 绑定库，提供了与 React 组件的无缝集成。
nornj-loader：Webpack 加载器，用于在构建过程中处理 NornJ 模板。
babel-plugin-nornj-in-jsx：Babel 插件，用于在 JSX 中启用 NornJ 语法。
babel-preset-nornj-with-antd：结合 Ant Design 的 Babel 预设，方便在项目中使用 Ant Design 组件。

通过这些生态项目，开发者可以更高效地使用 NornJ 构建现代化的前端应用。