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学习笔记八的主要内容,如果未能解决你的问题,请参考以下文章