tag 前端

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

@前端 / 博客 RSS 訂閱

cafehaus 頭像

咖啡教室 - vue項目中webpack-dev-server的open和host0.0.0.0配置衝突

一個比較老的公司項目，webpack 用的 v3 版本，為了實現localhost、127.0.0.1和本機ip可以同時訪問，webpack的devServer裏的 host 我們一般會設置成 0.0.0.0，這樣本機所有 ipv4 地址都可以實現訪問。 比如我們要將本地運行的前端項目，分享給公司的後端、產品、測試...預覽效果，如果 host 直接設置的 localhost，運行後打開的地址 h

vue.js , webpack-dev-server , webpack , 前端

收藏 評論

freeman_tian 頭像

freeman_Tian - mongose 模糊檢索

$regex為模糊查詢的字符串提供正則表達式功能，MongoDB使用Perl兼容正則表達式 //通過條件查找,支持username模糊搜索並分頁 findAdminByParamsAndPageHasFuzzy(params, pager) { if (params.username) { let pattern = new RegExp(param

mongoose , 前端

收藏 評論

jamesfancy 頭像

邊城 - Loading ... done

引子 在前面界面開發的過程中，為了增強在與後端交互過程中的用户體驗，通常會顯示 Loading 動畫。Loading 動畫會在與後端交互結束的時候關閉。這是一個很常規的需求，技術實現也不復雜。 showLoading(); axios.request(...) .then(...) .finally(() = hideLoading()); Node.js 和大部分瀏覽器都在 20

loading , finally , 異步 , 前端 , Javascript

收藏 評論

immerse 頭像

沉浸式趣談 - 熱點面試題：聊聊對 this 的理解？

前言 歡迎關注 『前端進階圈』 公眾號 ，一起探索學習前端技術...... 前端小菜雞一枚，分享的文章純屬個人見解，若有不正確或可待討論點可隨意評論，與各位同學一起學習~ 聊聊對 this 對象的理解？ 定義 在執行上下文中的一個屬性，它指向最後一次調用這個屬性或方法的對象。通常有四種情況來判斷。 四種情況如下 1. 函數調用模式：當一個函數不是一個對象的屬性時，直接作為函數來調用時

面試 , 面試問題 , this , 前端 , Javascript

收藏 評論

hooozen 頭像

hooozen - 前端工程師需要知道的字體知識

隨着網頁個性化設計和品牌特色的需要，在網頁中使用特定的字體將成為越來越常見的需求。現代字體設計經歷了數十年的發展，已經積累了成熟的標準和規範，但對於許多前端開發者來説可能可能還比較陌生，本文就前端開發過程中可能遇到的字體知識做一個梳理和介紹。 博客原文：https://www.hozen.site/archives/64/ 字體基礎 字體標準 字體的設計和使用和其他任何工業設計產品一樣，需要統一的

css3 , 字體 , 前端

收藏 評論

zxl20070701 頭像

zxl20070701 - 從JQuery出發總結的關於原型使用上的一些淺薄理解

比如我們現在的需求如下。 有一個函數MyObj，支持如下功能： 可以通過MyObj()的方式返回一個對象，這個對象和new MyObj()是等價的 MyObj本身是一個對象，可以通過MyObj.doit()的方式調用其上的方法或屬性 為了實現需求，第一反應是： var MyObj=function(){ return new MyObj(); }; 然後在My

prototype , proto , jquery插件 , jquery , 前端

收藏 評論

sovitjs 頭像

可視化PaaS開發 - 好用的Web前端開發工具推薦

前端Web開發工具實際上是讓前端開發人員更高效輕鬆地構建前端佈局的軟件。在這些工具的幫助下，前端重複的工作變得簡單，從而加快了Web開發過程。 有許多前端Web開發工具可以滿足各種特定需求，例如HTML，CSS和JavaScript工具，代碼編輯工具，部署工具，原型和線框圖工具，安全工具等等。但是選擇適合自己項目的工具，必須對工具有所瞭解。 下面我們就介紹一些主流的Web前端開發工具： Vue.j

前端工程師 , 前端設計 , 前端 , Javascript , Web

收藏 評論

banana_god 頭像

_香蕉大神 - JavaScript的原型鏈詳解

最近在項目中經常遇到，且與同事經常探討關於js原型鏈的知識。發現其實很多工作經驗好多年的同事也記不太清楚原型鏈的整個環節，今天在這裏專門的把鏈圖畫出來，並且加以講解，希望能夠幫到更多前端的朋友。 原型鏈其實就是一個三角關係，如下圖所示，我們編寫了一個構造函數Student,通過構造函數創建了對象s1（const s1 = new Student()），也就是我們經常説的s1是構造函數Student

構造函數 , 原型鏈 , 前端 , Javascript

收藏 評論

sovitjs 頭像

可視化PaaS開發 - Web前端設計開發工具集（框架、驗證器、編輯器）

