模块化开发

目录

一、为什么需要模块化开发？（了解）

二、CommonJS

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

2、ES6的export基本使用：

3、ES6的import使用

---

一、为什么需要模块化开发？（了解）

• 网页开发早期，js做一些简单的表单验证或动画实现等，代码量少。直接将代码写在<script>标签中；
• ajax异步请求的出现，慢慢形成前后端分离，客户端需要完成的事情越来越多，代码量也是与日俱增。为了应对代码量的剧增，我们通常会将代码组织在多个js文件中，进行维护。但是这种维护方式，依然不能避免一些灾难性的问题：比如全局变量同名问题，另外，这种代码的编写方式对js文件的依赖顺序几乎是强制性的；但是当js文件过多，比如有几十个的时候，弄清楚它们的顺序是一件比较同时的事情。

1. 我们可以使用匿名函数来解决方面的重名问题，但是如果我们希望在main.js文件中，用到 aaa.js 定义的 flag，应该如何处理呢？显然，另外一个文件中不容易使用，因为flag是一个局部变量。
2. 使用模块作为出口：我们可以使用将需要暴露到外面的变量，使用一个模块作为出口，来看下对应的代码：

（1）在匿名函数内部，定义一个对象。
（2）给对象添加各种需要暴露到外面的属性和方法(不需要暴露的直接定义即可)。
（3）最后将这个对象返回，并且在外面使用了一个MoudleA接受。

接下来，我们在man.js中怎么使用呢？

我们只需要使用属于自己模块的属性和方法即可
这就是模块最基础的封装，事实上模块的封装还有很多高级的话题：
但是我们这里就是要认识一下为什么需要模块，以及模块的原始雏形。

幸运的是，前端模块化开发已经有了很多既有的规范，以及对应的实现方案。
常见的模块化规范：CommonJS、AMD、CMD，也有ES6的Modules

二、CommonJS

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

CommonJS的导出：

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

CommonJS的导入：

        let {test,demo,flag} = require('modeleA');
        // 等同于
        let _mA = require('moduleA');
        let test = _mA.test;
        let demo = _mA.demo;
        let flag = _mA.flag;

2、ES6的export基本使用：

export指令用于导出变量，2种方法：

//方法一
    export let name = 'Hi'
    export let age = 18
 // 方法二
    let name = 'Hi'
    let age = 18
    export{name,age}

输出函数或者输出类，2种方法：

// 方法一    

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);
    }
    export class Person {
        constructor(name,age){
            this.name = name;
            this.age = age;
        }
        // 定义函数
        run(){
            console.log(this.name + '在奔跑');
        }
    }
    export{test.Person}

export default
使用情景：一个模块中包含某个的功能，我们并不希望给这个功能命名，而且让导入者可以自己来命名

// info.js
export default function (){
    console.log('default function');
}
// main.js
    import myFunc from './info.js'
    myFunc()

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

3、ES6的import使用

使用export指令导出模块对外提供的接口，下面我们就可以通过import命令来加载对应模块
首先，我们需要在HTML代码中引入两个js文件，并且类型需要设置为module
import指令用于导入模块中的内容，比如main.js的代码

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

如果我们希望某个模块中所有的信息都导入，一个个导入显然有些麻烦：
通过 * 可以导入模块中所有的export变量
但是通常情况下我们需要给 * 起一个别名，方便后续的使用

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

参考：

最全最新Vue、Vuejs教程，从入门到精通