JS(JavaScript)腳本庫的積累

在如今互聯網盛行的時代，使得B/S架構飛速發展。曾經在大學的時候我一直都夢想着畢業後要找一個像騰訊這樣大企業作C/S方面的開發工做（其實如今騰訊也有不少B/S軟件），由於C/S體驗度很是高，感受很是好。可是此時此刻，我卻沒有這樣的想法了。這是爲何呢？對於有經驗的軟件工程師都很清楚，B/S的程序部署在服務器，客戶端只須要瀏覽器便可使用，而C/S須要客戶在終端安裝客戶端程序，因此B/S在維護和升級方面的簡易性上，無疑有獨有優點，並且對客戶端的硬件要求相對於C/S軟件通常都要低。B/S固然它也有它的弊病，就是客戶端使用不一樣版本瀏覽器，顯示結果會有所差別，這個其實就是瀏覽器的兼容性致使的，而C/S通常不存在。

 

如今隨着經濟水平的發展，對物質的要求愈來愈高，對互聯網的體驗度的也要求愈來愈高，因此網站設計體驗愈來愈重要，它關係到產品的成敗（產品的成敗是指的客戶是否接受，而不是產品能夠正常運行）。一些中大型軟件公司都有獨立的UED部門，他們主要從事軟件界面設計，小公司的話也有美工設計。其實對於一個網站前端設計，大體主要是四大技術HTML+CSS+IMAGE+JS（暫不談論優化這一塊的技術）。其中JS提升體驗度的重中之重。由於JS是前端腳本，不少公司和工程師，爲了方便開發，封裝了不少JS庫，供團隊使用。其中互聯網上有不少很是優秀開源JS庫，均可以找到源碼，示例和文檔。一個網站若是用這些JS庫就會加快項目開發速度，並且它們兼容性會更好，用戶的體驗度也會更高。咱們一般可使用JS庫能幫助咱們實現不少複雜的功能或者經常使用的功能，如：菜單樹、彈窗、驗證、文本編輯器、圖表、日期等。

 

咱們使用這些JS庫的其實目的很簡單，就是爲了讓他幫助實現本身想實現的部分功能。這裏就須要考慮到了一些問題，如代碼開源與否，是否還有團隊維護，是否容許商用，同行使用率是否高等。以方便使用過程當中遇到問題，能夠獲得維護團隊的解決或自行解決。由於JS也是別人寫的，它就是一個產品（開發團隊可能公開源碼卻不容許商用。其中開源協議中有定義，能夠百度找下），它就會存在bug。

 

我之因此廢話這麼多，其實就是想表述JS值得你們去學習和研究，網絡上的資源不少。即便你是後臺工程師，你學習它對工做會有很是大幫助。

 

下面我再來總結一下經常使用的JS腳本庫，供你們學習參考。其實大多數的JS庫都是基於jQuery

 

1、基本庫

 

1、jQuery

 

a、簡介

 

JQuery是繼prototype以後又一個優秀的Javascript庫。它是輕量級的js庫 ，它兼容CSS3，還兼容各類瀏覽器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及後續版本將再也不支持IE6/7/8瀏覽器。jQuery使用戶能更方便地處理HTML（標準通用標記語言下的一個應用）、events、實現動畫效果，而且方便地爲網站提供AJAX交互。jQuery還有一個比較大的優點是，它的文檔說明很全，並且各類應用也說得很詳細，同時還有許多成熟的插件可供選擇。jQuery可以使用戶的html頁面保持代碼和html內容分離，也就是說，不用再在html裏面插入一堆js來調用命令了，只須要定義id便可。

 

jQuery是一個兼容多瀏覽器的javascript庫，核心理念是write less,do more(寫得更少,作得更多)。jQuery在2006年1月由美國人John Resig在紐約的barcamp發佈，吸引了來自世界各地的衆多JavaScript高手加入，由Dave Methvin率領團隊進行開發。現在，jQuery已經成爲最流行的javascript庫，在世界前10000個訪問最多的網站中，有超過55%在使用jQuery。

 

jQuery是免費、開源的，使用MIT許可協議。jQuery的語法設計可使開發者更加便捷，例如操做文檔對象、選擇DOM元素、製做動畫效果、事件處理、使用Ajax以及其餘功能。除此之外，jQuery提供API讓開發者編寫插件。其模塊化的使用方式使開發者能夠很輕鬆的開發出功能強大的靜態或動態網頁。

 

jQuery，顧名思議，也就是JavaScript和查詢（Query），便是輔助JavaScript開發的庫。

 

c、官方網站：http://jquery.com/ 

 

b、學習指南或文檔

 

     學習教程：http://www.w3school.com.cn/jquery/

 

     在線API：http://www.css88.com/jqapi-1.9/

 

※注：jQuery2.*將再也不支持IE6/7/8瀏覽器，若是你沒法拋棄IE 6/7/8，那麼你能夠繼續使用jQuery 1.*

 

