前端模块化总结 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;

注意点:

  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 或者 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

  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 ,感谢!

发表评论取消回复

退出移动版