前端工程化系列 簡談前端模組化開發與開發規範

沒有前戲，簡明扼要的進入主題——什麼是模組化開發？

模組化開發，乙個模組就是乙個實現特定功能的檔案，有了模組我們就可以更方便的使用別人的**，要用什麼功能就載入什麼模組。

模組化開發的4點好處：

1 避免變數汙染，命名衝突

2  提高**復用率

3 提高維護性

4 依賴關係的管理

一 函式封裝

我們在講到函式邏輯的時候提到過，函式乙個功能就是實現特定邏輯的一組語句打包，在乙個檔案裡面編寫幾個相關函式就是最開始的模組了

function

m1()
function
m2()

這樣做的缺點很明顯，汙染了全域性變數，並且不能保證和其他模組起衝突，模組成員看起來似乎沒啥關係

二 物件

為了解決這個問題，有了新方法，將所有模組成員封裝在乙個物件中

var module = new

object(,
m2:function
() 
})

這樣 兩個函式就被包在這個物件中， 嘿嘿 看起來沒毛病是嗎 繼續往下：

當我們要使用的時候，就是呼叫這個物件的屬性

module.m1()

誒嘿 那麼問題來了 這樣寫法會暴露全部的成員，內部狀態可以被外部改變，比如外部**可直接改變計數器的值

//

壞人的操作
module._count = 10;

最後的最後，聰明的人類找到了究極新的方法——立即執行函式，這樣就可以達到不暴露私有成員的目的

var module = (function

(); 
var m2 = function
(); 
return
})()

以上就是模組化開發的基礎中的基礎，以後會說道其他更深層次的模組化開發。

接下來了解一下兩種模組化規範。

先了解一下commonjs。

commonjs由nodejs發揚光大，這標誌著js模組化正式登場。

一 定義模組

根據commonjs規範，乙個單獨的檔案是乙個模組，每乙個模組都是乙個單獨的作用域，也就是說，在該模組內部定義的變數，無法被其他模組讀取，除非為global物件的屬性。

二 模組輸出 

模組只有乙個出口，module.exports物件，我們需要把模組希望輸出的內容放入該物件。

三 載入模組

載入模組用require方法，該方法讀取乙個檔案並且執行，返回檔案內部的module.exports物件。

var name = 'byron';  

function
printname() 
function
printfullname(firstname) 
module.exports =
return
})//
載入模組
require(['mymodule'],function
(my))

語法：requirejs定義了乙個函式define，它是全域性變數，用來定義模組。

define(id,dependencies,factory)

——id  可選引數，用來定義模組的標識，如果沒有提供該引數，指令碼檔名（去掉拓展名）

——dependencies  是乙個當前模組用來的模組名稱陣列

——factory 工廠方法，模組初始化要執行的函式或物件，如果為函式，它應該只被執行一次，如果是物件，此物件應該為模組的輸出值。

在頁面上使用require函式載入模組；

require([dependencies], function(){});

require()函式接受兩個引數：

——第乙個引數是乙個陣列，表示所依賴的模組；

——第二個引數是乙個**函式，當前面指定的模組都載入成功後，它將被呼叫。載入的模組會以引數形式傳入該函式，從而在**函式內部就可以使用這些模組

amd推崇的是依賴前置

cmd即common module definition

就像amd有個requirejs,cmd有個瀏覽器實現的sea.js，sj要解決的問題和rj一樣，只不過在模組定義方式和模組載入時機上有所不同。

cmd是sea.js在推廣過程中的規範化產出，sea.js是另一種前端模組化工具，它的出現緩解了requirejs的幾個痛點。

define(id, deps, factory)

因為cmd推崇乙個檔案乙個模組，所以經常就用檔名作為模組id；
cmd推崇依賴就近，所以一般不在define的引數中寫依賴，而是在factory中寫。
factory有三個引數：
function
(require, exports, module){}
一，require
require 是 factory 函式的第乙個引數，require 是乙個方法，接受 模組標識 作為唯一引數，用來獲取其他模組提供的介面；
二，exports
exports 是乙個物件，用來向外提供模組介面；
三，module
module 是乙個物件，上面儲存了與當前模組相關聯的一些屬性和方法。
demo
//定義模組 mymodule.js
define(function
(require, exports, module) );
//載入模組
seajs.use(['mymodule.js'], function
(my));

amd與cmd區別

總結如下：

最明顯的區別就是在模組定義時對依賴的處理不同。

amd推崇依賴前置 在定義模組的時候就有宣告其依賴的模組

cmd推崇就近依賴 只有在用到某模組的時候再去require

amd和cmd最大的區別是對依賴模組的執行時機處理不同，注意不是載入的時機或者方式不同。

很多人說requirejs是非同步載入模組，seajs是同步載入模組，這麼理解實際上是不準確的，其實載入模組都是非同步的，只不過amd依賴前置，js可以方便知道依賴模組是誰，立即載入，

前端模組化，元件化，工程化

1.前端模組化 2.前端元件化 指對具體的某個功能的封裝，比如所有的分頁可以封裝為分頁元件來統一使用，以此來達到元件復用，提高開發效率。3.前段工程化 概念 指使用軟體工程的技術和方法來進行前端專案的開發 維護和管理。前端工程化包含如下 1.規範 保證團隊所有成員以同樣的規範開發 2.分支管理 不同...

前端模組化開發

1.通常我們寫js是下面這樣 function fn1 function fn2 在需要呼叫的地方直接方法名呼叫就可以了，但多人開發容易引起命名的衝突，不利於優化！2.可以將所有的方法封裝到乙個物件中 var demo start function fn2 function demo.init 這樣...

什麼是前端模組化，元件化，工程化？

1.前端模組化 2.前端元件化 指對具體的某個功能的封裝，比如所有的分頁可以封裝為分頁元件來統一使用，以此來達到元件復用，提高開發效率。3.前段工程化 概念 指使用軟體工程的技術和方法來進行前端專案的開發 維護和管理。前端工程化包含如下 1.規範 保證團隊所有成員以同樣的規範開發 2.分支管理 不同...