Contributes82
Followers0
楔子 postMessage 常見於內嵌 iframe 或是 Web Workers 中，用於跨頁面（線程） 的消息通信，在一些其他開發環境中也能看到類似的影子，如 Chrome 插件環境、Electron 環境、figma 插件等。 最近的工作需要經常與 iframe 與 Web Workers 打交道，處理頁面與內嵌頁、主線程與 worker 通信，擼了個用於處理瀏覽器消息通信的處理的工具庫
Nickname 臼犀
在響應式設計中，Flexbox 是一種理想的佈局工具。它使得元素能夠根據容器的尺寸自動調整，靈活地填充可用空間。因此，無論是在桌面端還是移動端，Flexbox 都能夠確保佈局自適應、整潔且易於維護。 示例：響應式導航欄 假設我們需要創建一個具有可調節寬度的導航欄，項之間應均勻分佈，並且在小屏幕上時，導航項能夠堆疊在一起： nav class="navbar" a href="#"Home/a
Nickname 玩足球的傷疤
前置知識 首先要知道vsocde是無法調試typesript的。所以我們要做的就是將typescript編譯為javascript，然後告訴vscode編譯後的代碼位置，這樣才能進行調試。 流程 1 在項目根目錄創建launch.json配置 // package.json { "name": "debug-ts", "version": "1.0.0", "description"
Nickname 熱飯班長
"ngsw-bypass-true" 這個參數是與 Angular Service Worker (ngsw) 相關的一個選項，用於控制在 Service Worker 中是否繞過緩存，直接請求網絡資源。在 Angular 應用中，Service Worker 主要負責緩存應用的靜態資源，以提高應用的性能和用户體驗。 首先，讓我們瞭解一下 Angular Service Worker 的基本概念。
Nickname 註銷
1 修改manifast.json manifest_version必須為3，因為這個declarativeNetRequest是3中新增的api { "manifest_version": 3, "permissions": ["declarativeNetRequest"], "host_permissions": ["all_urls"] } 2 在background.j
Nickname 熱飯班長
輕快圖片管理系統:基於Koa2 + Vue3.x + Vite3.x + typescript開發的輕量級快捷圖片管理系統、圖牀系統 簡介 程序員日常就是寫博客，當然寫博客時就會涉及到在博文中插入圖片，所以往往會使用圖牀來進行圖片資源管理，市面上較流行的圖牀是PicGo，是使用electron-vue開發的桌面應用程序，所以每次需要下載安裝並配置圖牀，比較麻煩。所以開發了這款輕快圖片管理系
Nickname 奶油味擁抱
函數內 非嚴格模式 通常情況下，定義的函數的this就是window，比如： function doit(){ console.log(this); } doit(); 打印結果： Window {window: Window, self: Window, document: document, name: '', location: Location, …} 嚴格模式 不過，如果開啓了
Nickname zxl20070701
你是否想要用 TypeScript 編寫更安全，更可靠，更簡潔的 HTTP 客户端代碼？如果你的答案是肯定的，那麼你一定會喜歡 class-fetch 這個庫。 class-fetch 是一個用 TypeScript 編寫的 js 庫，用於生成 HTTP 客户端。它基於 fetch，支持瀏覽器和 nodejs 運行時。它使用裝飾器來簡化請求參數和返回值的處理。它使用 class-transform
Nickname 是水
前不久組內的萌新用不知道從哪裏學來的技術，説要封裝一套 axios 庫供大家使用。 等他開發完，在 code review 環節，大家看到他寫的代碼都面面相覷，不知道該如何評價。 我一時間也不知道該如何評價，只能提醒他不要寫死代碼，目前 axios 還沒入選開源庫，後期有可能換成其他替代品。 會後我專門到網上搜一番，發現二次封裝 axios 的案例確實不少，但給我感覺其實都半斤八兩，不見得哪個更優
Nickname zaoying
在現代 Web 應用開發中，密鑰的使用幾乎是不可避免的，無論是加解密本地敏感數據、調用第三方 SDK 還是網絡請求籤名等場景都需要用到密鑰。 如何相對安全、靈活地管理密鑰一直是一個令人頭疼的問題，我們既希望在開發環境可以方便地修改、調試和注入密鑰，又不希望這些密鑰在構建產物中被明文暴露，以免被有心之人輕鬆獲取。 通常情況，我們會先手動將密鑰通過特定的算法混淆拆分成多份放入源碼中，運行時再通過逆運算
Nickname xiaohe0601
上一章 我們詳細介紹了為什麼需要一個自動化的密鑰管理方案，以及如何利用虛擬模塊機制設計並實現一個適用於 Rollup 的密鑰管理插件。 我們從需求出發，將核心的密鑰拆分還原算法獨立為 crypto-splitter 模塊，再通過 rollup-plugin-crypto-key 模塊將其接入 Rollup / Vite 的構建流程。用户只需簡單配置明文密鑰，就能實現在業務代碼中像導入普通模塊一樣獲
Nickname xiaohe0601
🚀 meta-env-typed：讓所有前端項目的環境變量都擁有完美類型安全！ 在前端開發中，環境變量的類型安全問題常常被忽視，卻可能引發生產環境的重大隱患。手動維護類型定義繁瑣易錯，不同構建工具的變量規則又各不相同——現在，這些問題都將成為歷史！meta-env-typed 橫空出世，作為一款跨構建工具的環境變量類型解決方案，它能自動為你的項目注入完整的 TypeScript 支持，讓環境變量
Nickname Json_Lee
由於最近應產品經理的需求，需要做一個Android版的上位機APP，為此專門到某寶上購買了一個Type-C轉串口的小設備，然後就開始折騰了。花了幾天的時間就把上位機APP做出來了，後來在空閒時間又做了一個串口調試的小工具，效果如下圖 創建項目 ionic start blank 創建一個空白項目 安裝串口插件 要做一個串口通訊的工具，那就得和硬件打交道，正好根據ionic官方文檔，我找到了一個串
Nickname 深夜徘徊
Github鏈接:Nemo Metrics 輕量性能採集系統 Nemo近一年以來做了不少h5活動，，積累了不少優化開發流程經驗以及優化用户加載與性能經驗。 但是每次覆盤轉化率都不高,我們不希望任何用户流失。 用户為什麼會離開，是不是頁面報錯了？ 是不是某些地區解析DNS，服務器資源/CDN資源加載慢？ 大部分用户打開我們的網頁都在哪些時間區間(哪些國家/地區，哪些版本，哪些手機的用户打開用
Nickname 文叔叔叔叔
flex 佈局原理 全稱 flexible box，彈性佈局。 如何開啓：為元素添加 display: flex。 開啓 flex 佈局的元素，稱為 flex 容器（flex container），其子元素成為容器成員，稱為 flex 項目。 flex 佈局原理：通過給父盒子添加 display: flex，來控制盒子的位置和排列方式。 flex 佈局父盒子常見屬性 flex-direction
Nickname 麒寧
目的： 可使用 TypeScript 來開發項目 結合 webpack-dev-server 的熱重載，提升開發效率 瞭解相關依賴和配置的作用 準備 一、初始項目目錄結構（非常簡單） |_ src | |_ index.ts |_ public |_ index.html（只需在body標籤中添加script src="./index.js"/script）
Nickname Evans_波
原文 Use cases for Angular libraries Angular 庫有 2 個常見用例： 構建可重用的組件庫以在應用程序之間共享。 構建共享服務層功能 - 例如。 用於處理外部數據源（例如 API）的客户端。 雖然有很多 Angular 庫非常適合項目的情況，但值得考慮您的用例是否屬於這些，因為它確實引入了一些維護開銷。 請記住，您始終可以將功能編寫為應用程序中共享 A
Nickname 註銷
XSS（Cross-Site Scripting）攻擊是前端安全中的一個重要問題，它發生在攻擊者能夠注入惡意腳本到網頁中，這些腳本在用户瀏覽器中執行時可以獲取用户的敏感信息，例如會話令牌、個人信息等。防禦XSS攻擊通常涉及以下幾個策略： 1. 輸入驗證： 對用户提交的數據進行嚴格的驗證，確保只有預期的字符和格式被接受。 使用正則表達式或預定義的白名單模式來過濾無效字符。 限制字符串長度以防
Nickname 天涯學館
我們在做前端開發的時候，曾遇到一些非常炫酷的宣傳頁。例如每一個蘋果產品的主頁面。我們會發現，這樣炫酷的頁面，總是跟隨我們鼠標滾輪的操作，在頁面中響應不同的事件。 一、瀏覽器的不同 我們都知道，需要在前端頁面中監聽到鼠標滾輪的事件，不同瀏覽器內核提供的方法是不同的。所以，每當我們需要監聽鼠標滾輪事件，就需要先判斷使用終端是用的什麼瀏覽器。 在前端，我們可以通過window.navigator.us
Nickname 愛米
Prettier 和 ESLint 是兩個互補的工具，它們共同確保代碼的風格一致性和質量。Prettier 負責格式化代碼，而 ESLint 則執行更復雜的靜態分析和規則檢查。 Prettier 作用： 自動化代碼格式化，確保代碼的縮進、括號、引號、換行等樣式一致。 不需要配置太多的規則，因為Prettier有一套默認的代碼風格。 支持多種編程語言，包括JavaScript、TypeS
Nickname 天涯學館
eslint報錯：ESLint: Unexpected empty method 'default 禁止出現空函數 (no-empty-function) 錯誤代碼示例： const props = defineProps({ data: { type: Object, default: () = {} // 報錯 Unexpected empty method 'defa
Nickname 得鹿夢魚
從 0 到 1 打造社區產品：短説社區助力開啓社交新篇在這個信息繁雜的時代，人們愈發渴望能有一方專屬天地，與志同道合之人盡情交流興趣、分享生活點滴。你是否也在尋覓這樣一個獨特的社交空間呢？現在，一款依託短説社區搭建，即將從 0 成長為 1 的全新社區產品，正準備為你開啓前所未有的社交體驗！ 打造社區產品的第一步，是精準定位。我們深入剖析目標用户羣體，聚焦於 （具體目標用户羣體）。拿攝
Nickname 想天瀏覽器
xzgz.top 網站記錄 主要技術棧 應用主要是由 koa 構建，其中 nextjs 只負責頁面構建完成服務端渲染。以下是主要應用的技術 後台 Koa：網站主題內容 koa-router：網站後端路由 koa-session：應用的 session 寫入 nodemailer：發送郵件 mysql2：數據庫操作 nodemon：開發模式下熱更新 typescript ts-no
Nickname RookieGz
部署 MCP Server 到函數計算 FC 完成 Server 的開發後，你可以通過 Serverless Devs CLI 工具一鍵將你的 MCP Server 部署到函數計算。Serverless Devs 是通過 s.yaml 部署代碼的，其需要包含所有部署需要的信息，包括實例規格、代碼目錄、觸發器配置等等，而 CLI 已經幫你寫好了，因此你不需要在意這些。 在部署之前，還需要對代碼
Nickname feixi50
