前端模塊化

来源:https://www.cnblogs.com/zhouchenkai/archive/2023/09/18/17707232.html
-Advertisement-
Play Games

今天在維護優化公司中台項目時，發現路由的文件配置非常多非常亂，只要只中大型項目，都會進入很多的路由頁面，規範一點的公司還會吧路由進行模塊化導入，但是依然存在很多文件夾的和手動導入的問題。 於是我想到了我之前使用vuex時進行的模塊化自動導入js文件，能不能使用到自動導入.vue文件中去，答案是可以！ ...


 

1.為什麼需要模塊化

隨著前端應用的日益複雜，我們的項目代碼已經逐漸膨脹到了不得不花大量時間去管理的程度了。而模塊化就是一種最主流的代碼組織方式，它通過把複雜的代碼按照功能的不同劃分為不同的模塊單獨維護，從而提高開發效率、降低維護成本。模塊化可以使你能夠更容易地重用代碼。你可以創建一個模塊來完成一個特定的功能，然後在多個地方重用這個模塊，而不是複製和粘貼代碼。

2.沒有工具和規範時模塊化的演進歷史

2.1文件劃分

最早期的模塊化是通過文件劃分的方式，將不同的文件劃分為不同的模塊，一個文件就對應一個模塊，如下圖就有2個模塊a和b。

想要使用模塊的時候就用script標簽引入該模塊

<script src="module-a.js"></script>
<script src="module-b.js"></script>

這種方式存在的問題

  1. 難以管理模塊之間的依賴關係
  2. 多個模塊的變數名會出現衝突
  3. 外部可以修改模塊的內容

2.2命名空間

為瞭解決以上出現的問題，又有了一種新的模塊化方式，便是命名空間，通過將每個模塊包裹成一個全局對象來實現，這樣的確解決了命名衝突問題，但是仍然存在外部可以修改模塊內部內容的問題

使用模塊

<script src="module-a.js"></script>
<script src="module-b.js"></script>
<script>
moduleA.method1()
moduleB.method1()
//模塊成員可以被修改
moduleA.name = 'foo‘
</script>

2.3立即執行函數

用立即執行函數實現了私有成員的方式，外部無法修改內部的變數，通過掛載到window對象上來完成模塊化的暴露

 

3.模塊化規範

前面所提到的幾種早期模塊化方式都有一個問題，就是必須通過script腳本標簽來使用模塊，但是如果隨著項目規模的增大，忘記加入script標簽或者引入了已經刪除的模塊，就會出現一些問題。也就是說，最好要把引入模塊化這個工作放到js代碼中去完成，而不只是在html中引入

3.1 CommonJS

NodeJS里的CommonJS規範是一個很好的模塊化方式，CommonJS包含以下幾個特征

  1. 一個文件就是一個模塊
  2. 每個模塊都有單獨的作用域
  3. 通過 module.exports 導出成員
  4. 通過 require 函數載入模塊

特征中的第4個，require是同步的載入，在Node中只會在啟動的時候載入，執行的時候只是去使用，而到了瀏覽器端，每一次刷新頁面都會導致大量的同步模式請求出現，這就無法使用了。

3.2 AMD（Asynchronous Module Definition）

AMD（Asynchronous Module Definition）是 RequireJS 在推廣過程中對模塊定義的規範化產出,。由於不是JavaScript原生支持，使用AMD規範進行頁面開發需要用到對應的庫函數，也就是require.js。

AMD這個規範約定每一個模塊都必須通過 define 這個函數定義，預設可以接收兩個參數，也可以傳遞三個參數：

  1. 第一個參數是模塊的名字；
  2. 第二個參數是一個數組，用於聲明模塊依賴項；
  3. 第三個參數是一個函數，函數的參數與前面的依賴項一一對應，每一項分別為依賴項這個模塊導出的成員，這個函數的作用可以以理解為為當前的這個模塊提供一個私有的空間。如果需要在這個模塊當中向外部導出一些成員，可以通過 return 實現

 AMD也可以通過require方法來載入對應的模塊，require與define的區別是，require只是用來載入，而define是定義一個模塊

 

 

 案例

