你是怎麼理解ES6中Module的？使用場景？

来源:https://www.cnblogs.com/smileZAZ/p/18068900
-Advertisement-
Play Games

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 一、介紹 模塊，（Module），是能夠單獨命名並獨立地完成一定功能的程式語句的集合（即程式代碼和數據結構的集合體）。 兩個基本的特征：外部特征和內部特征 外部特征是指模塊跟外部環境聯繫的介面（即其他模塊或程式調用該模塊的方式，包括有輸入 ...


這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

一、介紹

模塊，（Module），是能夠單獨命名並獨立地完成一定功能的程式語句的集合（即程式代碼和數據結構的集合體）。

兩個基本的特征：外部特征和內部特征

  • 外部特征是指模塊跟外部環境聯繫的介面（即其他模塊或程式調用該模塊的方式，包括有輸入輸出參數、引用的全局變數）和模塊的功能

  • 內部特征是指模塊的內部環境具有的特點（即該模塊的局部數據和程式代碼）

為什麼需要模塊化

  • 代碼抽象
  • 代碼封裝
  • 代碼復用
  • 依賴管理

如果沒有模塊化，我們代碼會怎樣？

  • 變數和方法不容易維護，容易污染全局作用域
  • 載入資源的方式通過script標簽從上到下。
  • 依賴的環境主觀邏輯偏重，代碼較多就會比較複雜。
  • 大型項目資源難以維護，特別是多人合作的情況下，資源的引入會讓人奔潰

因此，需要一種將JavaScript程式模塊化的機制，如

  • CommonJs (典型代表：node.js早期)
  • AMD (典型代表：require.js)
  • CMD (典型代表：sea.js)

AMD

Asynchronous ModuleDefinition（AMD），非同步模塊定義，採用非同步方式載入模塊。所有依賴模塊的語句，都定義在一個回調函數中，等到模塊載入完成之後，這個回調函數才會運行

代表庫為require.js

/** main.js 入口文件/主模塊 **/
// 首先用config()指定各模塊路徑和引用名
require.config({
  baseUrl: "js/lib",
  paths: {
    "jquery": "jquery.min",  //實際路徑為js/lib/jquery.min.js
    "underscore": "underscore.min",
  }
});
// 執行基本操作
require(["jquery","underscore"],function($,_){
  // some code here
});

CommonJs

CommonJS 是一套 Javascript 模塊規範，用於服務端

// a.js
module.exports={ foo , bar}

// b.js
const { foo,bar } = require('./a.js')

其有如下特點：

  • 所有代碼都運行在模塊作用域，不會污染全局作用域
  • 模塊是同步載入的，即只有載入完成，才能執行後面的操作
  • 模塊在首次執行後就會緩存，再次載入只返回緩存結果，如果想要再次執行，可清除緩存
  • require返回的值是被輸出的值的拷貝，模塊內部的變化也不會影響這個值

既然存在了AMD以及CommonJs機制，ES6的Module又有什麼不一樣？

ES6 在語言標準的層面上，實現了Module，即模塊功能，完全可以取代 CommonJS和 AMD規範，成為瀏覽器和伺服器通用的模塊解決方案

CommonJS 和AMD 模塊，都只能在運行時確定這些東西。比如，CommonJS模塊就是對象，輸入時必須查找對象屬性

// CommonJS模塊
let { stat, exists, readfile } = require('fs');

// 等同於
let _fs = require('fs');
let stat = _fs.stat;
let exists = _fs.exists;
let readfile = _fs.readfile;

ES6設計思想是儘量的靜態化，使得編譯時就能確定模塊的依賴關係，以及輸入和輸出的變數

// ES6模塊
import { stat, exists, readFile } from 'fs';

述代碼，只載入3個方法，其他方法不載入，即 ES6 可以在編譯時就完成模塊載入

由於編譯載入，使得靜態分析成為可能。包括現在流行的typeScript也是依靠靜態分析實現功能

二、使用

ES6模塊內部自動採用了嚴格模式，這裡就不展開嚴格模式的限制，畢竟這是ES5之前就已經規定好

模塊功能主要由兩個命令構成：

  • export：用於規定模塊的對外介面
  • import：用於輸入其他模塊提供的功能

export

一個模塊就是一個獨立的文件，該文件內部的所有變數，外部無法獲取。如果你希望外部能夠讀取模塊內部的某個變數，就必須使用export關鍵字輸出該變數

// profile.js
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;

或 
// 建議使用下麵寫法，這樣能瞬間確定輸出了哪些變數
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;

export { firstName, lastName, year };

輸出函數或類

export function multiply(x, y) {
  return x * y;
};

通過as可以進行輸出變數的重命名

function v1() { ... }
function v2() { ... }

export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

import

使用export命令定義了模塊的對外介面以後，其他 JS 文件就可以通過import命令載入這個模塊

// main.js
import { firstName, lastName, year } from './profile.js';

