前端模块化2020-12-30演讲人目录AMD01.commonJs02.CMD03.esModules04.AMD01AMD实现说明基
本语法AMD实现浏览器端实现浏览器端require.jsAMD说明依赖必须提前声明好模块加载异步，指定回调函数说明依赖必须提前声明
好模块加载异步，指定回调函数AMD基本语法0102引入定义&暴露模块基本语法引入require([''module1'',''
module2''],function(m1,m2){使用m1/m2})定义&暴露模块无依赖define(f
unction(){return模块})有依赖define([''module1'',''module2''],func
tion(m1,m2){return模块})commonJs02commonJs实现说明基本语法commonJs实现服务器
端浏览器端实现服务器端node浏览器端webpackBrowserifycommonJs说明12模块加载同步，即资源加载完再执
行每个文件都可以是一个模块34服务器端浏览器端说明模块加载同步，即资源加载完再执行每个文件都可以是一个模块0102服务器端浏览
器端0304模块加载是运行时同步加载模块加载是提前编译打包处理commonJs基本语法引入输出引入模块引入说明第三方模块自定义模块
030102varfs=require(''fs'');varfs1=require(''./fs'');读入并执行一个Jav
aScript文件，然后返回该模块的exports对象。如果没有发现指定模块，会报错输出module.exports=模块或者
模块对象集合01exports.value=模块名02输出说明03module变量代表当前模块。这个变量是一个对象，它的e
xports属性（即module.exports）是对外的接口CMD03CMD实现说明基本语法CMD实现浏览器端实现
浏览器端sea.jsCMD说明模块的加载是异步的，模块使用时才会加载执行模块使用时再声明整合了common.js和amd的
特点说明整合了common.js和amd的特点模块使用时再声明模块的加载是异步的，模块使用时才会加载执行CMD基本语法01
02引入定义&暴露模块引入同步varfs=require(''fs'');异步require.async(''./mo
dule3'',function(m3){})定义&暴露模块无依赖define(function(require,
exports,module){exports.xxx=valuemodule.exports=value}
)有依赖define(function(require,exports,module){//引入依赖模块(同步)va
rmodule2=require(''./module2'')//引入依赖模块(异步)require.async(''./
module3'',function(m3){})//暴露模块exports.xxx=value})esM
odules04esModules实现说明基本语法跟commonJs的区别esModules实现浏览器端服务器端实现浏览器端
使用Bable将es6转为es5使用Browserify进行浏览器端编译服务器端正常使用esModules说明是es6的模块引
入方法，依赖需要提前声明好import在顶层说明是es6的模块引入方法，依赖需要提前声明好import在顶层esModule
s基本语法引入输出基本语法引入import''模块名''importafrom''模块名''将该模块引入为a输出expor
tdefault默认输出模块export输出模块esModules跟commonJs的区别引入输出引入common运行时
加载因为CommonJS加载的是一个对象（即module.exports属性），该对象只有在脚本运行完才会生成es6编译时
输出接口ES6模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块。输出es6输出的是一个值的引用ES6模块是动
态引用，并且不会缓存值，模块里面的变量绑定其所在的模块。common输出的是一个值的拷贝模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。感谢聆听 |
|
