vue.js学习笔记八

Posted -恰饭第一名-

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue.js学习笔记八相关的知识,希望对你有一定的参考价值。

一、为什么需要模块化

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

以上是关于vue.js学习笔记八的主要内容,如果未能解决你的问题,请参考以下文章

vue.js学习笔记八

vue.js学习笔记八

vue 学习笔记

Vue2学习笔记:事件对象事件冒泡默认行为

Vue学习笔记目录

从零开始学习Vue.js,学习笔记