[javascript] 清空 array 的方法介紹與比較(new、pop 及 shift…等)

紀錄一下幾個 javascript 清空陣列的方法比較。 指派一個新的空陣列 reference arr = []; ps. 如果有其他變數仍然指到原本的陣列,會造成占較多 memory,以至於效能不佳。 長度設為 0 arr.length = 0; splice 移除 arr.splice(0, arr.length); 迴圈 pop 清空 迴圈 shift 清空 來看看上面這幾個清空陣列的 jsperf 效能比較:https://jsperf.com/array-destroy/40 在多數瀏覽器,pop 和 shift 的方法最有效率,但在 firefox new 的方法效率遠大於其他方法。   參考資料: http://www.jstips.co/en/javascript/two-ways-to-empty-an-array/

Continue reading


[javascript] throttle 與 debounce,處理頻繁的 callback 執行頻率

在 javascript 的程式碼執行,採的是非同步的 callback 函式。 因此時常會是一個 event 觸發 callback 執行,但有時可能會頻繁的觸發事件(比如說瀏覽器的 resize 或 scroll 等等事件) 這時候如果每次觸發都執行 callback 可能不是這麼必要,甚至導致程式碼執行效率不佳 我們就可以透過 underscore.js throttle 或 debounce 的方法去優化這些 callback 的執行時間點。 debounce: 把短間隔時間(自行設定微秒)內重複觸發的事件合併為一個(自行設定觸發時間點),只呼叫一次 callback。 像是當瀏覽器 resize 時,會頻繁觸發 resize 事件,使用 debounce 就可以達到視窗最後改變時再觸發 callback。 下面例子,試著把滑鼠頻繁的在 Trigger area 中移動,可以看到 debounce 函數的實際效果。 See the Pen Debounce. Trailing by Corbacho (@dcorb) on CodePen. 上面這個例子,可以看到當你在 Trigger area 頻繁移動滑鼠(400微秒內)時,僅會觸發一次的 […]

Continue reading


[Javscript] insertAdjacentHTML、insertAdjacentText,vanilla.js 就支援的插入 HTML 及文字

最近才知道 HTML 元素有 insertAdjacentHTML  insertAdjacentText這兩個方法,讓插入 HTML 或文字位置時可以比較有彈性。(類似 jQuery prepend 或 append 等等) 以下就來介紹他的用法吧~ insertAdjacentHTML(position, text) 及 insertAdjacentText(position, text) position: beforebegin: 插入在元素標籤前(外層) afterbegin: 插入在元素標籤內的開頭 beforeend: 插入在元素標籤內的結尾 afterend: 插入在元素標籤後(外層) text: 期望插入的 HTML 字串或純文字。 ps. insertAdjacentText 與 insertAdjacentHTML 差別就在 insertAdjacentHTML 僅允許插入純文字。 直接來看看程式碼或許會更理解囉~ 參考資料: https://developer.mozilla.org/zh-TW/docs/Web/API/Element/insertAdjacentHTML https://developer.mozilla.org/zh-TW/docs/Web/API/Element/insertAdjacentText

Continue reading


[javascript] vanilla js 實作 JQuery.extend 方法

若有使用過 JQuery,或許會對 extend 這個方法有些熟悉及基本了解。 先來看看 extend 的用法 jQuery.extend(obja, objb) 方法輸入為兩個參數,此方法會判斷 obja 與 objb 屬性,將 objb 物件所擁有的屬性覆寫/新增至 obja,並回傳 obja。 來看看程式碼比較快理解~ 從上面的例子可以發現幾個值得注意的地方 a 與 b 都存在的屬性,會被 b 覆寫 a 與 c 是同一個物件   接下來,我們試著用 vanilla js 實作 extend 函式 上面這段程式碼簡單實作了jQuery 基礎的 extend,但實際的 jquery.extend 提供更多的選項及參數彈性 舉例來說: 上面這段程式碼, a 與 b 物件皆有 second ,而且 second 底下的屬性是不相同的,但卻直接被覆寫。 也就是沒有 deep extend […]

Continue reading


[javascript] vanilla js 實作 addClass() 與 removeClass()

以前寫 javascript 要去改變 新增/刪除 元素的 Class 總是覺得 jquery 方便許多,今天想說來整理個純 javscript 實作 addClass() 和 removeClass() 目前處理元素的 Class,我們可以使用 className 及 classList(支援IE10以上及各瀏覽器,部分瀏覽器有些小限制)。 以下例子會使用到 querySelectorAll (IE8以上之瀏覽器支援) 首先看使用 className 的實作 上面這段程式碼使用 className 實作出 selector addClass 的功能   上面這段程式碼則使用 className 實作出 selector removeClass 的功能   接下來我們換成使用 classList 實作 addClass() 與 removeClass()。(支援IE10 以上) 上面這段程式碼使用 classList 實作出 addClass()   上面這段程式碼使用 classList 時作出 removeClass() […]

