vue.js学习笔记八

Posted 2023-02-08 -恰饭第一名-

一、为什么需要模块化

• 随着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);