JS 模塊化- 05 ES Module & 4 大規範總結

来源:https://www.cnblogs.com/youyacoder/archive/2022/09/28/16738533.html
-Advertisement-
Play Games

1 ES Module 規範 ES Module 是目前使用較多的模塊化規範,在 Vue、React 中大量使用,大家應該非常熟悉。TypeScript 中的模塊化與 ES 類似。 1.1 導出模塊 導出模塊有兩種方式:按需導出 和 預設導出。 按需導出是使用 export 關鍵字,將需要導出的成員 ...


1 ES Module 規範

ES Module 是目前使用較多的模塊化規範,在 Vue、React 中大量使用,大家應該非常熟悉。TypeScript 中的模塊化與 ES 類似。

1.1 導出模塊

導出模塊有兩種方式:按需導出預設導出

按需導出是使用 export 關鍵字,將需要導出的成員(變數、函數、對象等)依次導出:

export const xxx = ''
export const xxx = () => {}

一個模塊中可以有多個按需導出,但只能有一個預設導出。假設預設導出 A 模塊,當 B 模塊直接導入模塊 A 時,其導入的值就是模塊 A 預設導出的值。

export default {}

1.2 導入模塊

導入按需導出的模塊:

import { xxx } from 'xxx'

上面語法中,花括弧 {} 中的內容必須與導出的名稱一致。

如果按需導出的成員較多,可以使用 as 一次性導入:

import * as xxx from 'xxx'

導入預設導出的模塊:

import xxx from 'xxx'

也可以直接導入一個模塊,並直接執行該模塊的代碼:

import 'xxxxx'

2 使用 Webpack 編譯 ES Module

2.1 初始化項目

創建 modules 目錄,裡面存放兩個模塊 module1.jsmodule2.js。入口文件與 modules 目錄同級,名為 index.js。文件和目錄結構如下:

05_ESM/
  |- modules/
    |- module1.js
    |- module2.js
  |- index.js
  |- index.html

2.2 實現兩個模塊

module1.js 使用按需導出變數 str1 和函數 fun1,預設導出 user 對象:

console.log('in module1')

export const str1 = 'hello module1'

export const fun1 = (msg) => {
  return `module1:${msg}`
}


const user = {
  name: 'zhangsan',
  age: 30
}

export default user

module2.js 使用預設導出,導出一個對象,這個對象包括屬性 str2 和方法 fun2

console.log('in module2')

const str2 = 'hello module2'

const fun2 = (msg) => {
  return `module2:${msg}`
}

export default {
  str2,
  fun2
}

2.3 實現入口文件

在入口文件 index.js 中導入兩個模塊。由於 module1.js 是按需導出,故導入時需要使用 {}module2.js 是預設導出,故此處可以直接導入:

import { str1, fun1 } from './modules/module1'
import m2 from './modules/module2'

console.log(str1)
console.log(fun1('程式員優雅哥'))
console.log(m2.str2)
console.log(m2.fun2('youyacoder'))

2.4 入口 HTML

創建 index.html 文件,使用 script 標簽導入 index.js

<script src="./index.js"></script>

在瀏覽器中訪問 index.html 文件,控制台會提示如下錯誤:

Uncaught SyntaxError: Cannot use import statement outside a module (at index.js:1:1)

這是由於瀏覽器不認識 ESM 語法。可以使用 babel 將 ES6 語法編譯為 ES5 的語法,然後使用 browserify 進行打包;也可以使用 webpack 打包。此處我使用 webpack 5

2.5 使用 Webpack 打包

使用 npmyarn 初始化項目:

yarn init -y

安裝 webpackwebpack-cli 為開發依賴:

yarn add webpack webpack-cli -D 

使用 webpack 打包:

npx webpack ./index.js -o ./dist/ --mode development

上面的打包命令直接在命令中配置參數,省略了額外的配置的文件。該命令指定了打包的入口文件為:index.js;輸出的目錄為 dist 目錄,打包模式為 development。關於 webpack 5 的使用,有興趣的可以看優雅哥的 webpack 5 系列文章。

執行完打包命令後,會生成 dist 目錄,並且在該目錄中有個 main.js 文件。

index.html 中刪除之前引入的 index.js,替換為 dist/main.js

<script src="./dist/main.js"></script>

重新在瀏覽器中訪問 index.html, 控制台輸出如下:

image-20220926223738435

