啊啊學語

Posts

Showing posts from 2020

重複註冊相同的 eventListener，會發生什麼事？

- November 29, 2020

事情是這樣的：我加入了 AlphaCamp 的學期 2-1：JavaScript 前端開發課程（2020 年 11 月班），有一份作業，是要讓籃球隊計分板的計分按鈕，具備加減分的功能。我首先利用 displayPlayerList() 函數，將每個球員的得分狀況更新到網頁上，然後再為網頁上的計分按鈕加上計分功能。觀摩其他同學繳交的作業時，我發現一份很特別的作業：有位同學把按鈕的計分功能封裝在 displayPlayerList() 的函數裡了，程式碼如下： See the Pen 學期2-1_A21Q1: 彩子的計分版：按鈕功能 _觀摩同學作業 by Flora ( @rossignol ) on CodePen . 這個寫法啟發了我，讓我好奇一件事：如果我執行了許多次 displayPlayerList()，那麼，在 dataPanel 這個元素上，到底會註冊幾個 eventListener？我猜測，如果執行了 n 次 displayPlayerList()，就會註冊 n 個 eventListener 的話，那麼，點擊一次加分鈕就會加 n 分，而點擊一次減分鈕就會扣 n 分。我著手驗證這個猜測，結果是，不管我執行幾次 displayPlayerList()，每次點擊都只會 +1 或 -1；但是每次點擊，DevTools 的 console 上跳出來的警告訊息數量，會隨著 displayPlayerList() 執行次數增加而增加。這究竟意味著什麼？執行 displayPlayerList() 的次數，跟 eventListener 註冊的數量之間到底是什麼關係？因為完全不知道該如何自己解開謎題（我試著用「eventListener count」搜尋，跳出一些「怎麼用 eventListener 計算點擊次數」的討論串，然後我就放棄用這組關鍵字尋找答案了），所以我直接留言請問助教大神。助教大神直接找來文件 EventTarget.addEventListener() - MDN （我這才發現，自己完全沒意識到，這種時候可以去查文件），在 Multiple identical event listeners 這個小節裡提到，針對同一個 EventTarget ，無法重複註冊相同的 EventListener；但，若 EventL

浮點數計算

- October 17, 2020

二進制和十進制轉換過程中，產生的誤差範例： 0.1 + 0.2 = 0.30000000000000004 100 / 3 = 33.333333333333336 1/3 * 100 = 33.33333333333333 相關參考資料：重新認識 JavaScript: Day 03 變數與資料型別 JavaScript 浮點數陷阱及解法只有1%的Python 程式設計師搞懂過浮點數陷阱 IEEE-754 Floating Point Converter

JavaScript: typeof operator

- October 17, 2020

typeof null === 'object' 若想檢查某個項目是否為 object，而且要排除 null，可以寫： if (待檢查項目 && (typeof 待檢查項目 === 'object' || typeof 待檢查項目 === 'function')) { console.log('This is an object.') } else { console.log('This is not an object!') } typeof NaN === 'number' 若想檢查某個項目是否為 number，而且要排除 NaN，可以寫： if (Number.isNaN(待檢查項目) === false && typeof 待檢查項目 === 'number') { console.log('This is a number.') } else { console.log('This is not a number!') } 其他相關參考資料：重新認識 JavaScript: Day 03 變數與資料型別重新認識 JavaScript: Day 04 物件、陣列以及型別判斷 typeof - MDN

寫 JavaScript 的推薦習慣

- October 14, 2020

👻 'use strict' JavaScript 的嚴格模式 "use strict" 節錄：現在會建議寫 JavaScript 的時候加入 'use strict'，這可以改正一些編寫時的不良習慣，但也有可以因此導致專案無法運作，此時可以考慮將 'use strict' 加在函式內，避免影響過去的程式碼及相關套件。 👻 避免型別強制轉換（coercion），因為轉換後的結果可能不符我們的期待使用 ===，不使用 == 使用 !==，不使用 != 在運算前先自行檢查型別，例如： if (typeof a === typeof b) { //先自行檢查型別 a + b //再做運算 } else { console.log('error') } 👻 盡量使用 let 和 const 宣告變數，不要用 var 宣告變數，以避免變數汙染的問題 👻不要將變數的值設為 undefined：這樣一來，在 debug 時，若想釐清變數的值為什麼是 undefined，可以很方便地直接排除「我們將該變數的值設定為 undefined」這種可能性，而能直接確認，是由於我們沒有設定過該變數的值。

我的 Visual Studio Code 設定

- October 14, 2020

settings.json { "editor.tabSize": 2, "editor.wordWrap": "on", "editor.formatOnSave": true, "editor.formatOnPaste": true, "workbench.settings.openDefaultSettings": true, "javascript.validate.enable": false, //for Extension "StandardJS - JavaScript Standard Style" "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // 宣告函式時，函式名稱和 () 之間有一格空格 "editor.detectIndentation": false, // 儲存檔案時，讓 autoformat 縮排是兩格 "diffEditor.ignoreTrimWhitespace": false, // 儲存檔案時，讓 autoformat 縮排是兩格 "emmet.includeLanguages": { "javascript": "html", }, "vetur.format.defaultFormatter.html": "js-beautify-html", // format .vue html "vetur.format.defaultFormatter.js": "vscode-typescript", // Let the js in vue formatted according

CSS 起手式

- October 11, 2020

Reset CSS /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockq

HTML 起手式

- October 11, 2020

<!DOCTYPE html> <html> <head> <meta charset=UTF-8> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> </title>  <script type="text/javascript" src="檔案網址"></script> </head> <body>  <script type="text/javascript" src="檔案網址"></script> </body> </html>

JavaScript/ HTML/ CSS 工具資源

- October 11, 2020

JavaScript 語法觀念寫 JavaScript 的推薦習慣 Operator precedence and associativity, grouping and short-circuiting - MDN coding style： JavaScript Standard Style Guide 中，比較重要的規範： 2 格縮排字串使用單引號沒有未使用的變數沒有分號關鍵字後加空白函式名稱後加空白永遠使用 === Airbnb JavaScript Style Guide Google JavaScript Style Guide Idiomatic JavaScript Style Guide JavaScript: The Good Parts JavaScript 的 Reference 遊戲深入探討 JavaScript 中的參數傳遞：call by value 還是 reference？小心地雷重新認識 JavaScript 系列 JavaScript 全攻略：克服 JS 的奇怪部分 JavaScript 常見大坑與細節 JavaScript: typeof operator 浮點數計算型別強制轉換（coercion），範例： 3 < 2 < 1 // true (3 < 2 是false，為了計算 false < 1 的值，false 轉換成 0) 1 + '2' // '12' (數字 1 轉換成字串 1) JavaScript Type Conversion - W3S JavaScript-Equality-Table (==, ===, if() ) Equality comparisons and sameness (==, ===, Object.is, SameValueZero) - MDN 繪製流程圖 Draw.io Google Drawing 程式碼編輯器（text editor） Visual Studio Code：我的 Visual Studio Code 設定 Sublime Text Atom Vim Emacs Brackets WebStorm 編輯器套件（extension）自動修訂語法格式： JSLint