tag 前端

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

@前端 / 博客 RSS 訂閱

gomi 頭像

Gomi - Astro + NextUI 搭建個人博客（導航組件篇）

Astro 簡介 由於我之前的個人博客是Vue3+Quasar+Koa+MySql搭建的，整體就是SPA的思路，作為練手倒是可以鍛鍊前後端各方面的能力。但考慮到後期的遷移和更新等，實在過於麻煩，個人博客其實使用SSR或SSG之類的框架就行了，比如Nextjs，Nuxtjs，Remix等等。於是我接觸到了Astro這個框架，它厲害的是不與任何前端框架進行強行綁定，比如Nextjs是與React強綁定

astro , ssg , ssr , 博客搭建 , 前端

收藏 評論

gqkmiss 頭像

月恆 - Chrome 瀏覽器插件 Manifest.json V3 中權限（Permissions）字段解析

本文參與了SegmentFault 思否 2023 年度有獎徵文活動，歡迎正在閲讀的你也加入。 一、權限（Permissions） 再使用拓展程序的 API 時，大多數的時候，需要在 manifest.json 文件中聲明 permissions 字段。 一、權限類型 在 V3 版本中可以聲明以下類別的權限： permissions： 包含下面 permissions 權限列

2023-年度總結 , permissions , 瀏覽器 , chrome-extension , 前端

收藏 評論

gqkmiss 頭像

月恆 - Chrome 瀏覽器插件從 Manifest V2 升級到 V3 版本所需要修改的點

本文參與了SegmentFault 思否 2023 年度有獎徵文活動，歡迎正在閲讀的你也加入。 一、Manifest V2 支持時間表 Chrome 瀏覽器官方已經給出確定的時間來棄用 V2 版本的插件了。 最早從 2024 年 6 月的 Chrome 127 開始，我們將開始停用 Chrome 的不穩定版本（開發者版、Canary 版和 Beta 版）中的 Manifest V2 擴展程序。

2023-年度總結 , manifest.json , 瀏覽器 , chrome-extension , 前端

收藏 評論

gqkmiss 頭像

月恆 - Chrome 瀏覽器插件 V3 版本 Manifest.json 文件全字段解析

