tag 前端

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

@前端 / 博客 RSS 訂閱

ruochuan12 頭像

若川 - Taro 源碼揭秘：9. Taro 是如何生成 webpack 配置進行構建小程序的？

1. 前言 大家好，我是若川，歡迎關注我的公眾號：若川視野。從 2021 年 8 月起，我持續組織了好幾年的每週大家一起學習 200 行左右的源碼共讀活動，感興趣的可以點此掃碼加我微信 ruochuan02 參與。另外，想學源碼，極力推薦關注我寫的專欄《學習源碼整體架構系列》，目前是掘金關注人數（6k+人）第一的專欄，寫有幾十篇源碼文章。 截至目前（2024-11-22），目前最新是 4.0.7，

react , 小程序 , webpack , 前端 , Javascript

收藏 評論

ruochuan12 頭像

若川 - Taro 源碼揭秘：10. Taro 到底是怎樣轉換成小程序文件的？

1. 前言 大家好，我是若川，歡迎關注我的公眾號：若川視野。從 2021 年 8 月起，我持續組織了好幾年的每週大家一起學習 200 行左右的源碼共讀活動，感興趣的可以點此掃碼加我微信 ruochuan02 參與。另外，想學源碼，極力推薦關注我寫的專欄《學習源碼整體架構系列》，目前是掘金關注人數（6k+人）第一的專欄，寫有幾十篇源碼文章。 截至目前（2024-12-26），目前最新是 4.0.8，

react , 小程序 , webpack , 前端 , Javascript

收藏 評論

yayu 頭像

冴羽 - SvelteKit 最新中文文檔教程（22）—— 最佳實踐之無障礙與 SEO

前言 Svelte，一個語法簡潔、入門容易，面向未來的前端框架。 從 Svelte 誕生之初，就備受開發者的喜愛，根據統計，從 2019 年到 2024 年，連續 6 年一直是開發者最感興趣的前端框架 No.1： Svelte 以其獨特的編譯時優化機制著稱，具有輕量級、高性能、易上手等特性，非常適合構建輕量級 Web 項目。 為了幫助大家學習 Svelte，我同時搭建了 Svelte 最新的中文

svelte , 前端框架 , sveltekit , 前端 , Javascript

收藏 評論

yayu 頭像

冴羽 - SvelteKit 最新中文文檔教程（23）—— CLI 使用指南

前言 Svelte，一個語法簡潔、入門容易，面向未來的前端框架。 從 Svelte 誕生之初，就備受開發者的喜愛，根據統計，從 2019 年到 2024 年，連續 6 年一直是開發者最感興趣的前端框架 No.1： Svelte 以其獨特的編譯時優化機制著稱，具有輕量級、高性能、易上手等特性，非常適合構建輕量級 Web 項目。 為了幫助大家學習 Svelte，我同時搭建了 Svelte 最新的中文

svelte , 前端框架 , sveltekit , 前端 , Javascript

收藏 評論

fenanjiu 頭像

南玖 - 瀏覽器如何確定最終的CSS屬性值？解析計算優先級與規則

前言 上篇文章中有提到CSS值的處理過程，但如果想要確定一個元素的最終樣式值可以不需要這麼多步。實際上我們寫的任何一個標籤元素無論寫沒寫樣式，它都會有一套完整的樣式。理解這一點非常重要‼️ 比如：一個簡單的p標籤 打開瀏覽器控制枱，選中元素，切換到computed選項，勾選show all，這裏就能夠看到元素的所有CSS樣式，儘管你什麼樣式也沒寫，它們也是有默認值的。任何標籤都是這樣，只不過默認

瀏覽器 , Css , 前端

收藏 評論

tuzixiansen_63d4d65909d62 頭像

兔子先森 - 微信小程序獲取和修改用户頭像信息