src
├── index.html
├── index.js
├── lib
│   └── require.js // 使用require.js 庫
└── modules
    ├── dataServe.js
    └── example.js
  • dataServe
// 導入example
define(['example'], function (example) {
    let msg = "data"
    function showMsg () {
        console.log(msg, example.getName());
    }
    return { showMsg }
})
  • example.js
define(function () {
    let name = "w"
    function getName () { return name }
    return { getName }
})
  • index.js
(function () {
    requirejs.config({
        paths: {
            example: './modules/example',
            dataServe: './modules/dataServe'
        }
    })

    requirejs(['dataServe'], function (d) {
        d.showMsg()
    })

})()
  • index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <script data-main="./index.js" src="lib/require.js"></script>
    </body>
</html>

問題：

  1. 使代碼複雜度提高
  2. 如果模塊劃分的過於細緻，同一個頁面的請求會過多，頁面效率低下

3.3 CMD+Sea.js

與CommonJS基本保持一致，但是後來也被require.js相容了

3.4 ES Module

ES Module是現在最常用的模塊化解決方案，仍然採用了與CommonJS相似的import和export來完成模塊的導入和導出

在html中，只需要在script標簽裡加入type="module"就可以導入模塊

<script type="module"> console.log('this is es module') </script>

與普通script標簽不同的地方是：

  1. es模塊會自動開啟嚴格模式，忽略掉use strict。
  2. es模塊都有單獨的作用域
  3. es模塊通過CORS方式請求，如果請求的資源不支持CORS會報跨域錯誤
  4. es模塊等於在腳本上加入defer屬性，讓腳本等同步內容載入完後非同步按順序執行
<script type="module">
    //es模塊會自動開啟嚴格模式
    console.log(this); //undefined
</script>
<script type="module">
    //es模塊都有單獨的作用域
    let a = 1
    console.log(a); //1
</script>
<script type="module">
    //es模塊都有單獨的作用域
    let a = 2
    console.log(a); //2
</script>

 

導出：使用export關鍵詞來完成導出

普通導出：

方式一 用{}包裹需要導出的變數，函數或者類，如果想要改名，可以在導出時用as來改

const name = "why";
const age = 18;

function sum(a, b) {
  return a + b;
}

class Person {
  constructor(name) {
    this.name = name;
  }
}

//3.統一導出時使用as關鍵字給變數起別名
export { name as bName, age, sum as bSum, Person };

方式二 export直接放在變數，函數，類聲明之前

export const name = "why";
export const age = 18;

export function sum(a, b) {
  return a + b;
}

export class Person {
  constructor(name) {
    this.name = name;
  }
}

預設導出

方式一：不使用{}包裹變數，函數，類

 

const height = 1.88;

export default height;

 

方式二：使用{}包裹變數，函數，類，但必須通過as改變名字為default

 

const height = 1.88;

export {
  height as default
};

 

 

導入：使用import關鍵詞來完成導入

方式一：分別導入，可以通過as來起別名

import {
  name as barName,
  age,
  sum,
  Person as BarPerson,
} from "./bar.js";

方式二：整體導入，通過as來起別名，然後分別使用

import * as baz from "./baz.js";
console.log(baz.name, baz.age);

baz.sum(1, 2);

const person2 = new baz.Person("lily");
console.log(person2);

方式三：導入預設導出的變數，不加{}包裹

import height from "./demo.js";
console.log(height);

 

導入導出註意點：

  1. ES Module導出的變數並非變數的值本身，而是一個引用，所以導入的變數的值會受原模塊的影響
  2. 導入的變數是只讀的，不能進行賦值更改
  3. import非同步實現，會有一個獨立的模塊依賴的解析階段
  4. 不能與CommonJS相似地在導入路徑中省略.js（可通過打包配置改善）

