模块化开发 | es6模块暴露与引入

CommonJS模块开发

CommonJS定义

每个文件就一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。

• 私有作用域不会污染全局作用域。
• 模块可加载多次，只会在第一次加载时运行一次，然后结果会被缓存起来，
  
  以后在使用，就直接读取缓存结果。想要让模块再次运行，必须清除缓存
• 模块加载顺序是按照其在代码中出现的顺序

基础用法

1、require()用来引入外部模块，

2、exports()用来导出当前模块的变量和方法，

3、module对象代表模块对象

单变量方法导出引入

// a.js  导出
function add(a, b) {
    return a + b;
}
module.exports = add;

// b.js 引入
const add = require('./a.js');
console.log(add(10, 20));

多方法变量导出引入

// a.js 导出
function add(a, b) {
    return a + b;
}

function mul(a, b) {
    return a * b;
}

module.exports = {
    add,
    mul
};

// b.js 引入
const { add, mul } = require('./a.js');

console.log(add(10, 20));
console.log(mul(10, 20));

补充说明:

//const { add, mul } = require('./a.js');
const opt = require('./a.js');
const add = opt.add
const mul = opt.mul

和上面的注释是等价的,这就是解构的语法.

对象解构
let node = {
        type : 'identifier',
        name : 'foo'
};
let {type,name} = node;
console.log(type);//'identifier'
console.log(name);//'foo'

ES6模块化开发

ES6的模块化分为导出（export）与导入（import）两个模块。

export、import

在ES6中每一个模块即是一个文件，在文件中定义的变量，函数，对象在外部是无法获取的。如果你希望外部可以读取模块当中的内容，就必须使用export来对其进行暴露（输出）。

然后在另一个文件以import的形式将这个变量进行引入:

单变量

export let myName="laowang";

import {myName} from "./test.js";
console.log(myName);//laowang

多变量

let myName="laowang";
let myAge=90;
let myfn=function(){
    return "我是"+myName+"！今年"+myAge+"岁了"
}
export {
    myName,
    myAge,
    myfn
}
/******************************接收的代码调整为**********************/
import {myfn,myAge,myName} from "./test.js";
console.log(myfn());//我是laowang！今年90岁了
console.log(myAge);//90
console.log(myName);//laowang

---

如果你不想暴露模块当中的变量名字，可以通过as来起别名

let myName="laowang";
let myAge=90;
let myfn=function(){
    return "我是"+myName+"！今年"+myAge+"岁了"
}
export {
    myName as name,
    myAge as age,
    myfn as fn
}
/******************************接收的代码调整为**********************/
import {fn,age,name} from "./test.js";
console.log(fn());//我是laowang！今年90岁了
console.log(age);//90
console.log(name);//laowang

也可以直接导入整个模块，将上面的接收代码修改为：

import * as info from "./test.js";//通过*来批量接收，as 来指定接收的名字
console.log(info.fn());//我是laowang！今年90岁了
console.log(info.age);//90
console.log(info.name);//laowang

导出和默认导出

export与export default均可用于导出常量、函数、文件、模块等

export

在一个文件或模块中，export可以导出多个，对应的 import导入也有多个，并且加{}

 //导出
export function fn1(){ }
export function fn2(){ }
export function fn3(){ }

//导入
import {fn1,fn2,fn3} from AAA

导入的名字不能随便起，必须与导出的名字一致

默认导出（default export）

一个模块只能有一个默认导出，对于默认导出，导入的名称可以和导出的名称不一致。

/******************************导出**********************/
export default function(){
    return "默认导出一个方法"
}
/******************************引入**********************/
import myFn from "./test.js";//注意这里默认导出不需要用{}。
console.log(myFn());//默认导出一个方法

可以将所有需要导出的变量放入一个对象中，然后通过default export进行导出

/******************************导出**********************/
export default {
    myFn(){
        return "默认导出一个方法"
    },
    myName:"laowang"
}
/******************************引入**********************/
import myObj from "./test.js";
console.log(myObj.myFn(),myObj.myName);//默认导出一个方法 laowang

同样也支持混合导出

/******************************导出**********************/
export default function(){
    return "默认导出一个方法"
}
export var myName="laowang";
/******************************引入**********************/
import myFn,{myName} from "./test.js";
console.log(myFn(),myName);//默认导出一个方法 laowang