tag 前端

標籤
貢獻1,071
2844
06:37 AM · Oct 27 ,2025
tuzixiansen_63d4d65909d62 頭像 smileZAZ 頭像 qaz666 頭像 opentiny 頭像 invalidnull 頭像 dirackeeko 頭像 beishangdejianjidan_cqxuxf 頭像 yayu 頭像 junxiudetuoba 頭像 jdcdevloper 頭像 icecreamlj 頭像 xixindehongjiu 頭像

@前端 / 博客 RSS 訂閱

thjjames 頭像

小皇帝James - 編寫babel的插件

前言 Babel 是一個通用的多功能的 JavaScript 編譯器，讓一些新版本的語法或者語法糖可以在低版本的瀏覽器上跑起來。 它有三個主要處理步驟 Parse - Transform - Generate。 在 Transform 轉換過程中通過將插件（或預設）應用到配置文件來啓用代碼轉換。 AST 編寫 Babel 插件非常複雜，需要有相當的基礎知識，在講插件之前必須得提起 AS

ast , plugin , babel , 前端 , Javascript

收藏 評論

i_62f4ad94a52ca 頭像

用户bPc1FjG - 【Java】this、super關鍵字，代碼塊介紹

文章目錄 一. this引用 1. this引用的介紹 this引用是成員方法的參數之一，不需要用户傳遞實現，由編譯器自動完成，也就是説，這個參數用户是看不到的，但用户可使用這個參數。 this引用指向當前對象(成員方法運行時調用該成員方法的對象)，在成員方法中所有成員變量的操作，都是通過該引用去訪問。 只不過所有的操作對用户是透明的，即用户不需要來傳遞，編譯器自動完成。 this 引用的

ecmascript-6 , supervisor , this , JAVA , 前端

收藏 評論

jinjidedacong 頭像

進擊的大葱 - ES13的11個超讚的新屬性

聲明：本文為翻譯文章，原文為11 Amazing New JavaScript Features in ES13 像其他語言一樣，JavaScript也在不斷迭代和進化。JS每年都會加入很多新的功能來讓自己變得越發強大，也正是這樣，我們開發者才能寫出更加表意和準確的代碼。 在這篇文章中我們會通過一些例子來看一下最新的ECMAScript 2022(ES13)給我們開發者帶來的11個超讚的新功能。

ecmascript , 前端 , Javascript

收藏 評論

yangxiansheng_5a1b9b93a3a44 頭像

羊先生 - 如何在uni-app使用iconfont字圖標

添加圖標 打開，https://www.iconfont.cn/ 網站，找到自己的喜歡的圖表加入到項目中 下載本地 點擊下載至本地 拷貝文件 將iconfont.css，iconfont.woff,iconfont.woff2 複製到自己的項目中， 打開iconfont.css文件，我需要去編輯框框的地方 資源轉換 uni-app 字體文件小於 40kb，uni-app 會自動將其轉化為

iconfont , 字體 , webapp , uni-app , 前端

收藏 評論

nanchengfe 頭像

南城FE - 那些你不知道的 CSS 自定義形狀網格佈局

本文翻譯自 CSS Grid and Custom Shapes, Part 1，略有刪改 在正常的開發中，我們會遇到很多元素塊排列對齊的需求，如九宮格抽獎，多張圖片上傳後等分佈局預覽，微信朋友圈多張圖片展示等。這都是正常的正方形很規整的佈局。 如下所示，如果圖像不是完全正方形，而是形狀像六邊形或菱形怎麼辦？我們怎麼做呢。事實上，我們將結合我們已經研究過的 CSS 網格技術，並加入一些 CSS c

佈局 , css3 , Css , HTML , 前端

收藏 評論

susuhhhhhh 頭像

用户bPcSPjP - css實現炫酷的圓環相交轉動動畫

1.實現效果 2.實現原理 CSS perspective 屬性：屬性定義 3D 元素距視圖的距離，以像素計。該屬性允許您改變 3D 元素查看 3D 元素的視圖。當為元素定義 perspective 屬性時，其子元素會獲得透視效果，而不是元素本身。 perspective 屬性隻影響 3D 轉換元素。（請與 perspective-origin 屬性一同使用該屬性，這樣您就能夠改變 3

css3動畫 , 前端

收藏 評論

susuhhhhhh 頭像

用户bPcSPjP - css的rotate3d實現炫酷的圓環轉動動畫

1.實現效果 2.實現原理 2.1 rotate3d rotate3d：rotate3d() CSS 函數定義一個變換，它將元素圍繞固定軸移動而不使其變形。運動量由指定的角度定義; 如果為正，運動將為順時針，如果為負，則為逆時針。 語法： rotate3d(x, y, z, a) 含義： x number 類型，可以是 0 到 1 之間的數值，表示旋轉軸 X 座標方向的矢量。 y numb

css3動畫 , 前端

