CommonJs
CommonJs 主要应用于nodejs服务端.
Common *** 具有以下特性:1.一个文件就是一个模块,拥有单独的作用域。2.普通方式定义的变量、函数、对象属于该模块内。3.Common *** 模块输出的是一个值得拷贝。4.Common *** 模块是运行时加载的。5.Common *** 模块的require()是同步加载模块。CommonJs的使用CommonJs通过require来加载模块,通过module.exports或者exports来暴露模块中的内容。//lib.js function incCounter() { counter++; } module.exports = incCounter: incCounter, }; //main.js const mod = require('./lib'); console.log(mod.counter); // 3 mod.incCounter();
AMD
AMD的全称是Asynchronous Module Definition,异步加载模块.它主要是使用在浏览器上.它的 使用定义需要使用require *** .
AMD具有以下几个特性:采用异步方式加载模块,模块的加载不影响它后面语句的运行.所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行.推崇依赖前置,在定义模块的时候就要声明其依赖的模块AMD的使用使用require.js来实现AMD规范的模块化:用require.config()指定引用路径。用define()来定义模块用require来加载模块。define('moduleName',['a','b'],function(ma, mb) { return someExportValue; }) require(['a', 'b'], function(ma, mb) { // do something })
CMD
CMD的全称是Common Module Definition通用模块定义,与AMD类似.不同点在于:AMD推崇依赖前置,提前执行,而CMD推崇依赖就近,延迟执行.它的使用和定义需要使用Sea *** .
CMD具有以下几个特性:1.采用异步方式加载模块,模块的加载不影响它后面语句的运行.2.推崇就近依赖,只有在用到某个模块的时候再去requireCMD的使用使用define来定义define(id?, deps?, factory)factory是一个函数,有三个参数,function(require, exports, module)require 是一个 *** ,接受 模块标识 作为唯一参数,用来获取其他模块提供的接口:require(id)exports 是一个对象,用来向外提供模块接口module 是一个对象,上面存储了与当前模块相关联的一些属性和 ***// 定义模块 module.js define(function(require, exports, module) { var $ = require('jquery.min.js') $('div').addClass('active'); }); // 加载模块 seajs.use(['module.js'], function(my){ });
UMD
UMD的全称为Universal Module Definition,就是一种javascript通用模块定义规范,让你的模块能在javascript所有运行环境中发挥作用。它就是将AMD和Commonjs整合起来,使得代码在不同环境都可以正常运行.
UMD的实现:(function(window, factory){ if (typeof exports === 'object') { module.exports = factory() } else if (typeof define === 'function' && define.amd) { define(factory) } else { window.eventUtil = factory() } })(this,function () { // do something })
ES6模块
ES6模块,也称为e***.它具有以下几个特性.1.浏览器可以直接加载ES6模块,也是使用<script>标签,但是要加入type="module"属性.<script type="module" src="./foo.js"></script>2.ES6 的模块自动采用严格模式,不管你有没有在模块头部加上"use strict";。3.ES6 模块输出的是值的引用。4.ES6 模块是编译时输出接口。5.ES6 模块的import命令是异步加载,有一个独立的模块依赖的解析阶段。ES6模块的使用模块功能主要由两个命令构成:export和import。export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能.// profile.js var year = 1958; export { year }; export default year; //test.js import { year } from './profile.js'; //对应export {} import year from './profile.js'; //对应export default
作者:不看盛景不叙深情链接:https://www.jianshu.com/p/3bee10ccfc2f来源:简书著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。