前端模块化总结 CommonJS/AMD/UMD/ES6
Function 时代
JSP项目中，直接在网页上添加一个script，jQuery写交互逻辑
优点：简单快速搭建demo
缺点：混乱，污染全局
例子一：
jQuery:
$(function(){
// do something
});
或者
$(document).ready(function(){
//do something
})
例子二：
JS:
document.ready(function () {
alert('im document.ready');
});
window.onload = function () {
alert('im window.onload');
};
闭包时代
用立即执行函数包裹作用域，
优点：可以防止全局污染；
缺点：变量常驻内存会消耗内存
例子一：
(function(){
//Coding…
})()
例子二:
outObj 作为参数传递过去，不用每个语句都去找outObj，提高了效率
(function(outObj){
var a = 1;
var obj ={ b:2};
window.obj = obj;
return obj;
})( outObj)
例子三：常驻内存
function f1(){
var n =9;
nAdd=function(){
n=n+1;
}
function f2(){
console.log(n);
}
return f2;
}
var result=f1();
result(); //9
nAdd();
result();//10
注意点：全局变量不用了记得置为null，方便垃圾回收
模块化时代
CommonJS, AMD, CMD, UMD, ES6 规范（CMD已经淘汰）
CommonJS 规范
基本知识：
– require : 导入模块
– module.exports 或exports :导出模块
特点：
同步加载，依赖通过每个require一个个导入
例：
文件名: foo.js
// 依赖
var $ = require('jquery');
// 方法
function myFunc(){};
// 暴露公共方法（一个）
module.exports = myFunc;
注意点：
- exports 是对 module.exports 的引用
- 一个文件不能写多个module.exports ，如果写多个，对外暴露的接口是最后一个module.exports
- 模块如果没有指定使用module.exports 或者exports 对外暴露接口时，在其他文件就引用该模块，得到的是一个空对象{}
案列：
example1.js 文件
// 定义有依赖的模块
//CommonJS
var example2Obj = require('./example2');
example2Obj.sayHello();
module.exports = example2Obj;
example2.js 文件
//没有依赖的js
CommonJS
var me = {
sayHello:function(){
console.log('我是example2 in CommonJS!');
}
};
module.exports = me;
main.js
//CommonJS / AMD
var example1Obj = require('./assets/example1');
console.log("example1 in main",example1Obj)
AMD 规范
基本知识：
- define 或者 require()：导入模块
-
return:导出模块
实际上也是一个闭包
define([module1,module2],function(){
return {};
});
特点：异步加载，不阻塞页面的加载，通过define导入多个模块，
案例：
example1.js 文件
//AMD
define([
'./example2'
],function(example2Obj){
example2Obj.sayHello();
return example2Obj;
});
example2.js 文件
//AMD
define([
],function(){
var we = {};
return {
sayHello:function(){
console.log('我是example2 in AMD!');
}
};
});
main.js同CommonJS
UMD 规范
结合AMD + CommonJS的写法
（demo不生效,不举例了，有实验成功的童鞋分享下）
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD
define(['b'], factory);
} else if (typeof module === 'object' && module.exports) {
// CommonJS
module.exports = factory(require('b'));
} else {
// Browser globals
root.returnExports = factory(root.b);
}
}(this, function (b) {
//use b in some fashion.
return {};
}));
ES6 规范
基本知识：
– import 导入
– export 或者 export default 导出
注意点：一个文件即模块中只能存在一个export default语句,export可以多个
案例：
example1.js 文件
//ES6
//名字任意
import ex2 from "./example2"
let ex1 = "ex1 ES6!!"
export {ex1,ex2}
example2.js 文件
//ES6
const str = "First ES6";
let obj = {
func:() => {
console.log("I am in ES6")
}
}
//只能一个default
export default{
str,
obj
}
main.js
//ES6
import {ex1,ex2} from './assets/example1'
console.log("ex1:",ex1,"ex2:",ex2)
demo源代码见：https://github.com/Dushusir/js-module-demo
演示环境：vue + webpack
- 安装node
npm install -g vue-cli
vue init webpack myDemo
- cd myDemo
-
npm run dev
-
去除eslint检查，防止对 “；” 报错：config/index.js中
module.exports = {
dev: {
//其他设置
useEslint: false,
参考：https://webpack.toobug.net/zh-cn/chapter2/commonjs.html ，感谢！