這裏主要用到button的open-type功能，官網已有説明： 給button設置open-type="chooseAvatar"，來使bindchooseavatar方法生效，在bindchooseavatar指定的函數中獲取用户的頭像信息 button open-type="chooseAvatar" bindchooseavatar="chooseavatar"/b

vue.js , 微信小程序 , HTML , 前端 , Javascript

收藏 評論

kuailedehuanggua 頭像

kuailedehuanggua - 瀏覽器如何確定最終的CSS屬性值？解析計算優先級與規則

前言上篇文章中有提到CSS值的處理過程，但如果想要確定一個元素的最終樣式值可以不需要這麼多步。實際上我們寫的任何一個標籤元素無論寫沒寫樣式，它都會有一套完整的樣式。理解這一點非常重要‼️比如：一個簡單的p標籤 打開瀏覽器控制枱，選中元素，切換到computed選項，勾選show all，這裏就能夠看到元素的所有CSS樣式，儘管你什麼樣式也沒寫，它們也是有默認值的。任何標籤都是

xss , 前端

收藏 評論

fenanjiu 頭像

南玖 - 通過performance面板驗證瀏覽器資源加載與渲染機制

前言 一個網頁的核心由HTML、CSS和JavaScript組成，三者協同工作以呈現內容並實現交互。但瀏覽器如何解析這些資源？加載順序如何影響用户體驗？讀完本本文你將徹底弄懂以下核心知識 為什麼需要生成DOM樹？ CSS是否會阻塞HTML解析？是否阻塞頁面渲染？ JavaScript是否會阻塞HTML解析？ JavaScript的異步加載機制如何影響解析過程？ 如何通過performa

渲染 , 瀏覽器 , 面試 , 前端

收藏 評論

immerse 頭像

沉浸式趣談 - Promise 這個新 API 真香！

Hey, 我是 沉浸式趣談 本文首發於【沉浸式趣談】，我的個人博客 https://yaolifeng.com 也同步更新。 轉載請在文章開頭註明出處和版權信息。 如果本文對您有所幫助，請 點贊、評論、轉發，支持一下，謝謝！ 聊到異步，Promise 大家肯定都不陌生，是咱們處理異步操作的神器 不過呢，就算有 Promise，有時候處理一些既可能是同步又可能是異步的函數，或者那種隨時可

promise , ecmascript , 程序員 , 前端

收藏 評論

ailvyoudetiebanshao 頭像

溪抱魚 - SEO關鍵詞的研究與優化 一

關鍵詞研究和優化是SEO的核心。通過深入瞭解目標受眾使用的搜索詞，我們可以優化網站內容，提高搜索引擎排名，並吸引更多相關流量。本章將詳細探討關鍵詞研究的方法、和最佳實踐。 關鍵詞類型對比分析 1. 關鍵詞研究的基礎 瞭解不同類型的關鍵詞對於制定全面的SEO策略至關重要。每種類型的關鍵詞都有其獨特的特點和應用場景： 1.1 主關鍵詞 定義： 通常由1-2個詞組成，代表廣泛的主題或概念。 特點

seo , 程序員 , HTML , 前端

收藏 評論

ailvyoudetiebanshao 頭像

溪抱魚 - SEO的關鍵詞研究與優化 二

回顧上一篇文章 3. 關鍵詞評估和選擇 關鍵詞評估和選擇是SEO策略中至關重要的一步。這個過程不僅僅是選擇搜索量最高的詞，而是要在多個因素之間找到平衡，以確定最有價值的關鍵詞。 3.1 搜索量分析 https://segmentfault.com/a/1190000046496136 搜索量是評估關鍵詞潛力的首要指標，但它不應該是唯一的考慮因素。使用Google Keyword Planner、S

seo , 程序員 , 前端

收藏 評論

ailvyoudetiebanshao 頭像

溪抱魚 - SEO與國際化