function setName(element) {
  element.textContent = firstName + ' ' + lastName;
}

同樣如果想要輸入變數起別名，通過as關鍵字

import { lastName as surname } from './profile.js';

當載入整個模塊的時候，需要用到星號*

// circle.js
export function area(radius) {
  return Math.PI * radius * radius;
}

export function circumference(radius) {
  return 2 * Math.PI * radius;
}

// main.js
import * as circle from './circle';
console.log(circle)   // {area:area,circumference:circumference}

輸入的變數都是只讀的，不允許修改，但是如果是對象，允許修改屬性

import {a} from './xxx.js'

a.foo = 'hello'; // 合法操作
a = {}; // Syntax Error : 'a' is read-only;

不過建議即使能修改，但我們不建議。因為修改之後，我們很難差錯

import後面我們常接著from關鍵字，from指定模塊文件的位置，可以是相對路徑，也可以是絕對路徑

import { a } from './a';

如果只有一個模塊名，需要有配置文件，告訴引擎模塊的位置

import { myMethod } from 'util';

在編譯階段，import會提升到整個模塊的頭部，首先執行

foo();

import { foo } from 'my_module';

多次重覆執行同樣的導入，只會執行一次

import 'lodash';
import 'lodash';

上面的情況，大家都能看到用戶在導入模塊的時候，需要知道載入的變數名和函數，否則無法載入

如果不需要知道變數名或函數就完成載入，就要用到export default命令，為模塊指定預設輸出

// export-default.js
export default function () {
    console.log('foo');
}

載入該模塊的時候，import命令可以為該函數指定任意名字

// import-default.js
import customName from './export-default';
customName(); // 'foo'

動態載入

允許您僅在需要時動態載入模塊，而不必預先載入所有模塊，這存在明顯的性能優勢

這個新功能允許您將import()作為函數調用，將其作為參數傳遞給模塊的路徑。 它返回一個 promise，它用一個模塊對象來實現，讓你可以訪問該對象的導出

import('/modules/myModule.mjs')
  .then((module) => {
    // Do something with the module.
  });

複合寫法

如果在一個模塊之中，先輸入後輸出同一個模塊，import語句可以與export語句寫在一起

export { foo, bar } from 'my_module';

// 可以簡單理解為
import { foo, bar } from 'my_module';
export { foo, bar };

同理能夠搭配as、*搭配使用

三、使用場景

如今，ES6模塊化已經深入我們日常項目開發中，像vue、react項目搭建項目，組件化開發處處可見，其也是依賴模塊化實現

vue組件

<template>
  <div class="App">
      組件化開發 ---- 模塊化
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

react組件

function App() {
  return (
    <div className="App">
		組件化開發 ---- 模塊化
    </div>
  );
}

export default App;

包括完成一些複雜應用的時候，我們也可以拆分成各個模塊

參考文獻

  • https://macsalvation.net/the-history-of-js-module/
  • https://es6.ruanyifeng.com/#docs/module

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

