VUE学习四：前端模块化，ES6和ES5如何实现模块化

导言

一、前端模块化

前端模块化的意义是什么？小项目需要模块化吗？

二、ES6的模块化实现

1. ES6的模块化的出现

ES5以及它之前的js是没有模块化的，如果要进行模块化操作，需要引入第三方的类库。随着技术的发展，前后端分离，前端的业务变的越来越复杂，终于在ES6中引入了模块化的操作。

2. ES6模块化基本用法

es6中，一个模块就是一个js文件，所以我们新建一个模块（js文件）
es6模块化中模块与外部的数据传输是依赖于export（发送）和import（接收）这两个关键字的，下面通过一个例子来理解它们的用法
在module1.js中：

export let name = 'aays';//发送name这个变量

创建一个外部文件index.js,并且码入：

import {name} from './module1.js'//接收name这个变量
console.log(name)//aays

上面是最基本的用法，如果要输出多个变量可以将这些变量包装成对象进行模块化输出：

//模块
let name = 'aays'，age = 18
const sex = '男'
export {
    name,
    age,
    sex
}
//外部
    <script type="module">
        import {name,age,sex} from './module1.js'
         console.log(age)//18
    </script>

如果你想给传输过来的变量重新命名（可用于防止暴露模块当中的变量名字或者简化变量名），可以通过as来进行操作，上述代码修改为:

//模块
let name = 'aays'，age = 18
const sex = '男'
export {
    name as myname,
    age as myage,
    sex as mysex
}
//外部
import {myname,myage,mysex} from './module1.js'
console.log(myage)//18

如果你不想将export过来的一一解构赋值，那么你可以使用*符号来直接获取整个模块，上述代码修改为

//模块
let name = 'aays'，age = 18
const sex = '男'
export {
    name,
    age,
    sex
}
//外部
import * as allmodule from './module1.js'
console.log(`${allmodule.name}今年${allmodule.age}岁
性别${allmodule.sex}`)//aays今年18岁 性别男

3. 默认导出与混合导出

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

//模块
export default function(){
    return "默认导出一个方法"
}
//外部
import fn from './module1.js'//fn可以是任意变量名
console.log(fn())//输出“默认导出一个方法”
//我们可以将要导出的东西都放在默认导出中，
//然后取出来作为一个对象直接取里面的东西来用，比较方便

混合导出即同时在一个export中导出默认数据与非默认数据，加个逗号就能实现

//模块
export default function(){
    return "默认导出一个方法"
}
export let name ="aays";
//外部
import fn,{name} from "./module1.js";
console.log(fn()+name);//默认导出一个方法aays

4. 重命名export和import

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

export let myName="我来自module1.js";//模块1中
export let myName="我来自module2.js";//模块2中
//外部
import {myName as name1} from "./module1.js";
import {myName as name2} from "./module2.js";
console.log(name1);//我来自module1.js
console.log(name2);//我来自module2.js

三、ES6 之前如何实现模块

es6之前，js并没有模块。随着代码复杂度提升，开发者们为了应对难以维护的代码而考虑使用js现有的特性去实现模块化。

模块要求：

1. 隐藏内部实现
2. 提供调用接口

函数内部的变量是私有对外不可见的,借用该特点可以实现隐藏内部实现的需要。

function ff(){
  var a=123;
  var b="abcdef";
}
console.log(a)//错误，a未定义

利用函数的返回对象，通过 函数闭包特性(第五小节介绍) ，实现对内部数据对访问，间接实现了调用接口。
通过该接口，我们可以方便的使用模块内的功能，例如ffobj.f0();

// 闭包函数
function ff(){
  var a=123;
  var b="abcdef";
  var f0 = function(){
      console.log("a is :"+a);
  }
  
  return {a:a,b:b,f0:f0}
}

var ffobj = ff();

ffobj.f0()

简化定义与调用步骤，直接改为立即执行函数即可

const ffobj1 = function(){
  var a=123;
  var b="abcdef";
  var f0 = function(){
      console.log("a is :"+a);
  }
  
  return {a:a,b:b,f0:f0}
}();

四、commonjs的模块化

mathUtils.js

function add(num1, num2) {
  return num1 + num2
}

function mul(num1, num2) {
  return num1 * num2
}

module.exports = {
  add,
  mul
}

main.js 使用commonjs的模块化 导入 info.js

// 1.使用commonjs的模块化规范
const {add, mul} = require('./mathUtils.js')

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

五、函数闭包

1. 定义：

闭包函数：声明在一个函数中的函数，叫做闭包函数。
闭包：内部函数总是可以访问其所在的外部函数中声明的参数和变量，即使在其外部函数被返回（寿命终结）了之后。

2. 解析:

闭包就是能够读取其他函数内部变量的函数。

3. 特点:

1. 闭包外层是一个函数。
2. 闭包内部都有函数。
3. 闭包会return内部函数。
4. 闭包返回的函数内部不能有return（因为这样就真的结束了）。
5. 执行闭包后，闭包内部变量会存在，而闭包内部函数的内部变量不会存在。

4. 优点：

( 1 ) 可以有私变量的存在；
( 2 ) 避免全局变量的污染；
( 3 ) 希望一个变量长期驻扎在内存中，防止私有变量被垃圾回收机制所清除；

5. 缺点：

( 1 ) 闭包比普通函数占用更多的内存，会造成内存泄漏；在不使用时，要及时释放，将引用内层函数对象的变量赋值为null。