」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 模組

模組

發佈於2024-11-04
瀏覽:551

Modules

  • 模組模式在 ES6 模組之前使用。
  • 目標:封裝功能、支援私人資料、公開公共 API,所有這些都是透過使用 IIFE 來實現的。

IIFE:例如。 (功能(){})();

// IIFE Goal: Create a new scope, return the data just once. All of data inside IIFE will be private as it would inside the fn scope. 
// Using this way, we don't need to call it separately. And it ensures its called only once.
// IIFE is created only once, goal is 'NOT TO REUSE' by executing it multiple times.

// Result of running an IIFE is stored, or else it will disappear simply.
const ShoppingCart2 = (function(){
  const cart = [];
  const shippingCost = 10;
  const totalPrice = 237;
  const totalQuantity = 10;

  const addToCart = function(product, quantity){
    cart.push({product, quantity});
    console.log(`${quantity} ${product} added to cart. Shipping cost is ${shippingCost}`);
  };

  const orderStock = function(product, quantity){
    console.log(`${quantity} ${product} ordered from supplier`);
  };
  // Need to return something, in order to return a public API. For that, an object is returned containing stuff which needs to be made public.
  return {
    addToCart,
    cart, 
    totalPrice,
    totalQuantity
  };
})();
// Everything inside the above module is private to the module.
// The above fn returns the object mentioned inside return statement and assign it to the ShoppingCart2 variable mentioned at the start of fn. This IIFE is returned then long ago.
// All this is possible because of closures. Hence, addToCart can acccess the cart variable.

ShoppingCart2.addToCart('apple', 4);
ShoppingCart2.addToCart('pizza', 5);
ShoppingCart2;
ShoppingCart2.shippingCost; // inaccessible.

模組模式甚至在 ES6 模組之前就已經起作用了。

缺點:

  1. 現在,如果我們想要每個檔案一個模組,就像我們使用 ES6 模組一樣,那麼需要建立多個腳本並將其連結到 HTML 檔案中。
  2. 腳本載入的順序也很重要。
  3. 所有這些變數都將存在於全域範圍內。

除了原生的 ES6 模組和模組模式之外,JS 還支援其他非 JS 原生的模組系統。前任。 AMD、CommonJS
前任。 Node.js 中自始至終都使用 CommonJS 模組。最近ES6模組已經在Node.js中實作了
npm 儲存庫上的所有模組仍然使用 commonJS 模組系統,因為 npm 最初是為 Node 設計的。直到後來,npm 才成為整個 JS 世界的儲存庫。因此,我們基本上只能使用 CommonJS。所以,CommonJS 在 Node.js 中的影響仍然需要關注
就像 ES6 模組一樣,CommonJS 中 1 個檔案就是 1 個模組。
commonJS程式碼在瀏覽器中不起作用,但在node.js中可以工作
ES 模組最終將取代所有模組系統,但目前我們還需要使用 commonjs。

export關鍵字是一個對象,它沒有在我們的程式碼中以及瀏覽器中定義。

// EXPORT
export.addToCart = function(product, quantity){
    cart.push({product, quantity});
    console.log(`${quantity} ${product} added to cart. Shipping cost is ${shippingCost}`);
};

