高級前端進階

整個實現(xiàn)流程分為 5 個大部分：準備測試環(huán)境axios 核心請求構(gòu)建多宿主環(huán)境（瀏覽器 || node）適配思想攔截器的實現(xiàn)原理如何取消請求1、準備基礎(chǔ)的測試環(huán)境1.1 基于 Koa 準備一個最簡單的服務(wù)程序：import Koa from 'koa';const&nb

之前有人跟我們說，出去面試的時候，有時候會遇到一些讓人頭疼的問題，比如有一次去字節(jié)面試，面試官就問了一個讓他很奇怪的問題：“為啥POST請求有時候會發(fā)送兩次呢？”這個問題聽起來挺玄乎的，但其實用大白話來說，原因還挺簡單的。咱們這就來聊聊這個事兒。首先，得明白啥是POST請求。POST請求就是咱們在網(wǎng)

很多2C的移動端H5應(yīng)用，都會有邀請好友、分享之類的，通常會在前端實時生成一副海報圖片，用戶可以分享到朋友圈等，這類需求都需要解決前端DOM轉(zhuǎn)圖片的問題。今天帶來一篇文章，作者從飛書的一鍵復(fù)制網(wǎng)頁內(nèi)容為圖片，層層分解前端涉及到的技術(shù)點，希望大家看完有收獲。下面是正文部分。李經(jīng)理在使用飛書時無意中發(fā)現(xiàn)

開發(fā)者編寫JavaScript代碼，而瀏覽器運行JavaScript代碼。從根本上說，前端開發(fā)不需要構(gòu)建步驟。那么，為什么現(xiàn)代前端需要構(gòu)建步驟呢？隨著前端代碼庫越來越龐大，以及開發(fā)者體驗越來越重要，直接將JavaScript源碼傳輸給客戶端會帶來兩個主要問題：不支持的語言特性：由于JavaScrip

前言組合式 (Composition) API 的一大特點是“非常靈活”，但也因為非常靈活，每個開發(fā)都有自己的想法。加上項目的持續(xù)迭代導(dǎo)致我們的代碼變得愈發(fā)混亂，最終到達無法維護的地步。本文是我這幾年使用組合式API的一些經(jīng)驗總結(jié)，希望通過本文讓你也能夠?qū)懗鲆拙S護、優(yōu)雅的組合式API代碼。選項式AP

前言最近有位面試官分享了一道他的面試題：vue3的ref是如何實現(xiàn)響應(yīng)式的？下面有不少小伙伴回答的是Proxy，其實這些小伙伴只回答對了一半。當(dāng)ref接收的是一個對象時確實是依靠Proxy去實現(xiàn)響應(yīng)式的。但是ref還可以接收 string、number 或 boolea

背景作為直接面向用戶的前端開發(fā)人員，我們都知道頁面首屏打開速度的重要性，直接關(guān)系到用戶的留存。提升 H5 頁面打開速度的方法也有很多，有從網(wǎng)絡(luò)優(yōu)化入手的 CDN、gzip壓縮、Keep-Alive等，有從加載優(yōu)化入手的資源大小優(yōu)化、懶加載、按需加載、代碼拆分、Tree Shaking等，以及頁面渲染

前言vue3的響應(yīng)式API大家應(yīng)該都特別熟悉，比如ref、watch、watchEffect等。平時大家都是在vue-cli或者vite創(chuàng)建的vue項目里面使用的這些響應(yīng)式API，今天歐陽給大家?guī)硪恍┎灰粯拥?。脫離vue項目，在node.js項目中使用vue的響應(yīng)式API直接上代碼話不多說，直接上

Vue/React 將前端開發(fā)從 jQuery 命令式的編程風(fēng)格帶到了聲明式的編程風(fēng)格，開發(fā)者只需要描述界面應(yīng)該是什么樣子，Vue/React 就會根據(jù)數(shù)據(jù)的變化自動更新界面。因此對于業(yè)務(wù)頁面只需要關(guān)心數(shù)據(jù)有什么以及引起數(shù)據(jù)的變化有什么。數(shù)據(jù)數(shù)據(jù)主要有兩大類，ui 相關(guān)和非 ui 相關(guān)。ui 相關(guān)前

