? 寫(xiě)在開(kāi)頭 點(diǎn)贊 + 收藏 學(xué)會(huì) 背景簡(jiǎn)介 在前端項(xiàng)目開(kāi)發(fā)中，我們常常會(huì)遇到這樣一種情況：項(xiàng)目中引入了某個(gè)第三方庫(kù)，但它沒(méi)有提供內(nèi)置的 TypeScript 類(lèi)型聲明。此時(shí)，如果你在 TypeScript 項(xiàng)目中直接使用這個(gè)庫(kù)，編譯器就會(huì)報(bào)錯(cuò)。 也許你很聰明，知道在項(xiàng)目中的sh ...

曾經(jīng)有人說(shuō) JS 語(yǔ)言中萬(wàn)物皆對(duì)象，雖然這種說(shuō)法不一定完全準(zhǔn)確，但也有一定的道理。原因是 JS 的語(yǔ)法看起來(lái)所有的數(shù)據(jù)類(lèi)型都像是一個(gè)對(duì)象，包括原始類(lèi)型。 const a = 1.234; console.log(a.toString()); console.log(a.valueOf()); con ...

本文通過(guò)depth-anything獲取圖片的深度圖，同時(shí)基于pixi.js，通過(guò)著色器編程，實(shí)現(xiàn)了通過(guò)深度圖驅(qū)動(dòng)的偽3D效果。該方案支持鼠標(biāo)/手勢(shì)與手機(jī)陀螺儀雙模式交互，在保證性能的同時(shí)，為不同終端用戶(hù)提供沉浸式的視覺(jué)體驗(yàn)。 ...

本人博客原文 https://www.konoxin.top/posts/82e0e7c7/ 前言 最近想在博客引入waketime的編碼熱力圖，就研究了一下， 效果是這樣的： 首先你已經(jīng)使用過(guò)wakatime， 如果沒(méi)有起前往如下教程， {% link 'WakaTime的使用(vscode,id ...

? 寫(xiě)在開(kāi)頭 點(diǎn)贊 + 收藏 學(xué)會(huì) 寫(xiě)在前面 我最開(kāi)始是用 Angular 去實(shí)現(xiàn)了B站的 Banner ，那時(shí)候還沒(méi)有人做這東西，可以看到下面那一長(zhǎng)串 Bannet 圖片的第一個(gè)圖是好幾年以前的了。然后隨著逐步完善，在這幾年偶爾也看到有人發(fā)過(guò)這東西的實(shí)現(xiàn)方法。 但我為什么要寫(xiě)這 ...

最近一個(gè)項(xiàng)目中，基于vue3開(kāi)發(fā)，想開(kāi)發(fā)一個(gè)在線管理組件庫(kù)的功能，具體業(yè)務(wù)實(shí)現(xiàn)： 1. 在私庫(kù)Nexus上傳組件包； 2. 然后用UNPKG實(shí)現(xiàn)路徑訪問(wèn)在線解壓文件； 3. 解壓文件上傳到gitee組件庫(kù)中查看； 4. 然后通過(guò)頁(yè)面配置填寫(xiě)需要引入的依賴(lài)地址（直接通過(guò)UNPKG讀取包內(nèi)文件內(nèi)容），頁(yè) ...

數(shù)組可以算是程序里面最常用的數(shù)據(jù)結(jié)構(gòu)了，但凡網(wǎng)頁(yè)上任何一個(gè)列表數(shù)據(jù)，基本都是以數(shù)組的形式存在，像表格、banner圖、菜單列表、商品列表，分類(lèi)列表等等，在前端領(lǐng)域都是以數(shù)組處理。 數(shù)組的定義 JS 的數(shù)組花樣很多，不像其他強(qiáng)類(lèi)型語(yǔ)言中的數(shù)組限制頗多。 數(shù)組中的元素 JS 數(shù)組中的元素可以是任何類(lèi)型， ...

