regularjs 入门

RegularJS 是一款基于组件化的 JavaScript 框架，它的设计理念是将视图与逻辑分离，使得开发者可以更加专注于业务逻辑的实现。下面是 RegularJS 的入门指南：

1. 安装 RegularJS

可以通过 npm 安装 RegularJS：

npm install regularjs

也可以直接在 HTML 页面中引入 RegularJS 的 CDN：

<script src="https://unpkg.com/regularjs/dist/regular.js"></script>

2. 创建组件

RegularJS 的组件可以通过继承 `Regular.Component` 来创建。下面是一个简单的示例：

const Hello = Regular.extend({
  template: `
    <div>Hello, {{name}}!</div>
  `,
  data: {
    name: 'World'
  }
})

在上面的代码中，我们创建了一个名为 `Hello` 的组件，它包含一个 `template` 字段和一个 `data` 字段。`template` 字段定义了组件的模板，其中可以使用 Mustache 语法来插入数据。`data` 字段定义了组件的数据，这里我们定义了一个名为 `name` 的变量，并将其初始化为字符串 `'World'`。

3. 渲染组件

要将组件渲染到页面上，我们需要使用 `Regular.dom.inject` 函数。下面是一个简单的示例：

const hello = new Hello()
hello.$inject(document.body)

在上面的代码中，我们首先创建了一个 `Hello` 组件的实例 `hello`，然后将其渲染到页面上。

4. 绑定事件

RegularJS 的事件绑定机制与 DOM 原生事件绑定类似，只需要在模板中添加相应的 `on-*` 属性即可。下面是一个示例：

const Counter = Regular.extend({
  template: `
    <div>
      <button on-click={this.increment}>+</button>
      <span>{count}</span>
      <button on-click={this.decrement}>-</button>
    </div>
  `,
  data: {
    count: 0
  },
  increment() {
    this.data.count++
  },
  decrement() {
    this.data.count--
  }
})

在上面的代码中，我们创建了一个名为 `Counter` 的组件，它包含三个元素：两个按钮和一个数字。我们在两个按钮上分别绑定了 `on-click` 事件，并将其绑定到组件实例的 `increment` 和 `decrement` 方法上。

5. 使用子组件

RegularJS 支持使用子组件来构建复杂的 UI。要在一个组件中使用另一个组件，我们可以使用 `Regular.directive` 函数来定义一个指令。下面是一个示例：

Regular.directive('hello', function(elem, value) {
  const hello = new Hello({
    data: {
      name: value
    }
  })
  hello.$inject(elem)
})

在上面的代码中，我们定义了一个名为 `hello` 的指令，它接受一个参数 `value`，表示需要渲染的 `Hello` 组件的 `name` 属性。在指令的实现中，我们首先创建了一个 `Hello` 组件的实例 `hello`，然后将其渲染到当前元素中。

现在，我们可以在另一个组件的模板中使用 `hello` 指令来渲染 `Hello` 组件。下面是一个示例：

const App = Regular.extend({
  template: `
    <div>
      <hello name="Alice"></hello>
      <hello name="Bob"></hello>
    </div>
  `
})

在上面的代码中，我们创建了一个名为 `App` 的组件，它包含两个 `hello` 指令，分别传入了 `'Alice'` 和 `'Bob'` 作为参数。运行时，`App` 组件会将这两个 `hello` 指令渲染为两个 `Hello` 组件，并将它们插入到页面中。

这些是 RegularJS 的基本用法，如果想要深入了解 RegularJS 的更多特性，可以查看官方文档。