Sign in Subscribe
[JavaScript] 檢查 DOM 載入狀態 Document.readyState

[JavaScript] 檢查 DOM 載入狀態 Document.readyState

3 min read javascript
有點經驗的前端工程師都知道需要使用 window.onload 、 addEventListener('load') 或是 jQuery 的 $(document).ready() 來確定 DOM 載入完成， 用來確保 JavaScript 不會因為找不到 DOM ， 而導致程式無法運行 不過只是單單使用上面的監聽方式是不夠的，這邊分享一下實際踩雷的經驗 -------------------------------------------------------------------------------- 當今天有使用者使用你開發的套件的時候，他不一定會在一開始就會載入你開發的套件 用下面的代碼來解釋： game.js const run = () => { const startGame
[JavaScript] JavaScript 重要觀念： By Value & By Reference

[JavaScript] JavaScript 重要觀念： By Value & By Reference

5 min read javascript
通常 初學者 在撰寫 JavaScript 腳本時，相信都有碰到過一個問題，就是有時候會 沒有辦法去掌握當前的 變數 (Variable) 現在的狀態是什麼 ? ，尤其是針對 物件 (Object)，的資料進行操作的時候，會發現物件內的元素不如自己的預期 下面是常見的實際案例： 可以閱讀後，去執行看看，如果執行的結果不是你預期的，那就應該認真把這篇文章看完了 let arr = [] let data = { id: 0 } for(let i = 0; i <
[Canvas] 使用 JavaScript 實作 canvas 畫筆的功能

[Canvas] 使用 JavaScript 實作 canvas 畫筆的功能

4 min read Canvas
畫筆的功能 大家都有玩過小畫家，我們可以使用小畫家的畫筆，輕鬆的畫出一些我們想要的圖案，相當的趣味也非常的方便 畫筆的功後續也演變為一些電子簽證的機制，最近剛好也碰到了一些類似的需求 決定在下方做個製作上的紀錄，下方提供了一個比較陽春的版本當作範例，也是為了方便理解他的製作方式 See the Pen Canvas 畫筆 [https://codepen.io/SkyRoxas/pen/eVQeeR/] by SkyRoxas ( @SkyRoxas [https://codepen.io/SkyRoxas]) on CodePen [https://codepen.io]
[Vue.js][踩雷篇] Vue v-on:click does not work on component

[Vue.js][踩雷篇] Vue v-on:click does not work on component

2 min read javascript
剛使用 Vue 進行前端開發的項目，往往會碰到一些自己想不到的問題與細節，在 Vue.js 踩雷篇 的主題中進行紀錄： 問題： * Vue v-on:click does not work on component * Vue 的 component 上使用 v-on 來綁定 click 等事件沒有反應 -------------------------------------------------------------------------------- 情境： > 以下為 webpack vue load