模組化演變歷程

2021-07-29 11:33:33 字數 2311 閱讀 7268

程式模組化開發的優點

+ 開發效率高

* **方便重用,別人開發的模組直接拿過來就可以使用,不需要重複開發類似的功能

+ 可維護性高

* 軟體的宣告週期中最長的階段其實並不是開發階段,而是維護階段,

需求變更比較頻繁,使用模組化的開發方式更容易維護

(一:演變歷程)

1,全域性函式

人為模組

function

sum(a,b)

2,物件封裝-命名空間法

var obj = {};

// obj.cal = {};

// obj.cal.sum = function(){};

// obj.cal.sum();

obj.sum = function

(a,b)

3,公有私有成員分離

// 這裡就形成了乙個隔離環境

// 隔離公有私有成員之後,降低了對全域性作用域的汙染,進一步降低了命名衝突的概率

var module = (function

(); obj.sum = function

(a,b)

return obj;

})();

4,增強可維護可擴充套件性

// 通過引數的形式劃分了子模組,進一步增強了模組的可維護和可擴充套件性

// 開閉原則:對修改封閉,對新增開放

var module = (function

(m) return m;

})(module || {});

5,新增第三方依賴

var module = (function

(m,$)

m.mod = function

(a,b)

return m;

})(module || {},jquery);

(二:規範化標準)

cmd – seajs 中國用的比較多,由阿里的玉伯

amd – requirejs

commonjs

使用seajs的步驟:

如何公開模組成員

如何依賴模組

seajs模組定義引數分析

require

exports

module

module有幾種屬性和方法

exports 與 module.exports 的區別

其實,module.exports才是真正的介面,exports只不過是它的乙個輔助工具。

最終返回給呼叫的是module.exports而不是exports。

所有的exports收集到的屬性和方法,都賦值給了module.exports。

當然,這有個前提,就是module.exports本身不具備任何屬性和方法。

如果,module.exports已經具備一些屬性和方法,那麼exports收集來的資訊將被忽略

seajs非同步載入模組

require.async(「模組位址」,function(){})

seajs依賴jquery

jq結尾處:

if ( typeof noglobal === strundefined ) );

}}

seajs

.config(

})

seajs模組載入原理分析

/@cc_on ….. @/之間的部分可以被ie識別並作為程式執行,同時啟用ie的條件編譯

cmd、amd、conmonjs的區別

-amd

+ 預載入,預執行

+ 預執行就是把每個載入成功乙個執行乙個

-cmd

+ 預載入,懶執行

+ 懶執行就是等所有的js檔案都載入完畢之後了才去執行

-conmonjs

+ 執行到了**,就載入到**,然後執行**,

+ 同步載入,同步執行

AppDelegate模組化歷程

在考慮這個方案的時候,我們的專案剛剛度過了原型期,使用的sdk並不多,業務需求也還沒有起來。void setupreachability end void setupreachability else if reach.currentreachabilitystatus reachableviawi...

js高階 模組化演變

function demo 頂層命名空間 shop.user 使用者模組 自執行函式 function window.shop.user 把自己基類的很多任務具封裝乙個整體框架 btn form animate 沒有元件庫之前都是這麼操作 都組裝到kj這個庫 後來繼續演變 sea.js 第三方庫 k...

前端模組化發展歷程

模組化主要是用來抽離公共 隔離作用域,避免變數衝突等。amd cmd commonjs 是es5中提供的模組化程式設計方案,es6 modules 是es6提供的模組化程式設計方案。使用自執行函式來編寫模組化。特點 在乙個單獨的函式作用域中執行 避免變數衝突。function amd 是 requi...