條件語(yǔ)句 JS 的條件語(yǔ)句不太多，就 if 和 switch 兩個(gè)，不過(guò)他們的使用方式也可以算是眼花繚亂了。 if 語(yǔ)句 if 字面意思：如果 xxx。程序中的用法也是這樣，如果條件為真，則執(zhí)行執(zhí)行代碼塊，反之則不執(zhí)行。 語(yǔ)法： if (條件) { // 條件為真時(shí)執(zhí)行 } else if (其他條 ...

? 寫(xiě)在開(kāi)頭 點(diǎn)贊 + 收藏 學(xué)會(huì) 解構(gòu)賦值是 JavaScript 中最受歡迎的特性之一，它讓數(shù)據(jù)提取變得簡(jiǎn)潔優(yōu)雅。但看似簡(jiǎn)單的語(yǔ)法糖下，隱藏著十個(gè)高頻「陷阱」。本文結(jié)合代碼示例與原理分析，帶你逐一避坑！ 一、解構(gòu)未定義對(duì)象：空值引發(fā)的致命錯(cuò)誤 ? 典型錯(cuò)誤 javascrip ...

運(yùn)算符 JavaScript 運(yùn)算符是真的多，尤其是 ES6 之后還在不停的加運(yùn)算符，其他編程語(yǔ)言看 JS 就像怪物一樣，各種騷操作不斷~~ 運(yùn)算符分類(lèi) 1、算術(shù)運(yùn)算符 算術(shù)運(yùn)算符的作用就是用來(lái)基礎(chǔ)計(jì)算，跟小學(xué)課本一樣，包含：加 +，減 -，乘 *，除 /，取余（也叫做取模） %，指數(shù) **，自增 ...

? 寫(xiě)在開(kāi)頭 點(diǎn)贊 + 收藏 學(xué)會(huì) 需求 首先列舉一下需要攔截的行為，接下來(lái)我們逐個(gè)實(shí)現(xiàn)。 瀏覽器前進(jìn)后退 標(biāo)簽頁(yè)刷新和關(guān)閉 路由跳轉(zhuǎn) 1、攔截瀏覽器前進(jìn)后退 這里的實(shí)現(xiàn)是核心，涉及到大量 History API 的理解，如果不太了解可以先看一下這兩個(gè)文章： 攔截瀏覽器后退方法附 ...

在程序語(yǔ)言中，數(shù)據(jù)類(lèi)型是基礎(chǔ)，一切程序都是建立在基礎(chǔ)數(shù)據(jù)之上。 如果說(shuō)程序如同萬(wàn)丈高樓平地起，那么數(shù)據(jù)類(lèi)型就像沙、石、鋼筋、水泥等等最基礎(chǔ)的原料。一樣的高樓，不同的人，用相同的原料，造的方法也會(huì)有千般變化。 在 JS 中，數(shù)據(jù)類(lèi)型可以分為 原始類(lèi)型 和 對(duì)象類(lèi)型。 原始類(lèi)型 直接存儲(chǔ)值，不可變（值的 ...

MyIP —— 一個(gè)好用且開(kāi)源的全能 IP 工具箱，基于 Express + Vue 實(shí)現(xiàn)，提供 IP 信息查看、網(wǎng)絡(luò)連通性、WebRTC 測(cè)試、DNS 泄露測(cè)試、網(wǎng)絡(luò)測(cè)試等通用功能。 ...

曾經(jīng) var 如帝王一般統(tǒng)治過(guò) JS 的變量聲明，直到后來(lái)大佬們實(shí)在是忍不了 var 那稀爛的聲明規(guī)則，便引入了 let 和 const 這兩大刀斧手，var 被輕輕松松的斬落馬下，如今，再難看見(jiàn) var 的身影。 變量聲明 在 JS 中，所有變量都可以用 var、let 和 const 這三個(gè)關(guān)鍵 ...

使用 vxe-table 合并單元格、分組列頭的詳細(xì)用法 查看官網(wǎng)：https://vxetable.cn gitbub：https://github.com/x-extends/vxe-table gitee：https://gitee.com/x-extends/vxe-table 代碼 通過(guò)設(shè) ...

JavaScript 默認(rèn)是非嚴(yán)格模式的，可以通過(guò) "use strict"; 啟用嚴(yán)格模式。此聲明語(yǔ)句可以放在 JS 文件頂部，也可以放在函數(shù)內(nèi)部。 啟用嚴(yán)格模式 1、外部腳本在 JS 文件開(kāi)頭聲明，內(nèi)部腳本在 <script> 標(biāo)簽開(kāi)頭聲明，聲明后所有 JS 代碼啟用嚴(yán)格模式： "use str ...

大家好，我是曉凡 520來(lái)了，給大家做了一個(gè)浪漫的網(wǎng)頁(yè)表白工具，幫助你向心愛(ài)的人表達(dá)愛(ài)意。 需要源碼的小伙伴直接跳轉(zhuǎn)到文章末尾獲取。 功能介紹 浪漫啟動(dòng)頁(yè)：顯示相識(shí)天數(shù)和小時(shí)數(shù)，營(yíng)造浪漫氛圍 動(dòng)態(tài)情書(shū)系統(tǒng)：打字機(jī)效果展示情書(shū)內(nèi)容，支持自定義內(nèi)容 趣味互動(dòng)游戲： 愛(ài)心捕捉：點(diǎn)擊飄動(dòng)的愛(ài)心獲取分?jǐn)?shù) 記憶 ...

? 寫(xiě)在開(kāi)頭 點(diǎn)贊 + 收藏 學(xué)會(huì) 你有沒(méi)有在寫(xiě)前端的時(shí)候，突然迷糊了： 為啥這張圖片能直接 src="https://xxx.jpg" 就能展示？ 為啥有時(shí)候圖片是亂七八糟的一串 Base64？ 有的還整出來(lái)個(gè) Blob，看不懂但好像很高級(jí)？ 有時(shí)還來(lái)個(gè) ArrayBuffer ...

1、問(wèn)題原因 用vuecli與vite創(chuàng)建的vue項(xiàng)目，默認(rèn)是沒(méi)有熱部署更新的。而且查閱大量資料后仍然找不到解決方法 這個(gè)我認(rèn)為是mac的m系列芯片的問(wèn)題 為什么我會(huì)這么認(rèn)為，因?yàn)橄嗤捻?xiàng)目，node_moudules我都沒(méi)有變過(guò)，再win系統(tǒng)中與mac系統(tǒng)同時(shí)運(yùn)行，只有win系統(tǒng)是可以正常熱部署的 ...

目錄前言先畫(huà)一個(gè)圓完善我們的類(lèi)小球動(dòng)起來(lái)最簡(jiǎn)單的碰撞計(jì)算，接觸墻壁反彈向量類(lèi)的完善檢測(cè)兩小球之間的碰撞完善碰撞的效果重復(fù)計(jì)算的問(wèn)題撞擊墻壁定格問(wèn)題內(nèi)存問(wèn)題隨機(jī)數(shù)生成多個(gè)小球參考資料 前言 在前端開(kāi)發(fā)里，canvas 是 HTML5 里最炫酷的工具。我們今天就來(lái)搞一個(gè)這樣的夢(mèng)幻的效果，學(xué)習(xí)一下 ES6 ...