前言
Regular.js 是一个轻量级 JavaScript MVVM 框架，它拥有自己的编译器和虚拟 DOM，通过和原生 DOM 的深度交互，可以提供出众的性能和稳定性。
本文将结合示例代码，从入门到进阶，为大家介绍如何使用 npm 包 regularjs。
安装
首先，我们需要使用 npm 安装 regularjs：
npm install regular --save
如果你希望在浏览器环境中使用，可以安装 regularjs 的浏览器版本（包括纯净版和带有编译器的版本）：
npm install regularjs --save npm install regularjs-compiler --save
入门
接下来，让我们来试试用 Regular.js 创建一个简单的计数器。首先，新建一个 index.html 文件，将以下代码复制到文件中：
-- -------------------- ---- ------- --------- ----- ----- ------------- ------ ----- ---------------- ----------------- ------------- ------- ------ ---- ---------------- ------------------------- ---- ---------------- ------- ------------------------- ------- ------------------------- ------ ------ ------- ------------------------------------------- -------- ----- ------- - ---------------- --------- ----------- ----- - ------ - -- ---------- - --------------- -- -- -- ---------- - --------------- -- -- -- ------ - ------------------------------ --------- ------- -- - ----- ------ - -------------------------------- ----------------------------- --- - --- --- --------------------------------- --------- ------- -------展开代码
上述代码中，我们假设页面中只有一个计数器组件，它的 HTML 代码如下：
<div class="counter"> 当前计数：<span>{count}</span> <div class="actions"> <button type="button">增加</button> <button type="button">减少</button> </div> </div>
使用 Regular.js 来描述这个组件，可参考下面的代码：
-- -------------------- ---- ------- ----- ------- - ---------------- --------- ----------- ----- - ------ - -- ---------- - --------------- -- -- -- ---------- - --------------- -- -- -- ------ - ------------------------------ --------- ------- -- - ----- ------ - -------------------------------- ----------------------------- --- - ---展开代码
使用 Regular.js 的 extend() 方法创建一个组件，template 属性指定模板的选择器，data 属性表示组件的初始数据。
increase() 和 decrease() 是自定义的方法，它们会在按钮点击时被触发，从而更新组件的状态。
init() 是组件的生命周期方法之一，它会在组件实例创建后被调用，我们在这里监听按钮的点击事件，并根据按钮文本来执行相应的方法。
最后将组件实例添加到页面中：
new Counter().$inject(document.body);
我们已经创建好了一个简单的计数器，打开浏览器，就可以看到效果了。
进阶 —— 表单校验
接下来，我们将使用 Regular.js 来实现一个简单的表单校验。我们可以先在页面上创建一个表单，如下所示：
-- -------------------- ---- ------- ----- ------------- ----- ------ ---------------------- ------ ----------- ----------- -------------- --------- ------ ----- ------ --------------------- ------ ------------- ---------- ------------- ------- --------- --------- ------ ----- ------- ------------------------- ------ -------展开代码
这个表单包含了两个必填字段，姓名和年龄，以及一个提交按钮。我们要求在表单提交前，对必填字段进行校验，如果其中有一项未填写，则提示用户。
我们可以使用 Regular.js 提供的 mixin 机制来实现表单校验。具体代码如下：
-- -------------------- ---- ------- --------- ----- ----- ------------- ------ ----- ---------------- ----------------- -------------- ------- ------ ----- ------------- ----- ------ ---------------------- ------ ----------- ----------- -------------- --------- ------ ----- ------ --------------------- ------ ------------- ---------- ------------- ------- --------- --------- ------ ----- ------- ------------------------- ------ ------- ------- ------------------------------------------- -------- ----- --------- - - ------ - ------------------- ------- -- - ----------------------- -- --------------------- - ----------------- - --- - -- ----- ---- - ---------------- --------- -------- ------- ------------ ----- - ----- --- ---- --------- - --- --- ------------------------------ --------- ------- -------展开代码
我们定义了一个名为 formMixin 的 mixin，它包含了 $submit 生命周期事件的处理函数。在该函数中，我们首先调用 event.preventDefault() 阻止表单被提交，然后调用 this.$checkValid() 方法对表单进行校验，如果校验不通过，则弹出提示。
在组件实例的配置中，我们使用 mixins 属性将 formMixin 混入组件中，并将 formMixin 中需要用到的表单数据放在 data 属性中。
现在，我们已经完成了简单的表单校验。如果你想进一步提升表单验证的功能，可以参考 Regular Form-validation。
结语
本文介绍了如何使用 npm 包 regularjs，通过示例代码帮助大家深入理解 Regular.js 的使用方式，特别是通过表单校验的示例，展示了 Regular.js 在实际开发中的强大威力，希望能对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaeefb5cbfe1ea0610f3a
