給線條類型的svg圖標加上繪製的動畫效果
效果展示 步驟分解 1 確認svg文件有路徑數據 2 獲取path的長度 3 定義繪製線條的長度 4 定義關鍵幀動畫 5 應用關鍵幀動畫 實操 1 確認svg文件有路徑數據 path標籤裏面的d屬性，就是路徑數據 template svg fill="none" xmlns="http://www.w3.org/2000/svg" width="260" hei
熱飯班長 動態日志
動態
列表
遞歸的幾種場景記錄
場景1：從樹中查找查找符合條件的節點（一個） const findNodeById = (nodes, id) = { // 遍歷當前層的所有數組元素 for (const node of nodes) { // 找到目標節點，直接返回，遞歸結束 if (node.id === id) { // 這裏會有兩種情況： // 1. 如果這裏不是在遞歸中，
當從localStorage中獲取數據時，如何做異常處理？
提出問題 下面的代碼在有初始值的情況下，能夠工作的很好，但是當localStorage中存在非法的數據時就會拋出異常，如果你的程序沒有做好異常處理，就會崩潰。 const todosStr = localStorage.getItem('todos') const todos = JSON.parse(todosStr) 分析問題 能夠拋出異常的位置在JSON.parse，當JSON.parse解
當遍歷遇上異步請求
目標 遍歷請求時，讓請求依次執行（等待前一次請求響應後再發起下一次請求）並且等待所有請求完成。 示例 前置物料 // 模擬一個用於將名字轉換為大寫的請求 const asyncUppercase = (value) = new Promise((resolve) = { console.log('sent'); const timer = Math.floor(Math.ran
CommonJS的兩種導出方式
知道的朋友應該知道，CommonJS有兩種導出方式，如下所示： // module1.js const name1 = 'Ben'; const name2 = 'Lisa' // 導出方式1 module.exports = { name1, name2, }; // 導出方式2 exports.name1 = name1; exports.name2 = name2; 差異 那麼上
如何在vscode中調試typescript?
前置知識 首先要知道vsocde是無法調試typesript的。所以我們要做的就是將typescript編譯為javascript，然後告訴vscode編譯後的代碼位置，這樣才能進行調試。 流程 1 在項目根目錄創建launch.json配置 // package.json { "name": "debug-ts", "version": "1.0.0", "description"
chrome插件實現監聽ajax請求，然後修改請求參數
1 修改manifast.json manifest_version必須為3，因為這個declarativeNetRequest是3中新增的api { "manifest_version": 3, "permissions": ["declarativeNetRequest"], "host_permissions": ["all_urls"] } 2 在background.j
fetch的使用記錄
如何用fetch發起post請求 下面是一個用fetch發起的post請求示例： fetch('/api/add', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ name: 'tomcat', }), }) .then(res
使用form-data的content-type上傳文件問題
問題 當後端需要我們上傳文件時，一般會用form-data的類型。 接口文檔像這樣： 目標是發出這樣一個請求： 代碼示例 // file從input為file的輸入框獲取 const formData = new FormData(); formData.append('code', 'xxx') formData.append('index', "xxx"); formData.
flex佈局常見問題
flex無法創建滾動條 flex的孫元素使用overflow: auto無法出現滾動條 原因： 子元素沒有設置寬度，這會導致子元素的寬度由孫元素決定，從而子元素被撐大，孫元素無法達到出現滾動條的條件。 解決方案： 給子元素設置寬度，比如width:100%; flex佈局和文字溢出省略遭遇的問題 https://segmentfault.com/a/1190000045
flex佈局中flex-basis屬性
該屬性的取值 數值、百分比 auto content 數值、百分比 指定數值、百分比，該元素的寬度為指定寬度 flex-basis: 200px; flex-basis: 50%; auto 指定auto，該元素的寬度為自身的width屬性寬度，如果沒有設置width，則為內容撐開的寬度 flex-basis: auto; content 指定content，該元素的寬
數組方法中的slice與toSpliced
方法羅列 方法 是否修改原數組 返回值 slice 否 包含摘取元素的新數組 toSpliced 否 不包含被刪除元素的新數組 slice 獲取指定位置的元素，然後將這些元素作為數組返回。 函數簽名： slice([start], [end]) start摘取開始位置 e
TypeScript新增接口和更新接口傳參定義差異的問題
interface User { id?: string; name: string; age: number; } // 新增用户時，id不是必須的，name和age必須，如何給data定義呢？ export const addUser = (data: User) = fetch('/api/user/add', { method: 'POST', body: