前端開發經常使用插件總結

 

---

1、PC端

一、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
• 不污染頂級變量
• 出色的瀏覽器兼容性
• 鏈式操做方式
• 隱式迭代
• 行爲層與結構層分離
• 豐富的插件支持

2、移動端

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

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

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

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

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

• API簡單

  二、zepto.js下的touch模塊

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

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

三、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() 方法也不完善

四、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禁止了瀏覽器的默認行爲）

五、hammer.js ( 2.0.8版本）

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

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

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

• 開源的移動端腳本框架，能夠完美的實如今移動端開發的大多數事件
• 主要分爲六大事件：點擊、滑動、拖動、多點觸控、按壓、旋轉

六、flexible.js （0.3.2版本）

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

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

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

七、jQuery Mobile (1.4.0版本）

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

官網：http://jquerymobile.com/

• jQuery Mobile爲開發移動應用程序提供了很是簡單的用戶接口
• 這種接口的配置是標籤驅動的，這意味着咱們能夠在HTML中創建大量的程序接口而不不須要寫一行js代碼
• 擁有一個完整統一的UI框架
• 多頁面之間跳轉，徹底使用ajax加載頁面
• 性能很差，兼容性通常，UI限制大

八、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不支持IE六、bootstrap3不支持IE8如下瀏覽器
• 重量級類庫
• 站點樣式風格都同樣，沒有新意

九、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太笨重

十、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佈局

十一、Ionic(1.3版本）

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

官網：http://ionicframework.com/

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

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