tag 前端

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

@前端 / 博客 RSS 訂閱

refanbanzhang 頭像

熱飯班長 - 給線條類型的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

animation , css3動畫 , keyframes , 前端 , Javascript

收藏 評論

icecreamlj 頭像

一顆冰淇淋 - 前端模塊化進化史：從全局 function 到 ES Modules

目前，前端開發已經離不開由 CommonJS、ES Modules 和 Webpack 構建的模塊化開發環境。無論是 JavaScript、CSS、圖片還是其他資源，都可以作為一個模塊來處理。那麼，模塊化究竟是如何發展到今天的呢？ 全局函數模式 最初的前端模塊化嘗試是通過 全局函數來實現的。例如，在一個 util.js 文件中定義了一個變量 count 和一個工具函數 formatNumberWi

amd , commonjs , es-modules , 前端 , Javascript

收藏 評論

linong 頭像

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

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

ast , typescript , babel , 前端 , Javascript

收藏 評論

qzuser_juan26 頭像

juan26 - svg轉字體文件部分線條缺失

問題： ui給的svg是這樣的： 上傳到iconmoon之後轉換出來的圖標是這樣的： 可以看到中間的A字缺失了一部分 解決過程： 以為是A字識別不出來，於是在其他地方找了一個帶有A的svg，上傳到iconmoon查看轉換後的圖標是，A並沒有缺失，猜測是svg源碼的問題導致iconmmon轉換時有問題。 查看沒問題的svg源碼如下： 查看有問題的svg

前端 , svg

收藏 評論

minnanitkong 頭像

王大冶 - 如何複製由自定義元素組成的網頁的 HTML 代碼

React Hook 深入淺出 CSS技巧與案例詳解 vue2與vue3技巧合集 VueUse源碼解讀 有時我們需要獲取某個網頁HTML的本地副本,例如作為測試的輸入。 但複製網頁或元素的HTML並不總是直截了當的。現代網站往往由自定義元素構建。自定義元素通常是影子宿主。影子宿主的 innerHTML 或 outerHTML 屬性只返回直接子元素的HTML,而忽略了包含的影子DOM的

ecmascript-6 , typescript , 前端 , Javascript

收藏 評論

steven_code 頭像

Steven - browserslist 使用簡介

頁面為了能在各個品牌、各個版本的瀏覽器上正常顯示，需要處理各種兼容問題：將現代的 JavaScript 語法（ESNext）轉譯為舊版的 JavaScript 語法（ES5）；為不兼容的 CSS 樣式添加瀏覽器前綴（-webkit-、-moz-）；等等。 現代的前端頁面開發流程，都有相應的工具為開發者自動地處理這些兼容問題：Autoprefixer - 為 CSS 樣式，自動添加不兼容的瀏覽器前綴

browser , 兼容性 , 工程化 , 前端

收藏 評論

baqidenangua 頭像

圖形開發學院 - 專業URL編碼解碼工具，輕鬆處理鏈接

  圖形開發學院開發的URL編碼/解碼工具，以其直觀和靈活的操作界面，為圖形開發者提供了強有力的支持。無論是初學者還是資深專家，都能輕鬆上手，享受編碼/解碼的便捷。                   URL編碼/解碼工具界面 原文鏈接：“URL編碼/解碼”詳細介紹 - 在線工具 | 圖形開發學院 工具鏈接：URL編碼/解碼 - 在線工具 | 圖形開發學院

前端 , url

收藏 評論

gqkmiss 頭像

月恆 - 使用 CRXJS 構建 Chrome 插件在 Chrome 瀏覽器升級到 130xxx 版本之後，出現CSP錯誤

使用 CRXJS 構建 Chrome 插件在 Chrome 瀏覽器升級到 130xxx 版本之後，出現 Content Security Policy 錯誤 一、前言 之前有個老哥找我寫了插件，到現在幾個月過去了，今天早上和我説 Chrome 瀏覽器報錯運行不起來了，但是 edge 瀏覽器沒問題。 就幫忙定位了下問題，發現是 Content Security Policy 的問題導致的報錯； 老

gulp , chrome , chrome-extension , 前端

收藏 評論

judei 頭像

Judei - Element Table 表格樹形結構多選框選中子級父級狀態變為半選中狀態（遞歸多級）

1.實現效果 2.數據和佈局準備 準備一個 el-table 組件以及數據源，這裏的數據源可以是你的接口提供的。 template div style="width: 78%;" el-table ref="menuTableRef" :data="menuList" style="width: 100%;margin-bottom: 20px;" :row-class-

css3 , less , 前端 , html5 , Javascript

收藏 評論

ailvyoudemaojin 頭像

JavaCodexPro - [開源]一款可視化提效頁面生成工具

