什么是 easy-injectionjs
easy-injectionjs 是一个简单易用的 JavaScript 库，用于在浏览器端进行前端组件注入，它主要特点包括：
- 无第三方依赖，代码简洁
- 支持异步加载和缓存
- 支持自定义配置和扩展
- 支持 AMD、CommonJS 和 ES6 模块规范
安装和引用
你可以通过 NPM 安装 easy-injectionjs：
--- ------- ----------------
然后在你的项目中引入：
------ ------------- ---- ------------------
或者通过 script 标签引入：
------- -------------------------------------------
使用方法
下面将介绍 easy-injectionjs 的基本使用方法，包括定义模块、注册组件、注入组件和使用组件等步骤。
定义模块
使用 easy-injectionjs 首先需要定义模块，模块可以看作是组件的容器，用于注册和管理组件。定义模块的方式有以下两种：
-- ----- ----- ------- - ------------------------------------- -- ----- ------------------------------- ---
其中第一种方式是通过 createModule 方法创建模块并返回模块实例，第二种方式是使用全局函数 module 创建模块，并传入模块名和依赖模块列表（可选）。
注册组件
在定义模块之后，就可以注册组件了，组件就是前端的单一职责组件，用于封装一段代码或者 UI 片段，同时可以传入依赖模块和选择器等参数。注册组件的方式有以下两种：
-- -----
----- ---------- - ------------------------------- ----------- ------- -
------ -
--------- ------------ -------------------------
----------- ---------- -
------------------------------------------
-
-
--
-- -----
------------------------------------- ------ -
--------- --------- -------------------------
----- ----------------- -
---------------- ------ ----- --
-
--其中第一种方式是在模块中使用 component 方法注册组件，并传入组件名和工厂函数。工厂函数会接收所有依赖模块的实例，返回一个对象，其中包含组件的 template、controller 和 link 等属性和方法。第二种方式是使用全局函数 component 注册组件，并传入组件名、依赖模块列表和组件选项。
注入组件
当定义好模块和注册好组件之后，就可以开始注入组件了。注入组件的方式有以下两种：
-- ----- ------------------------------ -- ----- ----------------------------------
其中第一种方式是在模块实例上使用 inject 方法注入组件，传入组件名或组件数组。第二种方式是使用全局函数 inject 注入组件，传入组件名或组件数组。
使用组件
当组件注入完成后，就可以在页面中使用它们了。使用组件的方式有以下两种：
---- ----- --- ---- ---------------------------------- ---- ----- --- ---- --------------------------- ------------------------- -------- -------------------------------------- ---------
其中第一种方式是在 HTML 元素上使用 ei-component 属性指定组件名，easy-injectionjs 会自动寻找该组件并将其绑定到该元素上。第二种方式是将指定组件名的元素选中，并在代码中手动调用 easyInjection.bootstrap 方法进行绑定，这种方式允许你在后续操作中动态更新组件。
完整示例
下面是一个完整的 easy-injectionjs 示例代码：
------ ------------- ---- ------------------
------ - ---- --------
------ ------ ---- --------
----- ------- - ------------------------------------- ---
----- ---------- - ------------------------------- ---------- -
------ -
--------- ------------ -------------------------
----------- ---------- -
------------------------------------------
-
-
--
------------------------------
---------------------- --------------------------------------在这个示例中，我们先定义了一个模块 module1，然后注册了一个名为 component1 的组件，这个组件包含一个模板和一个控制器，控制器中通过 moment.js 输出当前日期。接着使用 inject 方法将组件注入到模块中。最后在页面中使用一种方式绑定组件，easy-injectionjs 就可以自动注入并绑定组件。
这只是 easy-injectionjs 的一个基本示例，实际应用中还有很多高级用法和扩展可以使用，这需要我们不断学习和探索。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60065b4bc6eb7e50355dbfef