前端開發常用插件總結

 

---

一、PC端

1、JQuery ( 1.7.0 ~ 3.1.o 版本 ）

官網：https://jquery.com/

• JQuery是輕量級的js庫 ，它兼容CSS3，還兼容各種瀏覽器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后續版本將不再支持IE6/7/8瀏覽器。
• 強大的選擇器 
• 出色的DOM操作的封裝
• 可靠的事件處理機制
• 完善的ajax
• 不污染頂級變量
• 出色的瀏覽器兼容性
• 鏈式操作方式
• 隱式迭代
• 行為層與結構層分離
• 豐富的插件支持

二、移動端

1、百度雲團隊開發的touch.js

移動設備上的手勢識別與事件庫，由百度雲Clouda團隊開發維護

官網：http://touch.code.baidu.com/ 

下載地址：http://touch.code.baidu.com/touch-0.2.14.min.js

• 輕量級插件
• 優秀的單指旋轉手勢
• 基於原生事件
• 支持事件代理 ， 性能更好

• API簡單

  2、zepto.js下的touch模塊

  針對移動設備原生touch事件封裝的手勢識別事件模塊

  官網：http://www.bootcss.com/p/zeptojs/
  
  下載地址： https://github.com/madrobby/zepto/blob/master/src/touch.js

3、zepto.js（1.0.0 ~ 1.1.6 )

Zepto是一個輕量級的針對現代高級瀏覽器的JavaScript庫， 它與jquery有着類似的api

官網：http://www.bootcss.com/p/zeptojs/

下載地址：http://www.bootcss.com/p/zeptojs/

• 輕量級，壓縮后大小只有 5~ 10k , 但功能齊全
• 不支持低版本 IE（<10) ，移動端網頁開發首選 ， 但不支持 wp系統手機
• API仿照JQuery ， 上手方便
• 包含polyfill，zepto，detect，event，ajax，form，fx 這7個就是標准版包含的模塊
• 用tap事件取代click事件200~300 ms 的延遲
• Zepto 沒有 .innerHeight() .outerWidth() 等四個方法，其次，它的 .height()/.width() 方法也不完善

4、iScroll.js（iScroll4.0~iScroll5.0)

iScroll是一個高性能，資源占用少，無依賴，多平台的javascript滾動插件

下載地址：https://github.com/cubiq/iscroll/

• 旨在解決移動webkit系瀏覽器的區域滾動問題 ( 原生 mobile safari 只能雙指滑動，不支持單指滑動且沒有滾動條；android自帶瀏覽器也支持區域滾動，且可單指滑動操作，但很不流暢）
• 兼容mobile safari 、android默認瀏覽器、safari 、chrome 、 ffirefox5+、opera11+、IE9+及其他webkit核心瀏覽器
• 實現上拉刷新、下拉加載問題
• 官方定義iscroll只能滾動wrapper里的第一個子節點
• 縮放（Pinch/Zoom）
• 拉動刷新（Pull up/down to refresh）
• 輕量級插件，只有4k，性能高
• 自定義滾動條
• 擴展性差 ，接口不明顯
• 點擊輸入框不靈敏，無法聚焦，頁面文字無法選擇和復制（iScroll禁止了瀏覽器的默認行為）

5、hammer.js ( 2.0.8版本）

hammerJS是一個優秀的、輕量級的觸屏設備手勢庫

官網：http://hammerjs.github.io/

下載地址：https://github.com/hammerjs/hammer.js/

• 開源的移動端腳本框架，可以完美的實現在移動端開發的大多數事件
• 主要分為六大事件：點擊、滑動、拖動、多點觸控、按壓、旋轉

6、flexible.js （0.3.2版本）

flexible.js 是一個用來解決H5屏幕適配問題的一個輕量級插件

下載地址：https://github.com/amfe/lib-flexible

• 動態改寫了 標簽
• 給元素添加 data –dpr屬性 ， 並且動態改寫 data –dpr 的值
• 給 元素添加 font-size 屬性 ， 並且動態改寫 font-size 的值

7、jQuery Mobile (1.4.0版本）

jQuery Mobile 是一個用於創建移動端web應用的的前端框架

官網：http://jquerymobile.com/

• jQuery Mobile為開發移動應用程序提供了非常簡單的用戶接口
• 這種接口的配置是標簽驅動的，這意味着我們可以在HTML中建立大量的程序接口而不不需要寫一行js代碼
• 擁有一個完整統一的UI框架
• 多頁面之間跳轉，完全使用ajax加載頁面
• 性能不好，兼容性一般，UI限制大

8、Bootstrap（Bootstrap3.0版本）

Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用於開發響應式布局、移動設備優先的 WEB 項目

官網：http://www.bootcss.com/

下載地址：http://v3.bootcss.com/

• CSS3媒體查詢（Media Query）實現一個框架、多種設備
• 手機（<768px) 、平板（>= 768px) 、桌面顯示器（>=992px) 、大桌面顯示器（>=1200px)
• 百分比布局實現的12份柵格化系統
• 豐富完善的UI組件和svg圖標庫
• bootstrap2不支持IE6、bootstrap3不支持IE8以下瀏覽器
• 重量級類庫
• 站點樣式風格都一樣，沒有新意

9、Angular.js (1.x版本）

為克服HTML在構建應用上的不足而設計WVC、WVVM框架

官網：http://www.apjs.net/

下載地址：https://angularjs.org/

• 聲明式的模板，自帶豐富的Angular指令
• 完善的前端MVC、MVVM框架，包含模板、數據雙向綁定、路由、模塊化、服務、過濾器、依賴注入等
• 可以自定義封裝directive
• 改變了傳統JQuery以dom操作為核心的方式，以數據為中心
• ng提倡在控制器里面不要有操作DOM的代碼 , 對於一些JQuery插件的使用，如果不想破壞代碼的整潔性，需要寫一些directive去封裝插件
• Angular太笨重

10、Swiper(3.x版本）

Swiper是一款免費以及輕量級的移動設備觸控滑塊的js框架

官網：http://2.swiper.com.cn/

下載地址：http://2.swiper.com.cn/download/index.html#file1

• Swiper實現觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等
• 無需加載任何公用庫
• Swiper默認的觸摸比例為1：1
• Swiper帶有所有常用的導航控制器，包括分頁器，切換箭頭，滾動條
• 使用流行的flexbox布局
• Swiper還包含自適應、滾動反彈、抵抗反彈、loop模式、嵌套Swiper
• 擁有豐富的API，允許你建立自己獨特的分頁器、導航、視差滾動等效果
• 允許多行Slide布局

11、Ionic(1.3版本）

Ionic是一款以web開發原生應用App的框架

官網：http://ionicframework.com/

下載地址：http://ionicframework.com/getting-started/

• 基於AngualrJs來增強應用
• 通過SASS構建應用程序,提供很多UI組件
• 旨在從web的角度開發手機應用，基於phoneGap的編譯平台，事項編譯成各個平台的應用程序
• ios上比較流暢，但在android低版本機上運行有些卡