-Advertisement-
Play Games
更多相關文章
  • 使用LabVIEW打開預設應用程式中的文檔(PDF，Word，Excel，Html）
    Prometheus是一個開源的監控和告警工具包，其常用的組件主要包括以下幾個部分： Prometheus Server 功能：Prometheus Server是Prometheus的核心組件，負責定時從被監控組件（如Kubernetes、Docker、主機等）中拉取（pull）數據，並將其存儲在 ...
  • FreeRTOS教程2 任務管理
    本文主要學習FreeRTOS任務管理的相關知識，包括FreeRTOS創建/刪除任務、任務狀態、任務優先順序、延時函數、空閑任務和任務調度方法等知識 ...
  • Windows從零安裝WordPress
    Windows從零安裝WordPress 在Linux中，可以用Linux運維工具配合docker很便捷的安裝並配置MySQL、nginx、php、WordPress，但是Windows伺服器中，我還沒有發現類似的面板，就嘗試學慣用最原始的方法進行安裝。 教程環境：Windows Server 20 ...
  • MySQL實戰：解密樂觀併發控制，確保數據操作不衝突
    概述：樂觀併發控制是處理數據訪問併發的一種策略，通過在更新前檢查版本號或時間戳，確保數據在事務間保持一致性。在MySQL示例中，通過比對版本號，如果發現其他事務已更新數據，則拒絕當前事務的修改，避免潛在的併發衝突。這種機制提高了數據一致性，典型應用包括樂觀鎖的實現。 數據訪問併發是指多個事務或用戶同 ...
  • RDS for MariaDB“智能DBA助手”，讓運維效率嗖嗖地！
    RDS for MariaDB的實例狀態概覽功能，幫助客戶快速感知資料庫實例的整體健康度，並迅速定位異常，極大簡化了運維操作。 ...
  • mysql for update是鎖表還是鎖行
    轉載至我的博客 https://www.infrastack.cn ，公眾號：架構成長指南 在併發一致性控制場景中，我們常常用for update悲觀鎖來進行一致性的保證，但是如果不瞭解它的機制，就進行使用，很容易出現事故，比如for update進行了鎖表導致其他請求只能等待，從而拖垮系統，因此了 ...
  • Libcomm通信庫：GaussDB(DWS) 為解決建聯過多的小妙招
    本文詳細介紹了Libcomm通信庫及其原理，讓我們更好的理解GaussDB(DWS)集群通信中的具體邏輯，對於GaussDB(DWS)通信運維也具備一定的參考意義。 ...
  • Jetpack Compose(3) —— 狀態管理
    本文主要講解了 Compose 中狀態的概念。最後做個小結， - Compose UI 依賴狀態變化，觸發重組，驅動界面更新。 - 使用 remember 和 rememberSaveable 進行狀態持久化。remember 保證在 recompose 過程中狀態穩定，rememberSaveab... ...
一周排行
    -Advertisement-
    Play Games
  • 如何基於surging跨網關跨語言進行緩存降級
    基於.NET Framework 4.8 開發的深度學習模型部署測試平臺，提供了YOLO框架的主流系列模型，包括YOLOv8~v9，以及其系列下的Det、Seg、Pose、Obb、Cls等應用場景，同時支持圖像與視頻檢測。模型部署引擎使用的是OpenVINO™、TensorRT、ONNX runti... ...
  • 十年沉澱，重啟開發之路
    十年沉澱，重啟開發之路 十年前，我沉浸在開發的海洋中，每日與代碼為伍，與演算法共舞。那時的我，滿懷激情，對技術的追求近乎狂熱。然而，隨著歲月的流逝，生活的忙碌逐漸占據了我的大部分時間，讓我無暇顧及技術的沉澱與積累。 十年間，我經歷了職業生涯的起伏和變遷。從初出茅廬的菜鳥到逐漸嶄露頭角的開發者，我見證了 ...
  • C#.NET體系圖文概述—2024最全總結
    C# 是一種簡單、現代、面向對象和類型安全的編程語言。.NET 是由 Microsoft 創建的開發平臺，平臺包含了語言規範、工具、運行，支持開發各種應用，如Web、移動、桌面等。.NET框架有多個實現，如.NET Framework、.NET Core（及後續的.NET 5+版本），以及社區版本M... ...
  • 班級擂臺（光榮）榜 - 極簡教育小工具
    前言 本文介紹瞭如何使用三菱提供的MX Component插件實現對三菱PLC軟元件數據的讀寫，記錄了使用電腦模擬，模擬PLC，直至完成測試的詳細流程，並重點介紹了在這個過程中的易錯點，供參考。 用到的軟體： 1. PLC開發編程環境GX Works2，GX Works2下載鏈接 https:// ...
  • web server apache tomcat11-31-websocket
    前言 整理這個官方翻譯的系列，原因是網上大部分的 tomcat 版本比較舊，此版本為 v11 最新的版本。 開源項目 從零手寫實現 tomcat minicat 別稱【嗅虎】心有猛虎，輕嗅薔薇。 系列文章 web server apache tomcat11-01-官方文檔入門介紹 web serv ...
  • day31-jQuery
    1、jQuery介紹 jQuery是什麼 jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之後又一個優秀的JavaScript代碼庫（或JavaScript框架）。jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。它封裝 ...
  • aardio爬蟲) 實戰篇：逆向有道翻譯web介面
    前言 之前的文章把js引擎(aardio封裝庫) 微軟開源的js引擎(ChakraCore))寫好了，這篇文章整點js代碼來測一下bug。測試網站：https://fanyi.youdao.com/index.html#/ 逆向思路 逆向思路可以看有道翻譯js逆向（MD5加密，AES加密）附完整源碼 ...
  • 面試官：這就是你理解的Java多線程基礎？
    引言 現代的操作系統（Windows，Linux，Mac OS）等都可以同時打開多個軟體（任務），這些軟體在我們的感知上是同時運行的，例如我們可以一邊瀏覽網頁，一邊聽音樂。而CPU執行代碼同一時間只能執行一條，但即使我們的電腦是單核CPU也可以同時運行多個任務，如下圖所示，這是因為我們的 CPU 的 ...
  • Python文本統計與分析從基礎到進階
    掌握使用Python進行文本英文統計的基本方法，並瞭解如何進一步優化和擴展這些方法，以應對更複雜的文本分析任務。 ...
  • Redis多數據源，看這篇就夠了
    背景 Redis多數據源常見的場景： 分區數據處理：當數據量增長時，單個Redis實例可能無法處理所有的數據。通過使用多個Redis數據源，可以將數據分區存儲在不同的實例中，使得數據處理更加高效。 多租戶應用程式：對於多租戶應用程式，每個租戶可以擁有自己的Redis數據源，以確保數據隔離和安全性。 ...
所有分類