1. 程式人生 > >《SPA設計與架構》之JavaScript模塊化

《SPA設計與架構》之JavaScript模塊化

結束 per 上下文 無刷新 匿名函數 混亂 模塊編程 數據 訪問性

原文

  簡書原文:https://www.jianshu.com/p/d5fc38506bc4

大綱

  1、什麽是模塊?
  2、基本的模塊模式
  3、模塊模式概念
  4、模塊結構
  5、揭示模式
  6、模塊編程的意義
  7、模塊化編程的重要性

1、什麽是模塊?

  通常模塊(Module)是指某個更大結構的一部分或組件。然而,模塊術語依據不同上下文,甚至在軟件開發範疇內,都可以用不同含義。有時我們會聽到人們在一般意義層面討論模塊。比如,他們可能說“支付模塊”或者“旅行計劃模塊”。這時候模塊意指整體特性是完全沒有什麽問題的。而在我們特指JavaScript代碼塊的時候,模塊就代表一個函數——一個通過模塊模式創建的特定函數。

2、基本的模塊模式

技術分享圖片

3、模塊模式概念

3.1、命名空間

  命名空間是一種為一組相關成員提供具體作用域的方式。盡管命名空間當前並非JavaScript語言的一部分,但仍可以通過為更大作用域的任何變量(如全局變量)分配模塊函數來達到同樣效果。

3.2、匿名函數表達式

  函數表達式是表達式的一部分,且不以function關鍵字開頭。如果函數表達式未命名,則被稱為匿名函數表達式。模塊體包含在一個匿名函數表達式當中。

3.3、對象字面量

  JavaScript提供了一種創建對象的快捷方式,被稱為字面量標記法,其通過花括號聲明一個對象,它的Property用鍵值對來表示。

3.4、閉包

  通常,當函數執行完畢,在其中創建的任何局部變量的生命周期也就宣告結束。閉包則是一個例外情況,當函數包含了外層作用域的變量引用時,例外就發生了。在JavaScript中,每個函數也都有一個外層作用域,即使外層作用域恰好就是全局作用域(所以從技術角度來講,所有函數都是閉包)。閉包對於我們的討論內容是非常重要的,因為即使模塊模式的外層函數立即執行完畢,只要模塊仍在使用,外層函數返回語句所引用作用域鏈之上的任何對象或值,都無法被垃圾回收。

4、模塊結構

  模塊結構巧妙地使用一個函數作為封裝其邏輯的容器。這是可能的,因為在模塊中局部聲明變量及函數可以避免模塊外部直接訪問它們。模塊內部功能的訪問可以通過訪問語句暴露的內容來控制。

5、揭示模式

  模塊模式的吸引力之一就是在模塊內部功能與公開功能之間劃定了清晰的界限。有一種頻繁用到並能夠讓劃分更加清晰的改良版模塊模式——揭示模式(revealing module pattern)。
  其實現思路是:將任何API所需代碼移到內部,將公有函數作為純粹指向內部代碼的指針,並只暴露該公有函數。

6、模塊編程的意義

6.1、避免命名沖突

  不用模塊限制函數作用域,把函數一股腦地放進全局作用域,將很容易導致命名沖突
  模塊模式能夠讓你按自己意願命名變量或函數,而不用擔心不同模塊代碼間會產生命名沖突問題

6.2、保護代碼完整性

  在某些語言中,訪問某部分應用程序代碼可以通過註入public或private這樣的訪問修飾符來控制。而在JavaScript中private是保留關鍵字。我們仍然可以通過模塊模式限定變量和函數的訪問權限。這是可能的,因為在某個函數裏聲明的變量和函數,意味著它們的作用域已限制為容器函數。這種限制訪問某部分模塊代碼的能力將組織其他代碼直接改變其內部狀態,維系模塊內部正常運作,並避免模塊數據遭到肆意修改導致違背其預期目的。
正確編寫安全的代碼難度很大。如果你無法阻止代碼內邏輯的錯誤使用,編寫安全代碼的希望就愈發渺茫。模塊模式提供了一種管理內部代碼訪問性的方式。

6.3、隱藏復雜性

  當討論隱藏編程復雜度時,並非說我們想討論如何保守秘密或者如何增加安全性。我們要討論的是兩種方式的差異性:通過大量全局函數實現具體功能的復雜邏輯,以及將復雜邏輯放至內部並只通過公有接口暴露開發者所需功能。後者減少了混亂,並使得函數調用更加清晰起來,以正確使用應用功能。

7、模塊化編程的重要性

  模塊化編程最重要的思想:通過模塊模式來內化邏輯復雜性並提供功能對應公有API,這是JavaScript的封裝實現方式。
模塊化的代碼能夠將應用邏輯組織成單一目標的更小單元,其更容易管理及修改。毫無疑問這帶來了更好的可重用性。模塊還有助於保持數據完整性、代碼組織以及避免命名沖突。畢竟我們為無刷新的單一頁面編寫代碼,如果不按這種設計方式編寫代碼,純粹依賴全局變量和函數的話,代碼將很快變得難以管理。

《SPA設計與架構》之JavaScript模塊化