在當今互聯網時代，企業的成功不再侷限於本地市場。國際化SEO（搜索引擎優化）為企業提供了一個強大的工具，可以幫助他們在全球範圍內擴展影響力，吸引更多的國際客户。 1. 🌍理解國際化SEO的重要性 國際化SEO不僅僅是將網站翻譯成不同的語言，它是一個全面的策略，旨在優化我們的網站以吸引和服務於全球受眾。💡 🌍 擴大全球市場覆蓋範圍 🌎 接觸到新的國際市場和客户羣 🚀 增加品牌

seo , 前端

收藏 評論

rentian 頭像

任天鏜 - navigator.mediaDevices.getUserMedia undefined問題解決

navigator.mediaDevices.getUserMedia只有在https或者localhost下使用。 如果需要再http協議下使用navigator.mediaDevices.getUserMedia，需要打開不安全的配置。 火狐瀏覽器打開多媒體不安全的配置： chomre打開不安全配置： 瀏覽器輸入chrome://flags/ 搜索Insecure o

chrome , firefox , HTML , 前端 , Javascript

收藏 評論

ailvyoudetiebanshao 頭像

溪抱魚 - Nuxt3還能用嗎？

Nuxt3還能用嗎？ 前一段時間，我完成了整個產品，從Nuxt到Next的遷移，因為面臨了一些在框架層面就無法解決的問題。 payload json化 在所有的的Nuxt中，我們都能看到有這樣一個東西。 其實有這個東西也很正常，在Next中也會把服務端渲染的數據掛載html保持數據同步，這就是一個水合的必要步驟。在Next中是這樣的。 可以看到在Next新一點的版本中是

seo , 前端

收藏 評論

fenanjiu 頭像

南玖 - Safari 隱私模式下，URL 參數為何神秘消失？

前言 最近在排查Safari在隱私模式下頁面參數丟失的問題，如果通過Safari直接打開B頁面，此時在B頁面可以正常獲取到頁面鏈接上的參數，但是如果Safari先打開A頁面，然後通過A頁面再跳轉到B頁面（A、B頁面部署在不同域名下），此時的B頁面通過JS就獲取不到鏈接上的參數了🤔，這樣就會導致一些依賴頁面參數的功能出現異常！ 問題演示 B頁面鏈接格式如下：xx.qq.com?au=xx... 通

safari , 瀏覽器 , 前端 , url

收藏 評論

chaoqipengbodemogu_eceqzp 頭像

Ming - MetisUI-一套企業級 React-Tailwind 組件庫

Metis UI 的目標是為那些喜歡 Ant Design 的開發者提供一個更靈活的選擇，特別是希望結合 Tailwind CSS 的開發者。我們在保留 Ant Design 組件設計邏輯的基礎上，提供了以下改進： 樣式覆蓋更靈活基於 Tailwind CSS 的樣式體系，開發者可以方便地對組件的各個元素進行樣式覆蓋，無需編寫複雜的自定義樣式，快速實現個性化設計。 增強的交互功能內置了一些

react , tailwind-css , antd , typescript , 前端

收藏 評論

vivo_tech 頭像

vivo互聯網技術 - FunProxy - 使用 Rust 構建跨平台全鏈路測試抓包代理工具

作者：vivo 互聯網大前端團隊- Song Jiachao 在軟件開發過程中，軟件測試對於保障軟件質量和用户滿意度起着關鍵作用。為最大程度上提升軟件品質，我們積極開展全鏈路測試實踐，打造了用Rust語言開發的自研一站式抓包代理工具FunProxy，基於其跨平台、高性能、易於擴展、安全性高等特性，讓全鏈路抓包和環境代理如絲綢般絲滑。 一、背景介紹 1.1 什麼是全鏈路測試 全鏈路測試就是"

工具 , 效率 , rust , 測試 , 前端

收藏 評論

xishui_5ac9a340a5484 頭像

夕水 - 手寫一個動態海洋和天空效果的vue hooks