一、簡介 基於 vue3.x 可視化拖拽編輯，頁面生成工具。提升前端開發效率，可集成至移動端項目作為通過定義 JSON 直接生成 UI 界面 項目採用了 Apache 2.0 license協議 允許自由使用：你可以自由地使用受該許可證約束的軟件，用於各種目的，包括商業應用。 源代碼可用性：通常要求在分發衍生作品時，提供相應的源代碼。這有助於確保軟件的透明度和可修改性

node.js , vuex , 前端

收藏 評論

laughingzhu 頭像

LaughingZhu - 創建一個專屬的 CLI

作為一個前端，基本上每次初始化項目都會用到腳手架，通過一些腳手架可以快速的搭建一個前端的項目並集成一些所需的功能模塊，避免自己每次都手動一個一個去安裝。安裝各個包的這個過程其實沒啥營養，通過封裝一個腳手架來跳過這個步驟，把精力聚焦到功能研發上。 由於最近自己在寫項目都是相同的技術棧：Nextjs + TailwindCSS + TypeScript + ShadcnUI ，有時候如果忘記了 Sha

astro , blog , 前端 , Markdown

收藏 評論

ailvyoudemaojin 頭像

JavaCodexPro - [開源] 又一款快速開發的後台管理系統

一、簡介 這是一款ThinkPHP v8.0 和 Layui v2.9.x 的快速開發的後台管理系統 使用MIT開源協議 寬鬆性：與其他常見的軟件許可協議（如 GPL、LGPL、BSD）相比，MIT 協議相對寬鬆，賦予軟件被許可人更大的權利與更少的限制 兼容性高：對軟件的再使用限制較少，因此具有較高的兼容性，可以與其他許可協議並存，也與 GPL 兼容 商業友好：

node.js , thinkphp , 前端

收藏 評論

minnanitkong 頭像

王大冶 - React Native 0.76 重大更新：新架構全面啓用

React Hook 深入淺出 CSS技巧與案例詳解 vue2與vue3技巧合集 VueUse源碼解讀 架構升級的里程碑 React Native 0.76 版本帶來了一個重大變革 - 新架構默認啓用。這次更新不僅支持了 React 的現代特性（如 Suspense、Transitions），還徹底重寫了原生模塊系統。 核心特性升級 1. 併發渲染支持 新架構完整支持 React 的

ecmascript-6 , typescript , 前端 , Javascript

收藏 評論

minnanitkong 頭像

王大冶 - [Next.js14] NextAuth v5 (3) - Google 登錄

React Hook 深入淺出 CSS技巧與案例詳解 vue2與vue3技巧合集 VueUse源碼解讀 Google Cloud 設置 訪問 https://console.cloud.google.com/apis 如果你是第一次使用Google Cloud，請確保同意服務條款。 按照以下步驟繼續： 根據你的喜好編輯項目名稱，然後點擊"CREATE" 你將被重定向到這個界

ecmascript-6 , 前端 , Javascript

收藏 評論

hightopo 頭像

hightopo - 掌控物體運動藝術：圖撲 Easing 函數實踐應用

現如今，前端開發除了構建功能性的網站和應用程序外，還需要創建具有吸引力且尤為流暢交互的用户界面，其中動畫技術在其中發揮着至關重要的作用。在數字孿生領域，動畫的應用顯得尤為重要。數字孿生技術通過精確模擬現實世界中的對象、過程和系統，對動畫的需求遠遠超過傳統前端開發。 在這種環境中，動畫不僅僅是為了美觀，更是用於實現系統與現實的同步、演示覆雜過程和數據可視化的關鍵手段。 HT 動畫介紹 在足夠短的時間

函數式編程 , 動畫 , 可視化 , 前端 , Javascript

收藏 評論

chongdongdedaxiongmao_kxfei 頭像

chongdongdedaxiongmao_kxfei - 探索 Java 中的 Stream API：優雅處理集合的利器

Java 8 引入了一個功能強大的工具——Stream API，極大地簡化了對集合的操作。傳統上，Java 程序員習慣使用 for 循環來遍歷集合並進行過濾、映射等操作，這種方式雖然直觀但代碼冗長且難以維護。Stream API 通過流式編程的方式，使得我們能夠以更簡潔和優雅的方式操作集合。 本文將介紹 Java Stream API 的基本概念及其常見的使用場景，幫助你更好地掌握這一工具。 一、

ecmascript-6 , typescript , HTML , 前端 , Javascript

收藏 評論

dirackeeko 頭像

DiracKeeko - [axios] 版本升級，特性變更記錄(高版本post請求異常)

