概述Module通常是指编程语言提供的代码组织机制，可以用来将程序拆解成独立的、通用的代码单元。模块的优点：1.可维护性；2.命名空间；3、复用代码常见的模块化规范：CommonJS、AMD、CMD、ES6ModulesCommonJSCommonJS核心思想是export或者module。接口，然后使用require方法同步加载其他依赖它的模块。在本规范中，每个文件都是一个模块。a.jsleta=123;letfoo=function(){console.log("foo");};//两者的顺序不能颠倒，否则不能暴露变量a的值module.exports={foo:foo,};module.exports.a=a;b.jsconstb=require("./a.js");console.log(b.a);b.foo();module.exports属性表示接口当前模块的外部输出，其他文件加载模块，实际上读取module.exports变量。为了方便起见，nodeJS为每个模块都提供了一个exports变量，指向module.exports。这相当于在每个模块的顶部都有一行这样的命令。varexports=module.exports;不能直接给exports变量赋值，相当于切断了exports和module.exports的联系。如下：leta=123;letfoo=function(){console.log("foo");};//这样写会报错exports={foo:foo,};注意：CommonJS同步加载模块。CommonJS在浏览器端不可用。浏览器端的模块不能使用“同步加载”（synchronous），只能使用“异步加载”。普及化，第三方模块化实现会逐渐被淘汰。AMD/CMDAMD是RequireJS在推广过程中模块定义的标准化输出。CMD是SeaJS在推广过程中模块化定义的标准化输出。这两个规范服务于JavaScript的模块化开发。目前，两者都可以浏览服务器端模块化开发的目的不同：AMD是pre-execution（提前执行），CMD是lazyexecution（延迟执行）。AMD提倡靠前面，CMD提倡靠最近。//AMDdefine(['./a','./b'],function(a,b){//依赖一定要写在开头，注意红色的，将引入的依赖赋值给中标记的变量红色，然后整个块都可以利用这个引入的依赖项a.doSomething()//这里省略了100行b.doSomething()...});//CMDdefine(function(require,exports,module){vara=require('./a')a.doSomething()//这里省略100行varb=require('./b')//依赖可以写在附近b.doSomething()//..});ES6ES6的模块化方案才是真正的规范。在ES6中，我们可以使用import关键字引入模块，通过export关键字导出模块。导出和导入命令可以出现在模块中的任何位置，只要它们位于模块的顶层即可。如果是在块级范围内，就会报错，后面提到的import命令也是如此。1.方法一：letflag=true;functionsum(num1,num2){returnnum1+num2;}export{flag,sum}//b.jsimport{flag,sum}from'./a.js'2.方法二：//a.jsexportconstheight=1.88;exportfunctionmul(num1,num2){returnnum1*num2}//b.jsimport{height,mul}from'./a.js'3.方法三：在某些情况下，一个模块包含某个函数，我们这个函数不想命名，让importer自己命名。这时候可以使用exportdefault。exportdefault的本质是把command后面的值赋值给default变量然后default，所以直接在exportdefault后面写一个值。只能有一个exportdefault//a.jsexportdefaultfunction(argument){console.log(argument);}//b.jsimporthellofrom"./a.js";hello('Hello');importuses1.import命令有提升作用，会提升到整个模块的头部，最先执行。2.如果在HTML代码中使用模块，需要在导入两个js文件时设置为模块。在浏览器中使用。3.如果你想让一个模块中的所有信息都被Import，你可以通过*导入模块中的所有导出变量。通常需要给*一个别名，方便后续使用。//a.jsexportconstheight=1.88;exportfunctionmul(num1,num2){returnnum1*num2;}//b.jsimport*asafrom'./a.js'console.log(a.height);