收藏 評論

wxp686 頭像

wxp686 - 性能優化進階：讓你的移動端網頁1s呈現

前言 現在的消費者越來越依賴移動設備來訪問內容和服務，這比以往任何時候都要求更高。當他們權衡您網站上的體驗時，他們不僅將您與您的競爭對手進行比較，還會在使用完後對您的應用進行評級。 但是很多網站給用户帶來的體驗並不太好，以致造成潛在客户流失，所以，性能是留住用户的關鍵。 Pinterest 將感知等待時間減少了 40%，這將搜索引擎流量和註冊量增加了 15% 。 原文(國外)：htt

性能優化 , react-native , 移動端web , 前端 , html5

收藏 評論

gaozhipeng 頭像

高志鵬 - 在 Vue 中為什麼不推薦用 index 做 key

尤大在vue 2.x的文檔中明確指出：建議儘可能在使用v-for時提供keyattribute，除非遍歷輸出的 DOM 內容非常簡單，或者是刻意依賴默認行為以獲取性能上的提升。 尤大的建議説白了就是説： 如果index可以做key，那直接底層幫你傳進去好了，又何必讓你們多此一舉呢？乖乖的不要用index做key 那麼:key 到底有什麼用？ 當 Vue.js 用 v-for 正在更新已渲染過的元素

vue.js , key , mvvm , diff , 前端

收藏 評論

woxiaomaoshihuaihuai 頭像

phoenixhg - vue動態組件綁定動態屬性和方法的小tips

