tag 前端

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

@前端 / 博客 RSS 訂閱

winnn 頭像

Winn - 純css編寫開關按鈕點擊切換

效果圖預覽： 完整代碼如下： !DOCTYPE html html head title純css編寫開關按鈕點擊切換/title style type="text/css" #toggle-button{ display: none; } .button-label{ position: relative; displa

Css , 程序員 , css3動畫 , 前端 , html5

收藏 評論

winnn 頭像

Winn - 【前端面試】V8事件輪詢

在前端面試中，面試官可能會問你V8的引擎機制，給你這樣的一道題目如下： console.log(1); setTimeout(() = { console.log(2); }); new Promise(reslove = { console.log(3); reslove(); }).then(() = { console.log(4); }); console.log(5)

v8 , 面試 , 瀏覽器原理 , 程序員 , 前端

收藏 評論

winnn 頭像

Winn - 一個讓vue開發效率翻倍的小工具

分享一個很實用的工具庫 VueUse，它是基於 Vue Composition Api，也就是組合式API。支持在Vue2和Vue3項目中進行使用，據説是目前世界上Star最高的同類型庫之一。 它的初衷就是將一切原本並不支持響應式的 JS API 變得支持響應式，省去程序員自己寫相關代碼。 官方地址：https://vueuse.org/ 中文地址：https://www.vueusej

vue.js , 開發工具 , 前端工程師 , 程序員 , 前端

收藏 評論

qingzhan 頭像

青湛 - 再聊 Reducer Context 和 Redux

原文鏈接 這是一次突發奇想的感悟，感覺還挺神奇的，遂記錄一下。 前言 作為一個React的開發者已經蠻久的了，大大小小的應用也開發了不少，除了一開始學習React時用過Redux以外，後來基本都不碰了，不管多麼複雜的應用，我也簡單的覺得使用Context就能夠解決我所有的問題。説來慚愧，我基本沒有思考過Redux存在的原因，可能是React真的做的太好了，又或者是我們現在的設備性能已經嚴重

react , redux , context , 前端

收藏 評論

wentaohu12138 頭像

牛刀殺雞 - 服務端渲染SSR

1.項目背景 需要將一箇舊的用vue+svg搭建的地鐵圖h5改造成有個ssr項目，以提升首屏渲染時間。 2.分析 項目現狀，項目組已有koa搭建的業務中間層，且需要改造的項目為一箇舊項目，綜合考慮，將舊項目進行改造，而非使用nuxt重寫。 3.SSR原理 1.所謂SSR就是將一個項目通過兩種打包配置，分別生成兩份打包代碼，一份在服務端（nodejs）執行，另一份在客户端（browser）上執行。當

vue.js , node.js , ssr , 前端

收藏 評論

vleedesigntheory 頭像

維李設論 - 面向邊緣場景的PWA實踐

背景 隨着5G技術的發展，物聯網邊緣側主要應用於數據傳輸量大、安全要求高以及數據實時處理等行業與應用場景中。其中，邊緣計算是一種分佈式計算模式，其將計算資源和數據處理能力推向接近數據源的邊緣設備，以減少延遲並提高響應速度。 對前端領域而言，面對邊緣場景下的應用開發也發生了相應的變化，其通常需要考慮邊緣側與終端側的實現方式，並且還需考慮相較於傳統 B/S 架構下的部署方案。本文旨在通過工業互聯網場

pwa , 雲計算 , 邊緣計算 , serverless , 前端

收藏 評論

13592899917 頭像

浪跡天涯小king - 一套代碼打包多個微信小程序，一套代碼打包多個抖音小程序，有需要請到uniapp插件裏面下載享用

走過路過不要錯過，只説一遍，真的很好用，不好用你可以在評論裏面噴我、踩我 uniapp插件地址（https://ext.dcloud.net.cn/plugin?id=15196） 一套代碼打包多個微信小程序 一套代碼打包多個抖音小程序 簡介 此項目是用來免除手動替換小程序appid的煩惱。有些公司會在開發環境是一個appid，測試，準生產，生產又是另一個appid，避免我們每次手動填寫，打包構建

