[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


[javascript] 利用瀏覽器特性判斷瀏覽器類別

許多人使用 http 請求的 header 中 user-agent 這個欄位來判斷瀏覽器,但在許多程式及APP,其實都內建修改 user-agent 的方法。 這邊記錄一下使用 duck typing 來判斷瀏覽器的方法,而不以輕易被偽造的 user-agent 判斷。 每個瀏覽器都有一些內建的方法或特性可以判斷 參考資料: http://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser

Continue reading


[html] 惡意超連結,window.opener 隨意更改你的網頁

大家寫網頁時一定學過 a 這個標籤,用來嵌入一個超連結 在這個標籤中,附帶了一個屬性為 target,可以決定開啟時是否新開分頁 我們可以常見的設置值 “_blank”,但這個值其實帶有一些風險 以下我們將詳細說明   比如我們今天在 A 網頁中嵌入一個超連結 站內連結(新開分頁) 在新分頁中,我們打開瀏覽器開發者工具(F12)的 console 輸入以下程式碼 你會發現我們可以操控原來的A網頁並且改變原來A網頁的內容 當然你會說站內連結通常不會是惡意網站吧!? (是沒錯啦~通常不太可能) 那我們試著使用站外連結 站外連結(新開分頁) 一樣打開瀏覽器開發者工具的 console 輸入以下程式碼 從以上程式碼可以發現,我們可以透過這個新開分頁,將 A 網頁導向惡意網站 利用這樣的手法,將使用者導至釣魚網站,便能做進一步的攻擊。 其實我們只要在 a 標籤的 rel 屬性加上 rel=noopener 即可使 window.opener === null 或者避免透過 html 的 a 標籤來新開分頁,使用 javascript 做新開分頁的動作。 參考資料: https://mathiasbynens.github.io/rel-noopener/#hax

Continue reading


[javascript] map/reduce 用法與解析

在 javascript 中的陣列有兩個函式方法為 map/reduce map: 不改變目前陣列結構(長度、元素量)的情況下,將其中元素做一些處理或修改後複製至新陣列。 map 方法會針對陣列中的每個元素呼叫一次回呼函式(callback)。 回呼函式(callback)有三個參數 value:元素的值 index:元素在陣列中的索引值 array:處理前的原陣列 比如說我們想將陣列中的值都改為平方值:   reduce: 將目前陣列中的所有元素做累加的動作,例如加總所有元素,將回傳元素之累加總和。 reduce方法會針對陣列中的每個元素呼叫一次回呼函式(callback),並且提供兩個參數 callback:走訪每個元素所呼叫的回呼函式。 initialValue:初始值,可能是累加的初始值。若未傳入此參數則會從第二個元素開始呼叫回呼函式。 回呼函式(callback)有四個參數 previousValue:上一個元素呼叫回呼函式所傳回的值 currentValue:目前陣列元素的值 curretnIndex:目前陣列元素的索引值 array:處理前的原陣列 比如我們今天想將陣列中的所有元素加總     參考資料: https://msdn.microsoft.com/zh-tw/library/ff679975(v=vs.94).aspx

Continue reading


[javascript] some/every 函式用法與解析

在 javascript 中陣列有幾個檢查元素值的函式方法,這邊介紹兩個比較常用的函式 some: 用來檢查陣列中是否有任一元素符合條件。 例如: 檢查陣列中是否有元素大於 10 只要其中一個元素大於 10 就會回傳 true   every: 用來檢查陣列中所有元素是否符合條件。 例如: 檢查陣列中所有元素是否都大於 10 只要有其中一個元素不符合條件就會回傳 false   參考資料: http://www.w3schools.com/jsref/jsref_some.asp http://www.w3schools.com/jsref/jsref_every.asp

Continue reading


[javascript] filter用法與移除陣列中重複的元素

javascript 中的 filter 函式,可以幫助我們過濾一個陣列中符合條件的元素,若不符合則刪除。不更改原陣列,而回傳新陣列。 filter 函式,接受一個 callback 函式,callback 可以有三個參數(element, index, array), element:陣列元素的值。 index:陣列元素的所在位置。 arr:已經過 filter 處理的陣列 比如說要過濾陣列中值小於10的元素 callback 中,回傳 false 的元素將會被移除,但注意元陣列並未改變,而是回傳新陣列。 利用這個函式,我們可以使用在過濾陣列中重複的元素 這樣就可以簡單又快速地快濾重複的元素~ 參考資料: https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/filter http://larry850806.github.io/2016/07/16/JS-tips/

Continue reading


[javascript] for….in的用法與注意事項

在 javascript 中,有 for、foreach 及 for…in 這幾個走訪陣列的迴圈可以使用,然而 for..in 它可以走訪物件的屬性名稱與值。 但 for…in 也有一些特別需要注意的地方。 我們先來看一些基本的用法吧~ 上面這段程式碼可以看到 for…in 可以應用在走訪陣列與物件屬性上面。 接下來我們看 for…in 有沒有什麼需要注意的地方 我們從上面這段程式碼,可以發現 for…in 是會連繼承的屬性和方法都會走訪。 但是在大多數時候,我們是不需要走訪所繼承的屬性及方法。 因此我們必須使用 hasOwnProperty() 檢查這是否為非繼承的屬性(true/false) 例如將上面程式碼改為以下: 這樣就不會把原型(prototype)中的方法也印出來囉! 參考資料: https://pjchender.blogspot.tw/2016/06/javascript-for-in-function.html

Continue reading