PWA離線應用調研
1、PWA應用介紹 PWA 是一種通過現代 Web 技術提供類似原生應用體驗的 Web 應用。它的核心特性包括： 可離線訪問：通過 Service Worker 實現離線緩存快速加載 利用緩存策略加速資源加載可安裝 用户可以將 PWA 添加到主屏幕，像原生應用一樣使用響應式設計 適配各種設備屏幕 PWA 的核心技術包括： Service Worker：用於攔截網絡請求、管理緩存
Nickname PatWu16
@Javascript
Contributes369
Followers0
Contributes
@Javascript
Stories List
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
2023 年最受歡迎的 12 款 Chrome 瀏覽器擴展
谷歌瀏覽器Chrome是目前最受歡迎的瀏覽器之一，而瀏覽器擴展則是為了提升用户體驗和功能而開發的插件。 2023年穀歌公佈了12款最受歡迎的Chrome瀏覽器擴展。每個都提供獨特的功能來增強您的瀏覽體驗。以下是它們的詳細介紹： Speechify：將Google文檔、PDF、網頁或書籍轉換成語音，擁有30多種語言的自然發音聲音。 QuillBot：一套AI驅動的寫作工具，包括語法檢查
Nickname 南城FE
手寫一個簡單的谷歌瀏覽器拓展插件（附github源碼）
前言 閲讀本文，可以自己寫一個簡單的瀏覽器插件 以及前端瀏覽器插件相關東西 附上github源碼：https://github.com/shuirongshuifu/browser-plugin 接下來學學這個不常用的知識點吧... 效果圖 我們先看一下，自己手寫的簡單插件的操作效果圖（點擊彈出時間） 拓展程序部分 或者地址欄輸入：chrome://extensions/ 回
Nickname 水冗水孚
什麼？圖牀又掛了！試試我造的這款免費，穩定，完全自主可控的開源圖牀吧
大家好，我是來自蘇州的祥子，一個90後程序猿，為了實現算命先生的預言——30歲之後財運亨通，雖然我選擇了亨通開發的房產（亨通，本土500強公司），擁有亨通物業的服務，可還缺財運，所以重新撿起技術實現自我救贖。 本文主要介紹我自己造的圖牀輪子，起名叫：喔喔圖牀，之所以重新造輪子，是因為作為一名IT民工，平時喜歡寫一些文檔，博客，並且比較喜歡 Markdown 語法，但一直以來比較困擾的一個問題就是插
Nickname Chinaxiang
來學一個值錢的知識，Chrome插件如何優雅的捕獲頁面的請求結果
背景 今天在寫一個某網站限流檢測的chrome插件，需要捕獲頁面的某個請求結果。那麼問題就來了，我們該如何捕獲頁面的請求結果呢？我們來捋捋都有哪些方案。 我開發的時候的配置為manifest_version: 3，下文內容也是在這個基礎上展開的。 本文只列舉方案，一些需同步在manifest_version進行配置地方並未提及，請自行配置。 可行的方案 一、chrome.webReques
Nickname aqiongbei
chrome插件實現監聽ajax請求，然後修改請求參數
1 修改manifast.json manifest_version必須為3，因為這個declarativeNetRequest是3中新增的api { "manifest_version": 3, "permissions": ["declarativeNetRequest"], "host_permissions": ["all_urls"] } 2 在background.j
Nickname 熱飯班長
【源碼】pnpm源碼分析
今天我們開始閲讀pnpm的源碼，深入瞭解pnpm安裝原理，先上圖，pnpm安裝的整體的核心流程如下： 下面我們開始逐步分析。 一、從哪裏開始 每次説到源碼，不太熟悉的人總會有種無從下手的感覺，而pnpm又與我們的框架源碼比如vue又有所不同，因為它是全局安裝的。 前端的小夥伴都知道，全局安裝的依賴不在項目中，那如何找到全局安裝目錄呢？可以通過下面的命令查看： npm confi
Nickname 花伊濃
【nodejs進階之旅(2)】:使用koa2+mysql 實現列表數據分頁
1.展示效果（分頁） 2.分頁主要字段 分頁主要字段包括 pageSize 每頁條數、pageNum 第幾頁、startRow 當前開始頁編號、endRow 當前結束頁編號、total 總數量。主要是根據前端分頁的參數，進行處理後，返回前端正確的數據，其實是一個很常見且簡單的功能。但是是非常也是非常重要的。 pageSize 每頁條數 pageNum 第幾頁 startRow 當前開始頁編號
Nickname 微芒不朽
從淺入深瞭解Koa2源碼
在前文我們介紹過什麼是 Koa2 的基礎 簡單回顧下 什麼是 koa2 NodeJS 的 web 開發框架 Koa 可被視為 nodejs 的 HTTP 模塊的抽象 源碼重點 中間件機制 洋葱模型 compose 源碼結構 Koa2 的源碼地址：https://github.com/koajs/koa 其中 lib 為其源碼 可以看出，只有四個文件：application.js、cont
Nickname 山頭人漢波
一步一步來：手寫Koa2
之前講過Koa2從零到腳手架，以及從淺入深瞭解Koa2源碼 這篇文章講解如何手寫一個 Koa2 Step 1：封裝 HTTP 服務和創建 Koa 構造函數 之前閲讀 Koa2 的源碼得知， Koa 的服務應用是基於 Node 原生的 HTTP 模塊，對其進行封裝形成的，我們先用原生 Node 實現 HTTP 服務 const http = require('http') const server
Nickname 山頭人漢波
Koa2實現多併發文件上傳
koa2批量上傳文件 目前的是為了實現批量導入md文件，發佈文章。這樣就不用自己一篇一篇同步文章了。一次可以同步幾千篇文章。 實現界面 內容 主要包含上傳的文件標題，文件大小，上傳狀態。 el-upload ref="uploader" v-model:file-list="fileList" drag multiple :accept="accept" :maxSize="maxS
Nickname 微芒不朽
Koa2進階:CMS系統實戰開發秘籍：1.為什麼選擇Koa2?
目錄 為什麼選擇Koa2? Koa2環境搭建 Koa2核心概念/中間件基礎/異步控制流 Koa2路由管理 Koa2請求響應處理 Koa2中間件使用 Koa2錯誤/異常捕獲與處理 Koa2模板引擎集成 Koa2靜態文件服務 Koa2集成數據庫 模型設計/ORM工具使用 接口身份驗證與授權 API接口設計 Koa2日誌記錄 CMS架構設計 CMS內容管理 CMS用户
Nickname 微芒不朽
前端模塊化的前世
隨着前端項目的越來越龐大，組件化的前端框架，前端路由等技術的發展，模塊化已經成為現代前端工程師的一項必備技能。無論是什麼語言一旦發展到一定地步，其工程化能力和可維護性勢必得到相應的發展。 模塊化這件事，無論在哪個編程領域都是相當常見的事情，模塊化存在的意義就是為了增加可複用性，以儘可能少的代碼是實現個性化的需求。同為前端三劍客之一的 CSS 早在 2.1 的版本就提出了 @import 來實現模塊
Nickname Shenfq
javascript模塊化【RequireJS 】
一、模塊化的由來 在沒有模塊化思想之前，我們總是將大量的邏輯代碼寫在一起，這樣的代碼雜亂無章，沒有條理性，不便於維護，不利用複用。並且很多代碼重複，邏輯重複。甚至造成全局變量污染，也不方便保護私有數據。 為了解決上面的問題，模塊化的編程思想應運而生。 模塊化的基本思想就是：==閉包自調用函數== 對閉包瞭解不夠的同學，請先查看《 JS閉包全面解析》一文。 二、模塊規範 想要了解
Nickname 巴斯光年
Requirejs加載文件、清除緩存
Requirejs加載js問題 在使用 require(['app1'], function (app1) { console.log(app1); }); 加載app1模塊時，不配置requireJs.config中的path時，會請求當前html文件所在路徑下的app1.js 如果找不到，報如下錯誤 require.js:168 Uncaught Error: Scr
Nickname 奶粥
寫了個網頁版的五筆跟打器：玫楓跟打器
玫楓跟打器 Roseo Maple Type Pad 線上地址 https://kylebing.cn/tools/typepad/ 截圖 前言 自己是個五筆愛好者，也一直在使用五筆，從 Windows 轉到 Mac 之後，也沒有有可用的跟打器，每回想練練打字了都需要打開 Windows 模擬器來打字。 一直一直想有個能在 macOS 上運行的跟打器。 最初是想自己用 swift
Nickname KyleBing
AMD、request.js，生詞太多，傻傻搞不清
一個兜兜轉轉，從“北深”回到三線城市的小碼農，熱愛生活，熱愛技術，在這裏和大家分享一個技術人員的點點滴滴。歡迎大家關注我的微信公眾號：果凍想 前言 之前在公司用JS寫前端頁面，本來自己是一個寫後端的，但是奈何人少，逼的自己也去寫了。但是自己對前端基本不懂，基本就是照着前人寫的照着抄，反正大體意思是明白的，但是出現問題了，基本上也是吭哧吭哧好幾天，也能解決，但是由於自己對前端這一套是一點都不懂，導致
Nickname 果凍想
徹底弄懂js中this指向（包含js綁定、優先級、面試題詳解）
為什麼要使用this 在javascript中，this可謂是無處不在，它可以用來指向某些元素、對象，在合適的地方使用this，能讓我們減少無用代碼的編寫 varuser={ name:"aclie", sing:function(){ console.log(user.name+'在唱歌') }, dance:function(){ console.log(user.name+'在跳舞') },
Nickname 一顆冰淇淋
自定義javascript中call、bind、apply方法
call、bind、apply都是Function原型上的方法，用於改變this的指向 自定義函數 js中的call、bind、apply是用c++代碼實現的，我們這裏使用js代碼做一個模式，沒有把所有的邊界情況考慮進來，僅做一個簡單的實現，三個函數在使用的時候有一些需要注意的地方，在定義的時候需要把這些情況考慮進去 當傳入的值是基本數據類型時，call、apply、bind方法會將它轉變成引
Nickname 一顆冰淇淋
煩人的this,7個關於js關鍵詞的面試題
更多文章詳見公眾號【前端css和js乾貨】 在 JavaScript 中，this是函數的調用上下文。 難度在於this具有複雜的行為。 本文，整理了一個關於this關鍵字的7個有趣面試問題的列表。 注意：下面的 JavaScript 片段在非嚴格模式下運行，也稱為 sloppy 模式。 1: 變量 vs 屬性 以下代碼會在控制枱打印什麼： const object = { m
Nickname 前端css和js乾貨
this 指針詳解
概念 this 是當前函數/當前模塊的運行環境上下文。是一個指針型變量，普通函數中的 this 是在調用時才被綁定確認指向的。 通過不同的 this 調用同一個函數，可以產生不同的結果。 到底如何確認 this 綁定的內容是什麼？ this 綁定的規則 1.默認綁定 function a() {} a(); 函數獨立調用的時候，不帶任何修飾的函數引用. 非嚴格模式下 this 指向全局對象
Nickname 微言
JavaScript中的this綁定 - springboot實戰電商項目mall4j
springboot實戰電商項目mall4j （https://gitee.com/gz-yami/mall4j) java商城系統源碼 JavaScript中的this綁定 在日常的開發中，我們會經常使用JavaScript中的一個關鍵字：this，在常見的編程語言中，幾乎都有this這個關鍵字，但是JavaScript中的this和常見的變成語言中的this不太一樣， 在常見的變成語言（
Nickname mall4j