tag 前端

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

@前端 / 博客 RSS 訂閱

kuandong 頭像

款冬 - 前端ui自動化測試sdk封裝

背景 前端業務場景中每次功能發佈都會面臨着相應的ui功能測試，因為前端業務的功能迭代之間往往存在顯性或者隱性的關聯性，每次上線某個功能迭代後，嚴格意義上也需要對整體功能進行迴歸，因此單靠人力的手工測試需要花費較多的時間和精力在功能迴歸上，且容易漏掉一些細節問題。 基於業務中的上述現狀，我們嘗試引入ui自動化測試來解決測試中的“重複迴歸”問題，基於 puppeteer 和 jest 兩大開源工

puppeteer , 自動化測試 , 前端

收藏 評論

dirackeeko 頭像

DiracKeeko - [highcharts] 06_legend排序

當使用highcharts創建一個橫向放置的堆疊列的colunm圖時，highcharts繪圖實例默認是從右到左堆疊(即series中index=0的在最右邊，index=1的放在index=0的左邊)，如下圖所示，圖例legend的順序與預期順序相同，而圖中的column item順序與預期相反。(legend 1 2 3, column item 3 2 1) 想要達成同序，需要用到s

highcharts , 可視化 , 前端

收藏 評論

devui 頭像

DevUI團隊 - Angular依賴注入模式的應用和玩法案例

1 注入，一種組件樹狀層級通信模式 設計模式 1.1 組件通信模式 在Angular工程開發中，通常我們使用Input屬性綁定和Output事件綁定進行組件通信，然而Input和Output卻只能在父子組件中傳遞信息。組件根據調用關係形成一棵組件樹，如果只有屬性綁定和事件綁定，那麼兩個非直接關係組件要通信，需要通過各個連接點本身，中間人需要不斷處理和傳遞一些它本身不需要知道的信息（如圖1左）。

angular , devui , 依賴注入 , 設計模式 , 前端

收藏 評論

jump_and_jump 頭像

jump__jump - 妙用 localeCompare 獲取漢字拼音首字母

在前端開發中，開發者通常會使用 localeCompare 來進行中文字符的排序比較。但 localeCompare 還有一種較為少見的應用場景 —— 通過獲取中文字符的拼音首字母來實現檢索功能。本文將詳細介紹這一實用技巧及其應用。 原理 localeCompare 方法允許字符串按特定語言環境的排序規則進行比較。在中文環境下，它會默認按照漢字的拼音順序進行排序。基於這一特性： 準備一組具有代

搜索 , 漢字轉拼音 , 工具類 , 前端 , Javascript

收藏 評論

dewujishu 頭像

得物技術 - 項目性能優化實踐：深入FMP算法原理探索｜得物技術

一、前 言 最近在項目中遇到了頁面加載速度優化的問題，為了提高秒開率等指標，我決定從eebi報表入手，分析一下當前項目的性能監控體系。 通過查看報表中的cost_time、is_first等字段，我開始瞭解項目的性能數據採集情況。為了更好地理解這些數據的含義，我深入研究了相關SDK的源碼實現。 在分析過程中，我發現採集到的cost_time參數實際上就是FMP（First Meaningful P

算法 , 前端

收藏 評論

kestrel_task 頭像

微芒不朽 - Vue 3 組件開發最佳實踐：可複用組件設計模式

前言 組件化是現代前端開發的核心思想之一，而在 Vue 3 中，藉助 Composition API 和更完善的響應式系統，我們能夠設計出更加靈活、可複用的組件。本文將深入探討 Vue 3 組件開發的最佳實踐，介紹多種可複用組件的設計模式，幫助開發者構建高質量的組件庫。 組件設計基本原則 1. 單一職責原則 每個組件應該只負責一個明確的功能，避免功能過於複雜。 2. 開放封閉原則 組件對擴展開放，

vue.js , 前端 , Javascript

收藏 評論

qaz666 頭像

可不簡單 - vue 甘特圖 vxe-gantt table 連接線的用法教程

vue 甘特圖 vxe-gantt table 連接線的用法教程，通過設置 links 定義連接線,from 對應源任務的行主鍵,tom 對應目標任務的行主鍵 https://gantt.vxeui.com 類型説明 0 FinishToStart 結束後才開始，表示一個任務必須在另一個任務開始之前完成 1 StartToFinish 開始到結束，表示從某個過程的開始到結束的整個過程

前端

收藏 評論

opentiny 頭像

OpenTiny社區 - OpenTiny 前端組件庫正式開源啦！面向未來，為開發者而生

華為開發者大會2023（HDC.Cloud 2023）於7月7日-9日在東莞拉開帷幕,本屆大會以“每一個開發者都了不起”為主題。OpenTiny作為前端企業級組件庫解決方案，在本次大會上正式進行發佈。 ​項目發展歷程：從自研走向開源的 TinyVue 組件庫 OpenTiny 是一套企業級組件庫解決方案，適配 PC 端/移動端等多端，涵蓋 Vue2 / Vue3 / Angular 多

vue.js , cli , 開源 , 前端

