模塊化開發

時間 2019-11-08

標籤模塊化開發简体版

原文原文鏈接

一，爲何要進行模塊化開發（傳統開發的弊端）html

1，命名衝突前端

　　在實際工做中，相信你們都碰見這樣的問題，我本身測試好的代碼和你們合併後怎麼起衝突了？node

明明項目須要引入的包都引進來了怎麼還報缺乏包？這些問題總結起來就是命名空間衝突及文件依賴加載順序問題。舉個簡單的列子來解釋一下命名空間衝突問題，看下面這段代碼：jquery

test htmlwebpack

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/module1.js"></script>
    <script src="js/module2.js"></script>
</head>
<body>

</body>
</html>
<script>
    var module=function(){
        console.log('I am module3');
    };
    module();
</script>

module1.jsweb

/**
 * Created by user on 2016/5/14.
 */
var module=function(){
    cosonle.log('I am module1.js');
}

module2.jsgulp

/**
 * Created by user on 2016/5/14.
 */
var module=function(){
    console.log("I am module2.js");
}

當運行test.html時結果輸出：瀏覽器

顯然是由於前兩個JS文件裏的函數名與html裏面的一致而致使衝突，因此只會執行最後一個module()函數，在團隊合做中你不會知道本身寫的函數或變量等是否會與別人起衝突，這時候模塊化開發就能解決這些問題。模塊化

2，文件依賴函數

　　開發最基本的原則就是不要重複，當項目中有多處地方運用同一個功能時，咱們就該想辦法把它抽離出來作成util，當須要時直接調用它便可，可是若是你以後的代碼依賴於util.js而你又忘了調用或者調用順序出錯，代碼變報各類錯誤，舉個最簡單的列子，你們都知道Bootstrap依賴jquery,每次引入時都須要jquery放在Bootstrap前面，一兩個相似於這樣的依賴你或許還記得，但若是在龐大的項目中有許多這樣的依賴關係，你還能清晰的記得嗎？當項目愈來愈複雜，衆多文件之間的依賴常常會讓人抓狂。下面這些問題，我相信天天都在真實地發生着。

1.通用組更新了前端基礎類庫，卻很難推進全站升級。

2.業務組想用某個新的通用組件，但發現沒法簡單經過幾行代碼搞定。

3.一個老產品要上新功能，最後評估只能基於老的類庫繼續開發。

4.公司整合業務，某兩個產品線要合併。結果發現前端代碼衝突。

5.……

以上不少問題都是由於文件依賴沒有很好的管理起來。在前端頁面裏，大部分腳本的依賴目前依舊是經過人肉的方式保證。當團隊比較小時，這不會有什麼問題。當團隊愈來愈大，公司業務愈來愈複雜後，依賴問題若是不解決，就會成爲大問題。

二，什麼是模塊化開發

　　模塊化開發使代碼耦合度下降，模塊化的意義在於最大化的設計重用，以最少的模塊、零部件，更快速的知足更多的個性化需求。由於有了模塊，咱們就能夠更方便地使用別人的代碼，想要什麼功能，就加載什麼模塊。可是也不能隨便寫哦。

三，什麼是模塊化？　

　　Node自帶的規範 commonjs規範

　　Commonjs是node的規範，運行在服務端，不是瀏覽器端，若是使用在了瀏覽器端，須要使用對該文件進行打包翻譯（借鑑工具browserify,webpack,gulp等）

書寫模塊的時候對外暴露接口module.exports={},exports.xxx=