收藏 / 列表

hui_61e3b3803b922 頭像

xachary - 手把手實現一個圖片可縮放可拖拽的 Vue3 組件

在工作中經常遇到需要預覽一張尺寸可能非常大的圖片，初始化顯示的時候，希望它自適應顯示區域後，還可以縮放並可以在顯示區域中拖拽。 在這裏，手把手展示一下如何實現一個簡單的組件，以實現上述的需求。 效果展示 先看看效果 可以直達👇 示例倉庫 | 示例文檔 | 在線示例 別忘了，可以帶話，給我一個 Star 喲！ 實現 Hook 在實現組件之前，可以先實現一個 hook，以包含核心邏輯，後面實現 組

css3 , 組件庫 , vue3

lihaixing 頭像

lihaixing - 詳解函數作用域

一、變量提升 1、變量 var 表示是變量 存在提前申明 同時也會和window存在映射機制(只存在於全局變量和window之間) console.log(a); // undefined 沒報錯，變量提升了 console.log(window.a, 'a' in window) // undefined true var a = 5; console.log(a); // 5 consol

函數 , 作用域 , 前端 , Javascript

wanzuqiudeshangba 頭像

玩足球的傷疤 - ECMAScript 6 (ES6) 中的模塊系統：從 CommonJS 到 ES6 模塊的演變

ECMAScript 6（通常稱為 ES6 或 ECMAScript 2015）是 JavaScript 語言的一個重大更新，帶來了許多新特性，這些特性極大地增強了語言的功能性和可維護性。其中，模塊系統的引入是 ES6 最重要的特性之一，它徹底改變了 JavaScript 的開發模式，從而推動了 JavaScript 在大型應用程序中的使用。 本文將專注於 ES6 模塊系統，討論它的核心概念、與舊

ecmascript-6 , es6module , commonjs , 前端 , Javascript

fengliudeshanghen 頭像

風流倜儻的傷痕 - 如何在API高併發中玩轉資源隔離與限流策略？

url: /posts/4ad4ec1dbd80bcf5670fb397ca7cc68c/ title: 如何在API高併發中玩轉資源隔離與限流策略？ date: 2025-08-27T23:26:45+08:00 lastmod: 2025-08-27T23:26:45+08:00 author: cmdragon summary: 資源隔離是保障API穩定性的核

flask , django , fastapi , 後端 , Python

laughingzhu 頭像

LaughingZhu - DevNow：支持集成 Tina CMS

前言 想了很久是否要集成一個類似 CMS 的管理平台來管理這些文章的內容，終於在這周開始落地了。簡單説一下我為什麼有這個想法的：由於 DevNow 的定位📌是一個開源的博客項目，所以我在努力的跳出我自己的想法，避免因為一些自己想要的一些功能來讓 DevNow 看起來更加的臃腫。集成 Headless CMS 的主要目的是優化現在的工作流，由於我們是基於 Astro 來構建的一個博客項目，所以我們

astro , blog , Markdown

sihaihande 頭像

漢得數字平台 - 探索 H-ZERO 模態框組件：提升用户交互體驗的利器

01 引言 企業系統中，交互設計的優劣直接影響用户的操作體驗和工作效率。模態框作為一種常見的交互組件，在企業系統中扮演着重要的角色。它可以在不跳轉頁面的情況下，讓用户處理事務，避免打斷工作流程，在複雜的企業場景中發揮關鍵作用。 02 功能特點 多樣化的交互體驗 模態框組件支持多種交互方式，默認支持使用Esc 鍵關閉模態框，還能控制雙擊蒙層關閉模態框。此外，模態框可調整大小、拖拽位置，滿足用户在不

交互設計 , 前端框架

yourena_c 頭像

友人A - ubuntu 16.04搭建gitlab

hint: 此次搭建由於沒有root賬户權限，所以最開始準備用在線安裝方式的步驟開始，在安裝gitlab-ce的時候無法換鏡像源，所以gitlab-ce採用了離線下載安裝包的方式，其餘的依賴是在線安裝方式。 最開始傳統步驟👇 sudo apt update sudo apt install curl openssh-server ca-certificates sudo apt inst

ubuntu16.04 , Linux , gitlab , gitlab-ce

yinguangyao 頭像

尹光耀 - underscore源碼剖析之整體架構

underscore源碼分析之整體架構 最近打算好好看看underscore源碼，一個是因為自己確實水平不夠，另一個是underscore源碼比較簡單，比較易讀。 本系列打算對underscore1.8.3中關鍵函數源碼進行分析，希望做到最詳細的源碼分析。 今天是underscore源碼剖析系列第一篇，主要對underscore整體架構和基礎函數進行分析。 基礎模塊 首先，我們先來簡

underscore , 前端 , Javascript

xingfudenaozhong 頭像

幸福的鬧鐘 - 前端程序員應該往全棧方向發展嗎?還是堅守前端?

