首页
/ NornJ 开源项目教程

NornJ 开源项目教程

2024-09-19 21:48:44作者:戚魁泉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> 语法来动态渲染列表项。

最佳实践

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

4. 典型生态项目

NornJ 生态项目

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

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

登录后查看全文
热门项目推荐