當使用多 tab 內容頁時，動態組件是一件非常好用的利器。但是循環動態組件會有個問題，那就是不同組件綁定不同的屬性值和方法，全部寫在組件內固然是一種方法，就是不方便管理和查看，所以以下是單獨聲明的技巧小 tips。 切換的tabs常量 const TABS = [ { label: 'tab1', compo: 'RankingList', props: [

vue.js , computed , component , 前端 , Javascript

收藏 評論

ichu 頭像

小弟調調 - 微信公眾號 Markdown 編輯器

微信公眾號文章 Markdown 在線編輯器，使用 markdown 語法創建一篇簡介美觀大方的微信公眾號圖文。由於發版本麻煩，和一些功能無法擴展停滯開發了，未來不再開發 Chrome 的插件(暫存在 chrome 分支)，通過 web 版本定製更豐富的功能。 Github: https://github.com/jaywcjlove... 官網：https://jaywcjlove.gi

微信公眾號 , 微信公眾平台 , 前端 , Markdown

收藏 評論

abcdxj555 頭像

愛編程的小金 - RSM：超實用的多場景請求管理方案

各位前端er們，用了那麼久的再熟悉不過的接口請求，有沒有覺得不妥？？？你可能會覺得，這有什麼不妥，不就axios.get一下，fetch一下，請求就發出了嘛，然後再處理返回的數據，完事。真有這麼簡單嗎？問題來了，針對不同場景下的請求需求，真的可以統一這樣處理就完事嗎？我們來聊聊請求這事兒！ 聊聊前端請求的場景 我們先來聊聊前端請求的各種場景，以下是一些做請求時遇到的高頻場景。 什麼時候發出請求

vue.js , fetch , 請求 , Axios , 前端

收藏 評論

abcdxj555 頭像

愛編程的小金 - vue+alova入門指南

alova？這是個什麼鬼？ 你沒聽説過也是很正常，它是一個RSM實現庫，用於解決在MVVM項目下的不同請求場景下的問題，同時也可以幫你管理服務端狀態。 它就像一個axios的武裝庫，為axios插上了翅膀。 詳細瞭解RSM可參考 RSM：超實用的多場景請求管理方案 這篇文章作為vue+alova的基礎入門篇，你可以瞭解到以下內容： alova如何處理頻繁請求、跨模塊更新服務端狀態、模糊搜索

vue.js , request , fetch , 前端

收藏 評論

anchen_5c17815319fb5 頭像

anchen - 如何理解JS原型和原型鏈

每個函數（箭頭函數除外）都有prototype屬性，該屬性指向原型。 每個對象（null除外）都有__proto__屬性，指向了創建了該對象的構造函數的原型。（注：函數也是對象） 對象可以通過__proto__來尋找不屬於該對象的屬性，__proto__將對象連接起來組成了原型鏈。 理解原型和原型鏈，下面這張圖很重要： 根據上面這張圖，能夠得到如下等式： // 一、對象的__p

原型 , 原型鏈 , 前端 , Javascript

收藏 評論

munergs 頭像

munergs - angular 8+中使用observable使用async/await

不廢話，直接上結論，js中observable不能直接使用async/await這種流程控制標識，舉個例子 observable:Observableany = new Observable; constructor() { this.observable = Observable.create((item:any)={//一秒鐘後輸出結果 setTimeout((

promise , angular , async-await , rxjs-observables , 前端

收藏 評論

shawnphang 頭像

茶無味的一天 - 如何優雅地編寫一個高逼格的JS插件？

在一個風和日麗的早晨，我正悠閒地喝着Coffe，突然領導向我走來，我趕緊熟練地切出VSCode，淡定自若地問：領導，什麼事？領導拍了拍我的肩膀：你上次封裝的方法同事跟我反饋使用起來很不錯啊，你不如做成JS插件給大家用吧。我放下了手中的馬克杯，甩了一下眼前僅剩的幾根劉海：沒問題啊，小Case！隨即開始摸魚.... 原型鏈寫法 要開始編寫插件就得先了解JS模塊化，早期的模塊化是利用了函數自執行來實現的

插件 , 模塊化開發 , 插件化 , 前端 , Javascript

收藏 評論

xboxyan 頭像

XboxYan - 快速瞭解 inert 屬性

歡迎關注我的公眾號：前端偵探 介紹一個全新的、和用户行為息息相關的屬性：inert。 HTMLElement.inert - Web APIs | MDN (mozilla.org) 有了這個屬性，可以更加輕易地控制很多交互行為，花幾分鐘瞭解一下吧 一、inert 是什麼？ inert是 HTMLElement 的一個布爾屬性，意為"惰性"，簡單來説，可以禁用一切交互，包括鼠標點擊、選中、拖

dom , Css , HTML , 前端 , html5

收藏 評論

tiantian_5ada7e81e50d7 頭像

uccs - 遲遲沒學會grid，是因為你沒理解flex

我先問 2 個問題： 你是不是用主軸-交叉軸/輔軸/副軸的概念理解 flex 你是不是也用這個概念去理解 grid 如果你是用這種方式理解的 flex，那聽我慢慢道來 今天我打破你對 flex 的理解 打碎對 flex 理解 display: grid 和 display: flex 默認方向都是 row，為什麼他們表現出來的形式不一樣呢？ display: flex： 效果 di

flex , grid , flexible , Css , 前端

收藏 評論

nulidexiaocongmang 頭像

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

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

parallax-animation , css3動畫 , 前端

收藏 評論

beckyyyy 頭像

beckyyyy - WebViewJavascriptBridge.js代碼學習

//notation: js file can only use this kind of comments //since comments will cause error when use in webview.loadurl, //comments will be remove by java use regexp (function() { if (window.WebViewJav

hybrid-app , 前端 , Javascript

收藏 評論

tangzhiyuan 頭像

唐志遠 - 關於Vercel被牆導致獲取Twikoo評論失敗的解決方案

原文鏈接：關於Vercel被牆導致獲取Twikoo評論失敗的解決方案 前言 由於 Vercel 官方域名的 Dns 污染問題，導致 Vercel 部署的 Twikoo 評論無法正常獲取數據。在配置 Twikoo 評論時，如果 envId 用了 vercel 自帶的域名（類似 https://xxxxx.vercel.app/），則會遇到以上問題。 解決方案是用自定義的域名去代替 vercel 的

hexo , 前端

收藏 評論

chendongyuan 頭像

陳東民 - sublime 做一款翻譯變量名插件

sublime 做一個變量翻譯插件 目標 中文寫一個變量名, 鼠標移上去調用命令能將中文單詞翻譯成變量名，要求能選擇是大駝峯小駝峯還是下劃線 開始 Tools Developer New Plugin... import sublime import sublime_plugin class ExampleCommand(sublime_plugin.TextCommand): d

編輯器 , visual-studio-code , sublime-text , 前端 , Python

收藏 評論

ohhhcky 頭像

OhhhCKY - NPM 自動更新版本號

本文首發於 YFun's Blog。 前言 ChenYFan 大佬的文章：SpeedUp!使用黑科技為你的網站提速 有提到過將 Hexo 博客的全部靜態文件上傳至 NPM 達到加速效果。 但是 NPM 版本號不能重複，而且為了精準命中緩存和防止邊緣 @latest 緩存過長，就必須指定版本號。 本人在 我的圖牀解決方案 一文中使用的方法是 npm version patch。 但這個方法也

node.js , hexo , npm , 前端 , Javascript

收藏 評論

wei4118268_5df1ce05d1877 頭像

wei4118268 - [vue-cli3/element-plus] 從菜單渲染淺談動態渲染Vue組件的問題

1. 關於Element-plus的菜單渲染問題 跨過了Element-UI，終於來到了Element-plus。又回到了一個老問題，menu的渲染。 創建一個menu數組，利用v-for來渲染數組，生成menu，非常常規的操作。但是操作的過程中，出現了一個小問題，就是關於icon的渲染。 我們知道，在Element-plus中，渲染一個帶圖標的菜單項，是這麼搞的： el-menu-i

vue-cli3 , component , icon , element-plus , 前端

收藏 評論