前端如何实现模块化开发？

模块化开发

JavaScript 原始功能

1. 在网页开发的早期，JavaScript 制作作为一种脚本语言，做一些简单的表单验证或动画实现等，那个时候的代码还是很少的。

   • 那个时候的代码直接写在

2. 随着 Ajax 异步请求的出现，慢慢形成了前后端的分离。

   • 客户端需要完成的事情越来越多，代码量也是与日俱增。
   • 为了应对代码量的剧增，通常会将代码组织在多个 js 文件中，进行维护。
   • 但是这种维护方式，依然不能避免一些灾难性的问题。

3. 比如全局变量同名问题。

4. 另外，这种代码的编写方式对 js 文件的依赖顺序几乎是强制性的

   • 但是当 js 文件过多，比如有几十个的时候，弄清楚他们的顺序是一件比较麻烦的事情。
   • 而且即使把顺序弄清楚了，也不能避免上面出现的这种尴尬问题的发生。

匿名函数的解决方案

1. 可以使用匿名函数来解决重名问题。

   • 在 aaa.js 文件中，我们使用匿名函数。

     (function(){
         var flag = true
     })()
     

2. 但是如果要在 main.js 文件中用到 flag 要怎么做？

   • 显然，另外一个文件中不容易使用，因为 flag 是一个局部变量。

使用模块作为出口

1. 可以将需要暴露在外面的变量，使用一个模块作为出口。
   • 在匿名函数内部，定义一个对象。
   • 给对象添加各种需要暴露在外面的属性和方法（不需要暴露的直接定义即可）。
   • 最后将这个对象返回，并且在外面使用一个 ModuleA 接收。
2. 在 main.js 中，只需要使用属于自己的模块的属性和方法即可。

;
var ModuleA = (function(){
    // 定义一个对象
    var obj = {}
    // 在对象内部添加变量和方法
    obj.flag = true
    obj.myFunc = function(info){
        console.log(info)
    }
    // 将对象返回
    return obj
})()

// 另外一个 js 文件

;
if(ModuleA.flag){
    console.log('小明是个天才')
}

ModuleA.myFunc('小明长得真帅')

console.log(ModuleA)

1. 这就是模块最基础的封装，事实上模块的封装还有很多高级的话题。
   • 先认识一下为什么需要模块，以及模块的原始雏形。
   • 幸运的是，前端模块化开发已经有了很多既有的规范，以及对应的实现方案。
2. 常见的模块化规范：
   • CommonJS、AMD、CMD、也有 ES6 的 Modules。

CommonJS（了解）

1. 模块化有两个核心：导出和导入。

2. CommonJS 的导出：

   module.exports = {
       flag:true
       test(a,b){
           return a + b
       }
   	demo(a,b){
           return a * b
       }
   }
   

3. CommonJS 的导入：

   // CommonJS 模块
   let {test,demo,flag} = require('moduleA')
   
   // 等同于
   let _mA = require('moduleA')
   let test = _mA.test
   let demo = _mA.demo
   let flag = _mA.flag
   

ES6 模块化的导出和导入

export 的基本使用

1. export 指令用于导出变量：

   // info.js
   export let name = 'why'
   export let age = 18
   export let height = 1.88
   

2. 上面的代码还有另外一种写法：

   // info.js
   let name = 'why'
   let age = 18
   let height = 1.88
   
   export {name,age,height}
   

导出函数或类

1. 上面主要是输出变量，也可以输出函数或者输出类。

   export function test(content){
       console.log(content)
   }
   export class Person {
       constructor(name,age){
           this.name = name
           this.age = age
       }
       
       run() {
           console.log(this.name + '在奔跑')
       }
   }
   

   // 另外一种写法
   function test(content){
       console.log(content)
   }
   class Person {
       constructor(name,age){
           this.name = name
           this.age = age
       }
       
       run() {
           console.log(this.name + '在奔跑')
       }
   }
   
   export {test,Person}
   

export default

1. 某些情况下，一个模块中包含某个功能，我们不希望给这个功能命名，而且希望导入者可以自己来命名。

   • 这时可以使用 export default。

     // info.js
     export default function(){
         console.log('default function')
     }
     

2. 我们来到 main.js 中，这样使用就可以了

   • 这里的 myFunc 是自己命名的，你可以根据需要命名它对应的名字。

     import myFunc from './info.js'
     myFunc()
     

3. 另外，需要注意：

   • export default 在同一个模块中，不允许同时存在多个。

import 使用

1. 我们使用 export 指令导出了模块对外提供的接口，下面就可以通过 import 命令来加载对应的这个模块了。

2. 首先，需要在 HTML 代码中引入两个 js 文件，并且类型要设置成 module。

   <script src="info.js" type="module"></script>
   <script src="main.js" type="module"></script>
   

3. import 指令用于导入模块中的内容，比如 main.js 的代码。

   import {name,age,height} from "./info.js"
   
   console.log(name,age,height)
   

4. 如果我们希望某个模块中所有的信息都导入，一个个导入显然有些麻烦。

   • 通过 * 可以导入模块中所有的 export 变量。

   • 但是通常情况下我们需要给 * 起一个别名，方便后续的使用。

     import * as info from './info.js'
     
     console.log(info.name,info.age,info.height,info.friends)