// IMPORT: is similar to ES Modules but would use a require fn.
// require is not defined in browser env but its defined in node env as its a part of commonjs
const addToCart = require('./shoppingCart.js')
版本聲明 本文轉載於:https://dev.to/mahf001/iife-module-pattern-commonjs-5gkd?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>
  • JavaScript 中 +=_ 運算子背後的奧秘是什麼?
    JavaScript 中 +=_ 運算子背後的奧秘是什麼?
    解碼JavaScript 中神秘的=_ 運算子JavaScript 中不常見的運算子=_ 讓開發人員感到困惑,讓他們想知道它的真正本質。此運算子結合了賦值運算子 = 和一元加運算子 _。讓我們深入研究它的複雜性並揭開它的用途。 一元加運算子 (_)一元加運算子 ( ) 是一個嘗試轉換其運算元的前綴運...
    程式設計 發佈於2024-11-08
  • 掌握腳本標籤:使用 Async 和 Defer 進行精確的腳本控制
    掌握腳本標籤:使用 Async 和 Defer 進行精確的腳本控制
    在 Web 開發領域,優化頁面載入時間至關重要。 標籤的兩個強大屬性 - 非同步和延遲 - 可以顯著影響網站的效能。在沒有徹底理解這些屬性的情況下使用它們可能會影響效能並導致錯誤。讓我們從基礎開始,了解這些屬性的作用以及何時使用它們。 基礎知識:腳本如何加載 預設情況下,當瀏覽器...
    程式設計 發佈於2024-11-08
  • CSS Flexbox:建立定價表
    CSS Flexbox:建立定價表
    介紹 CSS Flexbox 是 Web 開發人員創建靈活且響應式佈局的強大工具。 Flexbox 最常見的用例之一是建立定價表,這是許多網站的關鍵元素。在本文中,我們將討論使用 CSS Flexbox 建立定價表的優點和缺點,並探討其一些關鍵功能。 優點 將 C...
    程式設計 發佈於2024-11-08
  • 如何在 JavaScript 中格式化具有特定小數位的浮點數?
    如何在 JavaScript 中格式化具有特定小數位的浮點數?
    將浮點數格式化為特定小數位在JavaScript 中,從浮點數轉換為字串可能會導致尾隨小數位。若要限制小數點後的位數,您可以使用特定函數。 舍入函數一種方法是使用舍入函數,例如 toFixed。例如:var number = 0.3445434; console.log(number.toFixed...
    程式設計 發佈於2024-11-08
  • 為什麼我放棄 Python Flask 而選擇 Django:Web 框架對決
    為什麼我放棄 Python Flask 而選擇 Django:Web 框架對決
    當您開始使用 Python Web 開發時,您可能會遇到 Django 和 Python Flask 作為兩個最佳選擇。這兩個框架都有其優點,但根據我的經驗,Django 通常是更好的選擇。 我早期使用 Python Flask 的經歷 當我第一次開始探索 Web 開發時,Pyth...
    程式設計 發佈於2024-11-08
  • React原始碼中MessageChannel的使用
    React原始碼中MessageChannel的使用
    這篇文章我們分析React原始碼中MessageChannel的用法。 我們先來了解什麼是MessageChannel。 訊息頻道 Channel Messaging API 的 MessageChannel 介面允許我們建立一個新的訊息通道並透過它的兩個 MessagePort...
    程式設計 發佈於2024-11-08
  • 掌握 Java 單元測試:&#Student Class Test&# 項目
    掌握 Java 單元測試:&#Student Class Test&# 項目
    透過 LabEx 的學生類測試專案深入單元測試的世界,釋放您作為 Java 開發人員的潛力。這門綜合課程將引導您完成為簡單的 Student 類別編寫有效單元測試的過程,使您能夠編寫更可靠和可維護的程式碼。 介紹 在不斷發展的軟體開發領域,編寫健全且經過良好測試的程式碼的能力變得越...
    程式設計 發佈於2024-11-08
  • 如何在 JavaScript 中模擬屬性的 noSuchMethod 功能?
    如何在 JavaScript 中模擬屬性的 noSuchMethod 功能?
    如何在JavaScript 中實現noSuchMethod 屬性功能在JavaScript 中,noSuchMethod在JavaScript 中,noSuchMethod雖然標準 JavaScript 語言中的屬性沒有直接等效項,但可以模擬類似的屬性使用 ECMAScript 6 代理程式的功能。...
    程式設計 發佈於2024-11-08
  • 使用 GitLab CI/CD 和 Terraform 實作 Lambda 以進行 SFTP 整合、Go 中的 S Databricks
    使用 GitLab CI/CD 和 Terraform 實作 Lambda 以進行 SFTP 整合、Go 中的 S Databricks
    通过 Databricks 中的流程自动化降低成本 我的客户需要降低在 Databricks 上运行的流程的成本。 Databricks 负责的功能之一是从各种 SFTP 收集文件,解压缩它们并将它们放入数据湖中。 自动化数据工作流程是现代数据工程的重要组成部分。在本文中,我们将探...
    程式設計 發佈於2024-11-08
  • 為什麼我的 GoLang 網路伺服器無法提供大型 MP4 影片?
    為什麼我的 GoLang 網路伺服器無法提供大型 MP4 影片?
    GoLang HTTP Webserver Serving MP4 Video挑戰使用 GoLang 創建了一個提供 HTML/JS/CSS 和映像的 Web 伺服器。當伺服器嘗試提供 MP4 視訊檔案時,視訊載入失敗,僅顯示視訊控制。 調查檢查視訊檔案後,發現較小的視訊可以正常工作,而較大的視訊則...
    程式設計 發佈於2024-11-08
  • 如何在不使用 HTML 表單的情況下使用 PHP 重新導向網頁並傳送 POST 資料?
    如何在不使用 HTML 表單的情況下使用 PHP 重新導向網頁並傳送 POST 資料?
    使用PHP 重定向和發送POST 資料在這個問題中,我們遇到了一個獨特的挑戰:如何重定向網頁並透過POST 方法不依賴HTML 表單。期望的結果是使用 PHP 腳本將隱藏欄位提交到外部網關。通常,透過GET 傳送資料非常簡單,如下面的程式碼片段所示:header('Location: http://...
    程式設計 發佈於2024-11-08
  • 如何處理JSF表單提交過程中的授權失敗?
    如何處理JSF表單提交過程中的授權失敗?
    JSF 表單提交期間的授權失敗:綜合分析在JSF 應用程式中實現自訂授權機制時,了解頁面導航和表單提交之間的區別至關重要。雖然重定向可以無縫地進行頁面導航,但它們在表單提交期間可能會遇到問題。 問題原因此問題的根本原因在於 JSF 表單提交觸發非同步請求。當發送重定向作為對非同步請求的回應時,JSF...
    程式設計 發佈於2024-11-08
  • 如何有效管理多個 JavaScript 和 CSS 檔案以獲得最佳頁面效能?
    如何有效管理多個 JavaScript 和 CSS 檔案以獲得最佳頁面效能?
    管理多個JavaScript 和CSS 檔案:最佳實踐組織過多的JavaScript 和CSS 檔案可能會帶來挑戰,特別是在保持最佳頁面性能方面。下面列出了有效解決此問題的最佳實踐。 PHP Minify:簡化 HTTP 請求不要載入大量單獨的文件,而是考慮使用 PHP Minify。該工具將多個 ...
    程式設計 發佈於2024-11-08
  • 我的 Amazon SDE 面試經驗 – 5 月 4 日
    我的 Amazon SDE 面試經驗 – 5 月 4 日
    我的 Amazon SDE 面试经历 – 2024 年 5 月 2024 年 5 月,我有机会面试亚马逊的软件开发工程师 (SDE) 职位。这一切都始于一位招聘人员通过 LinkedIn 联系我。我很惊喜,因为它总是令人兴奋。 一切是如何开始的 招聘人员专业且清晰,...
    程式設計 發佈於2024-11-08
  • 如何在 cURL POST 請求中傳送多個影像?
    如何在 cURL POST 請求中傳送多個影像?
    在cURL POST 請求中使用陣列在嘗試使用cURL 傳送影像陣列時,使用者可能會遇到僅第一個影像的問題傳輸數組值。這個問題探討如何修正這個問題。 原始程式碼似乎在陣列結構上有一個小缺陷。要解決此問題,建議使用 http_build_query 來正確格式化陣列:$fields = array( ...
    程式設計 發佈於2024-11-08

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3