ES6模块封装代码

什么是模块

模块是自动运行在严格模式下无法退出的JavaScript代码。在模块顶部创建的变量不会自动加到全局共享作用域，这些变量只存在模块的顶级作用域中，并且模块顶部的this值是undefined。模块可以导出一些绑定值供其他模块使用，也可以从其他模块导入绑定值。

导出模块

// 导出一个声明的变量
export var color = 'red';
export let animal = 'cat';
export const limit = 3;
export const baseAge = 23;

// 导出一个函数
export function sum(a, b) {
    return a + b;
}   

// 导出一个类
export class Person {
    constructor(name, age, profession){
        this.name = name;
        this.age = age;
        this.profession = profession;
    }
    setAge(val){
        this.age = val;
    }
    getAge(){
        return this.age;
    }
}

// 先申明一个函数，再导出（后面导出的非默认时候要加上 {} ）
function mult(a, b) {
    return a * b
}

function setColor(val) {
    color = val;
}
// 导出时重命名
export { mult as multiply, setColor };  

导入模块

<script type="module">
    /* 
        浏览器目前不支持ES6的语法，在使用时需加上 type="module"，
        type="module"默认会使用严格模式，
        如果下面的变量未声明，会报错。
        
        大括号表示导入非默认 
        下面多处使用了 mod1.js 但只会执行一次mod1.js，
        导入过的模块代码执行后，
        实例化的模块会被保存在内存中，以便重复使用。
    */
    // 导入单个绑定
    //导入时重命名
    import { sum as add } from './mod1.js';
    import { multiply } from './mod1.js';

    // 导入多个绑定
    import { color, limit } from './mod1.js';

    // 导入整个模块（此处全部导入了，只是为做演示用，上面单个导入其实没必要）
    import * as mod1 from './mod1.js';

    let addRes = add(2, 3);
    console.log(addRes);    // 5

    let mulRes = multiply(3, 5);
    console.log(mulRes);    // 15

    /*
        标识符只有在被导出的模块中才可以修改，
        即便是导入的模块中也没法修改导入的绑定的值。
        在执行setColor时，
        会回到导出setColor的模块中去执行，同时更改color的值。
        因此，在导入的模块中，color的本地名称的值也发生了变化。
    */
    console.log(mod1.sum(10, limit));    // 13
    console.log(color);     // red
    
    // Uncaught TypeError: Assignment to constant variable.
    // color = 'blue';    
    
    mod1.setColor('green');
    console.log(color);     // green

    var jack = new mod1.Person('jack', mod1.baseAge+5, 'engineer');
    
    // Person {name: "jack", age: 28, profession: "engineer"}
    console.log(jack); 
    
    jack.setAge(30);
    console.log(jack.age);  // 30

</script>

模块默认值

一个模块只能导出一个默认值，同时导出多个默认值会报错，如下图

export let constNum = 8;

// 导出一个匿名函数作为默认值
export default function(a, b){
    return a * b;
}

export let constNum = 8;

// 先申明一个函数，再将这个函数作为默认值导出
function mult(a, b) {
    return a * b;
}
export default mult;

export let constNum = 8;

// 先申明一个函数，再将这个函数作为默认值导出
function mult(a, b) {
    return a * b;
}
export { mult as default };

导入默认值

// 导入默认值时没有加 {}
import mult from './mod2.js';
        
let multRes = mult(5,6);
console.log(multRes);     // 30

/*
    导入默认值和非默认值，默认值必须在前面，
    用逗号和后面的非默认值隔开。
*/
import mult, { constNum } from './mod2.js';

let multRes = mult(constNum,constNum);
console.log(multRes);   // 64

/*
    导入默认值和非默认值，默认值必须在前面，
    用逗号和后面的非默认值隔开,
    放括号内非默认值前面，用 default as 的格式。
*/
import { default as mult, constNum } from './mod2.js';

let multRes = mult(constNum,constNum);
console.log(multRes);   // 64

重新导出一个绑定

// 从另一个模块中重新导出一个绑定
export { mult } from './mod2.js';

// 重新导出并重命名
export { mult as multiply } from './mod2.js';

// 重新导出另一个模块的全部值
export * from './mod2.js';