vue.js , 小程序 , 前端工程化 , uniapp , 前端

收藏 評論

moyuzai_zxp616510038 頭像

馳驥 - 【十四】CSS3新特性

前言 本篇章主要講述CSS3新特性，如svg、canvans以及動畫。 面試回答 1.canvas畫圓：首先獲取canvas對象，設置好寬高，用getContext方法設置2d繪圖，然後用arc方法進行繪製，arc的參數分別是圓心的x，y座標、半徑、以x軸為基準的起始角度以及結束角度，這裏設置，0到2π即可。 知識點 1.SVG 參考博客：https://juejin.cn/post/684490

css3 , less , Css , 前端 , Javascript

收藏 評論

jdcdevloper 頭像

京東雲開發者 - 極致性能優化：前端SSR渲染利器Qwik.js | 京東雲技術團隊

引言 前端性能已成為網站和應用成功的關鍵要素之一。用户期望快速加載的頁面和流暢的交互，而前端框架的選擇對於實現這些目標至關重要。然而，傳統的前端框架在某些情況下可能面臨性能挑戰且存在技術壁壘。 在這個充滿挑戰的背景下，我們引入了 Qwik.js 框架。Qwik.js 不僅是一個前端框架，更是一種前端性能的終極解決方案。它不僅提供了卓越的性能，還以其獨特的特點和優勢脱穎而出。 讓我們一起深入探索 Q

性能優化 , 前端性能 , ssr , 前端

收藏 評論

jueqiangdeqianbi 頭像

倔強的鉛筆 - 深入探討Node.js文件寫入：逐步教程

文件寫入是 Node.js 中的一項重要任務，它允許你將數據保存到本地文件系統中，供後續使用。這個功能在許多應用中都有廣泛的應用，包括數據備份、日誌記錄、配置文件更新等。在本文，我們將介紹如何在 Node.js 中執行文件寫入操作，提供基本概念、常用方法、使用場景和實踐案例。 基本概念 在開始之前，讓我們先了解一些基本概念。 文件系統模塊 Node.js 提供了內置的文件系統模塊 fs，它包含了

node.js , 最佳實踐 , 前端工程師 , 程序員 , 前端

收藏 評論

moyuzai_zxp616510038 頭像

馳驥 - 【十五】CSS性能

前言 本篇章來源於https://juejin.cn/post/7077347573740077069，內容只是經過咀嚼便於自己理解。 面試回答 1.重繪重排：簡單來説重繪就是改變某個節點的樣式，重排就是改變某些節點的佈局，比如元素尺寸變動、元素位置變動以及瀏覽器窗口變動。所以重排一定會引起重繪，而重繪不一定引起重排。減少重繪重排的方式主要是通過集中修改css來完成，比如將樣式統一放在clas

vue.js , less , Css , 前端 , Javascript

收藏 評論

nanchengfe 頭像

南城FE - 純CSS實現魔法漸變邊框卡片

如圖所示，這是一個很炫酷的卡片效果，關鍵效果在於卡片的邊框呈漸變色變化着，在網頁中有這樣一個卡片相信可以極大的增強用户體驗交互。本次文章將解讀如何使用純CSS實現這個炫酷的卡片效果。 基於上面的動圖可以分析出以下是本次實現的主要幾點： 卡片的邊框是漸變色 卡片的邊框呈順時針動畫 卡片底部還有陰影隨着邊框動畫而變化 鼠標懸停時動畫隱藏顯示靜態的卡片 實現過程 看到這樣的邊框首先要想到的

css3 , 動畫 , Css , 用户體驗 , 前端

收藏 評論

nanchengfe 頭像

南城FE - 基於 Letterize.js + Anime.js 實現炫酷文本特效

