npm 包 nej 使用教程

阅读时长 8 分钟读完

前言

如果你是一名前端开发工程师，相信你一定知道中文前端类 npm 包 NEJ。这是一个开源的前端类库，提供了一系列工具方法和组件，还有一套完整的 MVVM 框架。它具有高度扩展性、模块化、组件化的特点，可以让工程师快速搭建一个复杂的前端项目。

在本篇文章中，我们将深入探讨 NEJ 的使用教程，为你提供详细的指导和示例代码，让你更加深入了解这个强大的前端类库。

初步认识 NEJ

如果你刚刚开始了解 NEJ，那么在这里我们先简单介绍一下它的主要特点：

  • 提供了大量的工具方法，如类型判断、浏览器判断、DOM 操作、事件绑定、Ajax 封装等；
  • 提供了多种基础控件（Component），如按钮、输入框、下拉菜单等；
  • 提供了一套完整的 MVVM 框架（RegularJS），可以让你方便地实现数据绑定、视图刷新等功能；
  • 支持高度可定制化的模块化和组件化方案，可以满足不同项目的需求。

安装 NEJ

NEJ 是通过修改文件路径来实现不同功能模块的调用，因此相对于其他 npm 包来说，它的安装方式比较特殊。你需要先在你的项目中建立一个 libs 目录，将 NEJ 的源代码下载下来，然后通过修改配置文件和路径来引入不同的模块。

下面是具体的安装步骤：

  1. 在项目中创建一个 libs 目录，用于存放 NEJ 的源代码：
  1. 在你的 HTML 文件中引入 NEJ 的配置文件：
  1. 在对应的 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

纠错
反馈
相关推荐
精选内容