本文參與了SegmentFault 思否 2023 年度有獎徵文活動，歡迎正在閲讀的你也加入。 Chrome 瀏覽器插件 V3 版本 Manifest.json 文件全字段解析 Manifest.json 文件格式 每個擴展程序的根目錄中都必須有一個 manifest.json 文件，其中列出了有關該擴展程序的結構和行為的重要信息。 1、Demo 展示 1. 最小文件 { "manife

2023-年度總結 , manifest.json , chrome-extension , manifest , 前端

收藏 評論

grewer 頭像

Grewer - V8 入門記錄二：環境與調試

環境搭建 這裏先説下我的環境， 這是代碼運行的前提。 系統： Mac Monterey 12.6.8 Xcode: 14.2 Python: 3.11.6 （不要使用 2.x 版本！） 建議全程指令都在FQ工具下進行 由源碼構建 V8 首先我們需要一個工具 depot_tools 執行指令克隆，這裏我是在文件夾 /Users/apple/Sites/demo/depot_tools

v8 , v8js , chrome , 前端 , Javascript

收藏 評論

invalidnull 頭像

註銷 - PWA 架構下文件 hash 的重要作用介紹

在PWA（Progressive Web App）體系架構下，文件 hash 起着非常關鍵的作用，它主要用於緩存管理、版本控制以及確保 Web 應用程序的可靠性。在前端開發中，文件 hash 是文件的唯一標識符，通常是文件內容的哈希值，例如 MD5 或 SHA-256。以下是文件 hash 在 PWA 中的幾個關鍵作用： 1. 緩存管理： 文件 hash 在 PWA 中用於實現緩存策略，確保在更新

ecmascript-6 , pwa , 前端 , html5 , Javascript

收藏 評論

jianer 頭像

健兒 - 多級數組Tree如何做搜索

兩種方案 1、數組打平，根據搜索字符在打平數組裏去filter出滿足條件的node節點，但此時被篩選的節點只有子節點，然後再通過被篩選出的子節點去找對應的父節點，然後拿到結果後轉成tree結構 優點：思路簡單，打平數組用了遞歸，好理解 缺點：找父節點的時候相對麻煩。 2、寫一個遞歸算法，滿足條件就返回tree 比如有一個簡單個tree const treeData = [ {

遞歸 , tree , 算法 , 前端

收藏 評論

skychx 頭像

鹵代烴 - ⚡️ [性能優化] 瀏覽器跨域帶來的一些性能問題

前言 字節 Web Infra 團隊最近開啓新一輪招聘了，如果你對 Web Framework/Runtime/Performance，或對編譯構建/Rust/AI 感興趣，可以來看看我們的崗位（具體崗位信息可以看這個招聘鏈接 👉 字節跳動 Web Infra - Web Solutions 團隊招人啦！） 簡歷可以發到我的郵箱 skychx@hotmail.com，我可以幫你內推崗位並跟

性能優化 , 跨域 , 前端

收藏 評論

nanchengfe 頭像

南城FE - Nodejs - 9步開啓JWT身份驗證

本文翻譯自 9 Steps for JWT Authentication in Node.js Application，作者：Shefali， 略有刪改。 身份驗證是Web開發的重要組成部分。JSON Web令牌（JWT）由於其簡單性，安全性和可擴展性，已成為在Web應用程序中實現身份驗證的流行方法。在這篇文章中，我將指導你在Node.js應用程序中使用MongoDB進行數據存儲來實現JWT

node.js , 前端 , Javascript , Jwt

收藏 評論

chenchaoyang666 頭像

愚者 - 基於tiptap一次封裝CustomEditor

tiptap一次封裝自定義UI 效果圖 （參考element-tiptap）： demo如下 本次封裝基於vue3 template div v-if="editor" :class="[ { 'el-tiptap-editor': true, 'el-tiptap-editor--fullscreen': isFullscreen

vue.js , less , typescript , 前端

收藏 評論

apifox 頭像

Apifox - 提高開發效率：Mock.js 數據模擬實戰教程

在本篇文章中，我們將深入探討Mock.js，這是一款在前端開發中廣泛應用的工具庫，專門用於生成模擬數據和攔截 Ajax 請求。本文將從以下幾個角度展開討論 Mock.js 的功能和應用： 如何開始使用 Mock.js 創建模擬數據 應用數據模板 模擬 Ajax 請求的技巧 開始使用 Mock.js 首要步驟是將 Mock.js 集成到你的項目中，這可以通過下面的 npm 命令來完成：

mock.js , mock , mockito , 前端工程師 , 前端

收藏 評論

laomao_5902e12974409 頭像

來了老弟 - 一篇搞定面試中的跨域問題

什麼是CORS（跨源資源共享）？ CORS（Cross-Origin Resource Sharing）是一種機制，允許網頁從不同的域訪問服務器上的資源。 在同源策略下，瀏覽器限制了跨域訪問，CORS允許服務器指定哪些源可以訪問其資源。 同源策略(Same-origin policy) 同源策略在web應用安全模型中是一個重要的概念。在這個策略下，瀏覽器允許第一個網頁中包含的腳本可以獲取第二個網頁

cors , 面試問題 , 前端

收藏 評論

xiangjian_659d190d45a7b 頭像

相見 - HarmonyOS—@Observed裝飾器和@ObjectLink嵌套類對象屬性變化

@Observed裝飾器和@ObjectLink裝飾器：嵌套類對象屬性變化 概述 @ObjectLink和@Observed類裝飾器用於在涉及嵌套對象或數組的場景中進行雙向數據同步： 被@Observed裝飾的類，可以被觀察到屬性的變化； 子組件中@ObjectLink裝飾器裝飾的狀態變量用於接收@Observed裝飾的類的實例，和父組件中對應的狀態變量建立雙向數據綁定。這個實例可以是數組中

華為 , 前端工程化 , Android , harmonyos , 前端

收藏 評論

refanbanzhang 頭像

熱飯班長 - fetch的使用記錄

如何用fetch發起post請求 下面是一個用fetch發起的post請求示例： fetch('/api/add', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ name: 'tomcat', }), }) .then(res

fetch , 前端 , Javascript

收藏 評論

apifox 頭像

Apifox - 掌握 Vue3 中的 setup 函數

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

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

收藏 評論

budebinglin 頭像

阿菇kinoko - JavaScript 原型鏈詳解

繼續補檔，發現這塊內容其實蠻多的。後面估計還會有兩篇（怎麼還有兩篇啊喂！），分別是 JavaScript執行原理·補 和 JavaScript部分特性，這周不知道能不能搞定。 先看 JS 原型鏈吧。 JS 繼承機制設計 1994年，網景公司（Netscape）發佈了 Navigator v0.9，轟動一時。但當時的網頁不具備交互功能，數據的交互全部依賴服務器端，這浪費了時間與服務器資源。 網景公司

web安全 , prototype , constructor , 前端 , Javascript

收藏 評論

aqiongbei 頭像

aqiongbei - javascript中的動態集合NodeList&HTMLCollection

不知道你有沒有在控制枱見到過類似這樣的輸出 我們會發現，同樣都是獲取元素的代碼，為啥一個是NodeList，一個是HTMLCollection。 那麼這倆是啥？又有啥區別，本篇文章我們就聊聊這個。 NodeList NodeList對象是節點的集合(類數組)。通常是由屬性，如Node.childNodes 和 方法（如document.querySelectorAll） 返回的

dom , 前端 , Javascript

收藏 評論

fenanjiu 頭像

南玖 - 使用原生 cookieStore 方法，讓 Cookie 操作更簡單

前言 對於前端來講，我們在操作cookie時往往都是基於document.cookie，但它有一個缺點就是操作複雜，它並沒有像localStorage那樣提供一些get或set等方法供我們使用。對與cookie的操作一切都是基於字符串來進行的。為了讓cookie的操作更簡便， Chrome87率先引入了cookieStore方法。 document.cookie document.cookie可以

cookie , 前端 , Javascript

收藏 評論

shumin_5bd11c2a4b889 頭像

suri - Cannot find module 'node:fs' 報錯解決 nuxt

問題描述 啓動項目報錯Cannot find module 'node:fs'，百度説是node版本問題，試了各種node版本還是不行（最開始是20.10.0，嘗試了降級到14、16都不行） 解決方法 更新nuxt版本，之前是2.14.6，更新為2.15.8問題解決，啓動後報另一個錯，增加安裝依賴@babel/plugin-proposal-private-property-in-object後問

nuxt.js , 前端

收藏 評論

zz_641473ad470bc 頭像

zZ_jie - Flex 佈局學習總結（對齊方式）

一、Flex佈局是什麼 Flex佈局是一種現代的、彈性的CSS佈局模型，一般簡稱彈性佈局， 全稱為Flexible Box Layout。它提供了一種更加高效、直觀的方式來設計、排列和對齊容器中的子元素。Flex佈局適用於響應式設計，能夠輕鬆適應不同屏幕大小和設備類型。 二、基本概念 容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開

flex , 前端

收藏 評論

haoqidewukong 頭像

好奇de悟空 - vscode 如何支持 css-module 文件跳轉到類名？

背景 css module 是目前主流的 css 模塊化的解決方案。使用 css module 之後，我們可以將 css 類當作模塊變量引入到我們的 typescript （下述使用 "ts" 代指）文件中來作為樣式的引用。過去，由於 ts 無法識別 css module 中導出的變量，我們使用 css 模塊變量需要到 css 文件中找到對應的類名，再寫到 ts 文件中使用，容易出錯且影響了開發效

less , visual-studio-code , postcss , typescript , 前端

收藏 評論

apifox 頭像

Apifox - 探索 JavaScript：every()方法背後的邏輯

JavaScript 語言的核心足夠大，以至於很容易誤解其某些部分的工作方式。我最近在重構一些使用every()方法的代碼時發現，我實際上並沒有完全理解其背後的邏輯。在我的腦海中，我假設回調函數必須被調用並返回true，every()才會返回true，但實際情況並非如此。對於一個空數組，every()無論回調函數是什麼都會返回true，因為那個回調函數從未被調用。考慮以下情況： function

數組 , 前端工程師 , 程序員 , 前端 , Javascript

收藏 評論

refanbanzhang 頭像

熱飯班長 - SPA應用的hash模式和history模式部署問題

hash模式和history模式的差異是什麼？ 拿這個地址為例： http://xxx.com#about http://xxx.com/about hash模式 由於http請求並不包含hash，所以不管hash值為多少，服務器端收到的請求始終都是/。 history模式 history模式下，後面的/about路徑會被服務器接收到，然後嘗試去處理這個/about。 為什

react , vue.js , Nginx , router , 前端

收藏 評論

emma_5aa5f6ff6ec8d 頭像

cybozu開發者聯盟 - 你知道h.265吧？但關於AV1編碼格式你也來了解一下嗎？

介紹一下av1格式 AV1（AOMedia Video 1）是一種開放、免版税的視頻編碼格式，旨在用於視頻傳輸和存儲。它由開放媒體聯盟（Alliance for Open Media, AOM）開發，這是一個由Google、Mozilla、Cisco、Amazon、Intel、Microsoft、Netflix等多家公司組成的聯盟。AV1旨在取代VP9併成為與HEVC（H.265）競爭的主要視頻編

h.265 , 編碼 , 前端

收藏 評論