使用過ReactJS進行Web UI的元件化開發，和使用過AngularJS的雙向資料繫結和模組化後，感覺到了元件化、模組化、雙向資料繫結對Web前端開發的重要性。
1、元件化可以極大提高前端程式碼的可維護性，前端的元件化簡單的可以理解為一塊HTML元素和一段JS程式碼組成，該段JS程式碼只負責維護該塊HTML元素的樣式，元件封裝自己的屬性和行為，並對外提供介面供其他元件訪問自己的狀態。

2、雙向資料繫結是AngularJS的核心”以資料為中心”的一個樣例，這裡面也牽扯到了AngularJS的controller，一個controller開闢一個函式作用域，每個controller + UI就構成了一個元件，controller負責維護自己所管轄的UI元素的資料。整個頁面就是有多個這樣的元件構成。元件可以巢狀。

在JSRM中做過很多頁面開發後，剛開始時用jquery寫程式碼覺得很容易，程式碼一直是在末尾不斷增加，雖然有時候簡單的畫了個分界線標識來做function()分類，比如這一塊的函式是負責哪一塊頁面的，另外一塊的函式又是負責哪一塊頁面的。這樣做很簡單，直觀，但是當代碼多時，尤其是函式之間相互呼叫時，這樣寫程式碼的弊端就凸顯了：1、函式之間調來調去，多調幾次都不知道跑哪裡去了，前面做的分界標識感覺不合理了，不應該那麼分界了 2、設定全域性變數來解決函式，不同的函式都對同一個全域性變數進行修改，最後要使用的時候不知道該全域性變數到底處於什麼值狀態 3、等需求變更時，或者發現bug時去修改程式碼，發現程式碼之間耦合性太高，相互依賴，結果改起來牽一髮而動全身，非得把全部程式碼讀懂才敢去該，這違背了軟體設計中的可拓展性和可維護性。

元件化是解決以上問題的辦法：
1、不應該以函式作為程式碼分塊，而應該以元件作為程式碼組織的方法。
2、元件就類似於Java中的物件，每一個元件有單獨的作用域來封裝自己的屬性和行為，對於公共的屬性和方法則提供介面供外部訪問，因此就不需要設定全域性變量了。
3、模組化和元件化就是幫助實現分離職責和解耦合的，因此在程式碼中要儘可能的封裝元件，劃分模組，這樣後面回來改程式碼時一目瞭然，能快速找到要修改的元件，並能儘可能少的改動前面的程式碼。