收藏 / 列表

hui_61e3b3803b922 頭像

xachary - 基於 CSS Grid 的簡易拖拉拽 Vue3 組件，從代碼到NPM發佈（2）- NPM發佈、在線示例

這裏分享一下本開源項目是如何構建組件庫及其如何發佈到NPM上的，還有組件庫與在線示例的構建有什麼差異。 請大家動動小手，給我一個免費的 Star 吧~ 大家如果發現了 Bug，歡迎來提 Issue 喲~ github源碼 NPM 示例地址 文檔 版本更新信息 拖動 調整大小 拖入 嵌套 有限的嵌套 關於構建 與構建有關的文件，主要有： └─ dist - 構建的組件

組件庫 , vue3 , 拖拽 , typescript , 前端

lihaixing 頭像

lihaixing - ArrayBuffer 二進制數據

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

二進制 , arraybuffer , 前端 , Javascript

wanzuqiudeshangba 頭像

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

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

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

fengliudeshanghen 頭像

風流倜儻的傷痕 - Nuxt.js 應用中的 webpack：change 事件鈎子

title: Nuxt.js 應用中的 webpack：change 事件鈎子 date: 2024/11/24 updated: 2024/11/24 author: cmdragon excerpt: 通過webpack:change鈎子，開發者可以知道哪些文件被修改，並可以進行適當的處理，比如重新加載相關模塊，或更新用户界面等。 categories: 前端開

safari , angular , webkit , typescript , 前端

laughingzhu 頭像

LaughingZhu - DevNow: 一個好的開源博客是什麼樣子的？

1. 前言 為什麼會想着來做這樣一個開源博客項目呢？ 原因為總結了幾點： 作為程序員，怎麼能沒有自己的博客呢。 用來沉澱自己的一些學習內容和記錄一些技術文章。 促進自己持續輸出一些內容，來提高語言表達能力。 個人屬性吧，覺得有一個屬於自己的平台，那真是，泰褲辣。 其實陸陸續續寫過很多個blog，去年基於 Nextjs 重構了一次 blog，大概是長這樣，是參考一個博客的模版寫的，當時覺

astro , blog , 前端

sihaihande 頭像

漢得數字平台 - 告別集成煩惱！H-ZERO iframe 支持第三方系統 / AI 助手輕鬆接入

一、引言 在企業數字化進程中，“系統集成” 常常是繞不開的難題 —— 想在核心平台嵌入第三方工具，卻被跨應用交互卡殼；想給現有系統快速添加 AI 助手，開發成本又高。這些痛點不僅拖慢業務效率，更讓數字化升級 “卡脖子”。 而 H-ZERO 的 iframe 集成能力，正是為解決這些問題而來。無論是將第三方系統無縫融入自身平台，還是幫第三方系統快速接入 AI 助手，它都能以輕量化方式突破壁壘，讓集

iframe , 前端

yourena_c 頭像

友人A - threejs接入gis地圖

把 TIF 解析成可用紋理（如 PNG/JPEG 或直接用 TIF）。 把它當作材質貼到一個 PlaneGeometry 上。 按照它對應的座標範圍換算成 Three.js 世界座標。 把 Plane 放置在對應位置。 !DOCTYPE html html head meta charset="UTF-8" titleThree.js Scene/title style

three.js

yinguangyao 頭像

尹光耀 - underscore debounce函數分析

underscore debounce函數分析 標籤（空格分隔）： underscore 本文是underscore源碼剖析系列第六篇文章，上節我們介紹了throttle節流函數的實現，這節將會介紹一下節流函數的兄弟 —— debounce防抖動函數。 throttle函數是在高頻率觸發的情況下，為了防止函數的頻繁調用，將其限制在一段時間內只會調用一次。而debounce函數則是在頻繁觸發

underscore , HTML , 前端 , Javascript

xingfudenaozhong 頭像

幸福的鬧鐘 - AJAX是如何憑一己之力提高前端程序員的工資水平的？

作者：阿達西 鏈接：juejin.cn/post/7395396352183009290 emmm，今天無意間聽到一個比較奇怪的信息，就是在很早之前，前端工程師只是一個切圖崽，而且工資也不是很高。説白了，就是沒含金量的工作。因為那時候的Web應用相對簡單，主要關注於頁面的靜態內容和基本的交互。所以前端開發的工作主要集中在HTML、CSS和基礎的JavaScript上。 但是自從AJAX出現後

Ajax , 程序員 , 前端

daishuyunshuzhanqianduan 頭像

袋鼠雲數棧UED - redux vs redux-toolkit 及源碼實現

我們是袋鼠雲數棧 UED 團隊，致力於打造優秀的一站式數據中台產品。我們始終保持工匠精神，探索前端道路，為社區積累並傳播經驗價值。 本文作者：霜序 前言 為何講這個內容？以為後續大家會使用 redux-toolkit，資產上週做了 redux-toolkit 的升級順便了解了相關內容，產出了這篇文章。 另外補齊一下在 React 數據流這個知識板塊的完整性。 React 中的數據流管理

react , redux-toolkit , redux , 前端

jsliang 頭像

jsliang - 前端都在聊什麼 - 第 2 期

Hello 小夥伴們早上、中午、下午、晚上、深夜好，我是愛折騰的 jsliang~ 「前端都在聊什麼」是 jsliang 日常寫文章/做視頻/玩直播過程中，小夥伴們的提問以及我的解疑整理。 視頻同步：https://www.bilibili.com/vide... 本期對應 2023 年的 01.16-01.31 這個時間段。 本期針對「規劃」「工作」「學習」「閒談」這 4 個板塊進行了討論

