第129篇:JS模塊化開發

来源:https://www.cnblogs.com/FatTiger4399/archive/2023/03/13/17213072.html
-Advertisement-
Play Games

好家伙,本篇為《JS高級程式設計》第二十六章“模塊”學習筆記 JS開發會遇到代碼量大和廣泛使用第三方庫的問題。 解決這個問題的方案通 常需要把代碼拆分成很多部分,然後再通過某種方式將它們連接起來。 若代碼量較大,我們使用模塊化開發的模式,也能夠使代碼容易維護 我們需要模塊 1.模塊模式 把邏輯分塊, ...


好家伙,本篇為《JS高級程式設計》第二十六章“模塊”學習筆記

 

JS開發會遇到代碼量大和廣泛使用第三方庫的問題。

解決這個問題的方案通 常需要把代碼拆分成很多部分,然後再通過某種方式將它們連接起來。

若代碼量較大,我們使用模塊化開發的模式,也能夠使代碼容易維護

我們需要模塊

 

1.模塊模式

把邏輯分塊,各自封裝,相互獨立,每個塊自行決定對外暴露什麼,同時自行決定引入執行哪 些外部代碼。

這就是模塊模式的思想

 

 

2.es6前的模塊載入器

2.1.commonJS規範

註意了,這不是某個包或者某個方法,而是某種規範

CommonJS 規範概述了同步聲明依賴的模塊定義。

//moduleA.js
module.exports = 'foo'


//moduleB.js
var moduleA = require('./moduleA');
console.log(moduleA);

 

 

CommonJS 依賴幾個全局屬性如 require 和 module.exports。

如果想在瀏覽器中使用 CommonJS 模塊,就需要與其非原生的模塊語法之間構築“橋梁”。

模塊級代碼與瀏覽器運行時之間也需要某種“屏 障”,因為沒有封裝的 CommonJS 代碼在瀏覽器中執行會創建全局變數。 

全局變數出現了,那麼就違背了模塊模式的"各自封裝,相互獨立"

 

 

 

2.2.AMD非同步模塊定義

CommonJS 以伺服器端為目標環境,能夠一次性把所有模塊都載入到記憶體,

而非同步模塊定義的模塊定義系統則以瀏覽器為目標執行環境,這需要考慮網路延遲的 問題。

AMD 的一般策略是讓模塊聲明自己的依賴,而運行在瀏覽器中的模塊系統會按需獲取依賴,並 在依賴載入完成後立即執行依賴它們的模塊。

AMD 模塊實現的核心是用函數包裝模塊定義。這樣可以防止聲明全局變數,並允許載入器庫控制 何時載入模塊。

// ID 為'moduleA'的模塊定義。moduleA 依賴 moduleB,
// moduleB 會非同步載入
define('moduleA', ['moduleB'], function(moduleB) { 
 return { 
 stuff: moduleB.doStuff(); 
 }; 
}); 

 

CommonJS模塊和AMD模塊之間的衝突主要是在模塊載入方面。

CommonJS模塊是同步載入的,而AMD模塊是非同步載入的,這使得CommonJS模塊和AMD模塊無法很好地運行在一起。

此外,CommonJS模塊和AMD模塊的模塊定義語法也不同,這也會對它們之間的衝突產生影響。

 

 

 

3.ES6模塊

ES6 模塊系統是集 AMD 和 CommonJS 之大成者。

 

3.1.外部文件引入

 

tips:擴展名為 .mjs 的文件是 JavaScript 源代碼文件,在 Node.js 應用程式中用作 ECMA 模塊(ECMAScript 模塊)。

Node.js 的 natvie 模塊系統是 CommonJS,用於將代碼拆分到不同的文件中,以保持 JS 代碼的組織性。

MJS 是 Node.js 用來識別模塊是 CommonJS 還是 ES6 的唯一方法。 

外部文件引入示例:

//moduleA.mjs
const foo = "foo";
export {foo};


