模块定义模块是自动运行在严格模式下，没有办法退出的JavaScript代码。模块可以是函数、数据或类。您需要指定导出模块的名称，然后其他模块才能访问它。//datamoduleconstobj={a:1}//functionmoduleconstsum=(a,b)=>{returna+b}//classmoduleclass我的extendsReact.Components{}模块导出数据，函数和类添加导出到导出模块。在一个配置型的JavaScript文件中，你可以封装多个函数，然后为每个函数加上一个export关键字，这样就可以在其他文件中访问到。//datamoduleexportconstobj={a:1}//functionmoduleexportconstsum=(a,b)=>{returna+b}//classmoduleexportclassMyextendsReact.Components{}模块引用中另一个js文件，我们可以参考上面定义的模块。使用import关键字，有两种导入方式，一种是导入指定模块，一种是导入所有模块。1.导入指定模块。//导入obj数据，Myclassimport{obj,My}from'./xx.js'//使用console.log(obj,My)2.导入所有模块//导入所有模块import*asallfrom'./xx.js'//使用console.log(all.obj,all.sun(1,2),all.My)来使用默认模块如果我们在模块中加上default关键字，那么js文件默认为只有导出模块，还需要去掉大括号。//默认模块定义functionsum(a,b){returna+b}exportdefaultsum//导入默认模块importsumfrom'./xx.js'该模块的使用限制不能在statement和functionexport关键字只能用在模块的顶部。作为React和Vue开发者，你应该熟悉这个限制。在React中，模块在顶部导入其他模块。importreactfrom'react'在vue中，模块顶部导入其他模块。修改模块的导入导出名称有两种方式，一种是在模块导出时修改，另一种是在模块导出时修改是进口的。1.导出时修改：functionsum(a,b){returna+b}export{sumasadd}import{add}from'./xx.js'add(1,2)2.导入时修改：functionsum(a,b){returna+b}exportsumimport{sumasadd}from'./xx.js'add(1,2)Nobindingimport当你的模块没有可导出的模块时，全部定义当使用全局变量，您可以使用未绑定的导入。Module:leta=1constPI=3.1314NobindingImport:import'./xx.js'console.log(a,PI)浏览器加载模块很有用。用过webpack打包js模块的同学可能会有体会，用webpack打包多个js文件放入html中，用脚本加载时，如果加载顺序不对，会出现找不到模块的错误。这是因为模块之间存在依赖关系，就像使用jQuery一样，必须先加载jQuery代码，才能使用jQuery提供的方法。加载模块的方法总是先加载模块1再加载模块2，因为模块类型默认使用了defer属性。Summarymodule有很多有趣的特性，对于react和那些有一定Vue开发经验的应该熟悉这些基础知识。新手看不懂也不必太心急。写几个module.js试试看。如果浏览器报错无法识别导出模块，可能需要先加载babeljs插件进行编译。=>返回文章目录