如上面gif動圖所示，這是一個很炫酷的文字動畫效果，文字的每個字符呈波浪式的擴散式展開。本次文章將解讀如何實現這個炫酷的文字效果。 基於以上的截圖效果可以分析出以下是本次要實現的主要幾點： 文案呈圓環狀擴散開，擴散的同時文字變小 文字之間的間距從中心逐個擴散開，間距變大 文案呈圓環狀擴散開，擴散的同時文字變大 文字之間的間距從中心逐個聚攏，間距變小 動畫重複執行以上4個步驟 實現過

css3 , 動畫 , Css , 前端 , Javascript

收藏 評論

jdcdevloper 頭像

京東雲開發者 - 深入跨域 - 從初識到入門 | 京東物流技術團隊

前言 跨域這兩個字就像一塊狗皮膏藥一樣黏在每一個前端開發者身上，無論你在工作上或者面試中無可避免會遇到這個問題。如果在網上搜索跨域問題，會出現許許多多方案，這些方案有好有壞，但是對於闡述跨域的原理和在什麼情況下需要用什麼方案，缺少系統性的説明。大家在工作中可能因為大佬們已經配置好了，不會產生跨域，但是作為一個前端的開發人員，面對跨域的問題，還是需要從原理上去理解跨域的原因，在不同的情況中，我們該如

chrome , 跨域 , 前端 , Javascript

收藏 評論

nanchengfe 頭像

南城FE - 純CSS實現炫酷文本陰影效果

如圖所示，這是一個文本陰影效果，陰影有多個顏色，鼠標懸停時文本陰影效果消失，文本回到正常的效果。讓我們逐步分解代碼，看看如何使用純CSS實現這個效果的。 基於以上動圖可以分析出以下是本次實現的主要幾個功能點： 文本有多個顏色的陰影的效果 文本有空心鏤空的效果 鼠標懸停時文本回到正常效果 鼠標懸停時英文字體的粗細有變化 實現過程 多層顏色陰影 文字的陰影用text-shadow實現，但

css3 , 動畫 , Css , 前端

收藏 評論

tinyang 頭像

豫見世家公子 - js遞歸遍歷數組並判斷數組中的每一項如果都不為空則返回true，只要有一項為空則返回false