求職 , 前端工程師 , 前端

linong 頭像

linong - 前端培訓-中級階段（21）- xhr2、FormData（2019-10-17期）

前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本着提升技術水平，打牢基礎知識的中心思想，我們開課啦（每週四）。 AJAX 我們肯定不陌生，低版本IE使用new ActiveXObject("Microsoft.XMLHTTP")，其他瀏覽器使用new XMLHttpReq

formdata , xmlhttprequest , Ajax , 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 - angularjs 學習筆記

angularjs官網 Awesome AngularJS angularjs菜鳥學院 angular 中文網 angular新手經常會碰到的坑 angularjs核心功能介紹 所有的東西都是綁在module上面的 angular .module('app', []) // module .factory() //

angularjs , 前端

zxl20070701 頭像

zxl20070701 - TypeScript系列：【4】接口

接口就是定義一個類型，比如一個json數據或一個函數等，描述其具體的結構就可以使用接口來規範。 基礎説明 先來看個例子： interface MyDataType { name: string, age: number } 我們定義了一個json的數據格式，可以且只可以包含值是字符串的name屬性和值是數字的age屬性，下面是一個正確的例子： let myData: MyDataT

ecmascript-6 , interface , class , typescript

nulidexiaocongmang 頭像

MangoGoing - 探究幾種CSS視差動畫實現方案及原理

滾動視差 介紹 視差滾動（Parallax Scrolling）是指多層背景以不同的速度移動，形成立體的運動效果，帶來非常出色的視覺體驗。 實現原理 方式一： 利用 background-attachment 屬性，我們可以把網頁解刨成：背景層、內容層、懸浮層 background-attachment 的作用是設置背景圖像隨着頁面滾動的時候固定，即使一個元素有滾動機制，背景也不會隨着元素

parallax-animation , css3動畫 , 前端

wupeng_5a4de5c290b9d 頭像

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

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

chrome-devtools , 前端

skychx 頭像

鹵代烴 - 🔬 一文搞懂前端兼容問題

如果你喜歡我的文章，希望點贊👍 收藏 📁 評論 💬 三連支持一下，謝謝你，這對我真的很重要！ 對於大部分開發者來説，版本兼容是一件存在感很低的事情，因為它在絕大部分情況下都是一行配置，在一些前端工具鏈（例如 Babel、CoreJS，Autoprefixer 等工具）的幫助下適配到目標瀏覽器，只會在一些大的 break change 事件（例如 Vue3 必須在支持 Proxy 的現代瀏覽

瀏覽器兼容性 , webpack , babel , 兼容性問題 , 前端

qifengliao_5e7f5b20ee3bd 頭像

起風了 - Mac使用Charles成功代理連接手機進行抓包！！！

操作指南 操作環境： 電腦系統：Mac OS 手機系統：iOS 12及以上/Android Charles版本：V4.5.6 第一步：安裝Charles證書到Mac 1、啓動Charles，選擇Help--SSL Proxying→Install Charles Root Certificate 2、此時會啓動“鑰匙串訪問”APP，並找到剛開安裝好的證書，證書名字：Charles

charles , 前端

limingcan562 頭像

limingcan - 帶着這種思想，我快速高效的學會了webpack“開發環境配置”

前言 我們在使用webpack時，經常會看到類似以下結構： build ├── webpack.common.js └── webpack.dev.js └── webpack.prod.js 很多時候，webpack的配置我們基本複製粘貼過來的，沒有想過為什麼我們要把配置文件拆解成這麼多。因此，當我們自己去學習配置webpack時，我們經常會出現以下等問題： 開發環境構建速度慢 打包後頁面

構建工具 , webpack5 , 架構 , webpack , 前端

yangyaya 頭像

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

前言 不論是寒冬還是暖冬，找工作之前都需要做好充足的準備，面試的時候才能做到遊刃有餘。此文是把我最近找工作準備的以及筆試面試中涉及到的手寫題做一個總結。給自己，也給需要的同學。 CSS是前端必須要掌握的技能之一。一般面試也都會從CSS開始。所以CSS問題答的好壞會直接影響你在面試官心中的形象。 本文主要介紹面試中常會遇到的CSS問題及給出建議性的答案。 往期 “寒冬”三年經驗前端面試總結（含

面試 , 筆試 , Css , 前端 , Javascript

huobaodejianpan 頭像

火爆的鍵盤 - 理解 gRPC 和 REST 的概念

gRPC, 由 Google 推出的開源遠程過程調用（RPC）框架, 使兩個應用程序間的方法調用變得簡單，支持結構化數據的交換。通過採用 Protocol Buffers (Protobuf) ——一種與語言無關的接口定義語言，gRPC 體現了許多現代網絡通信技術的優勢，如： 使用二進制格式傳輸數據。 實現多路複用，提高併發能力。 支持服務器端的數據推送功能。 進行數據頭壓縮以減少傳輸成

rest , grpc , API , 後端

webinfoq 頭像

破曉L - HTTP 緩存最佳實踐和 max-age 帶來的陷阱

正確使用緩存可以帶來巨大的性能優勢，節省寬帶，並降低服務器成本，但許多網站並不重視緩存，造成競爭條件，導致相互依賴的資源不同步。 絕大多數最佳實踐緩存屬於以下兩種模式之一： 模式一：不可變（immutable）內容 + 長 max-age 模式二：可變（mutable）內容，始終由服務器驗證 模式一：不可變內容 + 長 max-age Cache-Control：max-age=31536

http緩存 , Css , 瀏覽器緩存 , 前端 , Javascript