tag 前端

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

@前端 / 博客 RSS 訂閱

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

收藏 評論

qifengliao_5e7f5b20ee3bd 頭像

起風了 - React setState、useState同步？異步？

React setState、useState到底是同步的，還是異步的？ setState語法 用法1： this.setState({ // 數據更新 }) 用法2： this.setState((state, props) = { // 當前組件的state // 父級的state }, () = { // 數據更新之後 }) useState語法 用法1： const [n

react , 同步 , 異步 , 前端

收藏 評論

gkymfrg1 頭像

ohoherror - 數組倒序有哪些方法

倒序排列數組的方法如下： 使用reverse()方法： const arr = [1, 2, 3, 4, 5]; const reversedArr = arr.reverse(); console.log(reversedArr); //[5, 4, 3, 2, 1] 使用for循環和unshift()方法： const arr = [1, 2, 3, 4, 5]; const re

數組 , 前端 , Javascript

收藏 評論

gkymfrg1 頭像

ohoherror - CommonJS和ESM (ES6模塊）的區別

CommonJS和ESM (ES6模塊)都是JavaScript模塊標準，但是它們有一些區別，主要包括以下幾個方面: 語法差異：CommonJS使用require語法引入模塊，而ESM使用import語法引入模塊。 加載方式：CommonJS使用同步加載方式，即遇到require就執行代碼，並等待結果返回後再繼續執行；而ESM使用異步加載方式，它是通過Promise的方式異步加載模塊，遇到i

commonjs , 前端

收藏 評論

nanchengfe 頭像

南城FE - 一個神奇的小工具，讓URL地址都變成了"ooooooooo"

發現一個很有創意的小工具網站，如封面圖所示功能很簡單，就是將一個URL地址轉換為都是 ooooooooo 的樣子，通過轉換後的地址訪問可以轉換回到原始地址，簡單流程如下圖所示。轉換的邏輯有點像短鏈平台一樣，只不過這個是將你的URL地址變的很長長長長，但是看着都是 ooooooooo，很好奇是如何實現的，所以查閲了源碼，本文解讀其核心實現邏輯，很有趣且巧妙的實現了這個功能。 前置知識點 在正式開

程序員 , 前端 , Javascript , url

收藏 評論

ning_643b67be37ac3 頭像

麒寧 - 3分鐘搞定：Flex 佈局

flex 佈局原理 全稱 flexible box，彈性佈局。 如何開啓：為元素添加 display: flex。 開啓 flex 佈局的元素，稱為 flex 容器（flex container），其子元素成為容器成員，稱為 flex 項目。 flex 佈局原理：通過給父盒子添加 display: flex，來控制盒子的位置和排列方式。 flex 佈局父盒子常見屬性 flex-direction

flex , typescript , 前端 , Javascript

收藏 評論