組件化
- 為什么要組件化開發
有時候頁面代碼量太大，邏輯太多或者同一個功能組件在許多頁面均有使用，維護起來相當復雜，這個時候，就需要組件化開發來進行功能拆分、組件封裝，已達到組件通用性，增強代碼可讀性，維護成本也能大大降低
- 件化開發的優點
很大程度上降低系統各個功能的耦合性，並且提高了功能內部的聚合性。這對前端工程化及降低代碼的維護來說，是有很大的好處的，耦合性的降低，提高了系統的伸展性，降低了開發的復雜度，提升開發效率，降低開發成本，
- 前端組件化的原則
- 專一
一個組件只專注做一件事，且把這件事做好。
- 可配置性
一個組件，要明確它的輸入和輸出分別是什么，要做可配置性，最基本的方式是通過屬性向組件傳遞配置的值，而在組件初始化的聲明周期內，通過讀取屬性的值做出對應的顯示修改。還有一些方法，通過調用組件暴露出來的函數，向函數傳遞有效的值；修改全局 CSS樣式；向組件傳遞特定事件，並在組件內監聽該事件來執行函數等。
- 標准性
任何一個組件都應該遵守一套標准，可以使得不同區域的開發人員據此標准開發出一套標准統一的組件。
- 復用性
任何一個組件應該都是一個可以獨立的個體，可以使其應用在不同的場景中。
- 可維護性
任何一個組件應該都具有一套自己的完整的穩定的功能，僅包含自身的，與其它組件無關的邏輯，使其更加的容易理解，使其更加的容易理解，同時大大減少發生bug的幾率。
模塊化
- 為什么要模塊化
早期的javascript版本沒有塊級作用域、沒有類、沒有包、也沒有模塊，這樣會帶來一些問題，如復用、依賴、沖突、代碼組織混亂等，隨着前端的膨脹，模塊化顯得非常迫切。
- 模塊化的好處：
- 避免變量污染，命名沖突
- 提高代碼復用率
- 提高了可維護性
- 方便依賴關系管理
- 模塊化幾種方式：
- 函數封裝
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
};
})();
這樣在模塊外部無法修改我們沒有暴露出來的變量、函數。
缺點：功能相對較弱，封裝過程增加了工作量、仍會導致命名空間污染可能、閉包是有成本的。