js遞歸遍歷數組並判斷數組中的每一項如果都不為空則返回true，只要有一項為空則返回false。一開始看到這樣的場景我就覺得很簡單沒難度，可真正上手才發現並不那麼簡單，而且想要讓代碼健壯就又複雜了些。於是經過一個小時的努力加不斷修改、增補，總算實現了自己想要的一個方法。 代碼如下： const isArrayEmpty = arr = { if (!Array.isArray(arr) ||

數組 , 遞歸 , 前端 , Javascript

收藏 評論

nanchengfe 頭像

南城FE - 純CSS動態漸變文本特效

如圖所示，這是一個炫酷的文本漸變效果，如同冰島的極光一般。本次的文章讓我們逐步分解代碼，瞭解其實現原理。 基於以上動圖效果可以分析以下是本次動效實現的主要幾點： 文本中有多個顏色的動畫 每個顏色顯示的半徑不同，有大有小 整體動畫是有規律的重複進行着 實現過程 接下來開始正式的代碼實現過程，通過以上可以分析出會有多個元素來實現顏色的動畫，每個元素的動畫軌跡和運行速度不一致，但當多個不同顏

css3 , 動畫 , Css , 程序員 , 前端

收藏 評論

jdcdevloper 頭像

京東雲開發者 - 前端技術探秘-Nodejs的CommonJS規範實現原理 | 京東物流技術團隊

瞭解Node.js Node.js是一個基於ChromeV8引擎的JavaScript運行環境，使用了一個事件驅動、非阻塞式I/O模型，讓JavaScript 運行在服務端的開發平台，它讓JavaScript成為與PHP、Python、Perl、Ruby等服務端語言平起平坐的腳本語言。Node中增添了很多內置的模塊，提供各種各樣的功能，同時也提供許多第三方模塊。 模塊的問題 為什麼要有模塊 複雜的

chrome , node.js , commonjs , 前端 , Javascript

收藏 評論

webinfoq 頭像

破曉L - 瞭解關鍵區別：await vs return vs return await

異步編程是現代 JavaScript 開發中一個重要方面，它使我們能夠處理耗時的操作，而不會阻塞其他任務的執行。使用異步函數時，我們會遇到三個重要的關鍵字：await 、return、return await。在本文中，我們將探討這些關鍵字之間的差異，並討論何時使用每個關鍵字。 在深入探討細節之前，讓我們先闡明一下異步函數的用途。異步函數是一種特殊類型的函數，可以使用 await 關鍵字。它允許我

vue.js , promise , async-await , 前端 , Javascript

收藏 評論

nanchengfe 頭像

南城FE - CSS技巧：從高度0過渡到自動高度

本文翻譯自 CSS trick: transition from height 0 to auto!，作者：Francesco Vetere， 略有刪改。 如果你在CSS上花了足夠長的時間，很可能你曾嘗試過從height:0到auto的平滑過渡。。。卻發現它不起作用！😢 ️幸運的是現在有一個解決這個問題的方法：使用CSS Grid佈局可以解決這個問題，而且代碼簡單，運行的很完美。 讓我們從一個實

css3 , 動畫 , Css , 前端

收藏 評論

liulhf 頭像

劉lhf - React Router V6項目中的路由鑑權封裝實踐（Hooks）

React Router V6項目中的路由鑑權封裝實踐（Hooks） 1. 前言 1.1 路由封裝的好處 路由鑑權集中管理： 封裝路由組件允許你集中管理路由鑑權邏輯。這意味着在一個地方處理用户是否有權限訪問某個路由，而不是在每個頁面或組件中重複相同的鑑權邏輯。這有助於保持一致性，並簡化了對路由鑑權的維護和更新。 提高代碼複用性： 封裝路由組件可以促進代碼的複用。你可以將通用的路由配置、鑑權邏

react , 封裝 , react-router , typescript , 前端

收藏 評論

nanchengfe 頭像

南城FE - 純CSS實現炫酷背景霓虹燈文字效果

如圖所示，這是一個很炫酷的霓虹燈文字效果且背景炫酷，就像很多個燈光閃爍着不同的顏色。 本次文章將解析如何用CSS代碼實現這個效果，根據上面的動圖分析出我們要實現的幾個主要功能點： 整個背景中有平均分佈的小點襯托中心區域 文字閃爍效果如同霓虹燈一樣 文字背景呈多個平均分佈的亮點 背景亮點的顏色整體呈現漸變色變化 1. 默認背景色 首先我們來看看如何通過CSS創建一個多個小點背景效果。

交互設計 , css3 , 動畫 , Css , 前端

收藏 評論

jungang 頭像

jungang - 瞭解JavaScript閉包機制

介紹 JavaScript中的閉包是一種強大的概念，它允許我們在函數內部創建和訪問私有變量，並且可以在函數外部繼續使用這些變量。理解閉包的工作原理對於編寫高質量的JavaScript代碼至關重要。本文將深入探討JavaScript閉包的機制，並結合最佳實踐和代碼示例進行詳細説明。 什麼是閉包？ 閉包是指函數能夠訪問並操作其詞法作用域外部的變量的能力。當一個函數內部定義了另一個函數，並且內部函數引用

閉包 , 前端 , Javascript

收藏 評論

nanchengfe 頭像

南城FE - [譯]原生CSS嵌套使用

本文翻譯自 CSS Nesting，作者：Ahmad Shadeed， 略有刪改。 如果你是一個前端開發人員，那麼你應該使用過CSS預處理器以及預處理器中的嵌套特性。它一直是一個受歡迎的功能，我一直都在使用CSS預處理器。 今年所有的主流瀏覽器都支持原生CSS嵌套：Chrome、Firefox和Safari。這是一個重要的CSS功能，這將使編寫CSS更加容易。在本文中我將記錄到目前為止我所學到的關

sass , css3 , Css , 翻譯 , 前端

收藏 評論