tag 前端

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

@前端 / 博客 RSS 訂閱

zch681990 頭像

太羽 - 基於viewUI框架自定義表單交互表格

template scrollContent :minusHeight='140' div class="zd-white-b" Table :columns="columns" :data="dataList" template #name="{ row, index }"

vue.js , iview , 前端 , Javascript

收藏 評論

kevinzhw 頭像

天涯學館 - Redux Toolkit：簡化Redux應用狀態管理

Redux Toolkit 是官方推薦用來簡化Redux開發的工具集。它包含了一些預設的最佳實踐，使得創建和管理Redux狀態變得更簡單。 1. 創建Store 使用configureStore函數來創建Redux store，它會自動配置中間件，如redux-thunk用於處理異步操作。 import { configureStore } from '@reduxjs/toolkit';

react , redux , 前端 , Javascript

收藏 評論

nanchengfe 頭像

南城FE - CSS炫酷光暈按鈕特效

如圖所示，這是一個很炫酷的發光按鈕特效，鼠標懸停時，按鈕呈現旋轉動畫發光的效果，這樣的動畫效果可以顯著提升用户體驗和視覺吸引力。本文將解析如何實現這個按鈕特效，基於這個動圖可以分析出實現這個效果的主要功能要點： 按鈕背景為漸變顏色 懸停時按鈕有放大效果 懸停時文案有發光漸變動畫 懸停時按鈕有旋轉發光效果 實現過程 漸變按鈕 漸變色背景我們設置background-image的line

css3 , 動畫 , Css , 前端

收藏 評論

kevinzhw 頭像

天涯學館 - PWA離線優先策略：提升用户體驗的關鍵步驟

