站点图标 独书先生

前端模块化总结 CommonJS/AMD/UMD/ES6

Alexads

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;

注意点：

  1. exports 是对 module.exports 的引用
  2. 一个文件不能写多个module.exports ，如果写多个，对外暴露的接口是最后一个module.exports
  3. 模块如果没有指定使用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([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

  1. 安装node
npm install -g vue-cli
vue init webpack myDemo
  1. cd myDemo

  2. npm run dev

  3. 去除eslint检查，防止对 “；” 报错：config/index.js中

module.exports = {

dev: {

//其他设置

useEslint: false,

参考：https://webpack.toobug.net/zh-cn/chapter2/commonjs.html ，感谢！

退出移动版