模块化 —— 以vue和node分别为例

vue

1. export

① 可以使用多个export暴露文件中的函数、变量、对象等
② 在import导入时必须要将{}将变量括起来且变量必须与暴露的模块中export后的变量名称相同。
③ export和export default可以同时使用，但在import时有所不同

//test.js
function a(){
    console.log("123");
}
function b(){
    console.log("234")
}
var c = "c";
var d="d"
export var one = a;
export var two = b;
export {c,d}

//使用
import {c,d} from "test.js"
import * as obj from 'test.js' 
console.log(c+' '+d)//c d
console.log(obj.c+' '+obj.d)//c d

2. export default

① 一般用于批量导出，也可以只导出一个函数、变量、对象
② 一个文件中只能使用一个export default
③ 在import时无需通过{}将变量括起来且导入的变量名称可以不和export default后面的相同
④ 当用于批量导出时，将所有导出内容放入{}中，在import时，变量获取到的是整个导出对象，如果要获取其中某一属性，则需要通过变量.属性调用。
⑤ 当用于单个元素导出时（export default a;），则在import时，其变量直接获取到该元素(a)
⑥ export中可以定义返回变量(export var a = ...（正确）)，而export default不可以(export default var a = ...(报错))
⑦ export default中可以为变量重命名（如下例2），而export中不可以，其必须通过定义变量的方式进行重命名。

//test.js
function a(){
    console.log("123");
}
function b(){
    console.log("234")
}
export default  {a,b};
//1. export default a
//2. export default  {
//one:a,
//two:b
//};
//使用
import obj from "test.js"
//1. import fun from "test.js"
//2. import obj from "test.js"
console.log(obj.a())//输出123
//1. console.log(fun())   输出123
//2. console.log(obj.one());//输出123

node

每一个node.js执行文件，都自动创建一个module对象，同时，module对象会创建一个叫exports的属性，初始化的值是{}，即module.exports={}

1. 在node.js中，可以通过两种方式暴露模块：module.exports和exports

2. exports实际上引用的是module.exports的值。

3. 当module.exports改变时，exports并不改变且其失效，且模块暴露时暴露出去的是module.exports。

//foo.js
exports.a = function(){
console.log('a')
}
// 新增了一个导出
module.exports = {a: 2}//将上述属性a的值修改
exports.a = 1//失效

//使用
var x = require('./foo');
console.log(x.a);//2

4. 当通过exports给一个属性赋值时，会影响到module.exports本身。

//data.js
function a(){
    console.log("1111");
}
 exports.one = a;//为module.exports增加了one属性

let obj =require("./data/data");
obj.one();//1111

5. 可以通过{}获取到module.exports的属性，但必须与模块中的属性同名。

//data.js
function a(){
    console.log("1111");
}
 exports.one = a;
 

let {one} =require("./data/data")//one必须与data.js中的暴露属性同名，否则错误
one();//1111

6. 如果改变exports的指向，则不会影响module.exports。故如果想要导出类，则只能赋值给moudle.exports

function a(){
    console.log("1111");
}
   
 exports = {a:a};

let a=require("./data/data")
console.log(a);//{}

参考文章：https://blog.csdn.net/wuzhe128520/article/details/89789019