Dollar Symbol 深入淺出 Note

gistfile1.md

Note for http://5xruby.kktix.cc/events/jquery-source

History

• 1.9 把 depreciate 拿掉
• 2.0 不支援 IE6~8

Build 方式

• 1.8 有支援 require modules
• Before 1.11 - File Concat 用 grunt 設定依序把 modules 編入 After 1.11 - 用 AMD, r.js > 處理 dependency
• 2.0: task/build.js 用 require.js 處理 有 wrap / startFile, endFile 等 r.js 的 func onBuildWrite > compile 寫進前會自動 call convert 這個 func > 把 define('var... ) 替代掉

jQuery ready

• $(document).ready 沒事不要用 - 放最下面就可以了，用了會多幾個 call $(function()) 效果一樣，jquery 看到第一個參數是 function，就會視為 ready

• jQuery.fn.ready = jQuery.ready.promise().done( fn );

• func 內 setTimeout( jQuery.ready ); > 把 function call delay 到 callstack 最後面

• jquery ready promise > 2.0 跟 1.9 差非常多行，作很多 IE hack

• 1.9~2.0 jQ.ready 內部也用很多 jQ.ready

• 為什麼 JS 要用 $ 跟 _ > 因為除了英文跟大小寫，只有這兩個可以用

• Rails 為什麼要把 script 放在最上面？ > 因為 rails pattern 預期全站的 js 都會壓成 application.js，所以只要進首頁 js 就會被 cache 起來

• jQuery 授權是 MIT, 2012/9 從 MIT/GPL 成為 MIT contributor 會簽 Contributor License Agreement

• 在 Github 內 trace code > 快速鍵 T - 搜檔案名

Function Init

• $('div/#id/.class/<div>') > return 永遠是 Array, (為了 match querySelectAll)

• 全站都用得到的 JS 不要用 require JS > 每個畫面都會壓一次 jQuery

• jquery = return jQuery.fn.init() > 所有動作都是交給 fn.init() 作各種判斷

• rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/ 判斷 selector 是 tag or id, 1.6.2 有 XSS

• 如果 selector 是 tag 就直接放 array, 不是就做 regex 判斷

• jQuery.find = Sizzle

• document.querySelectAll > 類似 IE9 之後內建的 jQuery

Deferred

• Deferred: function (建構式)

  行為 resolve/reject/notift 假設 done/fail/progress 狀態 state resolved/rejected/pending

• tuples

• XOR: magic trick: tuples[ i ^ 1 ][ 2 ].disable, tuples[ 2 ][ 2 ].lock );

• .done 跟 .then 有什麼不一樣: done 是同一個 call stack, 不一定順序, then 是不同的 deferred object

推薦 JS 書

• 推薦 JavaScript the good part, 看附錄 the bad part 背一背
• Eloquent JavaScript > 最適合初學者的書