組件化

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
};
})();
這樣在模塊外部無法修改我們沒有暴露出來的變量、函數。
缺點：功能相對較弱，封裝過程增加了工作量、仍會導致命名空間汙染可能、閉包是有成本的。
 

js組件化、模塊化開發