3 ES Module 總結

導出模塊:

  • 預設導出:export default xxx
  • 按需導出 export const xxx

導入模塊:

  • 預設導入: import xxx from 'xxx'

  • 按需導入 import { xxx } from 'xxx'

4 JS 模塊化 4 大規範總結

前面優雅哥依次寫了模塊化的發展史,模塊化的規範(可進主頁查看每個規範詳細版本),現進行一個大彙總方便大家查閱和總結:

01- 模塊化前傳

02 - Common JS 規範

03 - AMD 規範(Require JS 實現)

04 - CMD 規範 (Sea JS 實現)

05 - ESM 規範

模塊化相關 demo 源碼可以 github 搜索關鍵詞 js-module-demo 或聯繫 程式員優雅哥 獲取。

image

源碼目錄如下:

js-module-demo/
|- 01_Histry/			模塊化發展史
|- 02_CommonJS/		CommonJS 規範
|- 03_AMD/				ADM 規範
|- 04_CMD/				CMD 規範
|- 05_ESM/				ESM 規範

各個模塊化規範有相似之處,也有差異,模塊定義與模塊載入的語法如下:

4.1 Common JS 規範

定義模塊的語法:

// 暴露函數
module.exports = function () {}

// 暴露對象
module.exports = {
  xxx: () => {}
}

exports.xxx = {}

exports.xxx = function() {}

載入模塊的語法:

const xxx = require('xxxx')

4.2 AMD 規範

定義模塊的語法:

define(id?, dependencies?, factory)

載入模塊的語法:

require([module], callback)

4.3 CMD 規範

定義模塊的語法:

// 定義模塊
define(function(require, exports, module) {
	
	// 使用 exports 導出模塊
	exports.xxx = xxx
	
	//也可以使用 return 導出模塊
	// return xxx
})

載入模塊的語法:

// 同步載入模塊
const m1 = require('../xxx')

// 非同步載入模塊
require.async('../xxx', function (m2) {
})

4.4 ESM 規範

導出模塊:

// 按需導出
export const xxx = ''
export const xxx = () => {}

// 預設導出
export default xxx

導入模塊:

import { xxx, yyy } from 'xxx'
import * as xxx from 'xxx'
import xxx from 'xxx'
import 'xxx'

感謝你閱讀本文,如果本文給了你一點點幫助或者啟發,還請三連支持一下,點贊、關註、收藏,作者會持續與大家分享更多乾貨


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

