vue.js学习笔记八

Posted 2021-07-25 -恰饭第一名-

一、为什么需要模块化

• 随着ajax异步请求的出现，慢慢形成了前后端的分离
• 为了应对代码量的剧增，我们通常会将代码组织在多个js文件中，进行维护
• 比如全局变量同名问题：如下的例子

    <script>
        // aaa.js文件中，小明定义了一个变量，名称是flag,并且为true
        flag = true;

        // bbb.js文件中，小红也定义了flag这个变量,为false
        flag = false;

        // main.js文件中，小明想通过flag进行一些判断，完成后续的事情
        if (flag) {
            console.log("小明是个填充");
            // 结果当然是代码不能正常运行
        }
    </script>

1.1、匿名函数：

匿名函数的解决方案：
我们可以使用匿名函数来解决方面的重名问题
在aaa.js文件中，我们使用匿名函数

  <script>
        (function() {
            var flag = true
        })()
    </script>

但是我们希望在main.js文件中用到flag

但是因为flag是一个局部变量

---

1.2、使用模块作为出口

• 我们可以使用将需要暴露到外面的变量，使用一个模块作为出口

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

        if (ModuleA.flag) {
            console.log("小明是个天才");
        }
        ModuleA.myFunc("小明长的真帅");
        console.log(ModuleA);
    </script>

• 在函数内部定义一个对象
• 给对象添加各种需要暴露到外面的属性和方法（不需要暴露的直接定义即可）
• 最后将这个对象返回，并且在外面使用了一个MoudleA接收
• 在main.js中只需要使用属于自己模块的方法和属性即可
• 这就是模块最基础的封装，事实上模块的封装还有很多高级的话题

1.3、CommonJS(了解)

• 模块化有两个核心：导出和导入
• CommonJS的导出

<script>
        module.exports = {
            flag: true,
            test(a, b) {
                return a + b
            },
            demo(a, b) {
                return a + b
            }
        }
    </script>

• CommonJS的导入

<script>
        //CommonJS模块
        let {
            test,
            demo,
            flag
        } = require("moduleA");

        //等同于
        let _mA = require("moduleA");
        let test = _mA.test;
        let demo = _mA.demo;
        let flag = _mA.flag;
    </script>

二、ES6的模块化实现

2.1、export的基本使用

• export指令用于导出变量，比如下面的代码：

 <script>
        //info.js
        export let name = "why";
        export let age = 18
        export let height = 1.88
 </script>
 
 <!-- 上面的代码还要另外一种写法： -->
    <script>
        let name = "why";
        let age = 18;
        let height = 1.88;
        export {
            name,
            age,
            height
        }
    </script>

2.2、导出函数或类

• 上面我们主要是输出变量，也可以输出函数或者输出类

<script>
        export function test(content) {
            console.log(content);
        }
        export class Person {
            constructor(name, age) {
                this.name = name;
                this.age = age;
            }
            run() {
                console.log(this.name + "在奔跑");
            }
        }
    </script>

<script>
        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
        }
    </script>

2.3、export default

• 某些情况下，一个模块中包含某个的功能，我们并不希望给这个功能命名，而是让导入者可以自己来命名
• 这个时候就可以使用export default

<script>
        //info.js
        export default function() {
            console.log("default function");
        }
    </script>

• 我们来到main.js中，这样使用就可以了
• 这里的myFunc是我自己命名的，你可以根据需要命名它对应的名字

<script>
        import myFunc from "./info.js"
        myFunc()
    </script>

• 另外，需要注意：
• export default在同一个模块中，不允许同时存在多个

2.4、import使用

• 我们使用export指令导出了模块对外提供的接口，下面我们就可以通过import命令来加载对应的这个模块了
• 首先，我们需要在html代码中引入两个js文件，而且类型需要设置为module

<script src="aaa.js" type="module"></script>
<script src="bbb.js" type="module"></script>

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

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

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

<script>
        import * as info from "./info.js"
        console.log(info.name, info.age, info.height);
    </script>

---

index.html

<script src="aaa.js" type="module"></script>
<script src="bbb.js" type="module"></script>
<script src="mmm.js" type="module"></script>

aaa.js

var name = '小明'
var age = 18
var flag = true

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

if (flag) {
  console.log(sum(20, 30));
}

// 1.导出方式一:
export {
  flag, sum
}

// 2.导出方式二:
export var num1 = 1000;
export var height = 1.88


// 3.导出函数/类
export function mul(num1, num2) {
  return num1 * num2
}

export class Person {
  run() {
    console.log('在奔跑');
  }
}

// 5.export default
// const address = '北京市'
// export {
//   address
// }
// export const address = '北京市'
// const address = '北京市'
//
// export default address

export default function (argument) {
  console.log(argument);
}

bbb.js

import {sum} from './aaa.js'

var name = '小红'
var flag = false

console.log(sum(100, 200));

mmm.js

// 1.导入的{}中定义的变量
import { flag, sum } from "./aaa.js";

if (flag) {
    console.log('小明是天才, 哈哈哈');
    console.log(sum(20, 30));
}

// 2.直接导入export定义的变量
import { num1, height } from "./aaa.js";

console.log(num1);
console.log(height);

// 3.导入 export的function/class
import { mul, Person } from "./aaa.js";

console.log(mul(30, 50));

const p = new Person();
p.run()

// 4.导入 export default中的内容
import addr from "./aaa.js";

addr('你好啊');

// 5.统一全部导入
// import {flag, num, num1, height, Person, mul, sum} from "./aaa.js";

import * as aaa from './aaa.js'

console.log(aaa.flag);
console.log(aaa.height);