tag 前端

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

@前端 / 博客 RSS 訂閱

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 , 翻譯 , 前端

收藏 評論

jdcdevloper 頭像

京東雲開發者 - MCube動態化與原生工程結合最佳實踐 | 京東雲技術團隊

跨端動態化開發方案重要性日益凸顯，本文對我們團隊MCube動態化實踐做了總結，為大家提供經驗和借鑑。 接入背景 隨着我們工程的需求迭代，暴露出了業務需求量大，分端開發和發版更新成本高等痛點，使用H5頁面來代替，在用户體驗和性能相較原生有差異，所以我們團隊開始了對動態化改造的研究。 在做過一些列動態化開發的嘗試，並對多種方案進行調研後，我們選擇了MCube的動態化方案。之所以選用MCube，是因為它

動態化 , 跨平台開發 , 跨域 , 前端

收藏 評論

jdcdevloper 頭像

京東雲開發者 - PWA 離線方案研究報告 | 京東雲技術團隊

本文並不是介紹如何將一個網頁配置成離線應用並支持安裝下載的。研究PWA的目的僅僅是為了保證用户的資源可以直接從本地加載，來忽略全國或者全球網絡質量對頁面加載速度造成影響。當然，如果頁面上所需的資源，除了資源文件外並不需要任何的網絡請求，那它除了不支持安裝到桌面，已經算是一個離線應用了。 什麼是PWA PWA（Progressive Web App）是一種結合了網頁和原生應用程序功能的新型應用程序開

pwa , webkit , 離線應用 , HTML , 前端

收藏 評論

grewer 頭像

Grewer - V8 入門記錄一：初識

關於 V8 我想前端從業人員或多或少會聽説過這個詞，但是他具體是什麼， 怎麼入門， 怎麼學習是一個較高的門檻，本文就 V8 入門，來做一個記錄，也方便大家的學習。 V8 是 Google 用 C++ 編寫的開源高性能 JavaScript 和 WebAssembly 引擎。它被用於 Chrome 瀏覽器和 Node.js 等。它實現了 ECMAScript 和 WebAssembly，可在 Win

v8 , v8js , 瀏覽器 , 前端框架 , 前端

收藏 評論

guisijun 頭像

歸思君 - JavaScript中的this指向哪？