-Advertisement-
Play Games
更多相關文章
  • 眾所周知,在開發蘋果應用時需要使用簽名(證書)才能進行打包安裝蘋果IPA,作為剛接觸ios開發的同學,只是學習ios app開發內測,並沒有上架appstore需求,對於蘋果開發者賬號認證需要支付688,真的是極大的浪費,使用appuploader,只需要註冊蘋果普通的賬號,不需要688認證,就可以 ...
  • AR技術的落地應用,推動著電商領域的不斷升級,通過增強現實為用戶帶來了虛擬與現實結合的AR購物體驗。如AR試衣、AR試鞋、AR試妝等功能的出現讓用戶在手機上就能體驗產品的佩戴效果,可以讓用戶更直觀、更真實的瞭解產品信息,提升消費者的購物愉悅感,幫助電商應用提高購物轉化率。華為AR Engine也為A ...
  • 書寫語法 輸出語句 變數 數據類型 運算符 == 與 區別: ==: 1、判斷類型是否一樣,如果不一樣,則進行類型轉換 2、再去比較其值 : 1、判斷類型是否一樣,如果不一樣,直接返回false 2、再去比較其值 類型轉換: * 其他類型轉為number:(一般使用parseInt) 1、strin ...
  • #背景 不知道webpack插件是怎麼回事,除了官方的文檔外,還有一個很直觀的方式,就是看源碼。 看源碼是一個挖寶的行動,也是一次冒險,我們可以找一些代碼量不是很大的源碼 比如webpack插件,我們就可以通過BannerPlugin源碼,來看下官方是如何實現一個插件的 希望對各位同學有所幫助,必要 ...
  • 我的Vue之旅。使用 Vue 3.1 + TypeScript + Router + Tailwind.css 構建手機底部導航欄、仿B站的登錄、註冊頁面。 ...
  • 一、使用原生js實現拖拽 點擊打開視頻講解更加詳細 <html lang="en"> <head> <meta charset="UTF-8" /> <title>Lazyload</title> <style> .drag { background-color: skyblue; position ...
  • 所有對象都有隱式原型; 原型也是對象,也有隱式原型. function User() {}console.log(User.prototype); function User() {}var u = new User();console.log(u.hasOwnProperty); Object.p ...
  • 在純靜態網站里,有時候會動態更新某個區域往會選擇 Pjax(swup、barba.js)去處理,他們都是使用 ajax 和 pushState 通過真正的永久鏈接,頁面標題和後退按鈕提供快速瀏覽體驗。 但是實際使用中可能會遇到不同頁面可能會需要載入不同插件處理,有些人可能會全量選擇載入,這樣會導致加 ...
一周排行
    -Advertisement-
    Play Games
  • 在C#中使用SQL Server實現事務的ACID(原子性、一致性、隔離性、持久性)屬性和使用資料庫鎖(悲觀鎖和樂觀鎖)時,你可以通過ADO.NET的SqlConnection和SqlTransaction類來實現。下麵是一些示例和概念說明。 實現ACID事務 ACID屬性是事務處理的四個基本特征, ...
  • 我們在《SqlSugar開發框架》中,Winform界面開發部分往往也用到了自定義的用戶控制項,對應一些特殊的界面或者常用到的一些局部界面內容,我們可以使用自定義的用戶控制項來提高界面的統一性,同時也增強了使用的便利性。如我們Winform界面中用到的分頁控制項、附件顯示內容、以及一些公司、部門、菜單的下... ...
  • 在本篇教程中,我們學習瞭如何在 Taurus.MVC WebMVC 中進行數據綁定操作。我們還學習瞭如何使用 ${屬性名稱} CMS 語法來綁定頁面上的元素與 Model 中的屬性。通過這些步驟,我們成功實現了一個簡單的數據綁定示例。 ...
  • 是在MVVM中用來傳遞消息的一種方式。它是在MVVMLight框架中提供的一個實現了IMessenger介面的類,可以用來在ViewModel之間、ViewModel和View之間傳遞消息。 Send 接受一個泛型參數,表示要發送的消息內容。 Register 方法用於註冊某個對象接收消息。 pub ...
  • 概述:在WPF中,通過EventHandler可實現基礎和高級的UI更新方式。基礎用法涉及在類中定義事件,併在UI中訂閱以執行更新操作。高級用法藉助Dispatcher類,確保在非UI線程上執行操作後,通過UI線程更新界面。這兩種方法提供了靈活而可靠的UI更新機制。 在WPF(Windows Pre ...
  • 概述:本文介紹了在C#程式開發中如何利用自定義擴展方法測量代碼執行時間。通過使用簡單的Action委托,開發者可以輕鬆獲取代碼塊的執行時間,幫助優化性能、驗證演算法效率以及監控系統性能。這種通用方法提供了一種便捷而有效的方式,有助於提高開發效率和代碼質量。 在軟體開發中,瞭解代碼執行時間是優化程式性能 ...
  • 概述:Cron表達式是一種強大的定時任務調度工具,通過配置不同欄位實現靈活的時間規定。在.NET中,Quartz庫提供了簡便的方式配置Cron表達式,實現精準的定時任務調度。這種靈活性和可擴展性使得開發者能夠根據需求輕鬆地制定和管理定時任務,例如每天備份系統日誌或其他重要操作。 Cron表達式詳解 ...
  • 概述:.NET提供多種定時器,如System.Windows.Forms.Timer適用於UI,System.Web.UI.Timer用於Web,System.Diagnostics.Timer用於性能監控,System.Threading.Timer和System.Timers.Timer用於一般 ...
  • 問題背景 有同事聯繫我說,在生產環境上,訪問不了我負責的common服務,然後我去檢查common服務的health endpoint, 沒問題,然後我問了下異常,timeout導致的System.OperationCanceledException。那大概率是客戶端的問題,會不會是埠耗盡,用ne ...
  • 前言: 在本篇 Taurus.MVC WebMVC 入門開發教程的第四篇文章中, 我們將學習如何實現數據列表的綁定,通過使用 List<Model> 來展示多個數據項。 我們將繼續使用 Taurus.Mvc 命名空間,同時探討如何在視圖中綁定並顯示一個 Model 列表。 步驟1:創建 Model ...