模块化
ES5的模块化
ES5的模块画很简单就是：立即执行函数+闭包
let obj = (function(){
//......模块内部代码
return {
导出内容
}
})();
也就是将一个对象return 然后就可以访问模块内部的局部变量
ES6的模块化
在之前的javascript中是没有模块化概念的。如果要进行模块化操作，需要引入第三方的类库。随着技术的发展，前后端分离，前端的业务变的越来越复杂化。直至ES6带来了模块化，才让javascript第一次支持了module。ES6的模块化分为导出（export）与导入（import）两个模块。
export import用法
在ES6中每一个模块即是一个文件，在文件中定义的变量，函数，对象在外部是无法获取的。如果你希望外部可以读取模块当中的内容，就必须使用export来对其进行暴露（输出）。先来看个例子，来对一个变量进行模块化。我们先来创建一个test.js文件，来对这一个变量进行输出：
export let myName="laowang";
然后可以创建一个index.js文件，以import的形式将这个变量进行引入:
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 default）
一个模块只能有一个默认导出，对于默认导出，导入的名称可以和导出的名称不一致。
/******************************导出**********************/
export default function(){
return "默认导出一个方法"
}
/******************************引入**********************/
import myFn from "./test.js";//注意这里默认导出不需要用{}。
console.log(myFn());//默认导出一个方法
可以将所有需要导出的变量放入一个对象中，然后通过 export default 进行导出
/******************************导出**********************/
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
重命名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则不需要
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 执行一边，然后再进行导入
