博客 / 列表

浪遏飛舟 - react-router-dom源碼分析

react-router-dom源碼分析 參考: https://juejin.im/post/5ac8c1...

react , react-router4

浪遏飛舟 - react-router-config集中式路由配置

react-router-config主要用來幫助我們進行集中式路由的配置,在不使用react-router-config之前,我們的路由使用react-router-dom庫來進行配置,類似如下代碼: import React from 'react'; import { BrowserRouter as Router, Switch, Route, } from "react-ro

react , react-router4 , 路由

浪遏飛舟 - 深入瞭解現代網絡瀏覽器(第 1 部分)

前言 本文是進擊的大葱對Mario Kosaka寫的inside look at modern web browser系列文章的翻譯。這裏的翻譯不是指直譯,而是結合個人的理解將作者想表達的意思表達出來,而且會盡量補充一些相關的內容來幫助大家更好地理解。 CPU,GPU,內存和多進程架構 在本篇文章中,我將會從Chrome瀏覽器的高層次架構(high-level architecture)開始説起,

瀏覽器架構 , 瀏覽器 , 進程

浪遏飛舟 - 從HTML Components的衰落看Web Components的危機

搞前端時間比較長的同學都會知道一個東西,那就是HTC(HTML Components),這個東西名字很現在流行的Web Components很像,但卻是不同的兩個東西,它們的思路有很多相似點,但是前者已是昨日黃花,後者方興未艾,是什麼造成了它們的這種差距呢? HTML Components的一些特性 因為主流瀏覽器裏面只有IE支持過HTC,所以很多人潛意識都認為它不標準,但其實它也是有標準文檔的,

component , 組件化 , web-components

浪遏飛舟 - 談一談組件化

前言 今天前端生態裏面,React、Angular和Vue三分天下。雖然這三個框架的定位各有不同,但是它們有一個核心的共同點,那就是提供了組件化的能力。W3C也有Web Component的相關草案,也是為了提供組件化能力。今天我們就來聊聊組件化是什麼,以及它為什麼這麼重要。 正文 其實組件化思想是一種前端技術非常自然的延伸,如果你使用過HTML,相信你一定有過“我要是能定義一個標籤就好了”這樣的

封裝 , extjs , component , 組件化 , 複用

浪遏飛舟 - webapck自動部署plugin

不説廢話,直接上貨。 webpack打包後自動部署插件:webpack-auto-upload-j 插件項目地址:https://github.com/jiangji1/w... 在項目中安裝該模塊 npm i webpack-auto-upload-j --save-dev webpack導入插件並配置 const WebpackAutoUploadJ = require('webpack-au

plugin , webpack2

浪遏飛舟 - single-spa-react搭建微前端單實例應用

單實例微前端設計思想 拿到子應用構建後的資源清單,一般項目中都會生成一個asset-manifest.json文件,用來記錄各個子應用的入口資源url信息,以便在切換不同子應用時使用模塊加載器去遠程加載。因為每次子應用更新後入口資源的hash通常會變化,所以需要服務端定時去更新該配置表,以便框架能及時加載子應用最新的資源; 同樣,子應用之間的一些公共依賴通過配置文件記錄; 主應用監聽路由

react , micro , single-page-application , 微前端 , spa

浪遏飛舟 - 正則表達式完整教程(略長)

引言 親愛的讀者朋友,如果你點開了這篇文章,説明你對正則很感興趣。 想必你也瞭解正則的重要性,在我看來正則表達式是衡量程序員水平的一個側面標準。 關於正則表達式的教程,網上也有很多,相信你也看了一些。 與之不同的是,本文的目的是希望所有認真讀完的童鞋們,都有實質性的提高。 本文內容共有七章,用JavaScript語言完整地討論了正則表達式的方方面面。 如果覺得文章某塊兒沒有説明白清楚,歡迎留言,能

regexp , javascript正則 , 正則表達式

浪遏飛舟 - 如何解決跨域問題

1、jsonp jsonp解決跨域問題的本質:script標籤可以請求不同域名下的資源,即script請求不受瀏覽器同源策略影響。 !DOCTYPE html html lang="en" head meta charset="UTF-8" meta name="viewport" content="width=device-width, initial-scale=1.0" titl

cors , postmessage , Nginx , 跨域

浪遏飛舟 - 如何解決跨域問題