舉例：導入的變數的值會受原模塊的影響

 在導入中使用導出：把import from改成export from

常用於集中導出，方便後續導入資源

 

 

與CommonJS的互動 

在node環境下，雖說一般都是CommonJS規範的模塊化，但是node也做了相容可以讓ES Module正常使用，只要把原來的.js文件改為.mjs就可以正常使用import語法了。import導入的時候還可以導入CommonJS的模塊，只是所有CommonJS模塊都會被當作預設導出的方式來導入。但是在CommonJS裡面，無法使用require去導入ES Module導出的內容，也就是在下麵的b.js裡面會報錯

  • a.mjs
import b from './b.js'

console.log(b.name); // 1234

export let a = 4

 

  • b.js 

 

 

const a = require('./a.mjs') // 報錯
module.exports = {
    name: '1234'
}

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一文詳解數據倉庫的物理細粒度備份恢復
    本文分享自華為雲社區《DTSE Tech Talk | 第43期：數倉數據可靠保證——物理細粒度備份恢復》，作者：華為雲社區精選。 大數據時代，數據對企業的重要性不言而喻，如果發生數據丟失或因為誤操作而造成數據丟失，將對企業的經營決策帶來不可估量的損失。本期《備份恢復全掌握，數倉數據更安全》的主題直 ...
  • 分散式系統的主鍵生成方案對比
    UUID（通用唯一識別碼）是由32個十六進位數組成的無序字元串，通過一定的演算法計算出來。為了保證其唯一性，UUID規範定義了包括網卡MAC地址、時間戳、名字空間（Namespace）、隨機或偽隨機數、時序等元素，以及從這些元素生成UUID的演算法。一般來說，演算法可以保證任何地方產生的任意一個UUID都... ...
  • GaussDB（for Redis）游戲實踐：玩家下線行為上報
    Redis是游戲資料庫重要選型之一，華為雲GaussDB(for Redis)能及時上報用戶下線行為，被廣泛應用於排行榜等多種業務場景。 ...
  • Ubuntu20.04安裝Postgres主從備份
    Ubuntu20.04安裝Postgres主從備份 一.查看可安裝的Postgres包 #列出相關的軟體包，這裡安裝的是14版本 apt list | grep -w postgresql-14 | tail -1 #下載Postgres apt install -y postgresql-14/f ...
  • 萬字長文教你實現華為雲IoT+OpenHarmony智能家居開發
    基於OpenHarmony和華為雲平臺打造的智能家居設備，分別為智能門鎖，儲物精靈 NFC版，儲物精靈Pro版三個設備。 ...
  • iOS16新特性：實時活動-在鎖屏界面實時更新APP消息
    之前在 《iOS16新特性:靈動島適配開發與到家業務場景結合的探索實踐》 里介紹了iOS16新的特性：實時更新（Live Activity）中靈動島的適配流程，但其實除了靈動島的展示樣式，Live Activity還有一種非常實用的應用場景，那就是鎖屏界面實時狀態更新： ...
  • 前端遠程調試方案 Chii 的使用經驗分享
    前端遠程調試方案 Chii 的使用經驗分享 Chii 是與 weinre 一樣的遠程調試工具 ，主要是將 web inspector 替換為最新的 chrome devtools frontend 監控列表頁面可以看到網站的標題鏈接，IP，useragent，可以快速定位調試頁面，監控頁信息完善，支 ...
  • 記錄--JavaScript 令人驚訝的一點：對於空數組every()方法返回true
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 JavaScript 語言的內核足夠大，導致我們很容易誤解它的某些部分是如何工作的。我最近重構了一些使用 every ()方法的代碼，並且發現我並不真正理解every()的邏輯。在我看來，我認為回調函數必須被調用並返回 true的時候ev ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類