大家好，我是歸思君 一、引言 this可以説是前端開發中比較常見的一個關鍵字，由於其指向是在運行時才確定，所以大家在開發中判斷其方向時也會很模糊，今天就把this的指向問題拆開了，揉碎了，好好講一講。 先來看一個場景，看看該處的 this 應該指向哪：首先在 request.js 中定義一個 getAction 函數 export function getAction(url,paramet

this , 前端 , Javascript

收藏 評論

invalidnull 頭像

註銷 - node.js 項目中執行 npm install 命令後看到的 idealTree inflate 的含義

隱身窗口是Chrome瀏覽器的一項隱私功能，它允許用户在瀏覽網頁時保護個人隱私。當用户在隱身窗口中瀏覽時，瀏覽器不會保存瀏覽歷史、搜索歷史、下載記錄以及填寫的表單數據。這一功能有助於用户在不留下痕跡的情況下訪問網頁，尤其是在共享計算機或公共場所使用時更為重要。 隱身窗口的核心特性 不保留瀏覽歷史記錄： 隱身窗口模式下，Chrome瀏覽器不會保存用户的瀏覽歷史記錄。這意味着在關閉隱身窗口後，之前

spring , ruby-on-rails , node.js , 前端 , Javascript

收藏 評論

wswx 頭像

goblin_pitcher - 二分查找的通用模板

二分查找的概念本身很容易理解，這裏不做贅述。其使用前提只有一個：單調數組 樸素二分查找 當在一個有向數組中，查找數組中是否有某個值，代碼很簡單： const binarySearch = (nums, target) = { let l = 0; let r = nums.length - 1; while(l=r) { const mid = (l+r) 1 if(

數據結構和算法 , 前端

收藏 評論

wswx 頭像

goblin_pitcher - 數據結構算法小結

前言 解決問題思維方式 假設我們有一整套螺絲刀，要進行筆記本清灰操作，我們主要的思維邏輯如下： 若要清灰，必須先取出風扇 若要取出風扇，必須先把從外殼到風扇的螺絲全部拆下 那麼清灰問題就變成了拆一堆不同規格的螺絲，當我們看到不同規格的螺絲，就會比較螺絲口大小、形狀和螺絲刀規格，從而選取對應的螺絲刀。 可以看出，當我們遇到一個複雜問題，下意識的思維方式就是將一個複雜問題，轉移成我們熟知的一些

數據結構和算法 , 前端

收藏 評論

jdcdevloper 頭像

京東雲開發者 - 如何利用燭龍和谷歌插件優化CLS(累積佈局偏移) | 京東雲技術團隊

簡介 CLS 衡量的是頁面的整個生命週期內發生的每次意外佈局偏移的最大突發性_佈局偏移分數_。佈局變化的發生是因為瀏覽器傾向於異步加載頁面元素。更重要的是，您的頁面上可能存在一些初始尺寸未知的媒體元素。這種組合意味着瀏覽器在加載完成之前無法確定單個元素將佔用多少空間。因此，這種不確定性帶來的劇烈佈局轉變就會導致一個高的CLS分數，也就説明用户體驗將會很糟糕。 累積佈局偏移的計算公式 = 影響比例*

佈局 , 前端 , Javascript

收藏 評論

jdcdevloper 頭像

京東雲開發者 - 解析$nextTick魔力，為啥大家都愛它？

1.為什麼需要使用$nextTick? 首先我們來看看官方對於$nextTick的定義: 在下次 DOM 更新循環結束之後執行延遲迴調。在修改數據之後立即使用這個方法，獲取更新後的 DOM。 由於vue的試圖渲染是異步的，生命週期的created()鈎子函數進行的DOM操作一定要放在Vue.nextTick()的回調函數中，原因是在created()鈎子函數執行的時候DOM其實並未進行渲染，而此時

vue.js , dom , 前端 , Javascript

收藏 評論

nanchengfe 頭像

南城FE - [譯]優秀的URL設計

本文翻譯自 Examples of Great URL Design，作者：Jim Nielsen， 略有刪改。 以下是Kyle Aster關於URL的設計為何重要的觀點（2010年）： URL是通用的。它們可以在Firefox、Chrome、Safari、Internet Explorer、cURL、wget、iPhone、Android中使用，甚至可以寫在便籤上。它們是網絡的一種通用語法，但別

前端 , Javascript , url

收藏 評論

vivo_tech 頭像

vivo互聯網技術 - 前端 JS 安全對抗原理與實踐

作者：vivo 互聯網安全團隊- Luo Bingsong 前端代碼都是公開的，為了提高代碼的破解成本、保證JS代碼裏的一些重要邏輯不被居心叵測的人利用，需要使用一些加密和混淆的防護手段。 一、概念解析 1.1 什麼是接口加密 如今這個時代，數據已經變得越來越重要，網頁和APP是主流的數據載體，如果獲取數據的接口沒有設置任何的保護措施的話，數據就會被輕易地竊取或篡改。 除了數據泄露外，一些重要功能

混淆 , 調試 , 前端 , Javascript

收藏 評論

chenxiaoxi_619df8932f34a 頭像

陳小西 - 對於企業軟件系統而言，唯一重要的架構設計是什麼

相對於系統軟件而言，企業軟件往往是面向應用場景、業務邏輯。雖然很多工程師、架構師會面帶嚴峻表情的告訴你，軟件項目所要保障的高可用性、魯棒性、可擴展性、高併發性、低延遲性、安全性、可測試性、靈活性，是如何如何的重要，彷彿一套只有幾個部門三五十人用的軟件系統，其架構也得是多麼科學、嚴謹、隆重的經歷一系列的設計、論證、測試，姿勢拉好、儀式感滿滿。 但現實中，多少企業的軟件系統是由代碼屎山堆成，多少IT運

pwa , 小程序 , 前端 , html5

收藏 評論

nanchengfe 頭像

南城FE - 2023 年最受歡迎的 12 款 Chrome 瀏覽器擴展

谷歌瀏覽器Chrome是目前最受歡迎的瀏覽器之一，而瀏覽器擴展則是為了提升用户體驗和功能而開發的插件。 2023年穀歌公佈了12款最受歡迎的Chrome瀏覽器擴展。每個都提供獨特的功能來增強您的瀏覽體驗。以下是它們的詳細介紹： Speechify：將Google文檔、PDF、網頁或書籍轉換成語音，擁有30多種語言的自然發音聲音。 QuillBot：一套AI驅動的寫作工具，包括語法檢查

chrome , chrome-extension , Linux , 前端 , Javascript

收藏 評論

guisijun 頭像

歸思君 - 聊一聊 JavaScript 中的作用域和閉包

哈嘍大家好，我是歸思君~ 一、引言 我們知道，作用域（Scope）就是代碼中變量和函數的可訪問的區域，這個區域中決定了變量和函數的生命週期。在當前的高級程序語言中，主要有詞法作用域（靜態作用域）和動態作用域兩種。 靜態作用域：其作用域是在編寫代碼時就已經確定好，靜態作用域是根據變量和函數在代碼中的位置來決定。函數尋找變量時，是在函數定義的位置中尋找，而不是調用的位置。現在大多數編程語言都採用的

作用域 , 閉包 , 作用域鏈 , 前端 , Javascript

收藏 評論

wswx 頭像

goblin_pitcher - 單調棧模板和適用範圍

刷力扣時，遇到關鍵詞：下一個更大/小的數這類題目時，往往會採用單調棧的解法，如每日温度 刷題最常見的問題就是，看到題解，感覺很精妙，但下次遇到一模一樣的題目時，往往知道思路，但寫不出代碼，有或者遇到類似的變體題目時，不會往這方面想。這兩種情況在之前的文章(數據結構算法小結)中提到過，分別有兩方面的原因： 對工具（如單調棧知識點）的特性（適用範圍）不明朗 對工具的原理沒有真正的理解 初學單調

數據結構和算法 , 前端 , Javascript

收藏 評論

nanchengfe 頭像

南城FE - 炫酷鼠標懸停隨機漸變文本動畫效果

如圖所示，這是一個很炫酷的鼠標懸停動畫效果，卡片的文字隨着鼠標的移動不斷變化着，且文字的顏色伴隨着漸變色跟隨鼠標移動，中心部分是突出的LOGO效果，整個交互效果十分引人注目。原效果來源於 evervault.com/customers 這個網站，有興趣的可以體驗看看～ 本次文章將解析如何用代碼實現這個效果，根據上面的動圖分析出我們要實現的幾個主要功能點： 卡片在鼠標懸停時出現漸變隨機文字

css3 , 動畫 , Css , 前端

收藏 評論

apifox 頭像

Apifox - 精通軟件質量提升的利器：Mock 測試教程

在軟件工程的套路中，虛擬化測試，又稱 Mock 測試，扮演一個無可或缺的角色。Mock 測試允許工程師仿製和操控對象、服務或者系統組件等的行為，使得人們能在一個乾淨獨立的環境裏測試特定功能。這種方法能確保測試聚焦於代碼邏輯，而非外圍干擾因素。 Mock 測試的核心概念 Mock 測試 用虛擬對象取代實際對象，通過控制外部依賴，帶來了測試的隔離性和準確性，從而確立了代碼的穩定性及其長期維護性。 Mo

mock.js , mock , mockito , 前端工程師 , 前端

收藏 評論

anran758 頭像

anran758 - Promise 與異步編程

Promise 是 JavaScript 中的一個重要概念，與前端的工作更是息息相關。因此本文將整理一下 Promise 在日常工作中的應用。 概念 從 MDN | 使用 Promise 中我們能學習到 Promise 的基礎使用與錯誤處理、組合等概念，可以將 Promise 的特點概括為: Promise 對象有三種狀態，且狀態一旦改變就不會再變。其值記錄在內部屬性 [[Promis

promise , node.js , 異步編程 , 前端 , Javascript

收藏 評論