js模块化
JavaScript模块化的历史 CommonJS:同步加载,最初为服务器端JavaScript(Node.js)设计,后来也被用于浏览器环境(通过工具如Browserify)。 // 导入 require("module"); require("../app.js"); // 导出 exports.getStoreInfo = function() {}; module.exports = someValue; AMD(Asynchronous Module Definition):异步加载、依赖前置,为浏览器环境设计的异步模块加载方案,主要通过RequireJS实现。所有依赖模块的语句,都定义在一个回调函数中,等到加载完成之后,回调函数才执行; // 定义 define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好 a.doSomething() // ... b.doSomething() ... }); // 加载模块 require(["module", "../app"], function(module, app) {...}); CMD(Common Module Definition):异步加载、依赖就近,为浏览器环境设计的模块加载方案,主要通过Sea.js实现。 define(function(require, exports, module) { var a = require('./a'); a.doSomething(); // 依赖就近书写,什么时候用到什么时候引入 var b = require('./b'); b.doSomething(); }); UMD(Universal Module Definition):UMD是AMD和CommonJS的糅合:提供了一种方式,使得一个模块可以工作在各种环境中,包括浏览器和Node.js。UMD先判断是否支持Node.js(即CommonJS)的模块(就是判断exports是否存在),存在则使用CommonJS模块模式;再判断是否支持AMD(就是判断define是否存在),存在则使用AMD方式加载模块。 (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 () { //module ... }); 这些模块化规范的出现,主要是为了解决JavaScript在不同环境中的模块加载和管理问题。随着JavaScript语言的发展,ES6(ECMAScript 2015)引入了官方的模块化解决方案,即ES Module。 ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单,完全可以取代 CommonJS 和 AMD 规范,成为浏览器和服务器通用的模块解决方案。 ES6 模块设计思想:尽量的静态化、使得编译时就能确定模块的依赖关系,以及输入和输出的变量(CommonJS和AMD模块,都只能在运行时确定这些东西)。 使用export命令定义了模块的对外接口以后,其他 JS 文件就可以通过import命令加载这个模块。 ES6Module import 静态import函数 ...