什麼是前端開發 前端開發是創建Web頁面或app等前端界面呈現給用户的過程，通過HTML，CSS及JavaScript以及衍生出來的各種技術、框架、解決方案，來實現互聯網產品的用户界面交互。前端開發主要關注用户體驗。 前端開發的技術 超文本標記語言（HTML） HTML 是基本的前端技術之一，也是前端開發的核心，是所有網站的標記。HTML 元素可幫助您向網站添加表單、按鈕、容器和其他功能。 級聯

visual-studio-code , sublime-text , 前端 , Git , Web

收藏 評論

jdcdevloper 頭像

京東雲開發者 - 聊聊前端性能指標那些事兒

作者：京東科技 郝梁 前言：作為 C 端前端研發，除了攻克業務難點以外，也要有更深層的自我目標，那就是性能優化。這事兒説大不大，説小也不小，但難度絕對不一般，所涉及的範圍優化點深入工程每個細胞。做好前端性能優化絕非簡單之事！文章主要內容介紹前端性能考核指標及優化方案。 一、前端性能指標有哪些？ 根據 chrome Lighthouse 最新規則，前端性能指標考量主要有 FCP（First Cont

性能優化 , 前端性能 , 前端

收藏 評論

jdcdevloper 頭像

京東雲開發者 - 微前端框架single-spa子應用加載解析

作者：京東物流 寧衝 1 前言 什麼是微前端？ 微前端是指存在於瀏覽器中的微服務。 本文主要通過對微前端框架single-spa的基座應用加載子應用的single-spa-vue函數庫進行分析，通過代碼維度分析讓大家瞭解在single-spa加載子應用的時候都做了哪些事情。如何通過優化single-spa-vue函數庫保持子應用的狀態。 由於是在代碼維度進行分析，要求讀者對single-sp

微前端 , 程序員 , spa , 前端 , Javascript

收藏 評論

jdcdevloper 頭像

京東雲開發者 - cookie 時效無限延長方案

作者：京東科技 劉清潔 1、痛點（*） 自動化測試有2種形式，接口自動化和UI自動化。而UI自動化經常會被登錄節點堵塞，例如驗證碼、圖形、滑塊等，儘管有些方式可以識別圖形和定位滑塊位置，但成功率都不高，無法真正意義上實現自動化執行；而http接口的自動化測試前置如果依賴cookie，也無法實現自動化執行。 a、怎麼樣才能繞過登錄，實現從前端到後端的自動化執行 b、面對複雜的登錄驗證無法直接自動獲取

cookies , 自動化測試 , cookie , 前端 , ui

收藏 評論

bradenhan 頭像

前端老兵 - 如何獲取 fetch 返回數據

獲取 fetch 返回數據 Fetch API 提供了一個 JavaScript 接口，用於訪問和操縱 HTTP 管道的一些具體部分，例如請求和響應。 它還提供了一個全局 fetch() 方法，該方法提供了一種簡單，合理的方式來跨網絡異步獲取資源。 這種功能以前是使用 XMLHttpRequest 實現的。 由於以下原因，我們在判斷後端返回數據時候，如果 HTTP 狀態碼錯誤，可能判斷比較麻煩。

fetch , 前端 , Javascript

收藏 評論

wuwhs 頭像

wuwhs - 「過程詳解」async await綜合題

前言 如果你之前跟我一樣一直對async await熟悉又陌生的話（熟悉是可能每天都在用，陌生是針對一些組合題又丈二和尚摸不着頭腦），不妨可以邊看邊練，總結規律，相信會逐漸清晰並有所得。本文對每個案例都詳細描述了代碼的執行流程，如有不妥歡迎指正。 async 函數return值 async函數默認會返回一個Promise對象，不管最後函數有沒有return值。但是針對具體的返回值情況，實際上表現會

promise , async-await , node.js , 前端 , Javascript

收藏 評論

sovitjs 頭像

可視化PaaS開發 - Web組態：Web2D工業組態模板

最近發現不少網友留言，想要一些前端Web組態的模板，由於公司是做2D/3D可視化編輯器的，同時也會設計很多各行各業的組態模板，以供參考，所以小編整理了包含電力、環境、園區、能源等行業領域的一些組態模板，希望對大家有所幫助！ 污水處理前端Web組態模板 污水處理預沉池系統 污水處理AO池監測系統 生活污水處理監控系統 鍋爐控制前端Web組態模板 鍋爐監控系統 鍋爐控制系統

前端設計 , scada , 前端 , html5 , Web

收藏 評論

jdcdevloper 頭像

京東雲開發者 - 【原理揭秘】Vite 是怎麼兼容老舊瀏覽器的？你以為僅僅依靠 Babel？

