js組件化、模塊化開發

組件化

1. 爲何要組件化開發

   有時候頁面代碼量太大，邏輯太多或者同一個功能組件在許多頁面均有使用，維護起來至關複雜，這個時候，就須要組件化開發來進行功能拆分、組件封裝，已達到組件通用性，加強代碼可讀性，維護成本也能大大下降

2. 件化開發的優勢

很大程度上下降系統各個功能的耦合性，而且提升了功能內部的聚合性。這對前端工程化及下降代碼的維護來講，是有很大的好處的，耦合性的下降，提升了系統的伸展性，下降了開發的複雜度，提高開發效率，下降開發成本，

1. 前端組件化的原則

• 專注

  一個組件只專一作一件事，且把這件事作好。

• 可配置性

  一個組件，要明確它的輸入和輸出分別是什麼，要作可配置性，最基本的方式是經過屬性向組件傳遞配置的值，而在組件初始化的聲明週期內，經過讀取屬性的值作出對應的顯示修改。還有一些方法，經過調用組件暴露出來的函數，向函數傳遞有效的值；修改全局 CSS樣式；向組件傳遞特定事件，並在組件內監聽該事件來執行函數等。

• 標準性

  任何一個組件都應該遵照一套標準，可使得不一樣區域的開發人員據此標準開發出一套標準統一的組件。

• 複用性

  任何一個組件應該都是一個能夠獨立的個體，可使其應用在不一樣的場景中。

• 可維護性

  任何一個組件應該都具備一套本身的完整的穩定的功能，僅包含自身的，與其它組件無關的邏輯，使其更加的容易理解，使其更加的容易理解，同時大大減小發生bug的概率。

模塊化

1. 爲何要模塊化

   早期的javascript版本沒有塊級做用域、沒有類、沒有包、也沒有模塊，這樣會帶來一些問題，如複用、依賴、衝突、代碼組織混亂等，隨着前端的膨脹，模塊化顯得很是迫切。

2. 模塊化的好處：

• 避免變量污染，命名衝突
• 提升代碼複用率
• 提升了可維護性
• 方便依賴關係管理

1. 模塊化幾種方式：

• 函數封裝

var myModule = {
    var1: 1,
    
    var2: 2,
    
    fn1: function(){
    
    },
    
    fn2: function(){
    
    }
}
這樣咱們在但願調用模塊的時候引用對應文件，而後
myModule.fn2();
這樣避免了變量污染，只要保證模塊名惟一便可，同時同一模塊內的成員也有了關係
缺陷：外部能夠隨意修改內部成員，這樣就會產生意外的安全問題

• 當即執行函數表達式（IIFE）

能夠經過當即執行函數表達式（IIFE），來達到隱藏細節的目的
var myModule = (function(){
    var var1 = 1;
    var var2 = 2;
    
    function fn1(){
    
    } 
    
    function fn2(){
    
    }

return {
    fn1: fn1,
    fn2: fn2
};
})();
這樣在模塊外部沒法修改咱們沒有暴露出來的變量、函數。
缺點：功能相對較弱，封裝過程增長了工做量、仍會致使命名空間污染可能、閉包是有成本的。