前端入门22-讲讲模块化 (5)

本质上,也还是利用了函数的特性,作为模块存在的那些代码本身已经通过 define 规范被定义在函数内了,所以模块内的代码自然对外是隐藏的,外部能访问到的只有函数内 return 的接口,那么这里其实也就利用了闭包的特性。

所以,模块化的实现,无非就是让函数作为临时命名空间结合闭包或者对象作为命名空间方式, 这种方式即使没有 CommonJS 规范,没有 AMD 规范,自己写代码很可以容易的实现。那么为什么会有这些规范技术的出现呢?

无非就是为了引入一个管理者的角色,没有管理者的角色,模块之间的依赖关系,哪个文件先加载,哪个后加载,<script> 的书写顺序都只能依靠人工来维护、管理。

而这些模块化规范,其实目的就在于解决这些问题,CommonJS 是由 Node.js 作为管理者角色,来维护、控制各模块的依赖关系,文件的加载顺序。而 AMD 则是由 Require.js 来作为管理者角色,开发者不用在 HTML 里写那么多 <script>,而且也没必要去关心这些文件谁写前谁写后,Require.js 会自动根据 require 来维护这些依赖关系,自动根据 requirejs.config 的配置信息去决定先加载哪个文件后加载哪个文件。

CMD规范

CMD 规范,类似于 AMD,同样也是用于解决前端里的模块化技术问题。而有了 AMD 为什么还会有 CMD,我个人的理解是,AMD 的适用场景并没有覆盖整个前端里的需求,或者说 AMD 本身也有一些缺点,导致了新的 CMD 规范的出现。

比如说,从使用方式上,AMD 就有很多跟 CommonJS 规范不一致的地方,对于从 CommonJS 转过来的这部分人来说,可能就会很不习惯;再比如说,AMD 考虑的场景可能太多,又要适配 jQurey,又要适配 Node 等等;

总之,CMD 规范总有它出现和存在的理由,下面就大概来看看 CMD 的用法:

define&exports

类似于 AMD,CMD 规范中,也是通过 define 定义一个模块:

//module.js define(function (require, exports, module) { var name = "dasu"; var wx = "dasuAndroidTv"; var getBlog = function() { return "http://www.cnblogs.com/dasusu/"; } exports.name = name; exports.getWx = () => wx; })

跟 AMD 不一样的地方是,CMD 中 define 只接收一个参数,参数类型是一个函数,函数的参数也很重要,有三个,按顺序分别是 require,exports,module,作用就是 CommonJS 规范中三个命令的用途。

如果当前模块需要依赖其他模块,那么在内部,使用 require 命令即可,所以,函数的三个参数很重要。

当前模块如果不依赖其他模块,也没有对外提供任何接口,那么,函数可以没有参数,因为有了内部也没有使用。

而如果当前模块需要依赖其他模块,那么就需要使用到 require,所以函数第一个参数就是必须的;如果当前模块需要对外暴露接口,那么后两个参数也是需要的;

总之,建议使用 define 定义模块时,将函数三个参数都带上,用不用再说,规范一点总没错。

require

在有需要使用某个模块提供的功能时,通过 require 来声明依赖关系:

//main.js define(function (require, exports, module) { console.log("=====main.js======="); var module1 = require("./module");//同步加载模块 console.log(module1.name); require.async("./module2", function (module2) {//异步加载模块 console.log(module2.wx); }) })

require 默认是以同步方式加载模块,如果需要异步加载,需要使用 require.async

使用步骤

下载 Sea.js,并放到项目中

Sea.js:https://github.com/seajs/seajs/releases

新建作为模块的文件,如 module.js,并通过 define 定义模块

//module.js define(function (require, exports, module) { var name = "dasu"; var wx = "dasuAndroidTv"; var getBlog = function() { return "http://www.cnblogs.com/dasusu/"; } exports.name = name; exports.getWx = () => wx; })

其他需要依赖到该模块的地方通过 require 声明

//main.js define(function (require, exports, module) { console.log("=====main.js======="); var module1 = require("./module");//同步加载模块 console.log(module1.name); require.async("./module2", function (module2) {//异步加载模块 console.log(module2.wx); }) })

最后也最重要的一步,在 html 中先加载 sea.js 并指定主模块的 js

<script src="http://www.likecs.com/js/lib/require.js"></script> <script> seajs.use("./js/src/main.js"); </script>

使用步骤跟 AMD 很类似,首先是需要依赖于 Sea.js,所以必须先下载它。

然后定义模块、依赖模块、使用模块的方式就跟 CommonJS 很类似,这几个操作跟 AMD 会有些不同,也许这点也正是 CMD 存在的原因之一。

最后一步也是最重要一步,需要在 HTML 文档中加载 sea.js 文档,并指定入口的 js,注意做的事虽然跟 AMD 一样,但实现方式不一样。

小结

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zyzgpj.html