@Javascript

Stories List
@refanbanzhang

flex佈局常見問題

flex無法創建滾動條 flex的孫元素使用overflow: auto無法出現滾動條 原因: 子元素沒有設置寬度,這會導致子元素的寬度由孫元素決定,從而子元素被撐大,孫元素無法達到出現滾動條的條件。 解決方案: 給子元素設置寬度,比如width:100%; flex佈局和文字溢出省略遭遇的問題 https://segmentfault.com/a/1190000045

refanbanzhang Avatar

@refanbanzhang

Nickname 熱飯班長

@hightopo

圖撲 HT for Web 輕鬆構建組態拓撲結構

在現代的數據可視化和網絡管理中,拓撲圖是一種非常重要的工具。它可以直觀地展示節點(Node)和節點之間的關係(Edge)。無論是在 2D 還是 3D 環境中,拓撲圖都可以幫助我們更好地理解和管理複雜的系統。 然而,由於這些拓撲圖通常極為複雜,傳統的手動佈局方式不僅繁瑣且耗時。鑑於此,圖撲軟件自研 HT for Web 產品(以下簡稱為 HT)推出了自動佈局、彈力佈局插件,從根本上解決了這一問題。

hightopo Avatar

@hightopo

Nickname hightopo

@soujer

AList嵌入動態驗證碼實現引流

前言 曉傑利用ALists創建了個網盤資源站,想着如何增加個動態驗證碼進行驗證後才能進行訪問下載,剛開始利用了固定的驗證碼,用户可以通過JS代碼中進行繞過或直接拿到驗證碼,經過曉傑多次優化,最終版本支持動態獲取驗證碼,使用了禁止打開控制枱校驗等方式減少繞過幾率,現在分享給大家。 AList介紹 ‌AList是一個支持多種存儲、支持網頁瀏覽和WebDAV的文件列表程序‌,AList的功能包括但不限於

soujer Avatar

@soujer

Nickname Soujer

@icecreamlj

從0到1:React項目中的Webpack配置實戰

公司項目一般都是使用集團封裝好的腳手架,腳手架內部實現咱看不到也摸不着,好不容易組內推行新的UI框架,需要自行定義 webpack 配置,這可是個絕佳的好機會,我對配置過程進行了梳理,把商業項目的成熟配置小跑着送上。 初始化 首先新建一個空文件夾,執行 npm init 初始化生成 package.json 文件。 創建 src 文件夾,項目的業務代碼都放在這裏,再創建 index.js,這是項目

icecreamlj Avatar

@icecreamlj

Nickname 一顆冰淇淋

@minnanitkong

5分鐘內理解 .prototype 鏈 | 2024