前言發(fā)現(xiàn)有不少粉絲還傻傻分不清楚什么是編譯時？什么是運行時？這篇文章我們來讓你徹底搞清楚編譯時和運行時的區(qū)別。編譯時我將編譯這個詞語理解為翻譯，這句話是什么意思呢？比如你要和一個老外溝通，你的英文超級爛。所以你說的是中文，老外卻只理解英文。那你們兩個人怎么溝通呢？所以你需要一個翻譯器來將你說的中文轉(zhuǎn)

前言介紹了如何利用 postTask 調(diào)度器來提高網(wǎng)頁的用戶體驗和響應(yīng)速度，通過高效地調(diào)度任務(wù)和處理優(yōu)先級來優(yōu)化頁面性能。使用 postTask 可以拆分長任務(wù)、預(yù)加載資源和提高頁面交互性能，讓頁面更具響應(yīng)性。同時，文章還介紹了如何在 React 中集成 postTask 調(diào)度器來執(zhí)行不同模式或策略

背景單頁應(yīng)用（Single Page Application，簡稱SPA）是一種現(xiàn)代Web應(yīng)用程序架構(gòu)，通過動態(tài)重載頁面中的部分內(nèi)容來提供更流暢和更響應(yīng)式的用戶體驗。由于SPA在客戶端（用戶的瀏覽器）運行大量的JavaScript代碼，并且與傳統(tǒng)的多頁應(yīng)用不同，它不會每次操作都從服務(wù)器重新加載整個頁

在前端開發(fā)中，隨著項目迭代升級，日志打印逐漸風(fēng)格不一，合理的日志輸出是監(jiān)控應(yīng)用狀態(tài)、調(diào)試代碼和跟蹤用戶行為的重要手段。一個好的日志系統(tǒng)能夠幫助開發(fā)者快速定位問題，提高開發(fā)效率。本文將介紹如何在前端項目中制定日志輸出規(guī)范。1. 日志等級首先，我們需要定義不同的日志等級，以便根據(jù)消息的重要性進行分類。通

關(guān)于路徑別名一個前端項目通常會演變成復(fù)雜的嵌套目錄結(jié)構(gòu)。因此，使用相對路徑導(dǎo)入可能會變得更長且更混亂，這可能會對代碼的外觀產(chǎn)生負面影響，并讓辨識代碼的來源變得更加困難，更加重要的是代碼文件位置變動相對路徑就得改變。使用路徑別名即絕對路徑導(dǎo)入，不僅解決了理解導(dǎo)入路徑的問題，而且還簡化了重構(gòu)期間代碼移動

寫在開頭最近，小編從玩了兩年多的游戲中退游了??，本來以為會一直就這么玩下去，和隊友們相處很融洽，收獲了很多開心快樂的時光???？上?，游戲的一波更新......準備要開始收割韭菜了，只能無奈選擇棄坑了。小編屬于貧民玩家，靠著硬肝與白嫖也將游戲號整得還不錯，這兩天把號給賣了??。玩了兩年多，竟然還能賺一點小