收藏 評論

jueqiangqingtongsan 頭像

倔強青銅三 - vscode插件開發中文文檔教程(9)——擴展API之命令篇

vscode插件開發中文文檔教程(9)——擴展API之命令篇 原文鏈接：Commands\ 作者：Microsoft\ 譯者：倔強青銅三 前言 大家好，我是倔強青銅三。是一名熱情的軟件工程師，我熱衷於分享和傳播IT技術，致力於通過我的知識和技能推動技術交流與創新，歡迎關注我，微信公眾號：倔強青銅三。歡迎點贊、收藏、關注，一鍵三連！！！ 擴展API之命令篇 命令在 Visual Stud

vscode插件 , typescript , 前端 , Javascript

收藏 評論

beckyyyy 頭像

beckyyyy - 瀏覽器緩存原理

本文可以配合本人錄製的視頻一起食用 目的 通常説到瀏覽器緩存，大多是和性能優化有關，使用緩存，通常是兩個主要目的，第一是提高訪問速度，第二是減少網絡IO消耗。 當合理配置了緩存，可以得到提升用户體驗、減輕服務器負擔、節省帶寬等效果，這是一種效果顯著的前端性能優化手段。 四個方面 瀏覽器緩存機制涉及四個方面，按照獲取資源時請求的優先級排序如下： Memory Cache Service Wor

瀏覽器 , 瀏覽器緩存 , 前端

收藏 評論

maimengdeliejiu 頭像

maimengdeliejiu - ARM架構

ARM架構廣泛應用於一種嵌入式系統、移動設備及高性能計算領域的精簡指令集計算機（RISC）架構，由英國Acorn計算機公司於1983年首次研發，後經ARM控股公司持續優化，現已發展為全球主流處理器架構之一。其核心設計理念圍繞“高效能、低功耗”展開，通過精簡指令集、模塊化架構及先進的功耗管理技術，在移動終端、物聯網設備、服務器等場景中佔據主導地位。 從指令集設計來看，ARM架構遵循RISC原則

前端

收藏 評論

lirong_60404fde6d52d 頭像

李不要熬夜 - 移動端rem 適配方案

rem是什麼？ rem（font size of the root element）是指相對於根元素的字體大小的單位。簡單的説它就是一個相對單位。看到rem大家一定會想起em單位，em（font size of the element）是指相對於父元素的字體大小的單位。它們之間其實很相似，只不過一個計算的規則是依賴根元素(rem)一個是依賴父元素計算(em)。 個人理解rem佈局可分為倆

rem響應式 , 程序員 , rem , 前端

收藏 評論

htdaydayup_5da2d7a6d4888 頭像

圖撲軟件 - 圖撲軟件 3D 場景預加載應用實現

預加載是在進入正式場景之前提前加載所需模型、材質、圖片等資源的技術手段，其核心價值在於消除資源加載等待，確保場景首次渲染即可完整呈現，從而提供無縫、流暢的用户體驗。在複雜的Web 3D可視化應用中，資源預加載尤為重要，可有效解決首次加載時的卡頓、白屏及交互延遲等問題。 預加載實現方案 基礎實現原理 HT for Web中所有資源的請求都會經過ht.Default.convertURL方法，該方法

webgl , 可視化 , 前端 , Javascript

收藏 評論

zhengdh 頭像

歐西里斯的天秤 - Cloudtop 開源前端性能監控系統設計與開發二（日誌數據字段設計）

本文主要描述 Cloudtop 前端性能監控日誌字段的含義，用於檢索和排查問題。 代碼完全開源，支持二次開發；如有錯漏，歡迎指出。 Github 開源項目地址： https://github.com/zhedh/cloudtop 公共字段 字段 類型 示例 説明 pid string cloudtop_admin 應用

elasticsearch , node.js , pm2 , typescript , 前端

收藏 評論

xixindehongjiu 頭像

細心的紅酒 - 運維人的福音：國密IP證書如何簡化內網安全管理

傳統內網安全管理常面臨證書管理繁雜、策略配置複雜、設備兼容性差等痛點，運維團隊往往需要投入大量精力進行手動配置和日常維護。國密IP證書的引入，從多個維度重新定義了內網安全管理的效率與體驗。 一、證書管理的自動化革命 全生命週期自動管理 國密IP證書支持從申請、簽發、部署到續期、吊銷的全流程自動化。運維人員無需再手動跟蹤每張證書的有效期，系統可自動提前續期，徹底避免因證書過期導致的業務中斷。

後端 , 前端

收藏 評論

lihaixing 頭像

lihaixing - ArrayBuffer 二進制數據

在 Web 開發中，當我們處理文件時（創建，上傳，下載），經常會遇到二進制數據。另一個典型的應用場景是圖像處理。 與其他語言相比，JavaScript 中的二進制數據是以非標準方式實現的。 1. 創建二進制數據 基本的二進制對象是 ArrayBuffer —— 對固定長度的連續內存空間的引用。 let buffer = new ArrayBuffer(16); // 創建一個長度為 16 的 bu

