您的位置：首页 > Web前端 > Vue.js

9.Vue之webpack打包基础---模块化思维

2021-03-03 05:44 309 查看

主要内容:

1. 什么是模块化思维?

2. ES6包的封装思想

一、什么是模块化思维呢?

现实工作中, 一个项目可能会有多个人同时开发. 然后, 将所有人开发的内容, 合并到一个文件中. 比如:
1. 有3三个人同时开发, 一个人一个js文件, 最后引入到main.js
2. 每个人单独写, 这样, 定义的变量可能会重名, 那么在main.js中取值赋值就可能会出现问题

如何解决这个问题呢? 我们使用了闭包的写法. 然后给闭包设置一个返回值. 这样相互之间就彼此隔离开了. 来看下面的一个案例.

张三开发的js脚本aaa.js

let module1 = (function(){
let name = "张三"
let flag = true

function add() {
console.log("这是aaa里面的add方法")
}

let p = {
flag: flag,
name: name
}

return p
})()

张三定义了两个变量: flag和name, 并最终作为一个对象返回了

李四开发的脚本bbb.js

let module2 = (function(){
let flag = false
let use = "我是use"

function enable() {
console.log("bbb里面的enable函数")
}

let phone = {
flag: flag,
use: use
}
return phone;
})()

李四在脚本中也定义了两个变量 flag和use. 并最终作为一个对象返回

张三, 李四都定义了一个相同的变量flag

最终,项目完成了, 要将二者合并, 我们将其合并到总页面

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="aaa.js"></script>
<script src="bbb.js"></script>
在这里就相当于导入
<script>
console.log(module1.flag)
console.log(module2.flag)
</script>
</head>
<body>
</body>
</html>

我们在引入变量的时候, 分别使用别名, 两个就不会冲突了.

之所以能够让两个js脚本相互隔离, 是闭包的在起作用. 闭包就是一个简单地模块化思维的雏形. 他将每个人开发的东西进行了模块化封装.

二. ES6包的封装思想

随着项目的越来越复杂, 也形成了很多包, 用来封装模块. 常用的用commonJs, ES6等

下面, 我们重点来看看ES6是如何进行模块化封装的.

其实上面的案例, 我们可以理解为将闭包里面定义的内容进行导出, 然后在在文件中进行导入. ES6中也是同样的导入导出的思想

使用ES定义文件有三步

第一步: 引入js到主文件
第二步: 导出
第三步: 导入

1. 引入js文件

我们已经将文件定义好了, 那么如何引入呢?

在ES6中,引入的js文件, 需要将其type设置为module, 这样告诉浏览器, 我是用的是ES6的语法.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 1. 第一步: 引入js类的时候, 标记为type="module" -->
<script src="main.js" type="module"></script>
</head>
<body>

</body>
</html>

注意: 这里一定要写type=module, 否则浏览器不知道这是ES6的语法

2. 导出

1) 导出变量

在ES6中,导出文件使用export {变量1, 变量2, 变量3......}

导出变量的方式有两种:

第一种: 定义变量, 直接导出

第一种: export let name;

例:

// 导出变量---方法一
export let addr = "北京市"

第二种; 先定义变量, 后导出

第二种:
let name....;
export{name}

例:

let name = "张三"
let age = 14
let sex = "男"

function run() {
console.log(name, "在跑步")
}
// 导出变量---方法二
export {name, age, sex}

2) 导出函数

导出函数也有两种方法

第一种; 先定义, 在导出

第二种; 直接定义 + 导出

let name = "张三"
let age = 14
let sex = "男"

function run() {
console.log(name, "在跑步")
}

// 导出函数---方法一
export {run} 

//导出函数--方法二
export function eat() {
console.log(name, "在吃饭")
}

3) 导出对象

导出对象, 通常是先定义对象, 然后将其导出.

class Person {
type="白种人"
run() {
return "跑起来"
}
}

// 导出对象
export {Person}

4) 导出默认值

导出默认值的含义是, 将这个属性设置为默认的导出, 然后可以在导入的位置为其设置别名

// 导出默认方法
let def = "默认的方法"
export default def

3. 导入　　

导出的方法主要有两种, 那么导入呢?

导入的语法是:

import {变量1, 变量2} from "文件path"

1) 按照变量名导入

导入单个变量

比如刚刚导出的aaa

// 导出变量---方法一
export let addr = "北京市"

我们如何导入呢?

import {addr} from "./aaa.js"

多个变量导入

比如我们导出的如下代码

let name = "张三"
let age = 14
let sex = "男"

function run() {
console.log(name, "在跑步")
}
// 导出变量---方法二
export {name, age, sex}

如何导入呢?

import {name, age, sex} from "./aaa.js"

导入函数

比如下面导出的函数, 我们如何导入呢?

let name = "张三"
let age = 14
let sex = "男"

function run() {
console.log(name, "在跑步")
}

// 导出函数---方法一
export {run}

//导出函数--方法二
export function eat() {
console.log(name, "在吃饭")
}

导入函数使用

import {run, eat} from "./aaa.js"

我们发现导入方法和变量一样的. 调用的时候需要run(), eat(). 这样就会执行函数体了

导入对象

class Person {
type="白种人"
run() {
return "跑起来"
}
}

// 导出对象
export {Person}

上面导入了一个对象, 如何导入对象呢?

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

可以这样使用
let p = new Person()

2) 导入全部

如果有很多变量, 就可以使用导入全部

// 导入方法二
import * as bbb from "./bbb.js"

导入全部的时候, 我们会为其设置一个别名, 然后通过别名.变量获取变量值

3) 导入默认方法

我们导出的默认方法, 如何进行导入呢?

// 导出默认方法
let def = "默认的方法"
export default def

默认导出通常只能有一个, 所以, 我们可以给默认导出命一个名字

// 导入方法三
import defData from './aaa.js'

//打印输出默认导出的变量
console.log(defData)

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

9.Vue之webpack打包基础---模块化思维

一、什么是模块化思维呢?

二. ES6包的封装思想

1. 引入js文件

2. 导出

1) 导出变量

导出变量的方式有两种:

第一种: 定义变量, 直接导出

第二种; 先定义变量, 后导出

2) 导出函数

3) 导出对象

4) 导出默认值

3. 导入

1) 按照变量名导入

导入单个变量

多个变量导入

导入函数

导入对象

2) 导入全部

3) 导入默认方法

3. 导入　　