今天，我們將討論一些改善React應(yīng)用程序運行狀況的最佳實踐。這些規(guī)則應(yīng)用廣泛。因此，擁有這些知識勢在必行。unsetunset1. 使用JSX速記unsetunset嘗試使用JSX速記來傳遞布爾變量。舉個例子，假設(shè)你想要控制導(dǎo)Navbar組件的標(biāo)題可見性。壞return ( &

大模型可以說是近期最熱的話題之一，不管是國外的ChatGPT、llama3等，還是國內(nèi)的文心一言、通義千問等，都可以說是熱的發(fā)紅、紅的發(fā)紫，秉承著了解的態(tài)度，我在github上發(fā)現(xiàn)了跟大模型相關(guān)的項目，其star高達71.9k，其就是ollama（https://github.com/ollama/

前言PixiJS是一個強大的2D WebGL渲染庫，使得開發(fā)者可以輕松地創(chuàng)建交互式的2D場景和動畫。本文將介紹PixiJS的主要功能和特點，并提供一些實際的使用示例。Pixijs是什么？PixiJS，一款超級強大且靈活的2D WebGL渲染庫，可幫助你創(chuàng)建絢麗多彩的交互式體驗及游戲。其強大在于，提供

作者：vivo 互聯(lián)網(wǎng)大前端團隊 - Tian Yuhan本篇文章主要聚焦海報圖分享這個形式，探討純前端在H5&小程序內(nèi)，合成海報到下載到本地、分享至社交平臺整個流程中可能遇到的問題，以及如何解決。一、引言絕大多數(shù)的電商平臺都會設(shè)計分享裂變的功能，激勵用戶進行分享，這是一種拉新促活的常見措施

引言腳手架是什么，相信各位已經(jīng)熟悉得不能再熟悉了，畢竟無論是vue開發(fā)者（vue-cli）還是react（create-react-app）開發(fā)者，他們都有各自的腳手架，個人雖是用react更多，但不得不說是更喜歡vue-cli的，它的插件機制非常有意思，雖不如webpack的plugin那么方便，

寫代碼覺得很無聊沒有成就感說明了幾點：第一，對于你公司的業(yè)務(wù)來說，你掌握的技術(shù)已經(jīng)足以應(yīng)付，缺乏挑戰(zhàn)性，沒有新鮮感了；第二，你參與開發(fā)的項目可能都是很普通的項目，比如幾乎每個前端都寫過的后臺管理系統(tǒng)，無法給你提供成就感；第三，你的工作可能是重復(fù)性的，每天都在寫類似的代碼，沒有提供學(xué)習(xí)的機會。其實大多

技術(shù)債務(wù)來自舊項目的依賴過久，React 16 + antd 3 + webpack 4。React 新版本的批處理優(yōu)化了，antd 最新已經(jīng)由 css-in-js 重寫了，不用再配置 less 等預(yù)先編譯器。舊版本的 webpack 在 nodejs 20 會出現(xiàn) openssl 的報錯，需要配置

轉(zhuǎn)載來自 前端充電寶 React 18 已經(jīng)發(fā)布兩年多了，現(xiàn)在終于要迎來 React 19 了。這個版本將引入期待已久的全新 React 編譯器！它通過自動化優(yōu)化來簡化前端開發(fā)流程，減少手動進行記憶化優(yōu)化的需求。本文就來看看 React 編譯器是什么？它是如何工作的？又帶來了哪些

講述我的創(chuàng)業(yè)一年的經(jīng)歷，事業(yè)有高潮，也有低谷，有喜悅，有歷練，酸甜苦辣都嘗過 分享出來我的經(jīng)驗，希望對你有所幫助unsetunset前言unsetunset年初我裸辭創(chuàng)業(yè)了，跟一個朋友一起合伙做項目，我主要還是做技術(shù)部分，開發(fā)一個回收類的項目也是第一次創(chuàng)業(yè)，雖然聽過很多道理，自己經(jīng)歷過又是另外一回事

本文繼續(xù)分享最新真實面經(jīng)，希望對粉絲股東們有幫助，另外文末有直投大廠的機會，別錯過。都說行情不好，可是有的同學(xué)拿到了很多Offer，各種對比；也有同學(xué)連面試都很難約到。“能拿到Offer的大多相似，拿不到的各有各的原因?！苯鹑y四你拿到了哪些offer？也歡迎大家在評論區(qū)留言討論，不要錯過文末的企業(yè)

前言面試官：vue3的v-model都用過吧，來講講。粉絲：v-model其實就是一個語法糖，在編譯時v-model會被編譯成:modelValue屬性和@update:modelValue事件。一般在子組件中定義一個名為modelValue的props來接收父組件v-model傳遞的值，然后當(dāng)子組