2、經常使用JS庫

 

1、驗證（jquery.validate）

 

a、簡介

 

這個 jQuery 插件方便簡單驗證客戶端表單，同時仍提供大量的自定義選項。若是您正在從新開始構建一些新的東西，但當想要的已有的東西(這裏指的是JS腳本)融入現有的應用程序裏，它使一個不錯的選擇。該插件捆綁了一組有用的驗證方法，包括 URL 和電子郵件驗證，同時提供一個 API 來讓你您本身編寫方法。全部驗證方法能夠默認錯誤提示消息語言是英語和已經翻譯成的其餘37語言。

 

b、官方網站：http://jqueryvalidation.org/

 

c、學習指南或文檔:http://jqueryvalidation.org/documentation/

 

2、彈窗(artDialog)

 

a、簡介

 

artDialog是一個精巧的web對話框組件，壓縮後只有十多KB，而且不依賴其餘框架。

 

b、官方網站：http://jqueryvalidation.org/

 

c、學習指南或文檔:http://jqueryvalidation.org/documentation/

 

3、日期(My97日期控件)

 

a、簡介

 

支持靜態限制，動態限制，腳本自定義限制，以及無效天和無效日期功能，利用這樣功能能夠任意定製不能選擇的日期，這些日期即便毫無規律，毫無連續性，也能夠經過這些功能的組合使用輕鬆搞定。

 

b、官方網站:http://www.my97.net

 

c、學習指南或文檔:見官網

 

4、菜單樹(zTree)

 

a、簡介

 

zTree 是一個依靠 jQuery 實現的多功能 「樹插件」。優異的性能、靈活的配置、多種功能的組合是 zTree 最大優勢。專門適合項目開發，尤爲是 樹狀菜單、樹狀數據的Web顯示、權限管理等等。

 

b、官方網站: http://www.ztree.me

 

c、學習指南或文檔: 見官網

 

5、圖表(ECharts)

 

a、簡介

 

ECharts，縮寫來自Enterprise Charts，商業級數據圖表，一個純Javascript的圖表庫，能夠流暢的運行在PC和移動設備上，兼容當前絕大部分瀏覽器（IE6/7/8/9 /10/11，chrome，firefox，Safari等），底層依賴輕量級的Canvas類庫ZRender，提供直觀，生動，可交互，可高度個性化定製的數據可視化圖表。創新的拖拽重計算、數據視圖、值域漫遊等特性大大加強了用戶體驗，賦予了用戶對數據進行挖掘、整合的能力。

 

支持折線圖（區域圖）、柱狀圖（條狀圖）、散點圖（氣泡圖）、K線圖、餅圖（環形圖）、雷達圖（填充雷達 圖）、和絃圖、力導向佈局圖、地圖、儀表盤、漏斗圖、事件河流圖等12類圖表，同時提供標題，詳情氣泡、圖例、值域、數據區域、時間軸、工具箱等7個可交 互組件，支持多圖表、組件的聯動和混搭展示。

 

b、官方網站：http://echarts.baidu.com

 

c、學習指南或文檔: 見官網

 

6、在線編輯器(KindEditor)

 

a、簡介

 

KindEditor是一套開源的HTML可視化編輯器，主要用於讓用戶在網站上得到所見即所得編輯效果，兼容IE、Firefox、Chrome、Safari、Opera等主流瀏覽器。KindEditor使用JavaScript編寫，能夠無縫的於Java、.NET、PHP、ASP等程序接合。

 

b、官方網站：http://kindeditor.net

 

c、學習指南或文檔: 見官網

 

 

 

3、WebUI

 

1、jQuery UI

 

a、簡介

 

jQuery UI 是以 jQuery 爲基礎的開源 JavaScript 網頁用戶界面代碼庫。包含底層用戶交互、動畫、特效和可更換主題的可視控件。咱們能夠直接用它來構建具備很好交互性的web應用程序。全部插件測試能兼容IE 6.0+, Firefox 3+, Safari 3.1+, Opera 9.6+, 和GoogleChrome。

 

b、官方網站：http://jqueryui.com/

 

c、學習指南或文檔: http://www.w3cschool.cc/jqueryui/jqueryui-intro.html

 

2、EasyUI

 

a、簡介

 

jQuery EasyUI是一組基於jQuery的UI插件集合體，而jQuery EasyUI的目標就是幫助web開發者更輕鬆的打造出功能豐富而且美觀的UI界面。開發者不須要編寫複雜的javascript，也不須要對css樣式 有深刻的瞭解，開發者須要瞭解的只有一些簡單的html標籤。

 

b、官方網站：http://www.jeasyui.com/

 

c、學習指南或文檔: http://www.w3cschool.cc/jeasyui/jqueryeasyui-tutorial.html

 

因爲時間的關係有些JS庫的資料還未整理好，等整理好後，再作更新。