tag 前端

標籤
貢獻1,041
1095
06:37 AM · Oct 27 ,2025
tuzixiansen_63d4d65909d62 頭像 opentiny 頭像 qaz666 頭像 invalidnull 頭像 dirackeeko 頭像 smileZAZ 頭像 junxiudetuoba 頭像 jdcdevloper 頭像 yayu 頭像 icecreamlj 頭像 beishangdejianjidan_cqxuxf 頭像 xixindehongjiu 頭像

@前端 / 博客 RSS 訂閱

littlelyon 頭像

littlelyon - 使用 AST 遷移複雜前端項目的探索

寫在前面 也不知道為什麼，每一次工作變動，所接手的第一個項目，都和項目遷移有關。這次也不例外，在 5 月初入職樂天之後，處理完雜七雜八的事情，第一個接手的項目是將一個大概有 5 年開發週期的 nuxt 2 前端項目，遷移到 nuxt 3 版本。 項目遷移與“屎山” 談及項目遷移，尤其是複雜項目，很容易讓人把它和“屎山”聯繫起來，而事實上也是如此，大多數規模較大的項目，往往都具備“屎山”的各種特徵，

ast , vue.js , nuxt.js , 前端 , Javascript

收藏 評論

zero_dev 頭像

北橋蘇 - hexo實戰：（二）個人獨立博客豪華裝修合集

前言 上次介紹了使用 Hexo+GitHub Pages，零成本搭建一個專屬自己的獨立博客網站。我覺得那篇文章是沒有入門門檻的，不管你是什麼行業，只要想打造個人 IP，又不太想受博客平台約束，那麼讀完後動手操作一下也能輕鬆完成。 而這次呢，上篇也説了 Hexo 會出三篇內容，這裏就要在前者基礎上做進一步升級，將完成下面七個主要的博客常用功能。 指標 Hexo 如何安裝 Butterfly

博客搭建與配置 , hexo , 前端

收藏 評論

kevinzhw 頭像

天涯學館 - 前端安全：XSS攻擊與防禦策略

XSS（Cross-Site Scripting）攻擊是前端安全中的一個重要問題，它發生在攻擊者能夠注入惡意腳本到網頁中，這些腳本在用户瀏覽器中執行時可以獲取用户的敏感信息，例如會話令牌、個人信息等。防禦XSS攻擊通常涉及以下幾個策略： 1. 輸入驗證： 對用户提交的數據進行嚴格的驗證，確保只有預期的字符和格式被接受。 使用正則表達式或預定義的白名單模式來過濾無效字符。 限制字符串長度以防

xss , typescript , 前端 , Javascript

收藏 評論

kevinzhw 頭像

天涯學館 - 前端工程化實踐：Monorepo與Lerna管理

前端工程化實踐中，Monorepo（單倉庫）管理和Lerna是兩種流行的方式，用於大型項目或組件庫的組織和版本管理。 Monorepo簡介 Monorepo（單倉庫）是指在一個Git倉庫中管理多個相關項目的開發方式。這種方式的優點在於： 集中式管理：所有項目都在一個倉庫中，方便代碼共享、版本同步和協同開發。 模塊化：可以創建獨立的模塊，方便複用和維護。 統一的CI/CD：一次配置，全倉

前端工程化 , lerna , monorepo , 前端 , Javascript

收藏 評論

huobaodejianpan 頭像

火爆的鍵盤 - HTTP 請求優化指南：Axios 和 Fetch 的比較

在前端開發中，處理 HTTP 請求是一個常見且重要的任務。JavaScript 提供了多種方式來發送網絡請求，其中最受歡迎的兩種方式分別就是 Fetch API 和 Axios。儘管兩者都能完成同樣的任務，即從客户端向服務器發送請求並接收響應，但它們在使用方式、功能及靈活性方面各有千秋，下面我們簡單瞭解下。 1. 基礎介紹 Fetch API Fetch API 是現代瀏覽器內置的一個標準 Jav

HTTP , fetch , Axios , 前端 , Javascript

收藏 評論