作者：京東科技 孫凱 一、前言 對前端開發者來説，Vite 應該不算陌生了，它是一款基於 nobundle 和 bundleless 思想誕生的前端開發與構建工具，官網對它的概括和期待只有一句話：“下一代的前端工具鏈”。 Vite 最早的版本由尤雨溪發佈於3年前，經歷了3年多的發展，Vite 也已逐漸迭代成熟，它的穩定性、擴展性、周邊生態足以在生產環境中支撐各種業務場景的落地。但是關於Vite的

vite , 瀏覽器 , babel , 前端

收藏 評論

tianmiaogongzuoshi_5ca47d59bef41 頭像

天渺工作室 - js用前綴名查找class或id節點,js模糊查詢某個dom節點

js在操作dom的場景中，有時候會有類似的場景需求。 js用前綴名查找class節點 // 參數dom為html dom節點 // 參數key為需模糊查詢的名稱字段 function queryClassNode(dom, key) { let collectArray = []; for (var i = 0; i dom.childNodes.length; i++) {

dom , 前端 , Javascript

收藏 評論

charlotteeeeeee 頭像

charlotteeeeeee - 正則

1：須包含大寫字母、小寫字母、數字、特殊符號四種字符組合，長度不少於8位，特殊字符支持!@#$%^*? (/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^*?])[\da-zA-Z!@#$%^*?]{8,}$/) 2：僅支持漢字、數字、字母及特殊符號# /^(?!,)(?!.*?,$)[a-zA-Z0-9#\u4e00-\u9fa5]+$/ 3：名稱僅能包含

regexp , 正則表達式 , 前端

收藏 評論

jdcdevloper 頭像

京東雲開發者 - 帶你揭開神秘的javascript AST面紗之AST 基礎與功能

作者：京東科技 周明亮 AST 基礎與功能 在前端裏面有一個很重要的概念，也是最原子化的內容，就是 AST ，幾乎所有的框架，都是基於 AST 進行改造運行，比如：React / Vue /Taro 等等。 多端的運行使用，都離不開 AST 這個概念。 在大家理解相關原理和背景後，我們可以通過手寫簡單的編譯器，簡單實現一個 Javascript 的代碼編譯器，編譯後在瀏覽器端正常運行。 創建數字小

ast , 前端性能 , 前端 , Javascript

收藏 評論

gkymfrg1 頭像

ohoherror - jest +ts +esm

Jest 是當下最主流的前端測試框架 首先初始化ts環境 yarn add typescript --dev npx tsc --init 第二步:安裝ts下的jest yarn add jest @types/jest --dev 第三步:新建tests文件夾 tests/index.spec.ts it('init',()={ expect(true).toB

jest , typescript , babel , 前端

收藏 評論

jdcdevloper 頭像

京東雲開發者 - 帶你揭開神秘的Javascript AST面紗之Babel AST 四件套的使用方法

作者：京東零售 周明亮 寫在前面 這裏我們初步提到了一些基礎概念和應用： 分析器 抽象語法樹 AST AST 在 JS 中的用途 AST 的應用實踐 有了初步的認識，還有常規的代碼改造應用實踐，現在我們來詳細説説使用 AST， 如何進行代碼改造？ Babel AST 四件套的使用方法 其實在解析 AST 這個工具上，有很多可以使用，上文我們已經提到過了。對於 JS 的 AST 大家已經

ast , babel , 前端 , Javascript

收藏 評論

ning_643b67be37ac3 頭像

麒寧 - 3分鐘搞定：獲取 URL 查詢參數值

3分鐘搞定：獲取 URL 查詢參數值 在前端開發工作中，利用 URL 進行參數傳遞是一項十分常見的方法。在頁面跳轉時，通過 URL 攜帶某些信息，如狀態、id、區分頁面來源的字段值等。因此，學習瞭解如何獲取 URL 查詢參數值是很重要的。 js 代碼手擼 利用 JavaScript 代碼手擼一個函數，對 URL 查詢參數進行解析。這是方式靈活度高，可以進行更多個性化的操作。 const getSe

前端 , Javascript , url

收藏 評論

ning_643b67be37ac3 頭像

麒寧 - 3分鐘搞定：瀏覽器本地存儲 Web Storage

寫在前面 瀏覽器本地存儲包括兩個對象：sessionStorage 和 localStorage，它們都是 Storage 的實例對象。 window.localStorage instanceof Storage; // true Web Storage 的基本使用 查-訪問數據：getItem() 方法。 增改-添加、修改數據：setItem() 方法。 刪-刪除數據：removeItem()

面試小抄 , sessionstorage , localstorage , 前端 , Javascript

收藏 評論

gkymfrg1 頭像

ohoherror - 數組轉化為樹

將一個數組轉換為一棵樹可以通過遞歸實現。假設我們有一個包含父節點與子節點關係的數組，如下所示： const arr = [ { id: 1, name: 'A', parent_id: null }, { id: 2, name: 'B', parent_id: 1 }, { id: 3, name: 'C', parent_id: 2 }, { id: 4, na

數組 , 樹形結構 , 前端 , Javascript

收藏 評論