什么是 easy-injectionjs
easy-injectionjs 是一个简单易用的 JavaScript 库，用于在浏览器端进行前端组件注入，它主要特点包括：
- 无第三方依赖，代码简洁
- 支持异步加载和缓存
- 支持自定义配置和扩展
- 支持 AMD、CommonJS 和 ES6 模块规范
安装和引用
你可以通过 NPM 安装 easy-injectionjs：
npm install easy-injectionjs
然后在你的项目中引入：
import easyInjection from 'easy-injectionjs'
或者通过 script 标签引入：
<script src="./path/to/easy-injection.js"></script>
使用方法
下面将介绍 easy-injectionjs 的基本使用方法，包括定义模块、注册组件、注入组件和使用组件等步骤。
定义模块
使用 easy-injectionjs 首先需要定义模块，模块可以看作是组件的容器，用于注册和管理组件。定义模块的方式有以下两种：
// 第一种方式 const module1 = easyInjection.createModule('module1') // 第二种方式 easyInjection.module('module2', [])
其中第一种方式是通过 createModule 方法创建模块并返回模块实例，第二种方式是使用全局函数 module 创建模块，并传入模块名和依赖模块列表（可选）。
注册组件
在定义模块之后，就可以注册组件了，组件就是前端的单一职责组件，用于封装一段代码或者 UI 片段，同时可以传入依赖模块和选择器等参数。注册组件的方式有以下两种：
-- -------------------- ---- ------- -- ----- ----- ---------- - ------------------------------- ----------- ------- - ------ - --------- ------------ ------------------------- ----------- ---------- - ------------------------------------------ - - -- -- ----- ------------------------------------- ------ - --------- --------- ------------------------- ----- ----------------- - ---------------- ------ ----- -- - --展开代码
其中第一种方式是在模块中使用 component 方法注册组件，并传入组件名和工厂函数。工厂函数会接收所有依赖模块的实例，返回一个对象，其中包含组件的 template、controller 和 link 等属性和方法。第二种方式是使用全局函数 component 注册组件，并传入组件名、依赖模块列表和组件选项。
注入组件
当定义好模块和注册好组件之后，就可以开始注入组件了。注入组件的方式有以下两种：
// 第一种方式 module1.inject(['component1']) // 第二种方式 easyInjection.inject('component2')
其中第一种方式是在模块实例上使用 inject 方法注入组件，传入组件名或组件数组。第二种方式是使用全局函数 inject 注入组件，传入组件名或组件数组。
使用组件
当组件注入完成后，就可以在页面中使用它们了。使用组件的方式有以下两种：
<!-- 第一种方式 --> <div ei-component="'component1'"></div> <!-- 第二种方式 --> <div ei-component="'component2'" class="component2"></div> <script> easyInjection.bootstrap('.component2') </script>
其中第一种方式是在 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
