建设软件资源网站,全椒县建设局网站,信息技术咨询公司,百度百家自媒体平台注册当前主流 JS 模块化方案无模块化CommonJS 规范#xff0c;nodejs 实现的规范AMD 规范#xff0c;requirejs 实现的规范CMD 规范#xff0c;seajs 实现的规范#xff0c; seajs 与 requirejs 实现原理有很多相似的地方 u ES Modules#xff0c;当前 js 标准模块化方案注意:… 当前主流 JS 模块化方案无模块化CommonJS 规范nodejs 实现的规范AMD 规范requirejs 实现的规范CMD 规范seajs 实现的规范 seajs 与 requirejs 实现原理有很多相似的地方 u ES Modules当前 js 标准模块化方案注意:cjs、amd、cmd、 ES Modules 都是指规范所以可能对应有多种实现下面就对各个模块化方案做简单说明。无模块化刀耕火种年代的前端代码无模块化带来的问题的问题污染全局作用域不便于拆分逻辑维护成本高依赖关系不明显复用性差CommonJS 规范CommonJS 是由 node 实现的一套规范关于 CommonJS 的提出可参考CommonJS 规范https://zhaoda.net/webpack-handbook/commonjs.htmlrequire 源码解读可参考 require() 源码解读http://www.ruanyifeng.com/blog/2015/05/require.html模块包装相当于执行如下代码 compiledWrapper 是调用 node 封装的 V8 原生创建函数的方法返回的一个函数function compiledWrapper(exports, require, module, __filename, __dirname) { // 插入文件中的代码 // 返回导出对象 return module.exports}compiledWrapper.call(exports, exports, require, module, filename, dirname)CommonJS 模块输出的是一个值的拷贝也就是说一旦输出一个值模块内部的变化就影响不到这个值。如下有两个文件执行命令node index.js会有什么结果?// lib.jslet counter 3function incCounter() { counter}module.exports { counter, incCounter}// index.jsconst mod require(./lib)// 此处输出值console.log(mod.counter)mod.incCounter()// 此处输出值console.log(mod.counter)输出值分别为33require 函数第一次加载该脚本就会执行整个脚本然后在内存生成一个对象下次加载会直接从缓存中取数据。以下是一个循环引用的例子请问执行node main.js后会输出什么// a.jsconsole.log(a starting)exports.done falseconst b require(./b.js)console.log(in a, b.done %j, b.done)exports.done trueconsole.log(a done)// b.jsconsole.log(b starting)exports.done falseconst a require(./a.js)console.log(in b, a.done %j, a.done)exports.done trueconsole.log(b done)// main.jsconsole.log(main starting)const a require(./a.js)const b require(./b.js)console.log(in main, a.done %j, b.done %j, a.done, b.done)输出结果如下main startinga startingb startingin b, a.done falseb donein a, b.done truea donein main, a.done true, b.done trueAMD 规范AMD 是 Asynchronous Module Definition 的简写即异步模块定义AMD 规范的完整定义可参考 https://github.com/amdjs/amdjs-api/wiki/AMDrequirejs 是在浏览器中运行的所有一些基础库需要先配置以方便其他库调用可以理解为 CommonJS 中的 node_modules 下的包。业务模块也可定义在其中可认为是路径别名。paths 中的路径不能包含扩展名。requirejs路径配置后面再具体讲解里面参数的作用require.config({ paths: { // 如果第一个加载失败就会加载第二个 jquery: [lib/jquery.min, lib/jquery], lodash: lib/lodash.min, main: ./mian // 入口文件 }})定义模块/*** 定义模块当依赖加载完成后执行回调* 回调可返回值返回值会被导出到外部使用* param {String} id 模块名称可省略* param {Array} dependencies 依赖的模块* param {Function} factory 回调函数*/define(id?, dependencies?, factory);define([jquery], function($) { $(body).css({ background: red }) // 导出log函数 return (...args) console.log(自定义log, ...args)})依赖可以使用上面的config中定义paths中的key这样就可以缩短路径同时也便于第三方库加载依赖例如jQuery插件打包为AMD格式的文件引入jQuery会使用define([jquery], function (){ })的形式而不用关心jQuery的真实路径。加载模块/** * 加载模块 * param {Array} deps 要加载的模块 * param {Function} callback 加载成功回调回调参数为加载模块导出对象 * param {Function} errback 加载失败回调 */requirejs(deps, callback, errback)require([main], log { log(我成功加载了‘) // do something...,也可以在这里继续require其他js文件})requirejs 使用示例可参考原文Github中的源码CMD 规范CMD 是 Common Module Definition 的简写即通用模块定义CMD 规范的完整定义可参考https://github.com/seajs/seajs/issues/242CMD 的主要代表是 seajs。CMD 推崇依赖就近AMD 推崇依赖前置。即 AMD 在定义模块的时候就必须把依赖包含进来CMD 是在使用的时候再 require 对应的依赖当前主流的库对 CMD 支持不是很友好都需要额外的修改才能工作AMD 与 CMD 写法对比如下// CMD// 代码写起来有同步require的感觉define((require, exports, module) { const $ require(jquery‘) $(title).text(hello)})// AMD// 明显的异步风格define([jquery], $ { $(title).text(hello)})seajs 中 require 书写约定正确拼写 require// 错误define(function(req) { // ...}) // 正确define(function(require) { // ...})使用直接量// 错误require(myModule) // 错误require(my- module) // 错误require(MY-MODULE.toLowerCase()) // 正确require(my-module)不要修改 require// 错误 - 重命名 requirevar req require, mod req(./mod) // 错误 - 重定义 require!require function() {} // 错误 - 重定义 require 为函数参数function F(require) {} // 错误 - 在内嵌作用域内重定义了 requirefunction F() { var require function() {}}seajs 隐藏坑如下代码输出$为 nullfunction func(require, exports, module) { const $ require(jquery‘) console.log($)}func.toString () () {}define(func)seajs 对于 require 和 define 函数的特殊要求是由于seajs 原理导致的seajs 的执行流程大致如下seajs 使用示例可参考原文Github中的源码ES ModulesES Modules 是 ECMAScript modules 的简写也可写为 ESM。ES Modules 是 js 官方推出的标准ES Modules 相比于其他模块规范是一个静态化的模块解决方案其他模块化方案都是运行时才能确定输出内容而 ES Modules 是编译时就确定了的。其他模块化方案导入文件都是整个导入模块而 ES Modules 可以只导入需要的部分ES Modules 会自动采用严格模式不需要像 ES5 一样在头部加上”use strict”ES Modules 可运行在服务端(node)和浏览器。目前主流浏览器都已经支持 ES Modulesnode 使用 ES Modules 需要在执行时加上--experimental-modules且要求编写的 js 文件必须以.mjs 为后缀ES Modules 导出的是一个值得引用即在模块内改变了导出值那么下一次使用也会得到新的值如下有两个文件执行命令node --experimental-modules index.mjs会有什么结果// lib.mjsexport let counter 3export function incCounter() { counter}// index.mjsimport * as mod from ./lib’// 此处输出值console.log(mod.counter)mod.incCounter()// 此处输出值console.log(mod.counter)输出结果为34循环引用如下代码请问执行node --experimental-modules main.mjs后会输出什么内容// a.mjsimport { bar } from ./b.mjsconsole.log(a.mjs)console.log(bar)export let foo foo// b.mjsimport { foo } from ./a.mjsconsole.log(b.mjs)console.log(foo)export let bar bar// main.mjsimport ./a.mjs在所有的模块规范中都存在循环依赖问题解决依赖循环的方式都相似几乎都采用惰性导入的方式来解决。如下两个文件存在循环引用当执行 node --experimental-modules a.mjs 时会报错说 b 未定义这就是由于循环依赖导致的如果不使用 b 则不会报错修改方案如下。其他的模块循环引用也可按照此方法进行修改。CommonJS 也可以使用先导出自身再引入其他模块的方式来避免。同时也可以把 require 放入到函数体中即在调用的时候才去加载依赖相关链接AMD 和 CMD 的区别有哪些- 玉伯的回答 - 知乎(https://www.zhihu.com/question/20351507/answer/14859415)https://github.com/seajs/seajs/issues/277https://github.com/seajs/seajs/issues/242