1、jsonp jsonp解決跨域問題的本質:script標籤可以請求不同域名下的資源,即script請求不受瀏覽器同源策略影響。 !DOCTYPE html html lang="en" head meta charset="UTF-8" meta name="viewport" content="width=device-width, initial-scale=1.0" titl

cors , postmessage , Nginx , 跨域

浪遏飛舟 - 記錄Ajax請求報415與404問題

問題描述與分析 今天幫同學旁邊同事解決了一個問題,問題是這樣的:我們有一個前後端未分離的項目agentBuy(Freemark+JQuery),同事想本地啓動agentBuy MVC服務(http:localhost:8001),聯調後端同事的本地啓動的web-inquiry服務(http://127.168.24.68:9366),直接聯調會有跨域問題,於是同事本地啓動網關服務webagent將

post , contenteditable , 400 , Ajax , 404

浪遏飛舟 - 記錄MVC項目部署時的CDN緩存問題

概述 本文將分析在發佈前後端未分離項目(freemaker)時遇到的CDN緩存問題,主要有以下兩個問題: 頁面請求獲取的html裏面卻是舊版本號的script鏈接 script腳本鏈接是新版本號但拉取到的卻是舊腳本代碼 CDN CDN全稱是Content Delivery Network,即內容分發網絡,也稱為內容傳送網絡。CDN是構建在現有網絡基礎之上的智能虛擬網絡,依靠部署在各地的邊緣

部署 , cdn緩存 , cdn , mvc , freemarker

浪遏飛舟 - React組件如何適配到MVC項目

笑而不語是一種豁達,痛而不言是一種歷練。時間改變着一切,一切改變着我們,曾經看不慣,受不了的,如今不過淡然一笑。 成熟,不是看破,而是看淡,原先看不慣的如今習慣了,曾經想要的,現在不需要了,開始執着的,後來很曬脱了... 成長的路上,人總要沉澱下來,過一段寧靜而自醒的日子,來整理自己,沉澱再沉澱,然後成為一個温柔而強大的人! 目前公司的業務線中存在許多未進行前後端分離的 Spri

構建工具 , react , shadow , 打包 , mvc

浪遏飛舟 - Document Redirect 與 XHR Redirect區別

情景復現 某天正式環境有用户反饋某頁面操作沒有任何響應,SRE接收到反饋後,對問題分析復現,復現步驟如下: 用户登錄商家工作台後複製頁籤,開啓了兩個頁籤,其中一個頁簽退出登錄,另一個頁籤點擊操作 另外,SRE還收集了控制枱輸出錯誤信息: 問題分析 根據報錯信息來看,明顯提示重定向後的請求跨域了。當時我認為設置了Loacation標頭的Http 302重定向響應,瀏覽器地址欄會接着訪問重定向後的

cors , form , 重定向 , 預檢請求 , 跨域

浪遏飛舟 - 如何使用 webpack 優化 lodash

如何使用 webpack 優化 lodash lodash提供了很多可用的方法供我們使用,絕對是一個很好用且用起來得心應手的工具庫。但是同時,lodash的體積也不小,我們項目中使用的大概522K,可能只是使用了幾個方法,但是卻把整個lodash庫引入了。為了吃幾條魚,就承包了整個魚塘,代價有點大呀! lodash庫結構目錄 |-- lodash |-- fp // lodash

lodash , webpack

浪遏飛舟 - 如何將iframe封裝成一個組件

背景 在使用 Electron 桌面應用時,有時我們需要將其他平台上的業務頁面嵌入到桌面應用中,以便快速滿足業務需求。 這種需求的優勢在於可以重用已有的業務頁面,無需重新開發桌面應用的界面和功能,從而節省時間和資源。通過將其他端的業務頁面嵌入桌面應用中,我們可以快速將現有的功能和用户界面帶入桌面環境,提供一致的用户體驗。 雖然 Electron 框架提供 webview 標籤來幫助我們嵌入其他端的

iframe , webview , electron

浪遏飛舟 - 徹底説清楚 Javascript 如何處理二進制

JavaScript 提供了一些 API 來處理文件或原始文件數據,例如:File、Blob、FileReader、ArrayBuffer、base64 等。下面就來看看它們都是如何使用的,它們之間又有何區別和聯繫! ArrayBuffer ArrayBuffer 對象用來表示通用的、固定長度的原始二進制數據緩衝區,是內存中一段固定長度的連續數據存儲區的引用,你無法直接操作或修改它,只能通過 D

二進制 , typearray , base64 , blob , arraybuffer

浪遏飛舟 - 前端數據模擬方案

我與我周旋久,寧作我 在前端開發中,使用 Mock 方案可以幫助開發人員在不依賴於後端接口的情況下進行開發和調試。Mock 數據可以模擬後端接口的返回結果,使得前端開發可以獨立進行,不受後端接口的限制。以下是幾種常見的前端Mock 方案: 手動編寫Mock數據 手動編寫 Mock 數據是一種簡單而直接的前端Mock 方案。你可以手動創建 JSON 或 JavaScript 對象來模擬後端接口的返回

axios-mock-adapter , mock.js , mock , 中間件 , json-server

浪遏飛舟 - Nginx如何反向代理、延時響應、SLL

昨日之深淵,今日之淺談。路雖遠,行則將至。事雖難,做則可成。 在前端生態中,代理服務扮演着重要的角色。代理服務是指一種中間層服務,用於在前端應用程序和後端服務器之間進行請求轉發和數據交互。它可以提供以下功能和優勢: 跨域請求:代理服務可以解決瀏覽器的同源策略限制,使前端應用可以從不同的域名或端口請求數據。通過代理服務,前端應用可以將請求發送到同一域名下的代理服務器,並由代理服務器轉發到目標服務

ssl , HTTPS , Nginx , 反向代理

浪遏飛舟 - JavaScript 內存泄漏

生活可能不像你想象的那麼好,但是也不會像你想象的那麼糟糕。人的脆弱和堅強都超乎了自己的想象,有時候可能脆弱的一句話就淚流滿面,有時候你發現自己咬着牙,已經走過了很長的路 如何避免 JavaScript 中的內存泄漏 像 C 語言這樣的底層語言一般都有底層的內存管理接口,比如 malloc()和free()。相反,JavaScript 是在創建變量(對象,字符串等)時自動進行了分配內存,並且在不使用

performance , observable , co , 內存泄漏 , memory

浪遏飛舟 - 如何實現精準的計時器

計時器 計時器在前端有很多應用場景,比如電商業務中秒殺和搶購活動的倒計時。在探討計時器之前先來回顧下它們的基本概念: 基本定義與用法 1、定義 setTimeout()用於指定在一定時間(單位毫秒)後執行某些代碼 setInterval()用於指定每隔一段時間(單位毫秒)執行某些代碼 2、參數 第一個參數 function,必填,回調函數。或者是一段字符串代碼,但是這種方式不建議使用,就和使

事件循環 , 計時器 , settimeout , setinterval , 倒計時

浪遏飛舟 - React組件應用於Spring MVC工程

背景 公司前端技術棧還處於React+Mobx與Spring MVC(freemarker+jQuery)共存的階段,兩種技術棧頁面難免會存在一些相同的業務功能,如果分別開發和維護,需要投入較大人力成本,因此,我們嘗試將React業務組件應用於Spring MVC項目,一處開發多處使用,降低不必要的成本投入。 應用 一、簡單封裝組件掛載與卸載方法 Spring MVC是面向DOM api的編程,需

構建工具 , react , spring-mvc , 組件化 , 兼容性

浪遏飛舟 - 如何定位內存溢出導致頁面崩潰問題

問題現象 在實際項目開發中,我們常常會遇到類似如下頁面崩潰的問題,導致瀏覽器頁面崩潰的原因一般都是JS Heap堆內存溢出,但此類問題一般控制枱都不會報錯,所以其定位問題的經驗和手段很關鍵,下文是我在實際項目中遇到問題的總結。 問題定位 首先,説一下項目技術棧背景,是採用React+Mobx+single-react-spa搭建的一個微前端中後台應用。當初始化加載完頁面,點擊”刪除“觸發事件後頁

performance , heap , 死循環 , 崩潰分析 , 內存溢出

浪遏飛舟 - tsc、babel、webpack對模塊導入導出的處理

問題引入 很多 react 使用者在從 JS 遷移到 TS 時,可能會遇到這樣一個問題: JS 引入 react 是這樣的: // js import React from 'react' 而 TS 卻是這樣的: // ts import * as React from 'react' 如果直接在 TS 裏改成 JS 一樣的寫法,在安裝了 @types/react 的情況下,編輯器會拋出一個錯誤:

babel7 , 模塊化 , webpack , import , typescript