效果展示 步驟分解 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中存在非法的數據時就會拋出異常，如果你的程序沒有做好異常處理，就會崩潰。 const todosStr = localStorage.getItem('todos') const todos = JSON.parse(todosStr) 分析問題 能夠拋出異常的位置在JSON.parse，當JSON.parse解
hash模式和history模式的差異是什麼？ 拿這個地址為例： http://xxx.com#about http://xxx.com/about hash模式 由於http請求並不包含hash，所以不管hash值為多少，服務器端收到的請求始終都是/。 history模式 history模式下，後面的/about路徑會被服務器接收到，然後嘗試去處理這個/about。 為什
目標 遍歷請求時，讓請求依次執行（等待前一次請求響應後再發起下一次請求）並且等待所有請求完成。 示例 前置物料 // 模擬一個用於將名字轉換為大寫的請求 const asyncUppercase = (value) = new Promise((resolve) = { console.log('sent'); const timer = Math.floor(Math.ran
知道的朋友應該知道，CommonJS有兩種導出方式，如下所示： // module1.js const name1 = 'Ben'; const name2 = 'Lisa' // 導出方式1 module.exports = { name1, name2, }; // 導出方式2 exports.name1 = name1; exports.name2 = name2; 差異 那麼上
前置知識 首先要知道vsocde是無法調試typesript的。所以我們要做的就是將typescript編譯為javascript，然後告訴vscode編譯後的代碼位置，這樣才能進行調試。 流程 1 在項目根目錄創建launch.json配置 // package.json { "name": "debug-ts", "version": "1.0.0", "description"
1 修改manifast.json manifest_version必須為3，因為這個declarativeNetRequest是3中新增的api { "manifest_version": 3, "permissions": ["declarativeNetRequest"], "host_permissions": ["all_urls"] } 2 在background.j
如何用fetch發起post請求 下面是一個用fetch發起的post請求示例： fetch('/api/add', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ name: 'tomcat', }), }) .then(res
問題 當後端需要我們上傳文件時，一般會用form-data的類型。 接口文檔像這樣： 目標是發出這樣一個請求： 代碼示例 // file從input為file的輸入框獲取 const formData = new FormData(); formData.append('code', 'xxx') formData.append('index', "xxx"); formData.
flex無法創建滾動條 flex的孫元素使用overflow: auto無法出現滾動條 原因： 子元素沒有設置寬度，這會導致子元素的寬度由孫元素決定，從而子元素被撐大，孫元素無法達到出現滾動條的條件。 解決方案： 給子元素設置寬度，比如width:100%; flex佈局和文字溢出省略遭遇的問題 https://segmentfault.com/a/1190000045
該屬性的取值 數值、百分比 auto content 數值、百分比 指定數值、百分比，該元素的寬度為指定寬度 flex-basis: 200px; flex-basis: 50%; auto 指定auto，該元素的寬度為自身的width屬性寬度，如果沒有設置width，則為內容撐開的寬度 flex-basis: auto; content 指定content，該元素的寬
方法羅列 方法 是否修改原數組 返回值 slice 否 包含摘取元素的新數組 toSpliced 否 不包含被刪除元素的新數組 slice 獲取指定位置的元素，然後將這些元素作為數組返回。 函數簽名： slice([start], [end]) start摘取開始位置 e
方案1：img 將svg作為img的src import icon from './xxx.svg' img :src="icon" 無法很好的自定義尺寸，圖片會模糊（使用了img後，會喪失svg的特性） 無法指定顏色 方案2：插件 添加vite-svg-loader插件 找了好幾個常見的插件，比如vite-plugin-svg-icons、vite-plugin-svg-loader、u
interface User { id?: string; name: string; age: number; } // 新增用户時，id不是必須的，name和age必須，如何給data定義呢？ export const addUser = (data: User) = fetch('/api/user/add', { method: 'POST', body:
const api = { getData: () = { return new Promise((resolve) = { resolve(undefined); }); }, }; 沒有異常處理，會導致程序崩潰 const getLogo = async () = { const res = await api.getData() return re
流程 通過drop事件獲取用户拖拽的文件 如果是文件，執行上傳 如果是目錄，遞歸目錄下所有的文件，執行上傳 代碼 template div @dragover.prevent @dragenter.prevent @dragleave.prevent @drop.prevent="handleDrop" 拖拽區域/div /template sc
提出問題 觀察如下代碼，我們需要依賴words來更新自身，所以需要將words加入useEffect的依賴中。更新words觸發useEffect，useEffect再次更新words，然後就產生了死循環。 function App() { const [value, setValue] = useState(''); const [words, setWords] = useState(
提出問題 根據座標對象，查詢對應的地址詳情，代碼實現如下： const useAddress = (coordinate) = { const [address, setAddress] = useState(null); console.log('coming'); useEffect(() = { const fetchData = async () = {
當你的數據是同步的 差的： 數據來源是同步的，沒有必要使用。 function App() { const [todos, setTodos] = useState([]); useEffect(() = { const str = localStorage.getItem('todos'); const items = JSON.parse(str) ||
vue pinia的用途 用於全局狀態共享。 vue hooks(Composition API)的用途 用於邏輯封裝與複用（注意這裏沒有狀態共享）。 兩者之間關鍵差異 vue pinia是一個單例，也就是説多次初始化實例都是同一個，所以在多個組件中使用時，他們修改的時同一份數據，也就能實現vue pinia的設計目的，即數據共享。 而vue hooks則不是，每次初始化都會創建一個獨立的實例，所
基礎流程 創建倉庫 創建一個倉庫名為賬户名.github.io。 比如我的賬户名為refanbanzhangwork，那麼我的倉庫名就填寫：refanbanzhangwork.github.io。 其他位置保持默認就好了，然後點擊Create repository按鈕。 創建index.html 上一步點擊創建倉庫按鈕之後，會來到倉庫頁面，在這裏，我們點擊creating a
原因 Github Pages無法處理history模式的前端路由。 解法 方案1 藉助meta標籤 // index.html script (function(){ var redirect = sessionStorage.redirect; delete sessionStorage.redirect; if (redirect redirect != lo