Continue reading


[javascript] Singleton 唯一實體

最近跟同事討論到了 Singleton 的實作,之前都沒有想過實際的細部實作 要創造一個物件,我們可以使用物件或 new 方法,以下我會分別介紹這兩種方法如何實作 Singleton。 物件: 上面這段程式碼 a 和 b 將會是相同實體。   new 方法建造物件: 利用這個 myInstance 物件(函式)的靜態變數 (instance) 記住已經建造過的物件,讓之後建造時都回傳先前已存在之物件。   這段程式碼則是另一種 new 方法的 Singleton 的實作方法,第一次進函式時,覆寫 myInstance 的 constructor,之後 new myInstance() 時,其實只會 return instance。   參考資料: http://stackoverflow.com/questions/1479319/simplest-cleanest-way-to-implement-singleton-in-javascript http://stackoverflow.com/questions/31222765/javascript-singleton-pattern http://cythilya.blogspot.tw/2015/06/javascript-design-pattern-singleton.html

Continue reading


[javascript] call by reference 還是 call by value?

在 javascript 中,究竟是 call by value 還是 call by reference? 讓我們嘗試執行以下的例子及程式碼測試看看 上面這段程式碼,我們用 add() 將 a 加 1,但實際上並沒有真正的讓 a=2,可以猜測在這個例子中,函式 num 為 a 的複製,而不是真正對 a 的實體做加減。 上面這段程式碼,我們用 empty() 將 a 的值改為空字串,如上面那個例子,str 也是 a 的複製,不是對 a 的實體操作。   在上面這段程式碼,我們可以發現在物件則是對實體進行操作。   從上面這個例子看起來卻不是完全的 call by reference,   因此大概可以發現在 javascript 中,對於 Primitive type(Number、 String及Boolean等)為 call by value。 在物件、陣列及函式時則為 call by reference。(當然有一些爭議) […]

Continue reading


[javascript] requestAnimationFrame 與 css3 animation 比較

之前看到了 requestAnimationFrame 的實作改善了原本使用 setTimeout 與 setInterval 所繪製動畫可能造成的效能問題。(相關文章) 於是想說來試著比較看看目前 css3 animation 與 使用 requestAnimationFrame 的 FPS 差異。 我只打算測試看看 chrome 跟 firefox,因為懶惰XD 首先我們先試著打開瀏覽器 dev tool 中的 FPS 監視器。 chrome 的開啟選項如下圖 打開此選項後,我們可以看到目前的 FPS 及使用的記憶體等資訊。 接下來我們嘗試寫一段 requestAnimationFrame 與 css3 animation 的程式碼 我們可以切換上面這段動畫所實作的方式( requestAnimationFrame 或 css3 animation) 我自己實測 Chrome: requestAnimationFrame 的 FPS 大概在 20-25,GPU 記憶體使用量為 7.5 MB css3 animation FPS則維持 60FPS,GPU 記憶體使用量為7.5 MB […]

Continue reading


[javascript] requestAnimationFrame 優化動畫效率與資源

今天看到這篇才知道原來瀏覽器有實作這樣一個動畫優化的 API 接口。 實際的支援度: IE10 以上的瀏覽器幾乎都支援。 以下大概解釋一下 requestAnimationFrame 實作原因及解決的問題 過去我們若使用 javascript 製作動畫,原理通常是使用 setTimeout 或 setInterval 去定時(如: 10ms)更改我們的 css 樣式。 但這樣的一個方法可能會導致效能的低落。 因為瀏覽器本來會有自己的 FPS 更新頻率,若我們設置的時間過短(小於瀏覽器FPS),反而導致過度的繪製及消耗過多資源。(可能導致耗電或效能等) 假設上面一列瀏覽器畫面為 16.7 毫秒的顯示頻率,而下面一列代表 10 ms setTimeout。 其實每個第三個繪圖是無法繪製的 (以紅色箭頭表示),因為在達到顯示器重新整理間隔之前就發生了另一個繪圖要求。 這樣的過度繪製造成動畫產生波紋,因為每個第三個畫面格都遺失了。這個降低的計時器解析度不但會對電池使用時間產生負面影響,也會降低其他應用程式的效能。 因此 requestAnimationFrame 主要是提供一個接口,讓動畫同步於瀏覽器畫面更新頻率。 來看看用法吧~ 跟一般 setTimeout 及 setInterval 用法相當類似,同樣傳入一個 callback ,但不需要傳入計時器微秒數(瀏覽器畫面更新時會自動呼叫這個 callback requestAnimationFrame(callback) 會回傳一個唯一的requestID,可以透過呼叫 cancelAnimationFrame(requestID) 取消此動畫。 直接看簡單的例子吧~ 上面是一個相當簡單的動畫,根據瀏覽器更新頻率去定時更新元素的 style 值。 PS. 以前就是因為 setTimeout 與 setInterval 讓我盡量避免使用 javascript […]

Continue reading