什么是 modular-js?
modular-js 是一个用于构建模块化 JavaScript 应用程序的工具库，它将您的代码分解成可重用的小块(即模块)，并使用指定的加载器或链接器将它们组装成一个完整的应用程序。该库具有无需其他工具即可使用的简单和直观的 API，因此可以与任何现有的构建工具和库集成。
安装
在继续之前，您需要确保 Node.js 和npm 已经在您的本地环境中安装并可用。
要安装 modular-js，请在终端中运行以下命令:
npm install modular-js
安装完成后，您可以通过 require 或 ES6 import 语句将其导入到您的项目中:
// CommonJS
const modular = require('modular-js');
// ES6 Import
import modular from 'modular-js';使用
使用 modular-js 开发应用程序的第一步是创建一个应用程序实例。这可以通过 modular.createApp 方法实现。
-- -------------------- ---- ------- -- ---------- ----- --- - -------------------- -- ------------- ----- ------- - - -- ---- ---------- -- ----- --- - ---------------------------
接下来，您可以使用 modular.define 方法定义模块。
// 定义一个名为 "MyModule" 的模块
modular.define('MyModule', () => {
// module code...
});模块代码可以返回任何类型的内容，例如对象，函数或类。模块可以具有依赖项，请使用其名称作为参数。
// 定义名为 "MyOtherModule" 的模块，依赖于 "MyModule"
modular.define('MyOtherModule', ['MyModule'], (MyModule) => {
// 使用 MyModule ...
const myInstance = new MyModule();
});请注意，模块的名称必须是唯一的，因此在整个应用程序中不能有重复的名称。
一旦您定义了所有的模块，您可以使用 modular.start 方法启动应用程序并指定您的主模块。
modular.start('MyMainModule', (MyMainModule) => {
// app started...
});在主模块代码中，您可以使用 modular.get 方法来获取其他模块的实例。
-- -------------------- ---- ------- -- ---------- ---------- - --------------- ------------------------------ ------------ ----------------- ---------- -------------- -- - -- --- -------- --- ---------------- --- -- ------ ----------------------------- -------------- -- - -- --- ---------- ---
在以上示例中，主模块依赖于 MyModule 和 MyOtherModule 模块，并从回调返回主模块的实例。该实例可以在开始应用程序之前或之后使用。
示例代码
以下是一个使用 modular-js 构建 todo list 应用程序的示例代码：
-- -------------------- ---- -------
-- -- ------ --
---------------------- -- -- -
----- ---- -
------------------ --------- - ------ -
---------- - ------
-------------- - ----------
-
----------------- -
-------------- - -------
-
-
------ -----
---
-- -- ---------- ------ ------
-------------------------- --------- ------ -- -
----- -------- -
------------- -
---------- - -
--- ----------- -------------
--- ----------- ---- ---- ------
--
-------------- - ---
-
--------- -
-- ------ ---------- ----- -
----- --- -------------- ---- ------ -------- ---- ---------
-
----------------------
-
------------ -
----- ----- - -------------------------
-- ------ - --- -
------------------------ ---
-
-
-------------- -
---------------------
--------------------------
-
-------------- -
------ ---------------
-
-------- -
------ -----------
-
-
------ ---------
---
-- -- ----- ------ ----------
--------------------- ------------- ---------- -- -
----- -------- - --- -----------
----- ---- - -------------------------------------
----- ----- - ----------------------------------
----- ---- - -------------------------------------
------------------------------- ------- -- -
-----------------------
----- ----- - -------------------
----- ---- - --- ----------------
-------------------
----------- - ---
--------------
---
------------------------------- ------- -- -
----- ------ - -------------
----- -- - ------------------
----- ---- - --------------------------- -- ------- --- ----
-- ------ -
------------------------
--------------
-
---
-------- ------------- -
-------------- - ---
--- ------ ---- -- ------------------ -
----- -- - -----------------------------
------------ - -
------ --------------- --------------- ---------------- - --------- - ----
------ --------------------------------------
--
---------------------
-
-
---
-- ------
-------------------- ----- -- -
---------------- -------------
---通过这个示例，您可以看到如何使用 modular-js 将代码拆分为多个模块，并在整个应用程序中使用它们来构建完整的 todo list 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/76640