js 模块化笔记

时间 2019-12-04

原文原文链接

目前主流的 JavaScript 模块化规范有 CommonJS，AMD，CMD，ES6 Module 四种规范html

CommonJS

CommonJS 主要应用于服务端 (node)，其主要内容为：一个单独的文件就是一个模块，每个模块都是一个单独的做用域，模块必须经过 module.exports 导出对外的变量或接口，经过 require() 来导入其余模块的输出到当前的模块的做用域中node

//node环境编译
//a.js
let b = 0
exports.a = () => {
    console.log('a')
    b+=1
}
exports.b = () => {
    console.log(b)
}
//b.js
const {a, b} = require('./a');
a() //a
module.exports.b = () => {
    console.log('b')
    a() //a
}
//c.js
const bf = require('./b').b;
var {a, b} = require('./a');
a() //a
b() //2
bf() //b
b() // 3
var {a, b} = require('./a');
b() // 3 读取的是缓存
复制代码

加载模块

模块加载的顺序，按照其在代码中出现的顺序，同步加载的方式加载。浏览器

缓存机制

NodeJs 对引入过的模块都会进行缓存，以减小二次引入时的开销。不一样的是，浏览器仅缓存文件，而在 NodeJs 中缓存的是编译和执行后的对象。缓存

加载机制

输入的是被输出的值的拷贝。一旦输出一个值，模块内部的变化就影响不到这个值。异步

AMD

异步模块加载机制，它采用异步方式加载模块，模块的加载不影响它后面语句的运行。全部依赖这个模块的语句都定义在一个回调函数中，等到依赖加载完成以后，这个回调函数才会运行。模块化

AMD 的诞生，就是为了解决函数

JavaScript 文件中的异步加载，避免网页失去响应
管理模块之间的依赖性，便于代码维护和编写

经过 define(id?: String, dependencies?: String[], factory: Function|Object) 来定义模块ui

id : 模块名称
dependencies : 依赖模块
factory : 回调函数或者输出对象经过 require([module], callback) 来引入模块
modeul : 依赖模块
callback : 回调函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script src="./require.js" data-main="main.js"></script>
</body>
</html>
复制代码

//a.js
define(function() {
    var sayHi = () => {
        console.log("Hi-a")
    }
    return {
        //返回接口
        sayHi:sayHi,
        a:1
    }
})
//b.js
define(function() {
    var sayHi = () => {
        console.log("Hi-b")
    }
    return {
        sayHi:sayHi,
        b:2
    }
})
//c.js
define([
    //依赖模块
    './a.js',
    './b.js'
], function(a, b) {
    console.log(a,b)
    a.a++
    b.b++
    return {
        c: a.a + b.b
    }
});
//main.js
require(["./a","./b","./c.js"], function(a,b,c) {
    console.log(a,b,c)
    a.sayHi() //Hi-a
    b.sayHi() //Hi-b
    console.log(c.c) //5
})
复制代码

CMD

CMD (Common Module Definition) 通用模块定义，浏览器端的实现有 SeaJS，跟RequireJS同样动态建立异步的 script 标签。区别在于AMD 推崇一开始就加载全部的依赖，CMD推崇有须要的地方才进行依赖加载spa

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script src="./sea.js"></script>
    <script> seajs.config({ alias:{ 'main':'./main.js' }, }); seajs.use(['main'],function(main) { main.sayHi()//a-b-c }); </script>
</body>
</html>
复制代码

//a.js
define(function(require, exports) {
    var a = 'a'
    exports.a = a
});
//b.js
//SeaJS 会首先用正则匹配出代码里面全部的 require 语句，拿到依赖，而后依次加载，加载完成再执行回调函数
define(function(require, exports) {
    var a = require('./a.js').a
    var b = a + '-b'
    exports.b = b
});
//c.js
define(function(require, exports) {
    var b = require('./b.js').b
    var c = b + '-c'
    exports.c = c
});
//main.js
define(function(require, exports) {
    var c = require('./c.js').c
    exports.sayHi = function(){
        console.log(c)
    }
});
复制代码

ES Module

ES Module 是 ES6 引入的模块化功能，主要由 export 和 import 两个命令构成，export 用于规定模块对外接口，import 用于输入其余模块提供的功能。code

//a.js
//导出变量
export var a = 1
//导出函数
export function b(){

}
//导出类
export class C {
    constructor(){

    }
}
var d = 100
//导出对象
export {
    d
}
//重命名导出
export { d as e}
//默认导出，一个模块只能有一个默认导出
export default d
//b.js
import { a } from "./a.js";
复制代码