axios 原版本 0.19.2，升級到0.27.2 出現了部分post請求發送異常的情況。 經查發現雖然大版本號同為0，但是0.27.2的內部邏輯有變更。 (0.27.2版本去掉了一些0.19.2版本中的對config的兼容性處理)，導致0.19.2中不規範的api使用方式在0.27.2中無法生效。 問題發生在使用類似於下面這種形式發送post請求。 axios.post(ur

Axios , 前端

收藏 評論

daoshanghundesijidou 頭像

用户bPdeG32 - Vue.js：現代化前端開發的高效框架

Vue.js 是一個用於構建用户界面的漸進式 JavaScript 框架。它以其輕量、靈活和易上手的特性受到前端開發者的廣泛歡迎。Vue.js 不僅適用於小型項目的快速開發，也可以通過組件化和豐富的生態系統構建大型複雜的應用。在本文中，我們將深入瞭解 Vue.js 的核心特性，常見使用場景及其獨特的優勢。 一、什麼是 Vue.js？ Vue.js（簡稱 Vue）是由尤雨溪在 2014 年發佈的開源

vue.js , ecmascript-6 , typescript , 前端 , Javascript

收藏 評論

chongdongdedaxiongmao_kxfei 頭像

chongdongdedaxiongmao_kxfei - 深入 JavaScript：前端開發的核心語言

JavaScript 是一種廣泛應用於前端開發的編程語言，最早由 Netscape 公司在 1995 年推出。作為一種輕量、解釋性和多範式的編程語言，JavaScript 支持事件驅動、面向對象和函數式編程。它不僅是網頁交互的核心技術之一，還隨着 Node.js 的出現，逐漸滲透到了後端開發。本文將帶你瞭解 JavaScript 的核心概念、特點及常見應用場景，幫助你掌握這門現代化的編程語言。 一

react , ecmascript-6 , typescript , 前端 , Javascript

收藏 評論

chongdongdedaxiongmao_kxfei 頭像

chongdongdedaxiongmao_kxfei - Vue.js：輕量高效的前端框架

Vue.js 是一個用於構建用户界面的漸進式 JavaScript 框架，因其輕量、靈活和易上手的特性備受歡迎。Vue.js 不僅適合小型項目的快速開發，也可用於構建複雜的單頁面應用（SPA）。本文將介紹 Vue.js 的核心特性、項目結構、常用功能及其在現代前端開發中的應用場景。 一、Vue.js 簡介 Vue.js（簡稱 Vue）由尤雨溪於 2014 年推出，是一個專注於視圖層的 JavaSc

vue.js , ecmascript-6 , typescript , 前端 , Javascript

收藏 評論

codesheep_pro 頭像

CodeSheep - Jetbrains正式官宣免費，太炸裂了！！

提到 Jetbrains，相信搞開發的同學應該都不陌生。 眾所周知，該公司盛產各種編程IDE和開發工具。 2000年才成立，到現在卻已經發布了超30款世界頂級的編程軟件，同時也收穫了來自全球範圍內開發者和用户的青睞。 而就在不久前，Jetbrains 又放出了一個爆炸式的消息，那就是： Jetbrains 正式官宣： WebStorm 和 Rider 這兩款強大的IDE從現在開始對非商業用途全

ecmascript-6 , c# , typescript , 前端 , Javascript

收藏 評論

zhangfisher 頭像

zhangfisher - 深入解析：React中的信號組件與細粒度更新

引言 在主流的前端開發框架中，無論是React、Vue還是Svelte，核心都是圍繞着更高效地進行UI渲染展開的。 為了實現高性能，基於DOM總是比較慢這個假設前提，其最核心的要解決的問題有兩個： 響應式更新 細粒度更新 為了將響應式更新、細粒度更新優化到極致，各種框架是八仙過海，各顯神通。以最流行的React和Vue為例， 首先兩者均引入了Virtual DOM的概念。 Vue的靜

react , redux , store , signal , 前端

收藏 評論

coderleo 頭像

coderLeo - 手擼Webpack自定義Loader

前言 我們知道 webpack 只能處理 JavaScript 和 Json 文件，面對 CSS、圖片等資源是無能為力的，它需要通過 loader 將這些資源轉換為可處理的模塊。 loader 的本質是一個解析資源的函數模塊，該函數對接受到的內容進行轉換，然後返回 webpack 可處理的資源。 loader的執行順序 loader 可根據執行順序區分為： pre： 前置 loader no

前端工程化 , webpack , 前端 , Javascript

收藏 評論

coderleo 頭像

coderLeo - 手擼Webpack自定義Plugin

前言 webpack-plugin 向開發者提供了 webpack 引擎中完整的能力。通過插件擴展 webpack，加入自定義的構建行為，使 webpack 可以執行更廣泛的任務，擁有更強的構建能力。 與 loader 相同，plugin 的本質也是一個模塊（它包含一個apply函數），符合 webpack 的一切皆模塊的理念。 工作原理 webpack 就像一條串行的生產線，要經過一系列處理流程

前端工程化 , webpack , 前端 , Javascript

收藏 評論