收藏 / 列表

addy-osmani 頭像

Addy Osmani - Using Modern Image Formats: AVIF And WebP

We’ve recently published Addy’s Image Optimization book with everything you need to know about images, how to compress, serve and maintain images. Now, shipping with a hand-written personal messa

performance , Images , optimization , Browsers , Smashing Books

hello888 頭像

洛陽醉長安行 - 【從實戰帶你認識gulp】打包前端項目並實現防緩存

gulp是什麼？ 一個基於node的前端自動化任務構建工具，使用經典回調+鏈式調用的方式實現任務的自動化 (src.pipe(...).pipe)，gulp其實和webpack很相似，但是gulp側重點不同，gulp更側重前端流程自動化、任務執行（通過任務使開發提效），就像一條流水線。而webpack則是更側重用於打包前端資源，一切皆可打包成模塊。 官方文檔：https://www.gulp

gulp , 前端 , Javascript

yinguangyao 頭像

尹光耀 - underscore debounce函數分析

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

underscore , HTML , 前端 , Javascript

chencaize 頭像

點墨 - React 中使用 ECharts 報錯 "series not exists"

問題現象 在 React 項目中使用 ECharts 時，控制枱報錯： series not exists. Legend data should be same with series name or data name 但已確認 legend.data 與 series.name 完全匹配，代碼邏輯看似正確。 問題根源 未正確註冊 ECharts 圖表組件。自 ECharts 5 起，官方採

react , echarts , Javascript

willemwei 頭像

WillemWei - 函數柯里化的理解和實現

什麼是柯里化？ 在計算機科學中，柯里化（英語：Currying），又譯為卡瑞化或加里化，是把接受多個參數的函數變換成接受一個單一參數（最初函數的第一個參數）的函數，並且返回接受餘下的參數而且返回結果的新函數的技術。 以上是維基百科對於柯里化給出的定義，總結一下： 輸入是一個函數，並且這個函數擁有n個參數 輸出也是一個函數，並且可以使用fn()()()這種方式調用 參數被柯里化過程中的函數被

currying , Javascript

u_13934709 頭像

雲中小生 - 從零開始：構建你的第一個 Blazor WebAssembly 應用

第一章 Blazor WebAssembly 基礎入門 1. Blazor WebAssembly 簡介 什麼是 Blazor 和 WebAssembly 📚 Blazor是一個由微軟推出的開源 Web 框架，其核心優勢在於允許開發者使用 C# 和 .NET 技術棧來構建豐富的交互式 Web 用户界面（UI），而無需過多依賴 Java

redis , wasm , .netcore , Blazor , 教程 , 數據庫 , c

amejimaobari-ollornwi 頭像

Amejimaobari Ollornwi - Handling JavaScript Event Listeners With Parameters

JavaScript event listeners are very important, as they exist in almost every web application that requires interactivity. As common as they are, it is also essential for them to be managed properly.

Techniques , coding , Javascript

linx 頭像

前端路引 - Web前端入門第 88 問：引入 JavaScript 的 script 標籤究竟有多少用法？

HTML 版本不停的更新迭代，也導致瀏覽器支持的寫法眼花繚亂，就拿 script 標籤來説，剛剛入行的那會兒就只知道用來寫內聯的 js 代碼，後來又學到了引入 js 文件，ES 模塊規範化之後又知道能用來引入模塊化的 js 代碼，可這就是它的全部了嗎？？ 然而...並不是！！！ 各種用法 看看 script 千奇百怪的用法，一定有你沒見過的~~ 1、內聯腳本 如文章開頭説的一樣，直接用來寫內聯腳本

前端 , Javascript

hsr2022 頭像

後山人 - 為什麼 PHP 依然有如此龐大的用户羣？——技術選擇背後的商業邏輯與進化

為什麼 PHP 依然有如此龐大的用户羣？——技術選擇背後的商業邏輯與進化 摘要 儘管每年都有“PHP 已死”的論調出現，但數據顯示，PHP 依然是互聯網上使用最廣泛的服務器端編程語言之一。根據 W3Techs 的統計，截至 2024 年，超過 75% 的網站在使用 PHP [1]。 PHP 的持續流行並非偶然，它是技術進化、商業成本、成熟生態和開發效率共同作用的結果。本文將從四個核心維度，結合 鋭

vue.js , php , Javascript

kestrel_task 頭像

微芒不朽 - Vue3開發技巧：使用jsx快速開發組件

創建項目 pnpm create vite 直接使用模板創建 pnpm create vite my-vue-app --template vue 安裝 JSX 支持依賴 cd my-vue-app npm install @vitejs/plugin-vue-jsx -D 配置 vite.config.js import { defineConfig } from 'vite' import v

vite , jsx , vue3 , 前端 , Javascript

apifox 頭像

Apifox - 掌握 Vue3 中的 setup 函數

Vue.js 經歷了從 Vue 2 到 Vue 3 的重大變革，帶來了許多引人注目的新特性和性能優化。其中，setup函數無疑是最引人矚目的新星之一。 一、概覽 setup函數是 Vue 3 引入的一個新的組件選項，作為組合式 API 中心，它允許開發者在一個空間內使用所有的 composition API。這個函數將在組件創建之前執行，這樣就為你提供了定義響應式變量、計算屬性、函數等的機會，從而

vue.js , 前端工程師 , vue3 , 程序員 , 前端

yinzhixiaxue 頭像

銀之夏雪 - js繼承您瞭解多少呢

實現繼承的方式有很多，下面我們來寫常用的幾種（包括但不限於原型鏈繼承、構造函數繼承、組合繼承、寄生組合繼承、ES6繼承）： 原型鏈繼承 原型鏈繼承通過修改子類的原型為父類的實例，從而實現子類可以訪問到父類構造函數以及原型上的屬性或者方法。 // 原型鏈繼承 function Parent () { this.name = 'kobe' } Parent.prototype.getName

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