//moduleB.mjs
import { foo } from "./moduleA.mjs"
console.log(foo);

 

 

3.2.網頁嵌入

<script type="module" src="moduleA.js"></script>

 

 

4.課後習題

與commonJS規範和AMD規範相比,ES6模塊有什麼優點?

答:  1.更安全,因為ES6模塊有自己獨立的作用域,避免了變數污染。

  2.更容易維護,因為模塊可以明確的規定輸入和輸出,便於模塊的重用和維護。

  3.更簡潔,ES6模塊的語法更加簡潔易懂,模塊的載入更加高效。

 

2.與ES6模塊相比,commonJS規範和AMD規範有什麼缺點?

答:  CommonJS規範的缺點是它只能在伺服器端運行,而不能在瀏覽器端運行。

  AMD規範的缺點是它增加了很多的書寫工作,而且不能很好的處理迴圈依賴,代碼複雜

 


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

-Advertisement-
Play Games
更多相關文章
  • 1. ip命令 1.1. 摘要 ip是iproute2軟體包裡面的一個強大的網路配置工具,它能夠替代一些傳統的網路管理工具。例如:ifconfig、route等。這個手冊將分章節介紹ip命令及其選項。 1.2. ip命令的語法 ip命令的用法如下: [root@node01 ~]# ip Usage ...
  • 1 許可權基本介紹 drwxr-xr-x. 3 laffy snow 4096 3月 9 16:17 test 第1位:文件類型(d,-,l,c,b) d 文件夾 - 普通文件 l 軟鏈接 c 字元設備文件,如滑鼠鍵盤 b 塊設備,如硬碟 第2-4位:確定文件所有者對文件的許可權 第5-7位:確定文件所 ...
  • 在 WebAssembly 中使用 Rust 編寫 eBPF 程式併發布 OCI 鏡像 作者:於桐,鄭昱笙 eBPF(extended Berkeley Packet Filter)是一種高性能的內核虛擬機,可以運行在內核空間中,以收集系統和網路信息。隨著電腦技術的不斷發展,eBPF 的功能日益強 ...
  • 摘要:行存表示了一種數據的存儲方式,是最傳統的一種存儲方式。 本文分享自華為雲社區《【玩轉PB級數倉GaussDB(DWS)】行列存對比的一些事》,作者:sevenjiang。 行存表示了一種數據的存儲方式,是最傳統的一種存儲方式。對於GaussDB(DWS)來說可以認為其表示存儲引擎的基礎實現,在 ...
  • 摘要:集群運行過程中,有時候會執行併發量比較高的業務場景,一些資料庫沒有為這種高併發作業配置合適的參數,會導致作業大量報錯,這篇文章讓你玩轉併發作業。 本文分享自華為雲社區《【玩轉PB級數倉GaussDB(DWS)】線上運維 - 高併發導致資源類報錯分析解決》,作者:323老四。 集群運行過程中,有 ...
  • 資料庫的基本概念 資料庫(database)是用來組織、存儲和管理數據的倉庫。對資料庫中的數據可以進行增刪改查操作。市面上常見的資料庫有: MySQL(使用最廣泛。流行度最高的開源免費資料庫 Community+Enterprise) Oracle(收費) SQL Server(收費) Mongod ...
  • 1.新增特性 2.穩定性提升 3.其他調整 4.bug修複 5.GreatSQL VS MySQL社區版 6.GreatSQL Release Notes Changes in GreatSQL 8.0.25-17(2023-3-13) GreatSQL 8.0.25-17 是一個微小改進版本,主要 ...
  • 引言 在實際的業務統計需求中 有時往往需要對區間進行分組統計查詢,如分數區間,工資區間查詢統計等!mysql中可以利用elt函數來實現此類需求! 接下來看如下時間業務需求: 1:現在要進行統計,小於100的,100~500的,500~1000的,1000以上的,這各個區間的id數 mysql> se ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...