CSS技巧與案例詳解 vue2與vue3技巧合集 VueUse源碼解讀 在JavaScript的世界裏,原型(prototype)系統是一個常被討論但不易掌握的概念。作為JavaScript繼承模型的基石,理解原型對於構建大型應用或進行對象操作至關重要。讓我們一起探索這個迷人的話題,揭開原型系統的神秘面紗。 什麼是原型? 在JavaScript中,每個對象都有一個內部屬性[[Proto

minnanitkong Avatar

@minnanitkong

Nickname 王大冶

@renxingdebenma

MySQL常用指令碼

本文精心挑選了一系列MySQL指令碼,助你提升資料庫效率、解決常見問題,讓你的資料儲存體驗更加高效、可靠。 常用功能指令碼 1.匯出整個資料庫 mysqldump - u 使用者名稱- p – default - character - set = latin1 資料庫名匯出的檔名(資料庫預設編碼是latin1) mysqldump - u wcnc - p smgp_apps_wcnc

renxingdebenma Avatar

@renxingdebenma

Nickname renxingdebenma

@aqiongbei

來學一個值錢的知識,Chrome插件如何優雅的捕獲頁面的請求結果

背景 今天在寫一個某網站限流檢測的chrome插件,需要捕獲頁面的某個請求結果。那麼問題就來了,我們該如何捕獲頁面的請求結果呢?我們來捋捋都有哪些方案。 我開發的時候的配置為manifest_version: 3,下文內容也是在這個基礎上展開的。 本文只列舉方案,一些需同步在manifest_version進行配置地方並未提及,請自行配置。 可行的方案 一、chrome.webReques

aqiongbei Avatar

@aqiongbei

Nickname aqiongbei

@icecreamlj

全面掌握 Jest:從零開始的測試指南(下篇)

在上一篇測試指南中,我們介紹了Jest 的背景、如何初始化項目、常用的匹配器語法以及鈎子函數的使用。這一篇篇將繼續深入探討 Jest 的高級特性,包括 Mock 函數、異步請求的處理、Mock 請求的模擬、類的模擬以及定時器的模擬、snapshot 的使用。通過這些技術,我們將能夠更高效地編寫和維護測試用例,尤其是在處理複雜異步邏輯和外部依賴時。 Mock 函數 假設存在一個 runCallBac

icecreamlj Avatar

@icecreamlj

Nickname 一顆冰淇淋

@tanking

jQuery國內大廠CDN加速鏈接

摘要 jQuery 的CDN有很多,但都很不穩定,例如國內的 bootcdn 經常抽風,還有其他的常見的例如 jQuery 官方的 code.jquery.com、jsDeliver、unpkg.com、staticfile,這些都是經常抽風的。導致使用了線上的CDN的頁面打開受到影響,那麼就沒有國內好用的CDN嗎?下面是我彙總的一些大廠的! 大廠jQuery靜態資源CDN 百度 https://

tanking Avatar

@tanking

Nickname TANKING

@nihaojob

使用 fabric.js 開發移動端 H5 圖片編輯器

大家好,我是開源圖片編輯器的 https://github.com/ikuaitu/vue-fabric-editor 的作者,它是一款基於 PC 版本的開源圖片編輯器。 最近很多開發者諮詢,是否可以將開源圖片編輯器改造為一款適用於移動端的 H5 版本圖片編輯器,最近 H5 版本的圖片編輯器剛剛上線,就將實現思路和產品細節整理成筆記分享出來,供大家參考。 基礎 開源的圖片編輯器的基本功能都

nihaojob Avatar

@nihaojob

Nickname 秦少衞

@yangy5hqv

(WEB在線編輯DWG)在線CAD中實現測量圓、測量面積的方法

一、前言 本章將介紹如何利用mxcad插件實現在CAD圖紙中測量圓和測量面積的功能,用户點擊目標圓對象將自動標記出這個圓的半徑、面積值和周長值,同時可以自定義選擇標註文字的位置,測量圓功能能夠快速掌握目標圓對象的數據信息,方便統計工程量。 測量面積功能(多邊形、矩形)以多邊形的每一個頂點來確定多邊形的形狀和位置,通過點擊矩形的量角點來確定矩形的大小和位置,也可以自定義標註文字的位置。 二、測

yangy5hqv Avatar

@yangy5hqv

Nickname 夢想雲圖網頁CAD

@hu_qi

跟魯迅重學 TypeScript | (五)異步處理、axios與封裝axios

“不在沉默中爆發,就在沉默中滅亡”,面對日益嚴峻的國際環境,我們祖國母親沒有繼續沉默,9月25日8時44分,洲際彈道導彈精準發射。,看到這個新聞,腰也不酸了,腿也不疼了,一口上上五樓,TS 學起來更帶勁了~ 異步處理 在 TypeScript 中,異步編程如同現代社會中的種種現象,紛繁複雜,令人眼花繚亂。而 async/await 正如那一柄利劍,能將這混沌的世界理清,使得程序員不至於深陷於回調的

hu_qi Avatar

@hu_qi

Nickname huqi

@vivo_tech

一次基於AST的大規模代碼遷移實踐

作者:來自 vivo 互聯網大前端團隊- Wei Xing 在研發項目過程中,我們經常會遇到技術架構迭代更新的需求,通過技術的迭代更新,讓項目從新的技術特性中受益,但由於很多新的技術迭代版本並不能完全向下兼容,包含了很多非兼容性的改變(Breaking Changes),因此我們需要設計一款工具,幫助我們完成大規模代碼自動遷移問題。本文簡單闡述了基於 AST 的代碼遷移概念和大致流程,並通過代碼案

vivo_tech Avatar

@vivo_tech

Nickname vivo互聯網技術

@minnanitkong

使用 React Query 時還需要 Redux 嗎?| 狀態管理 2024

React Hook 深入淺出 CSS技巧與案例詳解 vue2與vue3技巧合集 VueUse源碼解讀 隨着前端技術的不斷髮展,狀態管理一直是React應用開發中的核心問題。Redux作為長期佔據主導地位的狀態管理庫,為開發者提供了可預測的狀態容器和強大的生態系統。然而,隨着React Query等新興工具的出現,開發者們開始重新思考狀態管理的最佳實踐。本文將深入探討在2024年的前

minnanitkong Avatar

@minnanitkong

Nickname 王大冶

@refanbanzhang

給線條類型的svg圖標加上繪製的動畫效果

效果展示 步驟分解 1 確認svg文件有路徑數據 2 獲取path的長度 3 定義繪製線條的長度 4 定義關鍵幀動畫 5 應用關鍵幀動畫 實操 1 確認svg文件有路徑數據 path標籤裏面的d屬性,就是路徑數據 template svg fill="none" xmlns="http://www.w3.org/2000/svg" width="260" hei

refanbanzhang Avatar

@refanbanzhang

Nickname 熱飯班長

@icecreamlj

前端模塊化進化史:從全局 function 到 ES Modules

目前,前端開發已經離不開由 CommonJS、ES Modules 和 Webpack 構建的模塊化開發環境。無論是 JavaScript、CSS、圖片還是其他資源,都可以作為一個模塊來處理。那麼,模塊化究竟是如何發展到今天的呢? 全局函數模式 最初的前端模塊化嘗試是通過 全局函數來實現的。例如,在一個 util.js 文件中定義了一個變量 count 和一個工具函數 formatNumberWi

icecreamlj Avatar

@icecreamlj

Nickname 一顆冰淇淋

@linong

通過 AST 實現組件庫替換升級

年初接到一個任務將 semi-ui 替換到 antd,但是能人力預算不太夠,所以基於工作量和效率選擇了基於 AST 的替換方案。 項目技術棧是 React + tsx 為什麼要使用 AST? AST(Abstract Syntax Tree,抽象語法樹)是一種在計算機科學中表示源代碼語法結構的樹狀數據結構。 通過 AST,可以理解代碼的結構和含義,實現代碼分析、轉換和操作。 基於 AS

linong Avatar

@linong

Nickname linong