模块化是什么?浅谈对于模块化的理解。es6里的模块化是es module模块化吗?关于AMD、CMD、UMD
模块定义:变量(基础数据类型、引用数据类型)、函数、类
模块暴露:module.exports、exports(CommonJs)、export default、export const、export {}(ES6)
模块引入:require(CommonJs)、import(ES6)
模块调用:对于引入模块可以直接进行模块.xxx
、模块.xxx()
函数与构造函数之间的关联,以及类与构造函数之间的关系。
ES6模块化:
export default、export {}、export const==>不管哪种方式的暴露,最终暴露出去的内容是对象
import xxx from ‘xxx’ 一般引入
import {default as xxx} from ‘xxx’ 默认并别名引入
import {xxx,yyy,zzz} from ‘xxx’ 解构引入
import xxx,{yyy,zzz} from ‘xxx’ 默认与解构引入
import * as xxx from ‘xxx’ 全部引入
export {xxx,yyy,zzz} from ‘xxx’ 引入并暴露
AMD:Asynchronous Module Definition (异步模块定义)
CMD:Common Module Definition (通用模块定义)
UMD:是一种规范,就是一种兼容 CommonJS/AMD/CMD 的兼容写法。
AMD
-
多个js文件可能有依赖关系,被依赖的文件需要早于依赖它的文件加载到浏览器
-
js加载的时候浏览器会停止页面渲染,加载文件越多,页面失去响应时间越长
//引入模块 require(['math'], function (math) { math.add(2, 3); }); //导出模块math.js define(function () { function add(a, b) { return a + b } return { add: add }; });
但是在浏览器环境下,math.js 通常存储在服务器。等待时间取决于网速的快慢,可能要等很长时间,会使得浏览器处于"假死"状态。
因此,浏览器端的模块,不能采用"同步加载"(synchronous),只能采用"异步加载"(asynchronous)。这就是AMD规范诞生的背景。
CMD
//引入模块
seajs.use(['math.js'],function(math){
console.log(math.add(1, 2))
});
//导出模块 math.js
define(function(require, exports, module) {
exports.add = function(a, b) {
return a + b;
};
});
AMD在加载完成定义(define)好的模块就会立即执行,所有执行完成后,遇到require才会执行主逻辑。(提前加载)
CMD在加载完成定义(define)好的模块,仅仅是下载不执行,在遇到require才会执行对应的模块。(按需加载)