背景 常規的後台管理系統登陸頁面可能就只是一個簡單的背景頁面，這不太好看，接下來讓我們來使用three.js來實現一個動態的海洋和天空效果當作背景，這樣的效果總會讓人眼前一亮，如下圖所示。 代碼實現 接下來，讓我們用trae來編寫實現這個功能吧。 1. 組合式 API 初始化 import { onMounted, onBeforeUnmount } from "vue"; import * a

vue.js , three.js , 前端 , Javascript

收藏 評論

carlsonblog 頭像

夢開始的地方 - JavaScript WebSocket 封裝與優化：自動重連、心跳機制與連接狀態監控》

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

vue.js , websocket , 前端 , Javascript

收藏 評論

tuzixiansen_63d4d65909d62 頭像

兔子先森 - 動態tabbar後的tabbar高度獲取

用於做底部懸浮定位，懸浮在tabbar上 在設置tabbar的組件中獲取，利用組件生命週期，獲取tabbar高度，將高度存到本地，用於全局獲取 attached() { let query = wx.createSelectorQuery().in(this); query.select('.custom-tab-bar').bound

react , vue.js , 微信小程序 , 前端 , Javascript

收藏 評論

wbccb 頭像

白邊 - 【微前端】singleSpa&importHTMLEntry（流程圖）源碼解析

single-spa v5.9.3 通過輕量級路由劫持和狀態機設計，實現微前端的動態加載與隔離，主要實現 路由管理：hashchange、popstate、history.pushState、history.replaceState進行劫持，路由變化時，觸發 reroute() 子應用狀態管理：不同執行邏輯轉化不同的狀態，比如 加載流程：toLoadPromise→toBo

源碼分析 , 微前端 , 前端

收藏 評論

wbccb 頭像

白邊 - 【微前端】qiankun v2.10.16（流程圖）源碼解析

整體核心流程 源碼分析 single-spa 存在以下主要的缺點 路由狀態管理不足：無法保持路由狀態，頁面刷新後路由狀態丟失 父子應用間的路由交互以來 postMessage 等方式，開發體驗差 未提供原生的 CSS 和 JS 沙箱隔離，可能導致樣式污染或者全局變量衝突 默認以來 webpack 的構建配置，其他構建工具需要改造後才能兼容 版本兼容性差，如果使用不同的 Vue 版本，

源碼分析 , 微前端 , 前端

收藏 評論

chunzhendexiaogou 頭像

PoloAPI - 谷歌 AI 革命狂飆！Gemini 2.5 搜索引擎即將橫掃搜索市場，顛覆你的認知

隨着 5 月 20 日至 21 日谷歌 I/O 開發者大會的腳步臨近，一則重磅消息在科技業界引發強烈震動 —— 谷歌正緊鑼密鼓地籌備推出基於 Gemini 2.5 的下一代 AI 搜索引擎，這場變革將徹底顛覆沿用多年的傳統搜索框界面。目前，這一全新搜索模式已悄然進入灰度測試階段，標誌着谷歌決心將其最重要的流量入口全面切換至 AI 驅動的 Gemini 生態系統，此舉無疑將給 OpenAI、Perp

gemini-2.5-pro , google , 人工智能 , 後端 , 前端

收藏 評論

chunzhendexiaogou 頭像

PoloAPI - 一文看懂谷歌I/O 2025開發者大會： Android、Chrome、谷歌搜索、Gemini

谷歌I/O開發者大會以"AI原生生態"為核心戰略，圍繞技術升級、產品整合與商業模式展開深度佈局。以下是關鍵內容的結構化總結： 一、AI技術架構突破‌ ‌Gemini模型矩陣‌ Gemini 2.5 Pro新增Deep Think模式，增強複雜推理能力（數學/編程任務準確率提升37%） 輕量級Gemini 2.5 Flash實現移動端40%延遲降低，支持邊緣設備部署 多媒體生成模型V

gemini-2.5-pro , google , 人工智能 , 後端 , 前端

收藏 評論