东莞市盛裕绒艺玩具有限公司

东莞市盛裕绒艺玩具有限公司

宝马会最新网站

18508462613
联系方式
全国服务热线: 18508462613

咨询热线:13613863834
联系人:龙伦光
地址:宁夏自治省银川市西夏区怡祥新村27号楼2单元202

JavaScript模块化CommonJS/AMD/CMD/UMD/ES6Module的区别

来源:宝马会最新网站   发布时间:2019-11-24   点击量:475

JS-模块化进程

随着js技术的不断发展,途中会遇到各种问题,比如模块化。

那什么是模块化呢,他们的目的是什么?

定义:如何把一段代码封装成一个有用的单元,以及如何注册此模块的能力、输出的值依赖引用:如何引用其它代码单元

到目前为止,大概分为以下几个里程碑式节点。

原始的开发方式 ---> CommonJS ---> AMD ---> CMD ---> UMD ---> ES6Module

原始的开发方式

最开始的时候,JS自身是没有模块机制的。项目有多个js文件。

// a.jsfunction foo() {}// b.jsfunction bar() {}// c.jsfoo()

HTML加载

<script src="a.js"></script><script src="b.js"></script><script src="c.js"></script>

原始的开发方式,随着项目的复杂度,代码量越来越多,所需要加载的文件也越来越多,这个时候,就要考虑几个问题了:

    命名问题:所有文件的方法都是挂载到global上,会污染全局环境,并且需要考虑命名冲突问题。依赖问题:script是顺序加载的,如果各文件之间有依赖,那我们得考虑加载.js文件的书写顺序。网络问题。如果文件过多,所需请求次数会增多,增加加载时间。

CommonJS && node.js

CommonJS规范 CommonJS使用例子CommonJS规范,主要运行于服务器端,同步加载模块,而加载的文件资源大多数在本地服务器,所以执行速度或时间没问题。Node.js很好的实现了该规范。该规范指出,一个单独的文件就是一个模块。模块功能主要的几个命令:requiremodule.exportsrequire命令用于输入其他模块提供的功能,module.exports命令用于规范模块的对外接口,输出的是一个值的拷贝,输出之后就不能改变了,会缓存起来。

// moduleA.jsvar name = "weiqinl"function foo() {}module.exports = exports = {name,foo}// moduleB.jsvar ma = require("./moduleA") // 可以省略后缀.jsexports.bar = function() {ma.name === "weiqinl" // truema.foo() // 执行foo方法}// moduleC.jsvar mb = require("./moduleB")mb.bar()

通过例子,我们可以看出require(moduleId)来加载其他模块的内容,其返回值就是其引用的外部模块所暴露的API,之后再通过module.exports或者exports来为当前模块的方法和变量提供输出接口。

最后通过node来执行模块。

AMD && Require.js

AMD规范文档 AMD使用例子AMD(Asynchronous Module Definition - 异步加载模块定义)规范,制定了定义模块的规则,一个单独的文件就是一个模块,模块和模块的依赖可以被异步加载。主要运行于浏览器端,这和浏览器的异步加载模块的环境刚好适应,它不会影响后面语句的运行。该规范是在RequireJs的推广过程中逐渐完善的。

模块功能主要的几个命令:definerequirereturndefine.amddefine是全局函数,用来定义模块,define(id?, dependencies?, factory)require命令用于输入其他模块提供的功能,return命令用于规范模块的对外接口,define.amd属性是一个对象,此属性的存在来表明函数遵循AMD规范。

// moduleA.jsdefine(["jQuery","lodash"], function($, _) {var name = "weiqinl",function foo() {}return {name,foo}})// index.jsrequire(["moduleA"], function(a) {a.name === "weiqinl" // truea.foo() // 执行A模块中的foo函数// do sth...})// index.html<script src="js/require.js" data-main="js/index"></script>

在这里,我们使用define来定义模块,return来输出接口, require来加载模块,这是AMD官方推荐用法。当然也可以使用其他兼容性的写法,比如对 Simplified CommonJS Wrapper 格式的支持,但背后还是原始AMD的运行逻辑。AMD的运行逻辑是:提前加载,提前执行。在Requirejs中,申明依赖模块时,会第一时间加载并执行模块内的代码,使后面的回调函数能在所需的环境中运行。为了更好地优化请求,同时推出了打包工具r.js,使所需加载的文件数减少。require.js模块化开发,并用r.js打包例子

CMD && Sea.js

CMD规范文档 CMD使用例子CMD(Common Module Definition - 通用模块定义)规范主要是Sea.js推广中形成的,一个文件就是一个模块,可以像Node.js一般书写模块代码。主要在浏览器中运行,当然也可以在Node.js中运行。

// moduleA.js// 定义模块define(function(require, exports, module) {var func = function() {var a = require("./a") // 到此才会加载a模块a.func()if(false) {var b = require("./b") // 到此才会加载b模块b.func()}}// do sth...exports.func = func;})// index.js// 加载使用模块seajs.use("moduleA.js", function(ma) {var ma = math.func()})// HTML,需要在页面中引入sea.js文件。<script src="./js/sea.js"></script><script src="./js/index.js"></script>

这里define是一个全局函数,用来定义模块,并通过exports向外提供接口。之后,如果要使用某模块,可以通过require来获取该模块提供的接口。最后使用某个组件的时候,通过seajs.use()来调用。

    通过exports暴露接口。这意味着不需要命名空间了,更不需要全局变量。通过require引入依赖。这可以让依赖内置,我们只需要关心当前模块的依赖。关注度分离

CMD推崇依赖就近,延迟执行。在上面例子中,通过require引入的模块,只有当程序运行到此处的时候,模块才会自动加载执行。

同时推出了spm(static package manager)的打包方式,听说支付宝的项目在使用。

UMD && webpack

UMD文档UMD(Universal Module Definition - 通用模块定义)模式,该模式主要用来解决CommonJS模式和AMD模式代码不能通用的问题,并同时还支持老式的全局变量规范。

// 使用Node, AMD 或 browser globals 模式创建模块(function (root, factory) {if (typeof define === "function" && define.amd) {// AMD模式. 注册为一个匿名函数define(["b"], factory);} else if (typeof module === "object" && module.exports) {// Node等类CommonJS的环境module.exports = factory(require("b"));} else {// 浏览器全局变量 (root is window)root.returnExports = factory(root.b);}}(typeof self !== "undefined" ? self : this, function (b) {// 以某种方式使用 b//返回一个值来定义模块导出。(即可以返回对象,也可以返回函数)return {};}));

    判断define为函数,并且是否存在define.amd,来判断是否为AMD规范,判断module是否为一个对象,并且是否存在module.exports来判断是否为CommonJS规范如果以上两种都没有,设定为原始的代码规范。

这种模式,通常会在webpack打包的时候用到。

相关产品

COPYRIGHTS©2017 宝马会最新网站 ALL RIGHTS RESERVED 备案号:475