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