JavaScript模組化程式設計思想演變

2021-07-11 10:19:36 字數 1474 閱讀 6622

對大型的**來說,模組化程式設計非常重要。因為越是大型的**,檔案命名衝突、檔案依賴程度都非常高,故而引入模組化思想。

下面我從大家經常寫**的習慣來引。

這種形式,各種變數,函式都將暴露在全域性環境下,**示例如下:

上面這種編寫方式是很常見的,也是非常不可取的,因為全域性環境完全被汙染了,非常容易造成命名衝突等問題。

採用這種方式,一定程度上減少了命名衝突的問題;看如下簡寫**:

// 定義乙個calculator物件

var calculator = {};

// 在上面新增各種屬性

calculator.count = 10;

calculator.a = 1 ;

// ... 很多很多

calculator.add = function(x, y) ;

// ... 很多很多

calculator.substract = function(x, y) ;

另外在別處部落格 和開源專案上,也可以經常看到。

下面是一段真實**,來自 yahoo! 的乙個開源專案。

if (org.cometd.utils.isstring(response)) 

if (org.cometd.utils.isarray(response))

雖然一定程度上減少命名衝突,的確能極大緩解衝突。但每每看到上面的**,都忍不住充滿同情。命名空間的形式會越來越長,假如要使用乙個函式需要不停地點下去,不容易記憶,而且**不夠優雅。

我們可以利用js裡函式作用域的特點,通過匿名自執行函式,進行私有變數隔離。

var calculator = (function() ;

function substract(x, y) ;

return ;

})();

這種是最理想的方式,當我們要對這個模組進行擴充套件和維護的時候 ,以及這個模組存有第三方依賴的時候,可以通過引數的形式將原來的模組和第三方庫傳進去。

var calculator = (function(cal,$) ;

// **********==== 此處有1000行** ***************=

// template() $ ...

// **********==== /此處有1000行*****************=

return cal; // 然後再返回

// 一定要把依賴項 通過引數的形式 注入進來,然後在內部使用注入的屬性

// 2. 提高了效能:減少了作用域的查詢範圍

})(window.calculator || {}, window.$);

確保自己不再去修改原來寫好的庫,和別人的第三方外掛程式 。

by turbo beijing

模組化程式設計

將乙個5元素陣列,右移n位,n從鍵盤輸入,首尾相接 例如 陣列中的元素為 那麼 n 3 的結果如下 資料是向右邊移三位,那麼,我轉化成先移一位的情況。因為當移一位的問題解決了,移動n位只需要將此過程迴圈n次即可 1.把a 1 放到臨時空間t t a 1 2.依次把前面元素的值放到後面的空間裡面.從後...

模組化程式設計小結

模組化程式設計,可以讓程式變得容易理解,結構更加清晰,下面小結一下如何進行模組化程式設計 本文以keil軟體進行舉例 1 將所需要的程式分為 c 和 h 兩類,其中 c 中用來實現程式,h 則用來宣告程式 2 在 c 的檔案中,包含所需的標頭檔案,如 include reg52.h 3 在宣告函式的...

模組化程式設計理解

工作中在做客戶運營系統時,發現js和css的引用還處於最原始的狀態沒有更新。在上乙個專案中通過物件和其中的方法實現了簡單的模組化程式設計。但隨著工程專案的龐大程度增加,簡單的物件已經滿足不了模組化程式設計的需求了,所以接觸了requirejs,了解了amd程式設計規範。和amd對應的是cmd,在no...