​作者：寒蟬（知乎） 順便吆喝一聲，技術大廠，內推撈人，前/後端or測試←感興趣 要求學歷：全日制統招本科（非學院派即可）： --加班偶爾較多，但週末加班兩倍工資。 --15-35K，工資在一線城市屬於一般，但二線城市很可以。 前端幹了有四年多了，在我有限的認知內（認知就這麼點，不要槓我，槓就是你對）和能力範圍內所觸及到的崗位種類中，前端這個崗位在我看來是最難堅守的。 大多

人工智能 , 全棧工程師 , 程序員 , 後端 , 前端

daishuyunshuzhanqianduan 頭像

袋鼠雲數棧UED - 你應該瞭解的hooks式接口編程 - useSWR

什麼是 useSWR ? 聽名字我們都知道是一個 React 的 hooks，SWR 是stale-while-revalidate的縮寫, stale 的意思是陳舊的, revalidate 的意思是重新驗證/使重新生效, 合起來的意識可以理解成 在重新驗證的過程中先使用陳舊的，在http 請求中意味着先使用已過期的數據緩存，同時請求新的數據去刷新緩存。 這在 http 請求中Cache-Con

react , hooks , 前端

jsliang 頭像

jsliang - CSS 實例系列 - 01 - Tab 滑動門

Hello 小夥伴們早上、中午、下午、晚上和深夜好，這裏是 jsliang~ 本 CSS 系列文章： 主推學以致用。結合面試題和工作實例，讓小夥伴們深入體驗 61 個工作常見的 CSS 屬性和各種 CSS 知識。 主推純 CSS。儘可能使用 HTML + CSS 完成學習目的，但仍然有 “一小部分” 功能需要用到 JavaScript 知識，適合新人學習 + 大佬複習。 如果文章在一些細節

實例 , Css , css3動畫 , 前端

linong 頭像

linong - 前端培訓-中級階段（22）- localStorage/sessionStorage本地存儲（2019-10-24期）

前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本着提升技術水平，打牢基礎知識的中心思想，我們開課啦（每週四）。 Storage Storage 提供了訪問特定域名下的會話級別或永久級別的存儲功能，例如，可以添加、修改或刪除存儲的數據項。 鍵值對是以字符串的形式存儲。且是同

sessionstorage , localstorage , 前端 , html5 , Javascript

htvlz 頭像

海豚V靚仔 - HTML 顏色

顏色在網頁設計和數字藝術中扮演着至關重要的角色。正如您所提到的，顏色可以通過紅色、綠色和藍色的混合（RGB）來定義，這種混合方式允許我們創建出數百萬種不同的顏色。每種顏色的強度（或稱為亮度）可以從0（最暗，表示為#00）到255（最亮，表示為#FF）變化。 在HTML和CSS中，顏色可以通過十六進制顏色代碼（如#FF0000表示紅色）、RGB函數（如rgb(255, 0, 0)也表示紅色）或者顏色

前端 , html5

aresn 頭像

Aresn - View UI Plus 發佈 1.2.0 版本，新增 Image、Skeleton、Typography 組件

View UI Plus 1.2.0 版本已於 2022-06-13 發佈。 更新日誌 請到官網 www.iviewui.com 查看最新版。 新增排版組件 Typography，內置豐富的內容排版 UI，支持拷貝、可編輯、省略等功能。Typography 共包含 5 個組件： Typography 內容結構 Title 標題 Paragraph 段落 Te

vue.js , vue3 , iview , 前端 , ui

qinyuanqiblog 頭像

qinyuanqiblog - 前端直傳七牛雲 3.0 sdk詳細使用

前言 最近產品大哥説要把電商項目改成支持視頻播放，視頻要在後管項目上可以上傳到七牛雲，100M以上的這種視頻，因為我們nginx限制了只能上傳30m，所以只能採用前端直傳七牛雲的這個方案 項目介紹 這是一個基於若依的前後端不分離的項目，前端代碼卸載jsp裏面，主要是後台大哥在維護，我們需要幫助後台做好前端直傳這個動作。 前端直傳七牛雲 如何註冊賬號，創建空間 一般這一步，不需要我們做，可以做為

七牛雲存儲 , 前端

zxl20070701 頭像

zxl20070701 - TypeScript系列：【3】類

基礎説明 先來看個例子： class Person { name: string; constructor(name: string) { this.name = name; } say() { return "你好，我是" + this.name; } } 這樣，我們就定義了一個類，包含一個屬性用於保存名稱，一個構造器用於創

ecmascript-6 , extend , object , class , typescript

nulidexiaocongmang 頭像

MangoGoing - React Native mac環境下解決iOS 9以上系統對HTTP請求的限制

問題 新搭建的一個項目，在使用fetch進行網絡請求的時候遇到一個報錯： TypeError: Network request failed. 嘗試直接在瀏覽器打開url訪問可以正常拿到返回值。（url是http協議） 原因 這個API請求是http的協議請求，在iOS9以上系統，已經把http協議的請求限制了。 iOS9引入了新特性App Transport Security

