@前端

02:45 上午 · 11月 04 ,2025 @linong

通過 AST 實現組件庫替換升級

年初接到一個任務將 semi-ui 替換到 antd，但是能人力預算不太夠，所以基於工作量和效率選擇了基於 AST 的替換方案。項目技術棧是 React + tsx 為什麼要使用 AST？ AST（Abstract Syntax Tree，抽象語法樹）是一種在計算機科學中表示源代碼語法結構的樹狀數據結構。通過 AST，可以理解代碼的結構和含義，實現代碼分析、轉換和操作。基於 AS

ast , javascript , 前端 , typescript , babel

@linong

昵稱 linong

02:44 上午 · 11月 04 ,2025 @vivo_tech

前端 TypeError 錯誤永久消失術

作者：來自 vivo 互聯網大前端團隊- Sun Maobin 通過開發 Babel 插件，打包時自動為代碼添加可選鏈運算符(?.)，從而有效避免 TypeError 的發生。一、背景介紹在 JS 中當獲取引用對象為空值的屬性時，程序會立即終止運行並報錯：TypeError: Cannot read properties of ... 在ECMAScript 2020新增的可選鏈運算符(?.

babel , 前端 , typeerror

@vivo_tech

昵稱 vivo互聯網技術

02:32 上午 · 11月 04 ,2025 @carlsonblog

JavaScript WebSocket 封裝與優化：自動重連、心跳機制與連接狀態監控》

背景在我做過的一個對接海康威視監控實現直播流的項目中，需要處理 WebSocket 的長連接，以便於和服務器保持實時通信。WebSocket 的一個挑戰是連接的穩定性，特別是在網絡波動或斷開時，如何確保能自動重連並保持通信流暢。為了簡化這一過程，我決定封裝一個 WebSocket 類，使得開發者無需每次都重複編寫連接、心跳、重連等邏輯。這個 CustomSocket 類支持以下功能：心跳

websocket , 前端 , vue.js , javascript

@carlsonblog

昵稱夢開始的地方

02:22 上午 · 11月 04 ,2025 @kestrel_task

創建項目 pnpm create vite 直接使用模板創建 pnpm create vite my-vue-app --template vue 安裝 JSX 支持依賴 cd my-vue-app npm install @vitejs/plugin-vue-jsx -D 配置 vite.config.js import { defineConfig } from 'vite' import v

vue3 , 前端 , jsx , javascript , vite

@kestrel_task

昵稱微芒不朽

02:20 上午 · 11月 04 ,2025 @nihaoanihao

邊緣吸附組件（vue)

效果Gif圖使用方式 script lang="ts" setup import EdgeDockable from "***/EdgeDockable.vue"; /script template !-- localStorage 存儲位置時所需要的 key="AI" -- EdgeDockable localStorageKey="AI" template #collap

javascript , vue3 , 前端

@nihaoanihao

昵稱你好啊你好

02:19 上午 · 11月 04 ,2025 @kobe_fans_zxc

vue3 上傳插件vue-file-agent-next

一、安裝插件 pnpm add @boindil/vue-file-agent-next 二、基本使用 /* main.ts */ import VueFileAgentNext from "@boindil/vue-file-agent-next"; import "@boindil/vue-file-agent-next/dist/vue-file-agent-next.css"; cons

前端 , 上傳 , vue3

@kobe_fans_zxc

昵稱高級BUG開發

02:18 上午 · 11月 04 ,2025 @nihaoanihao

強化 Naive UI n-message-provider 的 to 屬性，實現自由指向

效果使用示例 script setup lang="ts" import ToMessage from "**/NaiveMessage"; function a() { ToMessage("#a", "測試消息a", { duration: 0, closable: true }); } function b() { ToMessage("#b", "測試消息b", { dura

vue.js , vue3 , 前端

@nihaoanihao

昵稱你好啊你好

02:09 上午 · 11月 04 ,2025 @gkymfrg1

數組轉化為樹

將一個數組轉換為一棵樹可以通過遞歸實現。假設我們有一個包含父節點與子節點關係的數組，如下所示： const arr = [ { id: 1, name: 'A', parent_id: null }, { id: 2, name: 'B', parent_id: 1 }, { id: 3, name: 'C', parent_id: 2 }, { id: 4, na

javascript , 數組 , 樹形結構 , 前端

@gkymfrg1

昵稱 ohoherror

02:08 上午 · 11月 04 ,2025 @gkymfrg1

數組倒序有哪些方法

倒序排列數組的方法如下：使用reverse()方法： const arr = [1, 2, 3, 4, 5]; const reversedArr = arr.reverse(); console.log(reversedArr); //[5, 4, 3, 2, 1] 使用for循環和unshift()方法： const arr = [1, 2, 3, 4, 5]; const re

前端 , javascript , 數組

@gkymfrg1

昵稱 ohoherror

02:06 上午 · 11月 04 ,2025 @sigui_5f58bd7ced379

JavaScript——數組的reduce方法

JavaScript的reduce和reduceRight的作用是通過順序或逆序遍歷數組，從而得到一個結果，原理如下： function myReduce(execute, initValue) { const length = this.length let result for (let i = 0; i length; i++) { if (i =

數組去重 , 數組 , javascript , 前端 , reduce

@sigui_5f58bd7ced379

昵稱周翔宇

02:03 上午 · 11月 04 ,2025 @apifox

探索 JavaScript：every()方法背後的邏輯

JavaScript 語言的核心足夠大，以至於很容易誤解其某些部分的工作方式。我最近在重構一些使用every()方法的代碼時發現，我實際上並沒有完全理解其背後的邏輯。在我的腦海中，我假設回調函數必須被調用並返回true，every()才會返回true，但實際情況並非如此。對於一個空數組，every()無論回調函數是什麼都會返回true，因為那個回調函數從未被調用。考慮以下情況： function

前端工程師 , javascript , 前端 , 程序員 , 數組

@apifox

昵稱 Apifox

02:02 上午 · 11月 04 ,2025 @refanbanzhang

數組方法中的slice與toSpliced

方法羅列方法是否修改原數組返回值 slice 否包含摘取元素的新數組 toSpliced 否不包含被刪除元素的新數組 slice 獲取指定位置的元素，然後將這些元素作為數組返回。函數簽名： slice([start], [end]) start摘取開始位置 e

javascript , 前端 , 數組

@refanbanzhang

昵稱熱飯班長

01:51 上午 · 11月 04 ,2025 @yayu