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

比眉伴天荒 2023-07-06 09:48 23阅读 0赞

#### 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;