aqiongbei 頭像

aqiongbei - 手動點擊與代碼中調用click方法兩者的區別

問題描述 在看事件循環相關視頻的時候發現其中有一個例子不理解，查了資料才明白其中的緣由，遂以志之。問題是這樣的： button id="button"button/button button.addEventListener("click", () = { Promise.resolve().then(() = console.log("Microtask 1")); consol

eventloop , 事件循環 , 同步 , 前端 , Javascript

jianer 頭像

健兒 - 徹底搞懂--水平垂直居中

水平垂直居中是面試常考的環節 今天就一步一步分析下是怎麼做到的，以前呢多少有點死記硬背的感覺，沒真正去梳理過。 先看看整個實現的流程圖片吧。 1、當left：50%如圖1 2、當top:50% 如圖2 3、要想呈現如圖3的情況，有兩種實現方案 （1）方案1 在已知目標對象寬高的情況下，可以通過設置margin-left:-寬/2 margin-top:-

transform , Css , 前端 , html5

u_16213608 頭像

mob64ca13fe62db - （轉載）Spring異常處理@ExceptionHandler

@ExceptionHandler原理淺析 初始化 初始化 ExceptionHandlerExceptionResolver#exceptionHandlerAdviceCache 初始化方法：initExceptionHandlerAdviceCache() public static ListControllerAdviceBe

oracle , 優先級 , 初始化 , 數據庫 , JAVA

Itstars 頭像

新茶十九 - 高德地圖在 Web 端的兩大核心渲染技術：WebGL 和 Canvas

高德地圖在 Web 端的兩大核心渲染技術：WebGL 和 Canvas。 這是一個關於底層渲染引擎的選擇，直接影響地圖的性能、效果和兼容性。簡單來説，這是一個 “增強模式” vs “兼容模式” 的關係。 🆚 核心區別對比 特性 WebGL 渲染 (高級模式) Canvas 2D 渲染 (兼容模式)

vue.js , API , 3d , webgl , 前端開發

zack-grossbart 頭像

Zack Grossbart - Writing Unit Tests For WordPress Plugins

My first goal for the WordPress Editorial Calendar was to make it do anything useful. I was new to JavaScript and PHP and didn’t really know what I could pull off. In a few days I had a proof of con

wordpress , coding , Techniques (WP) , plugins , Javascript

momeak9 頭像

泯瀧 - 「譯」2024 年的 5 個 JavaScript 安全最佳實踐

鏈接：https://thenewstack.io/5-javascript-security-best-practices-f... 作者：Alexander T. Williams 原標題：5 JavaScript Security Best Practices for 2024 網絡安全已成為一個瞬息萬變的戰場，JavaScript 應用程序的安全性也不例外。Web 應用程序已成為

chrome , webkit , typescript , 前端 , Javascript

zisrfs 頭像

zsirfs - 深入一點 - 使用bind的時候發生了什麼呢？

從規範來看，Function.prototype.bind 是如何工作，以及如何來模擬bind操作。 簡單示例 如下簡單示例，普通對象 testObj 內部有一個b函數，接受一個普通參數，若參數為空則輸出 this.a。 const testObj = { a: 3, b: function(args) { console.log(args || this.a); }, };

javascript原型 , javascript專題系列 , Javascript

webinfoq 頭像

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

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

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

evilboy 頭像

瘋狂的技術宅 - 深入理解 JavaScript 回調函數

作者：Nilesh Sanyal 翻譯：瘋狂的技術宅 原文：https://dzone.com/articles/ja... 未經允許嚴禁轉載 JavaScript回調函數是成為一名成功的 JavaScript 開發人員必須要了解的一個重要概念。但是我相信，在閲讀本文之後，你將能夠克服以前使用回調方法遇到的所有障礙。 在開始之前，首先要確保我們對函數的理解是紮實的。 快速回顧：Java

回調函數 , callback , Javascript

huashenjianlingshouhuni 頭像

zhanle_huang - 一張base64圖片格式的圖片，將其轉化成blob然後上傳到服務器

一張base64圖片格式的圖片，將其轉化成blob然後上傳到服務器 需求描述 一張base64圖片格式的圖片，將其轉化成blob然後上傳到服務器，後台跟接收表單文件上傳一樣的方式去處理改圖片 實現 // url 表示base64的字符串， name表示文件名，附加到blob上的那麼、上 uploadFile(url, name) { // 以逗號劃分類型和內容

base64 , blob , HTML , 前端 , Javascript

xiaoxxuejishu 頭像

小X學技術 - Y 分鐘速成 XML

源代碼下載： learnxml-cn.xml XML 是一種標記語言，被設計用來存儲數據和傳輸數據。 不像 HTML , XML 不指定怎樣顯示或格式化數據，只是攜帶它。 XML 語法 !-- XML中的註解像這樣 -- ?xml version="1.0" encoding="UTF-8"? bookstore book category="COOKING" title la

數據 , 樹形結構 , xml , 語法

jamesfancy 頭像

邊城 - esbuild 構建油猴腳本

前段時間思否十週年，搞了個問答打卡活動。參與打卡活動的人需要在回答問題的結尾加一個“小尾巴”。加小尾巴本身並不難，但是由於官方沒有提供快捷方式，每次都需要自己從某個地方拷貝過去，稍嫌繁瑣。正好前不久剛裝了油猴插件，就想：自己給編輯器注入一個按鈕用來添加小尾巴如何？ 在使用油猴之前，使用過一個叫“User JavaScript and CSS”的插件，可以對特定的網頁注入腳本和樣式。不過這個插件在

插件 , esbuild , plugin , 油猴腳本 , Javascript