react-native , ios9

wupeng_5a4de5c290b9d 頭像

PatWu16 - chrome-devtools-mcp 工具試用記錄

谷歌 Chrome 開發者工具 MCP 服務器公佈，它允許 AI 代理在瀏覽器中直接調試、測試和修復代碼，彌補了以往 AI 編碼工具無法直接觀察代碼在瀏覽器中運行情況的缺陷，更多內容查看官方博客、Github倉庫，其在發佈的短時間內即引起廣泛關注，npm下載量陡升： 調試工具提供的能力： 試用記錄，僅供參考：   

chrome-devtools , 前端

skychx 頭像

鹵代烴 - ⚡️ [性能優化] 瀏覽器是如何用 HTML Preload Scanner 偷偷優化資源下載的

如果你喜歡我的文章，希望點贊👍 收藏 📁 評論 💬 三連支持一下，謝謝你，這對我真的很重要！ 大家好，我是專注於做性能優化的鹵代烴。 做網頁相關的性能優化時，需要對瀏覽器的底層原理有一定的瞭解，這樣才能更好的讓頁面走在 happy path 上。今天我們就瞭解一個很少被人所知的瀏覽器默認性能優化方案 —— HTML Preload Scanner，看看它是如何優化網絡資源加載速度的。 瀏覽器

性能優化 , chrome , 瀏覽器原理 , 前端

qifengliao_5e7f5b20ee3bd 頭像

起風了 - JavaScript函數柯里化

JavaScript函數柯里化 一、定義： 柯里化（Currying）是把接受多個參數的函數變換成接受一個單一參數(最初函數的第一個參數)的函數，並且返回接受餘下的參數且返回結果的新函數的技術。 通過一個簡單的例子解釋一下： function add(a, b) { return a + b } add(1, 2); // 3 將函數add轉化為柯里化函數_add： function _

currying , 前端 , Javascript

limingcan562 頭像

limingcan - JS繼承面試的時候怎麼説？答應我，不要再死記硬背了好嗎？

前言 JS繼承這塊，ES6已經有class很香的語法糖實現了，ES6之前那些實現繼承的方法真的又多又長，説句心裏話，能不學真的不想再學，但是沒辦法，面試還是要搞你呀，所以這兩天看回ES6之前的繼承，發現還是蠻有意思的。寫這篇文章也是對自己的一個梳理總結，也希望能幫助到大家弄懂繼承這塊，這樣就不需要再死記硬背八股文，面試自由發揮就好。 JS的繼承，核心就是靠原型鏈完成。如果大家對原型鏈還不是很

面試 , 繼承 , 原型鏈 , 前端 , Javascript

yangyaya 頭像

陽呀呀 - “寒冬”三年經驗前端面試總結（含頭條、百度、餓了麼、滴滴等）之手寫題（一）

前言 不論是寒冬還是暖冬，找工作之前都需要做好充足的準備，面試的時候才能做到遊刃有餘。此文是把我最近找工作準備的以及筆試面試中涉及到的手寫題做一個總結。給自己，也給需要的同學。 手寫題是比較好準備的一個環節，大部分公司考察的題也就那麼多，大都不會超出範圍。 往期 "寒冬"三年經驗前端面試總結（含頭條、百度、餓了麼、滴滴等） "寒冬"三年經驗前端面試總結（含頭條、百度、餓了麼、滴滴等）

面試 , 筆試 , 前端 , Javascript

huobaodejianpan 頭像

火爆的鍵盤 - 詳解 QUIC 與 TCP 對比：為何 QUIC 更勝一籌？

引言 在過去的三十年裏，HTTP（超文本傳輸協議）一直是互聯網的支柱。我們可以通過 HTTP 瀏覽網頁、下載文件、流式傳輸電影等。這一協議隨着時間的推移已經得到了重大改進。 HTTP 協議是一個應用層協議，它基於 TCP（傳輸控制協議）工作。TCP 協議有若干限制，導致 Web 應用響應較慢。 谷歌開發了一種名為 QUIC 的顛覆性傳輸協議，以克服 TCP 的缺點。QUIC 幾年前被標準化，並加入

quic , tcp , 網絡性能 , 網站開發 , 程序員

webinfoq 頭像

破曉L - 面試小冊：面試官經常問的十個棘手的 JavaScript 問題

1. 可變性 在 JavaScript 中有七種基本數據類型（string、number、boolean、undefined、symbol、bigint 和 null），這些都是不可變的。這意味着一旦分配了一個值，我們就無法修改它們，我們可以做的是將它重新分配給一個不同的值（不同的內存指針）。另一方面，其他數據類型（如 Object 和 Function）是可變的，這意味着我們可以修改同一內存指

原型 , 閉包 , 面試問題 , 前端 , Javascript