前言
如果你是一名前端开发工程师，相信你一定知道中文前端类 npm 包 NEJ。这是一个开源的前端类库，提供了一系列工具方法和组件，还有一套完整的 MVVM 框架。它具有高度扩展性、模块化、组件化的特点，可以让工程师快速搭建一个复杂的前端项目。
在本篇文章中，我们将深入探讨 NEJ 的使用教程，为你提供详细的指导和示例代码，让你更加深入了解这个强大的前端类库。
初步认识 NEJ
如果你刚刚开始了解 NEJ，那么在这里我们先简单介绍一下它的主要特点：
- 提供了大量的工具方法，如类型判断、浏览器判断、DOM 操作、事件绑定、Ajax 封装等；
- 提供了多种基础控件（Component），如按钮、输入框、下拉菜单等；
- 提供了一套完整的 MVVM 框架（RegularJS），可以让你方便地实现数据绑定、视图刷新等功能；
- 支持高度可定制化的模块化和组件化方案，可以满足不同项目的需求。
安装 NEJ
NEJ 是通过修改文件路径来实现不同功能模块的调用，因此相对于其他 npm 包来说，它的安装方式比较特殊。你需要先在你的项目中建立一个 libs 目录，将 NEJ 的源代码下载下来，然后通过修改配置文件和路径来引入不同的模块。
下面是具体的安装步骤：
- 在项目中创建一个 libs 目录，用于存放 NEJ 的源代码：
----- ---- -- ---- --- ----- -------------------------------
- 在你的 HTML 文件中引入 NEJ 的配置文件：
------- ---------------------------------------
- 在对应的 JS 文件中，通过 define 来定义模块：
------------
-------------
--------------
-- -------- ---- --- -
--- ---- - -------------
-------------- - -
------------ -----
----- -------- -- -
-- ---
--
-------- -------- -- -
-- ---
-
--
-- ---
---在定义模块时，我们引入了两个模块：klass 和 element。这两个模块提供了类的定义和 DOM 操作的功能。
在本文中，我们无法覆盖 NEJ 的所有模块和功能，在实际开发中，你还需要根据项目的需要引入其他模块。
调用 NEJ 模块
在前面的例子中，我们通过 define 来引入了两个 NEJ 模块：klass 和 element。在第二个参数中，我们定义了一个函数，用来处理这两个模块的返回值。在这个函数中，我们把 klass 赋值给了一个变量 _k，把 element 赋值给了一个变量 _e。
在实际使用中，我们可以通过 _k._$klass() 来创建一个基于 klass 的类，通过 _e._$get('abc') 来获取一个 id 为 abc 的 DOM 元素。这种方式可以保证不同模块之间的变量不会互相干扰。
然而，这种写法会导致代码变得冗长，尤其是需要频繁使用的模块和变量。为了避免这个问题，NEJ 提供了一个快捷方式，我们可以通过 $ 来简化代码：
------------
-------------
---------------
---------------
-- -------- --- --- --- -
--- ---- - ----------
--- --------- - ------------
--- ---- - ------------- --- --- ---
-------
---- ----------------
----- -------
------- -------
----- -----
------- -------- ------ -
-- ---
-
---
---在这个例子中，我们引入了三个模块：klass、element 和 ajax/xdr。通过 $ 快速获得 klass 的接口，可以避免写 _$klass() 的繁琐；通过 _e.$() 快速获得一个 DOM 元素，可以避免写 _e._$get() 的繁琐；通过 _j 快速获得 ajax/xdr 模块，可以避免写 util/ajax/xdr 的繁琐。
总之，$ 符号在 NEJ 中扮演了一个很重要的角色，它让你不用写很长的模块路径，代替了 NEJ 中很多繁琐的 API 调用。
使用 NEJ 控件
在 NEJ 中，控件（Component）是一种界面元素，具有一定的生命周期、事件处理、数据绑定等功能。NEJ 提供了多种控件类型，如输入框、下拉菜单、树形列表等，你可以通过重写控件的方法，来实现自己的业务功能。
下面我们以按钮控件（Button）为例，讲解如何使用 NEJ 控件：
---- -------- ------------------ -----------------------
------------
-------------
----------
------------------
-- -------- --- --- --- --- -
--- -----
--- ------ - -------------
---- - --------------------------------
----------- - -------- -- -
---------------
-- ---
--
--------------- - -------- -- -
---------------- - -----------------------
--------------- - ----------------------
--
------------ - -------- --------- -
-- ---
--
-------------- - -------- -- -
---------------
-- ---
--
--- --- - --- --------
----- -
-------- ----
-
------------------
---在这个例子中，我们创建了一个按钮控件 Button。首先，我们通过 _k._$klass() 来创建了一个类，然后通过 _pro 来扩展原型。我们重写了 __init()、__initXGui()、__reset() 和 __destroy() 方法。
__init() 方法用来初始化按钮的属性和事件，__initXGui() 方法用来初始化按钮的 HTML 和 CSS 模板，__reset() 方法用来重置按钮的属性，__destroy() 方法用来销毁按钮。详细的参数和方法含义，可以参考 NEJ 的官方文档。
最后，我们通过 new Button 来创建了一个按钮实例 btn，并通过 $inject() 来将它渲染到 HTML 元素上。
使用 NEJ MVVM 框架
MVVM 是一种前端的设计模式，其中 MV 代表 Model-View，VM 代表 ViewModel。在 MVVM 模式中，ViewModel 用来管理 Model 和 View 之间的数据传输。
NEJ 中的 MVVM 框架使用的是 RegularJS。下面我们通过一个例子来讲解如何使用 MVVM 框架：
---- --------- ------ ----------- --------------- --------- -- ---- ------ ------
------------
-------------
---------------
--------------------
-----------------------------
-----------------
-- -------- --- --- --- --- ------ -
--- --- - -----------
--------- ------
----- -
----- -------
--
----- -------- -- -
-- ---
-
---
--- --- - --- -----
--- ------
---
---在这个例子中，我们创建了一个 id 为 app 的元素，其中输入框使用了 r-model 来实现数据双向绑定，{{ name }} 则是 RegularJS 的标签渲染语法，表示要显示 name 属性的值。
在 JS 中，我们定义了一个 App 类来管理这个应用程序。在 App 类的定义中，我们指定了模板文件 _html，data 属性中定义了一个 name 属性的默认值，init() 方法则用来初始化一些逻辑。最后，通过 new App 来创建了一个实例 app，并通过 el 来指定它要绑定到的元素。
在实际开发中，你可以根据这个例子来实现更复杂的数据绑定功能。
总结
NEJ 是一个非常好的前端类库，它提供了多种工具方法、控件、MVVM 框架等功能，可以帮助你快速开发高质量的前端项目。虽然 NEJ 的 API 较为复杂，但只要你掌握了基本的使用方法，就可以获得很高的开发效率。如果你正在学习前端开发，NEJ 是一个不错的选择，它可以帮助你更深入地了解前端开发的世界。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/74681