二進制 , arraybuffer , 前端 , Javascript

收藏 評論

opentiny 頭像

OpenTiny社區 - Vue Vine：帶給你全新的 Vue 書寫體驗！

本文由體驗技術團隊Kagol原創。 上個月和TinyVue的小夥伴們一起參加了 VueConf 24 大會，有幸認識沈青川大佬，並瞭解了他的Vue Vine項目，Vue Vine 讓你可以在一個文件中通過函數方式定義多個 Vue 組件，同時可以使用所有 Vue 的模板特性。 聽起來是不是很酷！ 之前我寫過 SFC，也寫過 JSX 的 Vue 組件，兩者各有缺點。 SFC 顧名思義單文件組件，只

vue.js , 組件庫 , 前端

收藏 評論

barry_5a71d0d9f06db 頭像

barry - input上傳照片旋轉解決辦法

需求很簡單：h5拍照上傳照片，然後顯示出來 問題在：上傳之後的圖片在PC，IOS端均能正常顯示，Android端顯示的則是被旋轉90度的。 直接上代碼 下面這個方法傳入file對象，然後會去除掉照片中的exIf信息，之後返回。用這個方法，就可以保證PC，IOS,Android端都顯示正常的圖片。 function removePicExif(file) { ret

input , 前端 , html5 , Javascript

收藏 評論

u_16213597 頭像

mob64ca13fba42b - 第十二講：使用Echarts實現數據的可視化-前端ajax動態數據-後端C#MVC - 劉日輝的個人空間 -

前端可視化家庭賬單：用 ECharts 實現支出統計與趨勢分析 在家庭財務管理中，直觀地看懂錢花到了哪裏、花得是否穩定，是提高消費意識與優化預算的關鍵。本文以 ECharts 為核心，構建一個可視化的家庭賬單分析：包括支出分類統計、月度趨勢分析、交互篩選與性能優化建議，幫助你在瀏覽器端快速落地一個實用的可視化面板。 適用場景

折線圖 , echarts , jquery , 前端開發 , HTML , 前端 , Javascript

收藏 評論

junxiudetuoba 頭像

伊伊DK - Uniapp＋Php三角洲護航代練系統小程序，代練工作室接單系統，支持三端（小程序/app/h5）

這套系統聚焦 代練工作室批量接單、團隊協作、高效管理 核心需求，整合 “訂單匹配、多賬號託管、進度自動同步、團隊分賬” 四大核心功能，適配微信小程序 + H5 雙端，技術棧選用 UniApp（前端）+ Node.js/Express（後端）+ MySQL（數據庫）+ Redis（緩存），兼顧輕量化部署與高併發支撐，以下是完整可落地的源碼方案（含數據庫設計、核心模塊代碼、部署教程）。

php , 前端

收藏 評論

kestrel_task 頭像

微芒不朽 - 如何實現流式輸出？一篇文章手把手教你

在現代Web應用中，流式輸出（Streaming Output）是一種非常重要的技術，它能夠實現實時數據傳輸和漸進式渲染，為用户提供更好的交互體驗。本文將詳細介紹流式輸出的原理和多種實現方式。 什麼是流式輸出？ 流式輸出是指數據不是一次性返回給客户端，而是分批次、連續地發送給客户端。這種方式特別適用於： 實時聊天應用 大文件下載 AI生成內容展示 日誌實時監控 數據報表逐步加載 流

前端 , Javascript

收藏 評論

smileZAZ 頭像

林恆 - 使用自定義API接入OpenAI CodeX配置教程

🧑‍💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 Codex 是OpenAI 推出的一系列人工智能編碼工具，通過將任務委託給強大的雲端和本地編碼代理，幫助開發人員提升工作效率。支持原生終端、vscode插件、cursor插件等場景使用。 官網網站openai.com/codex/ 系統要求 步驟一：安裝Codex CLI 選擇一種安裝方式即可。 npm（通用） npm i

前端

收藏 評論

u_16099263 頭像

IT狼人9號 - DEM導出三維模型

一、內嵌ORM框架 概念：對象關係映射，即通過創建模型類，對象與數據庫的映射、關聯。 例如：要創建個模型類映射數據庫圖書表 二、模型類生成表 1）生成遷移文件 命令：python manage.py makemigrations 2）執行遷移生成

機器學習 , 數據 , 人工智能 , sqlite , DEM導出三維模型 , 前端 , Python

收藏 評論

smallsoho 頭像

smallsohosolo - 2024年到了，如何在Mac上優雅的使用nvm管理Node.js

Node.js作為前端的基礎能力已經不僅僅是一個“JS Server Runtime”了，大量的工具庫，本地包管理，Mock環境等，都基於Node.js構建了出來，已經名副其實的成為了前端界的基礎設施。 繁榮的生態讓大家在構建前端項目的時候不得不安裝Node.js。但是歷史悠久的產品總會有版本問題，有的需要新的版本，有的需要之前的版本，多版本的Node.js一直是困擾每一個人的問題。 目前開源產品

node.js , nvm , typescript , 前端 , Javascript

收藏 評論