1.模块化 #

1.1.什么是模块化 #

1.2.模块化的意义 #

1.3. 模块化的发展史 #

2. 自执行函数 #

2.1 函数封装 #

function a(){

}
function b(){

}

2.2 命名空间 #

let moduleA = {
  a(){},
  b(){}
}
let moduleB = {
  a(){},
  b(){}
}

2.3 自执行函数 #

let moduleA = (function () {
    let state;
    function getState() {
        return state;
    }
    return { getState };
})();
let moduleB = (function () {
    let state;
    function getState() {
        return state;
    }
    return { getState };
})();

console.log(moduleA.getState());
console.log(moduleB.getState());

2.4 有依赖的自执行函数 #

(function (global) {
    function add(a, b) {
        return a + b;
    }
    global.addModule = { add };
})(window);
(function (global) {
    function minus(a, b) {
        return a - b;
    }
    global.minusModule = { minus };
})(window);

(function (global, addModule, minusModule) {
    global.mathModule = { add: addModule.add, minus: minusModule.minus };
})(window, addModule, minusModule);

console.log(mathModule.add(2, 2));
console.log(mathModule.minus(2, 2));

3. AMD #

define(id?, dependencies?, factory);

3.1 html #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript" src="http://static.js.xywy.com/common/js/require.min.js"></script>
    <script src="index.js"></script>
</body>

</html>

3.2 index.js #

require.config({
    baseUrl: 'modules'
});
require(['addModule', 'minusModule'], (addModule, minusModule) => {
    console.log(addModule.add(1, 2), minusModule.minus(3, 4));
});

3.3 modules\addModule.js #

modules\addModule.js

define(function () {
    function add(a, b) {
        return a + b;
    }
    return {
        add
    }
});

3.4 modules\minusModule.js #

2.js\amd\modules\minusModule.js

define(function () {
    function minus(a, b) {
        return a - b;
    }
    return {
        minus
    }
});

3.5 2.js\amd\amd.js #

amd\amd.js

let moduleFactory = {};
function define(name, factory) {
    moduleFactory[name] = factory;
}
function require(dependencies, callback) {
    callback(...dependencies.map(dependency => moduleFactory[dependency]()));
}

define('addModule', function () {
    function add(a, b) {
        return a + b;
    }
    return {
        add
    }
});
define('minusModule', function () {
    function minus(a, b) {
        return a - b;
    }
    return {
        minus
    }
});
require(['addModule', 'minusModule'], function (addModule, minusModule) {
    console.log(addModule.add(1, 2), minusModule.minus(3, 4));
})

4. CMD #

4.2 cmd\index.js #

cmd\index.js

define(function (require, exports) {
    var addModule = require('./modules/addModule')
    let result1 = addModule.add(1, 2);
    console.log(result1);
    var minusModule = require('./modules/minusModule')
    let result2 = minusModule.minus(1, 2);
    console.log(result2);
})

4.3 modules\addModule.js #

modules\addModule.js

define(function (require, exports) {
    exports.add = function (a, b) {
        return a + b;
    }
})

4.4 modules\minusModule.js #

modules\minusModule.js

define(function (require, exports) {
    exports.minus = function (a, b) {
        return a - b;
    }
})

4.5 2sea.js #

cmd\sea.js

let factories = {}
let modules = {};
function require(name) {
    if (modules[name]) {
        return modules[name];
    }
    let factory = factories[name];
    let exports = {};
    factory(require, exports);
    modules[name] = exports;
    return exports;
}
function define(name, factory) {
    factories[name] = factory;
}
function use(name) {
    require(name);
}
define('addModule', function (require, exports) {
    exports.add = function (a, b) {
        return a + b;
    }
})
define('minusModule', function (require, exports) {
    exports.minus = function (a, b) {
        return a - b;
    }
})
define('index', function (require, exports) {
    var addModule = require('addModule')
    let result1 = addModule.add(1, 2);
    console.log(result1);
    var minusModule = require('minusModule')
    let result2 = minusModule.minus(1, 2);
    console.log(result2);
})
use('index');

5. COMMON.js #

a.js

module.exports = {
    a: 1
};

b.js

var a = require('./a');
var b = a.a + 2;
module.exports ={
    b
};

6.UMD #

((root, factory) => {
    if (typeof define === 'function' && define.amd) {
        //AMD
        define(['jquery'], factory);
    } else if (typeof exports === 'object') {
        //CommonJS
        var $ = require('jquery');
        module.exports = factory($);
    } else {
        root.testModule = factory(root.jQuery);
    }
})(this, ($) => {
    //todo
});

7.ESM #

/** 导出模块的方式 **/
var a = 0;
export { a }; //第一种

export const b = 1; //第二种 

let c = 2;
export default { c }//第三种 

let d = 2;
export default { d as e }//第四种,别名

/** 导入模块的方式 **/

import { a } from './a.js' //针对export导出方式,.js后缀可省略

import main from './c' //针对export default导出方式,使用时用 main.c

import 'lodash' //仅仅执行lodash模块,但是不输入任何值

7.1 命名式导出与默认导出 #

// a.js
let x = 10
let y = 20
setTimeout(()=>{
    x = 100
    y = 200
},100)
export { x }
export default y

// b.js
import { x } from './a.js'
import y from './a.js'
setTimeout(()=>{
    console.log(x,y) // 100,20
},100)