(ES5、ES6、Node)模块化

ES5的模块化

 ES5的模块化很简单就是：立即执行函数+闭包

 let obj = (function(){
     //......模块内部代码
     return {
         导出内容
     }
 })();

也就是将一个对象return 然后就可以访问模块内部的局部变量

ES6的模块化

在之前的javascript中是没有模块化概念的。如果要进行模块化操作，需要引入第三方的类库。随着技术的发展，前后端分离，前端的业务变的越来越复杂化。直至ES6带来了模块化，才让javascript第一次支持了module。ES6的模块化分为导出（export）与导入（import）两个模块。

export import用法

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

 export let myName="laoxu";

然后可以创建一个index.js文件，以import的形式将这个变量进行引入:

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

如果要输出多个变量可以将这些变量包装成对象进行模块化输出：

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

如果你不想暴露模块当中的变量名字，可以通过as来进行操作:

 let myName="laoxu";
 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());//我是laoxu！今年90岁了
 console.log(age);//90
 console.log(name);//laoxu

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

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

默认导出（export default）

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

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

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

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

同样也支持混合导出

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

重命名export和import

如果导入的多个文件中，变量名字相同，即会产生命名冲突的问题，为了解决该问题，ES6为提供了重命名的方法，当你在导入名称时可以这样做：

 /******************************test1.js**********************/
 export let myName="我来自test1.js";
 /******************************test2.js**********************/
 export let myName="我来自test2.js";
 /******************************index.js**********************/
 import {myName as name1} from "./test1.js";
 import {myName as name2} from "./test2.js";
 console.log(name1);//我来自test1.js
 console.log(name2);//我来自test1.js
 ​

[ 总结 ]

• 1、模块化 type = module

• 2、导入导出的时候均可重命名：as可以进行重命名

• 3、默认导出只能有一个，对于默认导出只能用用一个对象名进行导入

• 4、通过export方式导出，在导入时要加{ }，export default则不需要

• 5、对于混合导出，导入时应该先导入默认的

区别	export default	export
个数	只能有一个	可以有多个
导入方式	只能用一个对象名接收 （对象名说的不准确）	导入时要用{ } 接收
数据类型	导入后的类型跟导出前的数据类型一致（也就是说上边的不一定是对象类型的）	导入后的类型跟导出前的数据类型一致

Node模块化

模块的分类

• 内置模块（核心模块） 由node官方提供。常见的有：fs，path，http等

• 自定义模块 用户创建的每一个js文件都是一个自定义模块。

• 第三方模块 由第三方开发，使用之前需要下载安装。

模块作用域

和函数作用域类似，在自定义模块中的变量，函数等成员，只能在当前模块中使用，这种模块级别的访问限制，就叫做模块作用域。

好处：防止全局变量污染。

模块的导入和导出

导出 module.exports exports

新建一个a.js文件，里面的代码如下：

 //导出一个对象，对象中的值就被暴露出去了。
 module.exports = {
     name:"刘德华",
     act(){
         console.log("之前我没得选，现在我想做一个好人")
     },
     age:35
 }

导入 require

新建一个b.js文件，里面的代码如下：

 const ldh = require("./a.js")
 console.log(ldh.age)
 console.log(ldh.name)
 ldh.act();
 ​
 //或者使用解构赋值
 const {name} = require("./a.js") //只接受name的值
 console.log(name)

【注意】 【module.exports = { name：‘刘德华’}】 和 【module.exports.name = '刘德华'】的区别

前者是创建的新的对象，将原对象覆盖。后者是在原对象上添加一个新的属性。

[ 总结 ]

• 1、module.exports 是一个空对象，再导出的时候有两种方式：①、通过赋值的方法导出 module.exports = 一个对象；②、通过添加属性的方式导出 module.exports . 属性 ；前者相当于将原来的地址覆盖掉，后者是给原来的空对象添加属性方法

• 2、module.exports 与exports 都可以用来导出：两者保存的引用地址是一样的，指向同一个对象；在导出的时候如果两者指向相同，则都会导出；如果指向不相同，以module.exports为标准

• 3、导出的时候要注意导出顺序（ 思考一下 先导出后定义或者赋值会发生什么 ）

• 3、require ( "文件路径") 导入的时候用的是对象的解构赋值

• 4、文件在导入A的时候 会先将导入的文件A 执行一边，然后再进行导入

特别注意！！！