前言
Regular.js 是一个轻量级 JavaScript MVVM 框架，它拥有自己的编译器和虚拟 DOM，通过和原生 DOM 的深度交互，可以提供出众的性能和稳定性。
本文将结合示例代码，从入门到进阶，为大家介绍如何使用 npm 包 regularjs。
安装
首先，我们需要使用 npm 安装 regularjs：
--- ------- ------- ------
如果你希望在浏览器环境中使用，可以安装 regularjs 的浏览器版本（包括纯净版和带有编译器的版本）：
--- ------- --------- ------ --- ------- ------------------ ------
入门
接下来，让我们来试试用 Regular.js 创建一个简单的计数器。首先，新建一个 index.html 文件，将以下代码复制到文件中：
--------- -----
----- -------------
------
----- ----------------
----------------- -------------
-------
------
---- ----------------
-------------------------
---- ----------------
------- -------------------------
------- -------------------------
------
------
------- -------------------------------------------
--------
----- ------- - ----------------
--------- -----------
----- -
------ -
--
---------- -
--------------- -- --
--
---------- -
--------------- -- --
--
------ -
------------------------------ --------- ------- -- -
----- ------ - --------------------------------
-----------------------------
---
-
---
--- ---------------------------------
---------
-------
-------上述代码中，我们假设页面中只有一个计数器组件，它的 HTML 代码如下：
---- ----------------
-------------------------
---- ----------------
------- -------------------------
------- -------------------------
------
------使用 Regular.js 来描述这个组件，可参考下面的代码：
----- ------- - ----------------
--------- -----------
----- -
------ -
--
---------- -
--------------- -- --
--
---------- -
--------------- -- --
--
------ -
------------------------------ --------- ------- -- -
----- ------ - --------------------------------
-----------------------------
---
-
---使用 Regular.js 的 extend() 方法创建一个组件，template 属性指定模板的选择器，data 属性表示组件的初始数据。
increase() 和 decrease() 是自定义的方法，它们会在按钮点击时被触发，从而更新组件的状态。
init() 是组件的生命周期方法之一，它会在组件实例创建后被调用，我们在这里监听按钮的点击事件，并根据按钮文本来执行相应的方法。
最后将组件实例添加到页面中：
--- ---------------------------------
我们已经创建好了一个简单的计数器，打开浏览器，就可以看到效果了。
进阶 —— 表单校验
接下来，我们将使用 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