1227 頭像

1227 - 一文搞定前端多種主題配置及全局引入scss文件

前言 本文中所採取的方案主要是css預處理（less/scss）方案，適用於項目中有多套主題需要進行配置，有着很強的擴展性和易用性，如果你的項目臨時需要加上主題切換，可以採用；如果你的項目需要很多套主題配置，也非常適用！ 一、變量配置的代碼部分 1、主題變量的配置 theme.scss（在項目中存放在style文件夾下面，這個文件夾主要用於系統一些公共樣式的存放和管理） // 主題配置 $the

vue.js , scss , 工程化 , 前端

收藏 評論

jackzhoumine 頭像

JackZhouMine - 前端項目如何規範文件命名

前端項目如何規範文件命名 ls-lint 是一個非常快的文件和目錄名稱 linter，可方便約束項目目錄和文件的命名。 特點： 快速 依賴少 適用所有文件 配置簡單 安裝依賴 npm install @ls-lint/ls-lint -D 在 husky 加入 git hook: "husky": { "hooks": { "pre-commit": "ls-lint

vue.js , 工程化 , HTML , 前端 , Javascript

收藏 評論

chai_huo 頭像

柴火 - SVG <pattern> 標籤的用法和應用場景

通過使用 pattern 標籤，可以在 SVG 圖像內部定義可重複使用的任意圖案。這些圖案可以通過 fill 屬性或 stroke 屬性進行引用。 使用場景 例如我們要在 svg 中繪製大量的圓點點，可以通過重複使用 circle 標籤來實現。 svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" circle cx=

前端 , svg

收藏 評論

apifox 頭像

Apifox - 發現 HTTP 和 RPC 的不同之處：技術洞察

隨着互聯網技術的發展，網絡通信在各種應用中扮演着至關重要的角色。無論是構建 Web 應用還是進行服務之間的交互，選擇合適的通訊協議成為開發者們需要深入思考的問題。在眾多協議中，HTTP（HyperText Transfer Protocol）和 RPC（Remote Procedure Call）因各自獨特的特點和優勢而備受關注。那麼，它們之間有何不同，又該如何在實際項目中做出選擇呢？ 什麼是 H

HTTP , rpc , 程序員 , 後端 , 前端

收藏 評論

kevinzhw 頭像

天涯學館 - Prettier與ESLint：代碼風格與質量的自動化保證

Prettier 和 ESLint 是兩個互補的工具，它們共同確保代碼的風格一致性和質量。Prettier 負責格式化代碼，而 ESLint 則執行更復雜的靜態分析和規則檢查。 Prettier 作用： 自動化代碼格式化，確保代碼的縮進、括號、引號、換行等樣式一致。 不需要配置太多的規則，因為Prettier有一套默認的代碼風格。 支持多種編程語言，包括JavaScript、TypeS

eslint , prettier , typescript , 前端 , Javascript

收藏 評論

zero_dev 頭像

北橋蘇 - hexo 實戰：（三）獨立博客運營總結

前言 通過前面兩個步驟，完成了靜態博客從搭建到基本功能添加和界面優化。那麼，這次就要介紹一下搭在 GitHub 上的靜態博客如何運營推廣。也就是如何讓網站被各大搜索引擎收錄？如何提高網站權重，提高收錄量？ 網站收錄 平台選擇 站長相關的平台有：某度站長工具、360 站長平台、搜狗資源平台、必應網站管理員工具、谷歌站長工具等。列出的五個平台，可以按自身情況提交，提交方法也大同小異，以下以某度為例。

hexo , 博客搭建 , 前端

收藏 評論

beckyyyy 頭像

beckyyyy - 可視化學習：如何生成簡單動畫讓圖形動起來

大家好，本文分享的是如何生成簡單動畫讓圖形動起來。 在可視化展現中，動畫它是強化數據表達，吸引用户的重要技術手段。 在具體實現動畫之前，我們先來了解一下動畫的三種形式，分別是固定幀動畫、增量動畫和時序動畫。 graph LR A[動畫的三種形式] -- B[固定幀動畫] A -- D[增量動畫] A -- E[時序動畫] B -- F[使用已生成的靜態圖像，將圖像依次播放] D -- C[動態繪製

shader , css3 , 動畫 , webgl , 前端

收藏 評論

zz_641473ad470bc 頭像

zZ_jie - 使用canvas對圖片進行標註

前言 我們的圖像標註系統中，標註的時候，每人需要一個容器（docker），需要把數據推到去LabelStudio裏面去標註，利用webhook回推標註好的數據。 Canvas的使用，當選中某個矩形框的時候，會變成藍色。 畫布大小 設置的是，圖片有多大，畫布就有多大,然後以畫布的中心點對齊。默認是左上角對齊 this.ctx.drawImage(this.image, -this.image

canvas , HTML , 前端

收藏 評論

suporka 頭像

suporka - “山寨版”《草料二維碼》

背景 之前瀏覽過草料二維碼的網站，他的二維碼美化功能很強大，可以分別自定義碼眼和碼點的形狀和顏色，功能十分強大 💪！ 碰巧之前寫過一個 npm 插件 qrcode-with-logos, 用於前端生成帶 logo 的二維碼。 而且在 github 的 issues 裏有外國友人 👨‍🦱 問我能否實現不同樣式的二維碼，剛好以此作為新需求，模仿草料二維碼的樣式和功能，開發了 qrcode-wit

canvas , 前端 , Javascript

收藏 評論

daishuyunshuzhanqianduan 頭像

袋鼠雲數棧UED - 流程圖渲染方式：Canvas vs SVG

我們是袋鼠雲數棧 UED 團隊，致力於打造優秀的一站式數據中台產品。我們始終保持工匠精神，探索前端道路，為社區積累並傳播經驗價值。 本文作者：霽明 背景 我們產品中會有一些流程圖應用，例如審批中心的審批流程圖： 我們數棧產品內的流程圖，基本都是使用的 mxGraph 實現的，mxGraph 使用了SVG來渲染圖形。 流程圖組件庫除了 mxGraph，還有其他一些流行的庫，例如：Re

canvas , 前端 , svg

收藏 評論

huobaodejianpan 頭像

火爆的鍵盤 - 【教程】如何使用Postman測試接口？詳細指南

在當前，API（應用程序接口）的使用變得越來越普遍。其中，HTTP/HTTPS API 是最常見的一種。無論是開發前端還是後端，測試 API 都是一個關鍵環節。Postman 是一種流行且強大的 API 測試工具，能夠幫助開發人員輕鬆地進行接口測試和調試。 一、什麼是 Postman？ Postman 是一個專用於 API 開發的跨平台工具。它提供了簡潔易用的界面，幫助開發者和測試人員發送 HTT

API , postman , 接口 , 後端 , 前端

收藏 評論

fenanjiu 頭像

南玖 - Vite本地構建：手寫核心原理

前言 接上篇文章，我們瞭解到vite的本地構建原理主要是：啓動一個 connect 服務器攔截由瀏覽器請求 ESM的請求。通過請求的路徑找到目錄下對應的文件做一下編譯最終以 ESM的格式返回給瀏覽器。 基於這個核心思想，我們可以嘗試來動手實現一下。 搭建靜態服務器 基於koa搭建一個項目： 項目結構如上，服務使用koa搭建，bin指定cli可執行文件的位置 #!/usr/bin/env node

vite , 工程化 , 前端 , Javascript

收藏 評論

danjuanfe 頭像

前端蛋卷 - 快來看看 ECMAScript 2024 (ES15) 發佈了什麼新特性

2024 年 6 月 26 日，第 127 屆 Ecma 大會批准了 ECMAScript 2024 語言規範，這意味着它現在正式成為標準。 https://github.com/tc39/ecma262/releases 1. Group By 分組 Map.groupBy() 將可迭代對象分組為一個新的 Map，Map中的 key由回調提供： Map.groupBy([0, -5, 3, -

ecmascript , 前端 , Javascript

收藏 評論

huobaodejianpan 頭像

火爆的鍵盤 - 掌握 HTTP 請求方法：開發者必備知識

在 Web 開發領域，HTTP 方法在定義客户端如何與 Web 服務器交互以及對資源執行不同操作方面起着至關重要的作用。HTTP（Hypertext Transfer Protocol，超文本傳輸協議）是現代網絡應用的棟樑，它定義了客户端與服務器之間的通信方式。 什麼是 HTTP 請求方法 在 Web 通信中，HTTP 請求方法是客户端用來向服務器表達其意圖的一種方式。每次瀏覽網頁、提交表單或與

API , HTTP , 接口 , 後端 , 前端

收藏 評論

kestrel_task 頭像

微芒不朽 - Koa2實現多併發文件上傳

koa2批量上傳文件 目前的是為了實現批量導入md文件，發佈文章。這樣就不用自己一篇一篇同步文章了。一次可以同步幾千篇文章。 實現界面 內容 主要包含上傳的文件標題，文件大小，上傳狀態。 el-upload ref="uploader" v-model:file-list="fileList" drag multiple :accept="accept" :maxSize="maxS

koa2 , vue3 , 前端 , Javascript

收藏 評論

yinshule 頭像

愛米 - 使用惰性函數優化頁面滾動事件的性能

我們在做前端開發的時候，曾遇到一些非常炫酷的宣傳頁。例如每一個蘋果產品的主頁面。我們會發現，這樣炫酷的頁面，總是跟隨我們鼠標滾輪的操作，在頁面中響應不同的事件。 一、瀏覽器的不同 我們都知道，需要在前端頁面中監聽到鼠標滾輪的事件，不同瀏覽器內核提供的方法是不同的。所以，每當我們需要監聽鼠標滾輪事件，就需要先判斷使用終端是用的什麼瀏覽器。 在前端，我們可以通過window.navigator.us

函數 , 惰性求值 , typescript , 前端 , Javascript

收藏 評論

hightopo 頭像

hightopo - 如何讓 3D 數字孿生場景閃閃發光

今日圖撲軟件功能分享：我們將探討 HT 系統如何通過分組管理燈光、裁切體和流光，以提高場景光影效果的精準度和整體可控性。 HT 中的燈光、裁切體、流光是會影響它所在區域一定範圍內的其他節點的表現，如 場景中有個 A 燈光，默認情況下，場景中所有節點都是可以受到 A 燈光的影響。為了使這些影響更加準確，HT 提出一個解決方案“分組”，即將燈光、裁切體、流光進行分組管理，節點可設置接受哪些分組的影響

設計 , 三維建模 , 可視化 , 前端 , Javascript

收藏 評論

paul2015 頭像

paul2015 - 開源分享一個Chrome插件 倒計時功能

背景是這樣，最近被優化了，這家公司幹了六七年了，突如其來的遭遇，讓我不知所措。面試邀約遲遲未到。想想先自己寫點東西可以有東西可以説。這不離開倒計時還有一個月，靈光一閃，寫個倒計時Chrome插件吧，送給自己作為禮物。哈哈哈~ 我的chrome插件隊列裏有一個叫“utctime”的插件，樣式簡約看了代碼 tailwind ，於是我拿來參考了下 對了，忘記介紹下我用的Chrome開發套件了,我用的P

chrome-extension , 前端

收藏 評論

renzhongdaoyuan_59170ca258c53 頭像

零一行者 - 封裝 uniapp 請求庫的最佳實踐

背景 在前端開發中，HTTP 請求是與服務器進行數據交互的核心手段。無論是獲取數據還是提交數據，前端應用幾乎都離不開 HTTP 請求。在 uniapp 中，uni.request 是官方提供的用於發起 HTTP 請求的基礎 API。然而，直接使用 uni.request 存在一些問題和不足，比如： 代碼冗餘：每次發起請求時都需要編寫類似的配置代碼，導致代碼重複。 缺乏統一管理：沒有統一的地方

uniapp , Ajax , 前端 , Javascript

收藏 評論