Skip to main content

Posts

Showing posts with the label jquery

[探索 5 分鐘] jQuery 發展歷史

第一版 jQuery 在 2006 年發布, 支持跨瀏覽器。有人會以為 jQuery 是一個 Framework, 但其實他歸類為 JavaScript Library。 wiki 也是這麼解釋: jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. 寫在前頭, 由於 JavaScript 是很靈活的直譯式語言, 只要在 <head> <script> 參考一隻 js 就完成 jQuery 載入, 但是 1.6 版前後, 有 .attr() 與 .prop() 的差異; 以及 2.0 版以後不再相容 IE 6, 7, 8。有些開發者在維護舊系統時為了避免新舊版本衝突, 在獨立開發頁面載入較新版本, 久了造成單一站台共存 jQuery 版本, 這是非常不具維護性的做法。為了與時俱進, 建議逐漸換為新版, 並配置唯一版本的 jQuery 到 master or layout 頁統一管理。企業內若對 IE 愛不釋手, 就避免追到 1.9 版以後。因為這樣寫其實滿醜的。 <!--[if lt IE 9]> <script src="jquery-1.9.0.js"></script> <![endif]--> <!--[if gte IE 9]><!--> <script src="jquery-2.0.0.js"></script> <!--<![endif]--> jQuery History 縱看 jQuery 的版號跟出版日期, 非常活躍, 發展已經超過 10 年 (2006 ~ 2017截稿), 每年都有一次以上的版本更新, 而且還能保持精簡, Production 檔案大小約在 100 KB 內。 ver release date note 1 2006-08-26 First stable release 1.1 2007-01-14 1.2 2007-09-10 1.3 2009-0...
1 comment
Read more

[探索 5 分鐘] method chaining 設計原理

有用 jQuery 操作過 DOM 物件的同學是不是有時候會好奇, 這種把方法不斷的用「點」運算式的背後是怎麼設計的 ? 它叫做 Method chaining, 方法鏈, 比如 jQuery 這麼寫 <div id="d1" onmouseover="foo()">jQuery is fun!!</div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> function foo() { $("#d1").css("color", "red").slideUp(2000).slideDown(2000); } </script> 可以讓一個黑色文字, 滑鼠移上去時依序 > 變為紅色 > 向上滑動 2 秒 > 向下滑動 2 秒。現在大家傾向這麼寫 $("#d1").css("color", "red") .slideUp(2000) .slideDown(2000); /* 囉嗦又不流暢的寫法 var d1 = $("#d1"); if (d1 != null) { d1.css("color", "red"); d1.slideUp(2000); d1.slideDown(2000); }*/ 較為流暢, 英文叫 Fluent, 每一行有一個重點, 卻又與第一行的物件串在一起, 比傳統這麼寫好多了 wiki  有演示很多語言怎麼實作 Method chaining, 其實重點就是每次呼叫完函式, 把自己 (this or self) 回傳 (當然你回傳 null, 就 GG了)。由於大部分物件是 reference type, 僅回傳物件所在位址, 一般而言就是 4 bytes 的大小, 會影響一點效能但不大, 換...
Post a Comment
Read more

[探索 3 分鐘] 網頁 onload 與 onready 的發生順序

不知道各位辛苦的開發者, 從英文來解讀這兩個事件, 會不會遇到混淆 ? 每過一段時間, 我就會覺得觸發的順序是先 load 再 ready ? 因為 ready 放在最後面, 這才叫 ready 阿 ! 然後又記錯了, 是很嚴重的相反。只好來做一個探索筆記加深印象。 先講結論, 正確順序是先 ready 再 load, 所以聯想為 "ready to load", 這個口訣希望能幫到大家, 來一起念三次: ready to load ready to load ready to load OnLoad 首先, MDN  文件很清楚這麼說: The load event is fired when a resource and its dependent resources have finished loading. 是完成 load 時被觸發, 也就是 on loaded, on finished, 不是 on loadstart 或 on loading。這是內建的 JavaScript 事件, 常見的用途是在 body.onload, image.onload, 代表資源載入完畢了, 正在操作的用戶開始欣賞美麗的視覺。 OnReady 這個是一個非標準的事件, 並沒有內建, 網路上查到的 onready, DOMContentReady, document.ready ..., 基本上都是後來加工的。最常見的加工就是 jQuery 提供的 $(document).ready 函式, 時機點是 DOM 文件讀取完畢, 進入 ready to load (開始讀取圖片, 影音...等資源), 但對 JavsScript 腳本語言來說, 是絕佳的程式進入點 (因為你可以拿到所有的 DOM 物件了)。 程式筆記 用程式碼來記憶一下順序, 我在系統中撒了一堆程式碼片段, 在 console.log 時也把流水號加上去, 方便了解觸發順序。以下你覺得 log 顯示順序為何呢 ? document.addEventListener("DOMContentLoaded") body onload image onloadstart onloadeddata onload video ...
Post a Comment
Read more