隨記

摘要： JS 中異步任務隨處可見，比如： 1、用戶交互的點擊、輸入 2、網絡請求的 fetch、ajax、WebSocket 3、資源中的圖片、腳本加載 4、定時任務 setTimeout、setInterval、動畫 5、Web Worker 中的后臺任務 以上這些地方都能見到 JS 異步任務使用場景。 閱讀全文

摘要： 在 ES6 之前，JS 的多行字符串一直是開發難題，在處理多行字符串時，各種各樣的方案都有~~ 在 JS 中，如果直接這樣寫多行字符串： const str1 = '第一行 第二行'; 那瀏覽器轉過來就打臉，分分鐘報錯： Uncaught SyntaxError: Invalid or unexpe 閱讀全文

摘要： 開發中經常會遇這樣的需求：點擊 A 元素的時候，需要觸發 B 元素的事件，比如：點擊一個 div 元素，然后觸發 input:file 的 click 事件，用來選擇文件上傳。 click 方法 以上需求可通過元素的 click 方法觸發： <style> .test2 { padding: 4px 閱讀全文

摘要： 題外話 在考察事件基礎的時候，會經常被問及 click、mousedown、mouseup 它們三者執行的先后順序是怎樣的？ 如果平時沒太注意，這細節可能就會忽略，畢竟很少會在同一個元素上面同時綁定這三個事件~~ 直接上示例： <div class="c">測試點擊事件</div> <script> 閱讀全文

摘要： 如今 Vue 大行其道，大部分開發場景直接使用 @click 就實現了事件綁定，可能都沒思索過 JS 中的事件性能優化。 事件委托原理 事件委托 其主要是利用了事件冒泡這個特性。 以點擊事件 click 為例：將事件綁定在父元素上，點擊子元素會通過冒泡的方式觸發父元素的點擊事件。這種綁定事件的方式， 閱讀全文

摘要： 在討論冒泡和捕獲之前，先看這么一段代碼： <style> .bd { border: 1px solid #000; padding: 8px; } </style> <div id="container1" class="bd"> 外層 <div id="container2" class="bd 閱讀全文

摘要： 網頁上各種炫酷的交互效果離不開各種 DOM 事件 的支持，在寫這篇文章之前，一度以為 JS 的事件綁定/取消方式就我知道的那幾種，翻閱文檔之后才發現，知識面還是有待提升，多翻翻文檔，就像發現新大陸一樣~~ 常用事件 鼠標事件： click：鼠標左鍵單擊 dblclick：鼠標左鍵雙擊 mousedo 閱讀全文

摘要： 當項目的安全團隊找上門告訴您，您開發的項目存在 XSS 安全漏洞，作為一個開發人員，就問您慌不慌？？ HTML 內容寫入的時候，如果稍不注意就會觸發隱藏 BOSS 漏洞 XSS。 XSS 漏洞原理就是利用了網站上內容輸入的地方，比如說常見的評論提交，老六 通過輸入評論的地方，提交一些 包含 JS 代 閱讀全文

摘要： 有一個深有體會的事：發現現在很多前端同學，經常用 Vue 開發項目之后，在某些需求場景要操作 DOM 節點的時，就不知道咋辦了~~ 以前接手過其他開發團隊的項目，項目被漏洞掃描工具發現了異常，原因是用了一個 vue-video-player 插件用于播放視頻，這插件又依賴了低版本的 video.js 閱讀全文

摘要： 雖然目前的開發場景基本都是使用 React/Vue/Angular 等框架，但是對于一些基礎的 DOM 操作，還是需要了解學習。 曾經我們討論過這樣一個問題：Vue 這些開發框架，用它們渲染頁面，真的就比不用開發框架快嗎？ 其實這個問題很好回答的，開發框架只是優化了項目的開發效率，對于瀏覽器的渲染速 閱讀全文