看別人用的依賴庫的好處在於,你知道有什么可以用,什么可以借鑒。(釘釘——協作桌面應用)
PS:人最怕是不知道,而不是你不會。
1. jQuery
釘釘使用了1.9.1版本的jQuery,jQuery作為一個最為廣泛使用庫,已經不用說明它是什么了。
學習地址:http://jquery.com/
PS:Includes Sizzle.js
2. jQuery Hotkeys
jQuery插件,可用來監聽鍵盤事件,幾乎支持所有的組合鍵。
學習地址:https://github.com/jeresig/jquery.hotkeys
示例:
$(document).on('keydown', null, 'ctrl+a', function(e){ console.log('ctrl+a!!', e); });
3. jQuery Caret
jQuery插件,處理文本框的插入位置。
學習地址:https://github.com/accursoft/caret
4. jQuery atwho
jQuery插件,自動完成提示插件(autocomplete mentions),類似微博的@功能。
學習地址:https://github.com/ichord/At.js
演示地址:http://ichord.github.io/At.js/ (支持Textarea、ContentEditable、CKeditor等富文本編輯器)
PS:基於Caret.js
5. jQuery tooltips
jQuery插件,一個簡單的提示插件,風格挺舒服的。
學習地址:https://formstone.it/components/tooltip/
PS:這只是formstone其中一個庫,還有其他有意思的。
6. jQuery mousewheel
jQuery插件,用於添加跨瀏覽器的鼠標滾輪支持。
mousewheel事件的處理函數有一點小小的變化,它除了第一個參數event 外,還接收到第二個參數delta。通過參數delta可以獲取鼠標滾輪的方向和速度。
學習地址:https://github.com/jquery/jquery-mousewheel
示例:
$('#my_elem').on('mousewheel', function(event) { console.log(event.deltaX, event.deltaY, event.deltaFactor); });
7. QR Code Generator
二維碼生成器,純前端生成。
學習地址:https://github.com/kazuhikoarase/qrcode-generator/tree/master/js
示例:
HTML:
<div id="code"></div>
JS:
var typeNumber = 4; var errorCorrectionLevel = 'L'; var qr = qrcode(typeNumber, errorCorrectionLevel); qr.addData('Hi!'); qr.make(); document.getElementById('code').innerHTML = qr.createImgTag();
PS:其他語言的該作者也有提供。
8. libphonenumber
Google的JavaScript庫,用於解析,格式化和校驗國際電話號碼。
學習地址:https://github.com/googlei18n/libphonenumber/tree/master/javascript
9. Underscore.js
Underscore一個JavaScript實用庫,提供了一整套函數式編程的實用功能,但是沒有擴展任何JavaScript內置對象。
學習地址:http://www.css88.com/doc/underscore/
PS:這個真是個不錯的庫。
10. AngularJS
AngularJS是一個框架(不是庫),在我印象里最大的特點是雙向數據綁定。
學習地址1: http://angularjs.org
學習地址2: http://www.apjs.net/
AngularJS拓展指令
1. angular-qrcode
An AngularJS directive to creates QR Codes using Kazuhiko Arase’s qrcode-generator library.
學習地址:https://github.com/monospaced/angular-qrcode
2. angular-ui/ui-select2
This directive allows you to enhance your select elements with behaviour from the select2 library.(這個指令已經過時。)
學習地址:https://github.com/angular-ui/ui-select2
PS:這個指令依賴的jQuery select2庫(https://select2.github.io/),這個庫非常不錯,效果如下:
3. others
還有使用到其他AngularJS拓展指令, 可在這查看:http://angular-ui.github.io/