釘釘js依賴庫學習


看別人用的依賴庫的好處在於,你知道有什么可以用,什么可以借鑒。(釘釘——協作桌面應用)

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/


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM