@Javascript

Stories List
@fenanjiu

【webpack系列】從基礎配置到掌握進階用法

前言 本篇文章將介紹一些webpack的進階用法,演示內容繼承自上一篇文章的內容,所以沒看過上一篇文章的建議先學習上一篇內容再閲讀此篇內容,會更有利於此篇的學習~ 文件指紋 文件指紋指的是打包輸出的文件名後綴,一般用來做版本管理、緩存等 webpack的指紋策略有三種:hash、chunkhash、contenthash,它們之間最主要的區別就是每種hash影響的範圍不同。 佔位符 webpac

fenanjiu Avatar

@fenanjiu

Nickname 南玖

@wls1036

一次Ajax請求未攜帶cookie問題排查

背景 重寫一個登錄頁面,登錄接口是跨域接口,重寫的頁面登錄成功後進入頁面報錯,原因是請求後台接口未攜帶cookie,但是通過老頁面進行登錄,進入頁面後cookie可以正常攜帶,使用工具對比新老頁面登錄請求,request和response都是一樣。 解決 排除過以下可能性 在代碼中進行cookie刪除 兩個請求頭不一樣導致結果不一樣 系統時間設置錯誤,導致cookie過期 對比過兩邊的a

wls1036 Avatar

@wls1036

Nickname DQuery

@rk405264704

vue+element項目中導出時文件名稱從後台獲取

在做後台管理系統項目時,導出功能後端一般返回文件流或者鏈接,前端進行相關處理,今天只説文件流相關內容,之前項目中所有的文件名稱都是前端進行拼接的,像xxxx-20231002122415.xlsx等等,那下載時文件名稱如何從後台獲取呢? 1、首先需要後台配置 在響應標頭中我們可以看到Content-Disposition:attachment;filename=xxxxx.xlsx信息,filen

rk405264704 Avatar

@rk405264704

Nickname 留白

@an_5cd4f637c2671

js一個正則匹配數字千位分隔符的位置(支持小數)

前言 在日常業務中,常會碰到產品要求數字展示千位分隔符的需求,本着學習鑽研,不做業務碼農的想法,嘗試着寫了一個單正則並且支持小數點的添加千位分隔符的方法。 直接上結果 就一行代碼 thousandBitSeparator = (num) = { return num?.toString().replace(/(?!\..)\B(?=(\d{3})+(\.|$))/g, ',') } 看看效果

an_5cd4f637c2671 Avatar

@an_5cd4f637c2671

Nickname 安昊

@tangzhiyuan

關於博客更新的二三事

原文鏈接:關於博客更新的二三事 前言 很顯然,正如大家所見到的,這一版本主題v4.7.0進行了大量的刪減工作。可能正如 “大道至簡” 吧,相比於前一版本 v3.7.1 ,個人認為可能有點花哨(僅個人認為),所以這一版本並未過多魔改,只在樣式上做了些許調整,更多的繼承沿用了主題自帶的效果。 先看下兩個版本的對比: v 4.7.0 效果 v 3.7.1 效果 Deleted f

tangzhiyuan Avatar

@tangzhiyuan

Nickname 唐志遠

@shishui_63822321355cb

class-fetch:一個用 TypeScript 編寫的優雅的 HTTP 客户端庫

你是否想要用 TypeScript 編寫更安全,更可靠,更簡潔的 HTTP 客户端代碼?如果你的答案是肯定的,那麼你一定會喜歡 class-fetch 這個庫。 class-fetch 是一個用 TypeScript 編寫的 js 庫,用於生成 HTTP 客户端。它基於 fetch,支持瀏覽器和 nodejs 運行時。它使用裝飾器來簡化請求參數和返回值的處理。它使用 class-transform

shishui_63822321355cb Avatar

@shishui_63822321355cb

Nickname 是水

@jdcdevloper

抽象語法樹AST必知必會 | 京東物流技術團隊

1 介紹 AST 打開前端項目中的 package.json,會發現眾多工具已經佔據了我們開發日常的各個角落,例如 JavaScript 轉譯、CSS 預處理、代碼壓縮、ESLint、Prettier 等。這些工具模塊大都不會交付到生產環境中,但它們的存在於我們的開發而言是不可或缺的。 Babel,Webpack,Vue-cli 和 EsLint 等很多的工具和庫的核心都是通過 Abstract

jdcdevloper Avatar

@jdcdevloper

Nickname 京東雲開發者

@zzd41

React 18 如何提升應用性能

hello 大家好,我是 superZidan,這篇文章想跟大家聊聊 React 18 如何提升應用性能 這個話題,如果大家遇到任何問題,歡迎 聯繫我 React 18 引入了併發功能,從根本上改變了 React 應用程序的渲染方式。 我們將探討這些最新功能如何影響和提高應用程序的性能 首先,讓我們退一步來了解長任務的基礎知識和相應的性能測量 主線程和長任務 當我們在瀏覽器運行 JavaScrip

zzd41 Avatar

@zzd41

Nickname superZidan

@sovitjs

目前主流的9款Web前端框架

啓動項目時,請查看 2023 年最好的 Web 前端框架。為什麼選擇合適的工具很重要? 前端開發人員使用前端框架來簡化工作。這些軟件包通常提供可重用的代碼模塊、系統化的前端技術和預構建的接口塊。這使團隊可以更快、更輕鬆地創建可持續的 Web 應用程序和用户界面,而無需從頭開始編寫每個功能或對象。在開發 Web 應用程序時,有必要使用現代工具。 數維圖科技小編在這裏列出 2023 年 9 個流行的

sovitjs Avatar

@sovitjs

Nickname 可視化PaaS開發

@tinygeeker

禁止別人調試自己的前端頁面代碼

🎈 為啥要禁止? 由於前端頁面會調用很多接口,有些接口會被別人爬蟲分析,破解後獲取數據 為了 杜絕 這種情況,最簡單的方法就是禁止人家調試自己的前端代碼 🎈 無限 debugger 前端頁面防止調試的方法主要是通過不斷 debugger 來瘋狂輸出斷點,因為 debugger 在控制枱被打開的時候就會執行 由於程序被 debugger 阻止,所以無法進行斷點調試,所以網頁的請求

tinygeeker Avatar

@tinygeeker

Nickname 江户川亮仔

@autohometech

汽車之家頁面性能監控建設實踐

1 前言 關注用户體驗,提高頁面性能,是每位前端研發同學的日常工作之一。提高頁面性能對業務的幫助,雖不易衡量,但肯定是利遠大於弊。如何衡量頁面性能優劣?如何幫助研發同學快速定位到頁面性能瓶頸點?一直是前端的重點工作之一。本文分享汽車之家在頁面性能監控建設方面的部分工作,主要包含三方面: 技術選型 該選擇哪些頁面性能監控技術方案? 在儘可能不影響頁面性能的前提下,既能客觀、全面衡量頁面性能,又

autohometech Avatar

@autohometech

Nickname 之家技術

@skychx

⚡️ The Cost Of JavaScript (2017 - 2023) | JavaScript 性能優化之旅

如果你喜歡我的文章,希望點贊👍 收藏 📁 評論 💬 三連支持一下,謝謝你,這對我真的很重要! 吐槽時間 不知道從什麼時候開始,前端開始卷一些 “高端知識”,動不動就瀏覽器底層原理,V8 是如何運行的,倒不是説這些沒啥用,只是來勢洶洶好像不懂這些就不能糊頁面一樣。 我工作中和內核團隊與虛擬機團隊也合作過並諮詢過他們這些相關問題,大家的態度也很明確,面對這種千萬行代碼的大型工程項目,他們作為專業

skychx Avatar

@skychx

Nickname 鹵代烴

@shine_zhu

本地存儲封裝

前言 在項目中使用本地存儲(LocalStorage/SessionStorage)的場景有很多,如果有較多頻次的使用,則可以考慮簡單封裝一下。 封裝便利: 統一管理:如果視頻頻次將多,考慮將本地存儲全放到某一個文件夾中,避免後期混亂幾不好維護等問題; 序列化:存儲的時候轉字符串,使用的時候轉回來,通過公共方法處理即可,不用當使用的時候再逐個處理; 類型推斷:在實例化時傳入類型,在傳入和獲

shine_zhu Avatar

@shine_zhu

Nickname 軒軒

@jdcdevloper

React請求機制優化思路 | 京東雲技術團隊

説起數據加載的機制,有一個繞不開的話題就是前端性能,很多電商門户的首頁其實都會做一些垂直的定製優化,比如讓請求在頁面最早加載,或者在前一個頁面就進行預加載等等。隨着react18的發佈,請求機制這一塊也是被不斷談起,並且在後續其實也給出了明確的方向。 假如我們頁面中有三個組件C1、C2、C3依次嵌套,每個組件中有對應的請求F1、F2、F3,通常大多數人會使用useeffect和state變量來實現

jdcdevloper Avatar