Progressive Web Apps (PWA) 的離線優先策略是通過Service Worker和Cache API實現的，它允許在沒有網絡連接時仍然可以訪問網站的部分或全部內容。 1. 創建Service Worker註冊文件（service-worker.js）： self.addEventListener('install', (event) = { event.waitUntil

pwa , 前端 , Javascript

收藏 評論

rife 頭像

凌虛 - 圖解計算機網絡：一條 HTTP 請求的網絡拓撲之旅

引言 常見的網絡拓撲結構如下圖所示： 在此拓撲中，終端設備通過 WiFi 連接到路由器，路由器再連接到光貓（或終端設備通過移動網絡 4G/5G 連接到基站），之後 ISP 網絡服務提供商接管網絡通信，將請求最終轉發至應用服務器。 從用户設備發出的 HTTP 請求是如何穿越網絡的？我們將深入探討這一過程。 HTTP 請求的網絡旅途 OSI 網絡體系結構 先從計算機網絡的基礎架構開始： 上圖展示了

架構 , 程序員 , 計算機網絡 , 後端 , 前端

收藏 評論

icecreamlj 頭像

一顆冰淇淋 - 從0到1：React項目中的Webpack配置實戰

公司項目一般都是使用集團封裝好的腳手架，腳手架內部實現咱看不到也摸不着，好不容易組內推行新的UI框架，需要自行定義 webpack 配置，這可是個絕佳的好機會，我對配置過程進行了梳理，把商業項目的成熟配置小跑着送上。 初始化 首先新建一個空文件夾，執行 npm init 初始化生成 package.json 文件。 創建 src 文件夾，項目的業務代碼都放在這裏，再創建 index.js，這是項目

react , webpack-dev-server , webpack , 前端 , Javascript

收藏 評論

qinyuanqiblog 頭像

qinyuanqiblog - vue-cli3 本地無法代理到生產環境的問題分析

問題描述 一個古老項目，之前是基於vuecli2 後來被我遷移到vue cli3, webpack 版本是4.46, vue-cli版本是4.4.4 vuecli配置，之前這個配置是可以直接訪問到生產環境的，後來同樣的配置，無法代理到生產環境，問了下運維大哥，他説就nginx加了個認證來源而已，別的啥都沒做，肯定是前端代理的姿勢不對 解決辦法 輾轉反側，經過一年終於解決了這個問題。

vue-cli , 前端

收藏 評論

minnanitkong 頭像

王大冶 - 5分鐘內理解 .prototype 鏈 | 2024

CSS技巧與案例詳解 vue2與vue3技巧合集 VueUse源碼解讀 在JavaScript的世界裏,原型(prototype)系統是一個常被討論但不易掌握的概念。作為JavaScript繼承模型的基石,理解原型對於構建大型應用或進行對象操作至關重要。讓我們一起探索這個迷人的話題,揭開原型系統的神秘面紗。 什麼是原型? 在JavaScript中,每個對象都有一個內部屬性[[Proto

ecmascript-6 , 前端 , Javascript

收藏 評論

gqkmiss 頭像

月恆 - JS 中 structuredClone 和 JSON.parse(JSON.stringify()) 克隆對象的區別

JavaScript 中 structuredClone 和 JSON.parse(JSON.stringify()) 克隆對象的異同點 一、什麼是 structuredClone？ 1. structuredClone 的發展 structuredClone 是在 ECMAScript 2021（ES12）標準中引入的，ECMAScript 2021 規範正式發佈於 2021 年 6 月 自 2

ecmascript-6 , clone , 前端 , Javascript

收藏 評論

conan_66cdbb657e1e3 頭像

Conan - uniapp方式實現視頻播放加密統計

uniapp方式實現視頻播放加密統計 在移動應用開發中，視頻播放功能是常見的需求之一，而視頻內容的加密保護和統計則成為了開發者需要關注的問題。本文將分享如何使用uniapp結合視頻雲點播插件，實現視頻播放的加密和統計功能。 環境準備 在開始之前，請確保你已經安裝了HBuilderX，並創建了一個uniapp項目。接下來，你需要從插件市場購買並下載視頻雲點播插件。 集成插件 購買插件：在插件市場

音視頻 , 加密 , uni-app , 前端

收藏 評論

nanchengfe 頭像

南城FE - 純CSS實現海浪文字效果

如圖所示，這是一個很炫酷的文字波動效果，文字呈現出一個海浪波動的效果，這樣的動畫效果可以顯著加強文案本身的含義。本文將解析如何使用純CSS實現這個特效，基於這個動圖可以分析出實現這個效果的主要功能要點： 整體呈現出3D文案效果 文案呈現波動狀態動畫 文案有漸變顏色的變化 文案在變化過程中有傾斜分層的效果 1. 基礎樣式 首先我們從佈局和基礎樣式開始。 通過上面的圖片可以看出動畫中的

css3 , 動畫 , Css , 前端

收藏 評論

zxl20070701 頭像

zxl20070701 - React 相關插件之 Redux 基本使用入門

引入和定義 首先，你需要創建Store實例並暴露出來： // stores/login.store.js const loginInstance = (preState, action) = { switch (action.type) { // 修改狀態 case "changeLoginState": preState.isLo

react , redux , 前端

收藏 評論

aqiongbei 頭像

aqiongbei - 來學一個值錢的知識，Chrome插件如何優雅的捕獲頁面的請求結果

背景 今天在寫一個某網站限流檢測的chrome插件，需要捕獲頁面的某個請求結果。那麼問題就來了，我們該如何捕獲頁面的請求結果呢？我們來捋捋都有哪些方案。 我開發的時候的配置為manifest_version: 3，下文內容也是在這個基礎上展開的。 本文只列舉方案，一些需同步在manifest_version進行配置地方並未提及，請自行配置。 可行的方案 一、chrome.webReques

chrome , chrome-extension , chrome-devtools , 前端 , Javascript

收藏 評論

refanbanzhang 頭像

熱飯班長 - chrome插件實現監聽ajax請求，然後修改請求參數

1 修改manifast.json manifest_version必須為3，因為這個declarativeNetRequest是3中新增的api { "manifest_version": 3, "permissions": ["declarativeNetRequest"], "host_permissions": ["all_urls"] } 2 在background.j

chrome-extension , typescript , 前端 , html5 , Javascript

收藏 評論

icecreamlj 頭像

一顆冰淇淋 - 全面掌握 Jest：從零開始的測試指南（下篇）

在上一篇測試指南中，我們介紹了Jest 的背景、如何初始化項目、常用的匹配器語法以及鈎子函數的使用。這一篇篇將繼續深入探討 Jest 的高級特性，包括 Mock 函數、異步請求的處理、Mock 請求的模擬、類的模擬以及定時器的模擬、snapshot 的使用。通過這些技術，我們將能夠更高效地編寫和維護測試用例，尤其是在處理複雜異步邏輯和外部依賴時。 Mock 函數 假設存在一個 runCallBac

單元測試 , 自動化測試 , jest , 前端 , Javascript

收藏 評論

momeak9 頭像

泯瀧 - 「譯」如何寫出更好的Typescript代碼

鏈接：https://medium.com/@technicadil_001/how-to-write-better-types... 作者：Debabrata Dash 原標題：How to write better Typescript codes? 在本文中，我們將討論大約 15 個編寫更好的 Typescript 代碼的技巧。 譯者：本文討論了 15 個實用技巧，以幫助開發者編

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

收藏 評論

tanking 頭像

TANKING - jQuery國內大廠CDN加速鏈接

摘要 jQuery 的CDN有很多，但都很不穩定，例如國內的 bootcdn 經常抽風，還有其他的常見的例如 jQuery 官方的 code.jquery.com、jsDeliver、unpkg.com、staticfile，這些都是經常抽風的。導致使用了線上的CDN的頁面打開受到影響，那麼就沒有國內好用的CDN嗎？下面是我彙總的一些大廠的！ 大廠jQuery靜態資源CDN 百度 https://

cdn , jquery , jq , 前端 , Javascript

收藏 評論

nihaojob 頭像

秦少衞 - 使用 fabric.js 開發移動端 H5 圖片編輯器

大家好，我是開源圖片編輯器的 https://github.com/ikuaitu/vue-fabric-editor 的作者，它是一款基於 PC 版本的開源圖片編輯器。 最近很多開發者諮詢，是否可以將開源圖片編輯器改造為一款適用於移動端的 H5 版本圖片編輯器，最近 H5 版本的圖片編輯器剛剛上線，就將實現思路和產品細節整理成筆記分享出來，供大家參考。 基礎 開源的圖片編輯器的基本功能都

圖片 , fabric.js , 前端 , Javascript

收藏 評論

infinilabs 頭像

極限實驗室 - 【第4期】搜索客 Meetup | INFINI Pizza 網站 SVG 動畫這麼炫，我教你啊！

本次 Meetup 活動由 搜索客社區、極限科技（INFINI Labs）聯合舉辦，活動主題將從設計師的角度出發，探討如何在零編程基礎下，藉助 ChatGPT 和 SVG，搞定 INIFNI Pizza 首頁動效，從設計到實現，探索 AI 的更多玩法。歡迎大家預約報名參加和交流。 活動主題：INIFNI Pizza 網站 SVG 動畫這麼炫，我教你啊！ 活動時間：2024 年 9 月 25

前端 , svg

收藏 評論

liuyuxuan6666 頭像

LYX6666 - 解決lodash由於依賴錯誤導致無法啓動的問題

目錄 問題描述 嘗試的解決辦法 真正的解決辦法 結論 一、 問題描述 一個很久沒接觸的老項目，前兩天想看一下里面一個功能，結果前端起不來了。 先上報錯： Error: node_modules/@types/lodash/common/object.d.ts:1026:46 - error TS1005: '?' expected. 1026 : K extend

node.js , localstorage , typescript , npm , 前端

收藏 評論

shaogongbra 頭像

ShaoGongBra - duxapp：基於Taro使用模塊化開發，提升開發效率

duxapp是基於Taro二次開發的模塊化框架 使用這個框架，結合框架提供的UI庫和工具庫，能幫助你快速且高質量的完成項目，且能實現同時開發小程序、H5、APP（React Native），並且保證各個端的一致性 duxapp還針對APP開發（React Native）做了大量優化，大大降低了APP發開的難度，你可以閲讀React Native教程，瞭解詳情 下面讓我來詳細介紹如何使用duxapp

react , react-native , 模塊化 , taro , 前端

收藏 評論

mosong 頭像

墨鬆 - VitePress、Hexo、Docusaurus，哪個最適合你的靜態網站？

在選擇合適的靜態網站工具時，Hexo、VitePress、Docusaurus 是三個備受關注的選項，那麼到底哪一個框架更適合你呢？ 本文從使用場景、社區生態、功能、性能、擴展性這五個方面，幫你全方位分析各個框架的優缺點，以便為你的技術選型提供參考。 1、應用場景 Hexo, 官方定位自己是 "快速、簡潔且高效的博客框架" , 但是它同樣適合構建簡單的文檔網站，它具有簡單易用的特點，適合那些

vite , 網站 , 文檔 , vitepress , 前端

收藏 評論

nanchengfe 頭像

南城FE - 純CSS實現有趣emoji切換開關

這是一個純CSS創建的動畫切換開關，它不僅能夠在視覺上吸引用户，還能通過交互提供即時反饋。本文將解析源碼的核心實現邏輯，這個項目的核心是使用CSS變量、3D變換和過渡效果來實現一個動態的、響應式的用户界面元素。 關鍵技術點 CSS變量：用於動態調整樣式。 3D變換：用於創建翻轉動畫效果。 過渡效果：用於平滑地改變元素的樣式。 emoji：並不是真正的emoji而是通過CSS繪製。 實

css3 , 動畫 , Css , 前端

收藏 評論

minnanitkong 頭像

王大冶 - 使用 React Query 時還需要 Redux 嗎？| 狀態管理 2024

React Hook 深入淺出 CSS技巧與案例詳解 vue2與vue3技巧合集 VueUse源碼解讀 隨着前端技術的不斷髮展，狀態管理一直是React應用開發中的核心問題。Redux作為長期佔據主導地位的狀態管理庫，為開發者提供了可預測的狀態容器和強大的生態系統。然而，隨着React Query等新興工具的出現，開發者們開始重新思考狀態管理的最佳實踐。本文將深入探討在2024年的前

ecmascript-6 , 前端 , Javascript

收藏 評論