JavaScript中的模塊化設計模式

核心要點

• 成員類型理解: 掌握JavaScript中公共、私有、特權和保護成員的區別，它們分別為模塊內的屬性和方法提供不同級別的訪問權限和安全性。
• 模塊模式變體: 了解基本模塊模式和揭示模塊模式之間的細微差別，後者提供一致的內部編碼風格和對公開內容的靈活控制。
• 特權成員的使用: 利用特權成員通過公共方法安全地公開私有變量，允許受控訪問同時保持封裝性。
• 保護成員策略: 通過在受控範圍內臨時公開數據，然後恢復為私有數據，從而在多個模塊之間共享數據，而無需外部訪問，來實現JavaScript中的保護成員。
• 增強技術: 探討諸如apply()之類的用於將附加模塊綁定到單個上下文中的方法，從而在保持模塊獨立性和可管理性的同時實現共享狀態和行為。

本文將闡述擴展模塊設計模式的結構和優勢，該模式包括四種主要成員類型：

• 公共成員: 可從任何地方訪問的成員。
• 私有成員: 只能從對象內部訪問的成員。
• 特權成員: 只能直接從對象內部訪問的成員，但可以通過公共方法間接從外部訪問。
• 保護成員: 只能從對象內部或其任何模塊內部訪問的成員。

本文並非關於面向對象編程，因為我們將創建的結構是一種單例模式，這是一種單實例結構，不能實例化多次。事實上，它根本沒有實例化（從擁有構造函數的角度來看），因此它是一種基於對象的模式，而不是面向對象的模式。 有關基於對象和麵向對象編程之間差異的更多信息，以及JavaScript中面向對象編程的介紹，我建議您閱讀Ryan Frishberg的文章：JavaScript面向對象編程。

模塊化設計模式

這裡將使用揭示模塊模式作為基本設計模式，它是經典模塊模式的一種變體，但具有更多控制權。儘管已經有相當多的文章描述了這些模式，但很少有文章真正解釋它們的工作原理，更少有文章具有如此完整的功能集！

基本模塊模式

經典模塊模式將腳本的所有代碼包裝在一個匿名函數字面量中，該字面量在返回時被賦值給單個變量。函數字面量只是一個調用自身的函數，因此函數字面量的最終賦值不是函數，而是函數返回的任何值。舉一個簡單的例子，函數字面量包含一個計算，因此最終賦值給sum的值是該計算的結果：

<code class="language-javascript">var sum = (function() { return 6 * 7; })();</code>

為了說明該語法的意思，以下是相同的代碼，抽象成一個命名函數：

<code class="language-javascript">function calculate() { return 6 * 7; }
var sum = (calculate)();</code>

在這種情況下，我們實際上不需要在calculate周圍加上括號，但在使用匿名函數時需要這樣做，以便將其評估為單個表達式，而無需預先賦值。

公共和私有成員

因此，在函數字面量中，我們可以放入任何其他代碼——例如變量、屬性和函數——並且用於定義內部數據的不同類型的語法決定了公共成員和私有成員之間的劃分。這是一個例子：

<code class="language-javascript">var MyModule = (function() {
  var myPrivateData = 303;
  function myPrivateFunction() {
    alert('private');
  }
  return {
    myPublicData : 42,
    myPublicFunction : function() {
      alert('public');
    }
  };
})();</code>

由於我們返回了一個屬性對象，並且該對像被賦值給MyModule，因此可以從對像外部訪問這些屬性，例如MyModule.myPublicData和MyModule.myPublicFunction。但是我們根本無法訪問myPrivateData或myPrivateFunction，因為變量只能在其原始作用域內訪問。變量的作用域是定義它的上下文，由var語句確定。在這個例子中，私有變量的作用域是MyModule對象，因此只能從該對象內部訪問它們。

揭示模塊模式

使用模塊模式，我們使用了兩種不同的語法來創建公共成員和私有成員之間的區別。揭示模塊模式是該模式的一種變體，它允許我們對所有內部構造使用相同的語法，只在最後推遲到對象字面量表示法，以返回（或揭示）公共成員。讓我們再次看看那個對象，但這次使用揭示模塊模式：

<code class="language-javascript">var MyModule = (function() {
  var myPrivateData = 303;
  function myPrivateFunction() {
    alert('private');
  }
  var myPublicData = 42;
  function myPublicFunction() {
    alert('public');
  }
  return {
    myPublicData : myPublicData,
    myPublicFunction : myPublicFunction
  };
})();</code>

公共成員和私有成員之間的劃分仍然相同，但這次不是由用於定義這些成員的原始語法實現的，而是簡單地由返回的內容實現。這使得揭示模塊模式成為一個有用的變體，因為它允許使用內部一致的編碼風格。這也意味著您可以更改返回時公共成員的名稱，甚至可以隨時更改哪些成員將是公共成員。 這種模式是由Christian Heilmann創新的，他在他的文章中對這種模式及其基礎的模塊模式進行了很好的解釋：再次使用模塊模式——向世界揭示一些東西。

(以下內容由於篇幅過長，將分段輸出)

以上是JavaScript中的模塊化設計模式的詳細內容。更多資訊請關注PHP中文網其他相關文章！