9.Vue之webpack打包基礎---模組化思維

盛開的太陽發表於2021-03-03
VueWeb

主要內容:

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)

 

 

相關文章