JS如何刪除對象中的某一屬性
let math = { subject: '數學', children: [ { id: 1, title: '數一' }, { id: 2, title: '數二' }, { id: 3, title: '數三' }, { id: 0, title: '待定' } ] } // 添加新屬性 math
Nickname 前端小菜
@Javascript
Contributes369
Followers0
Contributes
@Javascript
Stories List
js合併數組的方法
1，方法一 concat() 實例：arrayA.concat(arrayB) 會生成新的數組。 let arrayA = ['ja', 'va']; let arrayB = ['scr', 'ipt']; // 合併數組A和B arrayA = arrayA .concat(arrayB); // 查看合併後的結果 console.log(arrayA); // ['ja',
Nickname 前端小菜
js解析url的三種方法
js解析url，將如下url中的參數解析為key-value對象 https://mp.weixin.qq.com/adva... 方法1，split() + 循環依次取出 parseURLParams(url) { let queryParams = {} // 判斷是否有參數 if (url.indexOf('?') 0) return queryPar
Nickname 前端小菜
Chrome 103支持使用本地字體，純前端導出PDF優化
在前端導出PDF，解決中文亂碼一直是一個頭疼的問題。要解決這個問題，需要將ttf等字體文件內容註冊到頁面PDF生成器中。但是之前網頁是沒有權限直接獲取客户機器字體文件，這時就需要從服務器下載字體文件或者提示用户選擇字體文件上傳到頁面。對於動輒數十兆（M）的中文字體文件，網絡不好時並不是一個好的解決方案。 Chrome 103 Chrome 103版本中新的字體API可以讓web應用獲取到用户在本
Nickname DexterYao
關於前端壓縮字體的方法
我在編寫一個撰寫日常的網站，需要用到自定義字體，在網上找到一ttf的字體，發現體積很大，需要進行壓縮 如何壓縮 目前我們的字體是.ttf字體，其實我們需要把字體轉換成.woff字體 WOFF本質上是包含了基於SFNT的字體（如TrueType、OpenType或其他開放字體格式），且這些字體均經過WOFF的編碼工具壓縮，以便嵌入網頁中。[[3]](https://zh.wikipedia.org/
Nickname 羊先生
如何讓 3D 數字孿生場景閃閃發光
今日圖撲軟件功能分享：我們將探討 HT 系統如何通過分組管理燈光、裁切體和流光，以提高場景光影效果的精準度和整體可控性。 HT 中的燈光、裁切體、流光是會影響它所在區域一定範圍內的其他節點的表現，如 場景中有個 A 燈光，默認情況下，場景中所有節點都是可以受到 A 燈光的影響。為了使這些影響更加準確，HT 提出一個解決方案“分組”，即將燈光、裁切體、流光進行分組管理，節點可設置接受哪些分組的影響
Nickname hightopo
細説Flexbox 佈局
在響應式設計中，Flexbox 是一種理想的佈局工具。它使得元素能夠根據容器的尺寸自動調整，靈活地填充可用空間。因此，無論是在桌面端還是移動端，Flexbox 都能夠確保佈局自適應、整潔且易於維護。 示例：響應式導航欄 假設我們需要創建一個具有可調節寬度的導航欄，項之間應均勻分佈，並且在小屏幕上時，導航項能夠堆疊在一起： nav class="navbar" a href="#"Home/a
Nickname 玩足球的傷疤
grunt插件：grunt-plug-insert
作者：心葉 時間：2019年01月24日 20:08 需求説明 在我們開發代碼的時候，不會把全部代碼寫在一個文件，只有最後打包的時候會合並在一起，而有時候，我們除了要合併代碼，還可能需要更靈活的合併方案。 這個插件就是在一個代碼文件中的指定位置插入一些了碎片文件。 如何使用 首先，需要安裝node包： npm install grunt-plug-insert --save-dev 一旦安裝
Nickname 心葉
使用grunt腳本創建新分支
使用grunt 寫一個創建新分支的task 首選安裝必要的修飾庫 npm i ora inquirer chalk --save 編寫task 這一步主要為了給用户展示最近的幾個分支用來判斷新建是否重複，如果不用也可以，那就在拉取的時候通過shell判斷下輸入的分支號是否存在，不存在提示就行 function getBranchCurrent(callback) { exec
Nickname 呼啦星星星
如何在vscode中調試typescript?
前置知識 首先要知道vsocde是無法調試typesript的。所以我們要做的就是將typescript編譯為javascript，然後告訴vscode編譯後的代碼位置，這樣才能進行調試。 流程 1 在項目根目錄創建launch.json配置 // package.json { "name": "debug-ts", "version": "1.0.0", "description"
Nickname 熱飯班長
禁止別人調試自己的前端頁面代碼
🎈 為啥要禁止？ 由於前端頁面會調用很多接口，有些接口會被別人爬蟲分析，破解後獲取數據 為了 杜絕 這種情況，最簡單的方法就是禁止人家調試自己的前端代碼 🎈 無限 debugger 前端頁面防止調試的方法主要是通過不斷 debugger 來瘋狂輸出斷點，因為 debugger 在控制枱被打開的時候就會執行 由於程序被 debugger 阻止，所以無法進行斷點調試，所以網頁的請求
Nickname 江户川亮仔
開源運維自動化平台-opendevops
開源運維自動化平台-opendevops 簡介 官網 | Github | 在線體驗 CODO是一款為用户提供企業多混合雲、自動化運維、完全開源的雲管理平台。 CODO前端基於Vue iview開發、為用户提供友好的操作界面，增強用户體驗。 CODO後端基於Python Tornado開發，其優勢為輕量、簡潔清晰、異步非阻塞。 CODO開源多雲管理平台將為用户提供多功能：ITSM、基於RBAC權限
Nickname 團團糰子
使用Workbox創建PWA應用
前言 最近公司項目迭代逐漸放緩，下班時間逐漸變早，所以本着漸進增加的理念，在下班後，將公司項目進行了一下PWA改造 為何要改造成PWA 用户需求。我們的用户有許多電腦小白，不想記網址，又不會使用瀏覽器的收藏功能。以前使用的同類軟件都有桌面版，有一種覺得桌面版比網頁版可靠，使用簡單的錯覺，曾多次在釘釘售後羣裏反映，如何將網頁保存至桌面，方便他下次直接在桌面打開 PWA是漸進式的，如果用户的瀏覽
Nickname 悖論BeilunYang
2020 年 Chrome 開發者峯會的亮點
2020 年的Chrome 開發者峯會和往年有所不同，今年是在線上召開的，每次談話大約十分鐘，討論規模更大。雖然我沒有在第一時間觀看會議的直播，但是看回放也不會錯過這些亮點。 所有的回放在這裏：https://developer.chrome.com/... 通過“Core Web Vitals”簡化了性能指標 我們都知道 Chrome 有大量的性能指標，可以用它們來跟蹤關於網站性能的所有內容。儘
Nickname 瘋狂的技術宅
webpack配置使用PWA
pwa離線應用緩存使用APP在實際應用中很多會用到 重要插件：workbox-webpack-plugin 下載安裝 在webpack.config.js文件配置引入使用 plugins中添加 new WorkboxWebpackPlugin.GenrateSW({clientClaim: true, skipWaiting: true}) 使用，在入口文件引入service-worker //
Nickname 萬年打野易大師
如何構建可控,可靠,可擴展的 PWA 應用
概述 PWA （Progressive Web App）指的是使用指定技術和標準模式來開發的 Web 應用，讓 Web 應用具有原生應用的特性和體驗。比如我們覺得本地應用使用便捷，響應速度更加快等。 PWA 由 Google 於 2016 年提出，於 2017 年正式技術落地，並在 2018 年迎來重大突破，全球頂級的瀏覽器廠商，Google、Microsoft、Apple 已經全數宣佈支持 PW
Nickname JerryC
PWA 圖標顯示問題，兼顧 macOS、Windows、iPad
首先看macOS任務欄的圖標規律： 會發現第三個：YouTube Music（PWA版本）的圖標很不對勁，不是因為它是圓形，其他都是方形。而是它很大，寬高明顯大過其他圖標。在我對比了VSC和YouTube Music的圖標圖片之後發現了區別所在： 上面看不明顯的話，這麼對比看就明顯了： 解釋下，圖3是圖2在控制枱（F12）資源那裏顯示的圖片，之所以看這個是因為可
Nickname 林水溶
關於 PWA url 參數 ngsw-bypass=true
"ngsw-bypass-true" 這個參數是與 Angular Service Worker (ngsw) 相關的一個選項，用於控制在 Service Worker 中是否繞過緩存，直接請求網絡資源。在 Angular 應用中，Service Worker 主要負責緩存應用的靜態資源，以提高應用的性能和用户體驗。 首先，讓我們瞭解一下 Angular Service Worker 的基本概念。
Nickname 註銷
PWA 架構下文件 hash 的重要作用介紹
在PWA（Progressive Web App）體系架構下，文件 hash 起着非常關鍵的作用，它主要用於緩存管理、版本控制以及確保 Web 應用程序的可靠性。在前端開發中，文件 hash 是文件的唯一標識符，通常是文件內容的哈希值，例如 MD5 或 SHA-256。以下是文件 hash 在 PWA 中的幾個關鍵作用： 1. 緩存管理： 文件 hash 在 PWA 中用於實現緩存策略，確保在更新
Nickname 註銷
PWA離線優先策略：提升用户體驗的關鍵步驟
Progressive Web Apps (PWA) 的離線優先策略是通過Service Worker和Cache API實現的，它允許在沒有網絡連接時仍然可以訪問網站的部分或全部內容。 1. 創建Service Worker註冊文件（service-worker.js）： self.addEventListener('install', (event) = { event.waitUntil
Nickname 天涯學館
PWA實踐
PWA基礎 PWA應用是什麼樣子的？ 在主屏幕、應用啓動器、啓動板或開始菜單上都有**圖標**。 當您在設備上搜索應用時，此圖標會顯示。 會在一個獨立的窗口中打開，該窗口完全**獨立**於瀏覽器的界面。 可以與操作系統進行更高級別的集成，例如網址處理或標題欄自定義。 **離線**時也能使用。 應用內自定義安裝 需要滿足的條件 安裝相關API兼容性表格 不兼容系統的交互處理？： 點擊安裝按鈕 -
Nickname 有李
PWA離線應用調研
1、PWA應用介紹 PWA 是一種通過現代 Web 技術提供類似原生應用體驗的 Web 應用。它的核心特性包括： 可離線訪問：通過 Service Worker 實現離線緩存快速加載 利用緩存策略加速資源加載可安裝 用户可以將 PWA 添加到主屏幕，像原生應用一樣使用響應式設計 適配各種設備屏幕 PWA 的核心技術包括： Service Worker：用於攔截網絡請求、管理緩存
Nickname PatWu16
PWA離線應用實踐
上篇文章整理了PWA離線應用的技術脈絡和注意事項，本篇文章將記錄使用Vue + Workbox + localforage 實現離線應用的實踐過程。 一、Vue工程改造 Vue CLI 提供了一個官方的 PWA 插件，可以快速為 Vue 項目添加 PWA 支持。運行以下命令安裝插件： // 在vue工程目錄下執行如下命令 vue add pwa 安裝完成後，插件會自動生成以下文件： src/
Nickname PatWu16
探索 IP 代理服務的類型及應用場景，以及可視化數據抓取工具簡介
在我們日常工作中有很多場景需要使用代理服務，比如説前端開發環境的 proxy 正向代理，比如説常見的 nginx 反向代理，比如常見的 cdn 等等。但是還有很多場景也可以使用代理服務。 今天我給大家介紹一下不同類型的 IP 代理服務適用於何種場景，最好可以教會大家如何使用 IP 代理服務。 請注意，雖然 IP 代理功能強大，我們應始終秉持合法、合規的原則使用，尊重網絡規則，不濫用技術侵犯他人
Nickname linong