@jdcdevloper

Nickname 京東雲開發者

@apifox

JavaScript 閉包是什麼:深入瞭解

閉包是指在一個函數內部創建另一個函數,並且內部函數可以訪問外部函數的變量、參數以及其他內部函數,即使外部函數已經執行完畢。這種機制使得內部函數保留了對外部作用域的引用,即使外部作用域已經不再活躍。 為什麼閉包重要? 閉包在 JavaScript 中具有重要的用途和價值。它們可以用於創建私有變量、封裝邏輯、避免全局污染等方面。另外,閉包還允許你在函數之外操作局部變量,從而為代碼提供更大的靈活性和可

apifox Avatar

@apifox

Nickname Apifox

@chenchaoyang666

RegExp基礎語法

匹配模式 創建正則表達式對象時,可以設置’m’、’i’、’g’這三個標誌,分別對應多行模式、不區分大小模式和全局模式三種 全局模式 g: 默認地,第一次匹配成功後,正則對象就停止向下匹配了。g 修飾符表示全局匹配(global),設置’g’標誌後,正則對象將匹配全部符合條件的結果,主要用於搜索和替換 console.log('1a,2a,3a'.replace(/a/,'b'));//'1b

chenchaoyang666 Avatar

@chenchaoyang666

Nickname 愚者

@invalidnull

什麼是面向對象編程領域的胖接口 - Fat Interface

在面向對象編程(Object-Oriented Programming,簡稱 OOP)領域,"胖接口",也稱為"Fat Interface",是一個被廣泛認識並且應當避免的設計反模式。這個術語指的是一個接口(或抽象類)包含了大量的方法,可能超出了單一職責的原則,導致接口變得臃腫、複雜和難以維護。在本文中,我將詳細解釋什麼是胖接口,為什麼它是一個問題,並通過實例來加深理解。 胖接口的定義和問題: "

invalidnull Avatar

@invalidnull

Nickname 註銷

@zzd41

詳解 React 中的閉包問題

hello 大家好,我是 superZidan,這篇文章想跟大家聊聊 React 中的閉包 這個話題,如果大家遇到任何問題,歡迎 聯繫我 JavaScript 中的閉包一定是最可怕的特性之一。 即使是無所不知的 ChatGPT 也會告訴你這一點。 它也可能是最隱秘的語言概念之一。 每次編寫任何 React 代碼時,我們都會用到它,大多數時候我們甚至沒有意識到。 但最終還是無法擺脱它們:如果我們想編

zzd41 Avatar

@zzd41

Nickname superZidan

@jump_and_jump

利用中介模式開發全局控制器

中介模式定義了一個單獨的(中介)對象,來封裝一組對象之間的交互。將這組對象之間的交互委派給與中介對象交互,來避免對象之間的直接交互。 在實際的項目中,程序由許多對象組成,對象間的交流錯綜複雜。 隨着應用程序的規模增大,對象越來愈多,他們之間的關係也越來複雜。對象間很容易出現相互引用而導致程序無法運行。同時開發者需要改變或者刪除某一個對象時候,需要查找並且改造所有引用到它的對象。這樣一來,改造的成

jump_and_jump Avatar

@jump_and_jump

Nickname jump__jump

@seanshi_fe

Vue.js中如何去定位解決內存泄漏?

Vue.js 是一個流行且強大的 JavaScript 框架,它允許我們構建動態和交互式 Web 應用程序。 然而,與任何軟件一樣,Vue.js 應用程序有時會遇到內存泄漏,從而導致性能下降和意外行為。 今天,我們將深入探討 Vue.js 應用程序中內存泄漏的原因,並探索如何定位和修復這些問題的有效策略。 什麼是內存泄漏 ? 當程序執行過程中保留不再需要的內存時(主要是一些 變量、 方法等),會阻

seanshi_fe Avatar

@seanshi_fe

Nickname Sean

@jump_and_jump

前端持久化緩存優化

緩存是提升 web 應用程序有效方法之一,尤其是用户受限於網速的情況下。提升系統的響應能力,降低網絡的消耗。當然,內容越接近於用户,則緩存的速度就會越快,緩存的有效性則會越高。 之前個人寫過 前端 api 請求緩存方案。介紹的了內存中的緩存以及過期邏輯。後續也寫過 手寫一個前端存儲工具庫,該工具利用了適配器處理了不同的存儲介質(內存,IndexedDB, localStorage 等)。 不過,在

jump_and_jump Avatar

@jump_and_jump

Nickname jump__jump