經常使用的前端框架優缺點總結

JQuery

---

JQuery是一個優秀的javascript框架
JQuery宗旨是Write Less Do More
JQuery是輕量級的js庫

特色

• 輕量級的Javascript框架
• 豐富的DOM選擇器
• 鏈式表達式
• 支持事件、樣式、動畫
• 支持Ajax操做
• 跨瀏覽器兼容
• 插件擴展開發（豐富的第三方插件）
• 可擴展性強（提供擴展接口）

優勢

• 實現腳本與頁面分離
• 最少的代碼作最多的事情
• 性能支持比較好

缺點

• 插件衝突
• 不能向後兼容

Zepto.js

---

針對移動端瀏覽器

• 輕量級的JavaScript庫
• 兼容JQuery的API
• 增長了移動設備的觸摸等事件
• 不支持IE瀏覽器

Bootstrap

---

用於開發響應式佈局、移動設備優先的web項目

特色

• 預處理腳本
• 一個框架、多種設備
• 特性齊全

優勢

• 比較成熟
• 擁有完善的文檔
• 有大量的組件樣式

缺點

• 有需求要從新定義樣式
• 會有兼容問題

Vue.js

---

是一套用於構建用戶界面的漸進式框架

特性

• 輕量級的框架
• 雙向數據綁定
• 指令
• 插件化

優勢

• 簡單易用
• 靈活漸進式
• 輕量高效
• MVVM
• 組件化

缺點

• 不支持IE8
• 生態環境不如angular和react

組件化優勢

• 提升開發效率
• 方便重複使用
• 簡化調試步驟
• 提高整個項目的可維護性
• 便於協同開發

React

---

優勢

• 速度很快（不直接對DOM進行操做）
• 跨瀏覽器兼容（虛擬DOM）
• 一切都是component：(代碼更加模塊化，重用代碼更容易，可維護性高)
• 單向數據流（Flux是一個用於在JavaScript應用中建立單向數據層的架構，它隨着React視圖庫的開發而被Facebook概念化）
• 同構、純粹的JavaScript（有助於搜索引擎優化）
• 兼容性好

缺點

• 不適合單獨作一個完整的框架

AngularJs

---

經過指令擴展了HTML，經過表達式綁定數據到HTML

優勢

• 雙向數據綁定
• 代碼模塊化（每一個模塊的代碼獨立擁有本身的做用域，model，controller等）
• 強大的directive能夠將不少功能封裝成HTML的tag，屬性或者註釋等（大大美化了HTML的結構，加強了可閱讀性）
• 依賴注入（提升重用性和靈活性）

缺點

• 驗證功能錯誤信息顯示比較薄弱，須要寫不少模板標籤
• 升級後可能會致使一個兼容性的BUG
• ng提倡在控制器裏面不要有操做DOM的代碼，對於一些jQuery插件的使用，若是想不破壞代碼的整潔性，須要寫一些directive去封裝插件，如今有不少插件的版本已經支持Angular了
• 比較笨重，沒有輕量級的版本

原文連接：經常使用的前端框架優缺點總結