动态

列表
创建 时间

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-router4 , react
创建 时间

深入瞭解現代網絡瀏覽器（第 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，所以很多人潛意識都認為它不標準，但其實它也是有標準文檔的，

組件化 , web-components , component
创建 时间

談一談組件化

前言 今天前端生態裏面，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

webpack2 , plugin
创建 时间

single-spa-react搭建微前端單實例應用

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

micro , spa , single-page-application , 微前端 , react
创建 时间

正則表達式完整教程（略長）

引言 親愛的讀者朋友，如果你點開了這篇文章，説明你對正則很感興趣。 想必你也瞭解正則的重要性，在我看來正則表達式是衡量程序員水平的一個側面標準。 關於正則表達式的教程，網上也有很多，相信你也看了一些。 與之不同的是，本文的目的是希望所有認真讀完的童鞋們，都有實質性的提高。 本文內容共有七章，用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

postmessage , 跨域 , Nginx , cors
创建 时间

如何解決跨域問題

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

postmessage , 跨域 , Nginx , cors
创建 时间

記錄Ajax請求報415與404問題

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

400 , post , 404 , Ajax , contenteditable
创建 时间

記錄MVC項目部署時的CDN緩存問題

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

cdn緩存 , freemarker , mvc , cdn , 部署
创建 时间

React組件如何適配到MVC項目

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

mvc , 構建工具 , 打包 , shadow , react
创建 时间

Document Redirect 與 XHR Redirect區別

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

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