原创 Axios利用攔截器處理重複請求

我們在開發時 經常會遇到類似場景 提交表單時,連續點擊提交表單,導致後臺重複處理 寫一個連續點擊腳本,不停發送請求,併發量導致服務器癱瘓 今天,我們解決類似問題: 一、重複請求 處理流程: 開始請求攔截響應攔截判斷數組是否存在

原创 React實現購物車基本功能(React-redux)

本案例利用react-redux實現購物車功能,概括有以下步驟: 1、利用veux操作商品的選中狀態 2、全選與取消全選 3、動態reduce計算價格 4、結算取出商品id 演示網址:https://zhangyongwnag.g

原创 javascript高級 --- 惰性函數

一、介紹 惰性函數表示在函數執行的過程中,函數會在首次被成功調用的時候覆蓋當前函數,成功後的邏輯不會被執行。 二、案例 因爲瀏覽器行爲之間的差異,我們在處理一些差異的同時,必須考慮其兼容性問題,例如:addEventListene

原创 react-redux 中state數據發生變化,頁面並沒有渲染

上一篇文章我們講了如何在 React項目中添加 react-redux 狀態管理 ,遺留一個比較棘手的問題:當我們直接修改state中的數據時,發現數據發生了變化,但是頁面並未渲染 代碼: let data = { list:

原创 Axios利用攔截器取消頁面切換pending中的請求

我們在開發時 經常會遇到類似場景 切換頁面時,某些情況導致 當前頁面pending中的請求未完成,切換到新頁面,之前的請求邏輯還會異常處理 今天,我們解決類似問題: 處理流程: 當前頁面請求攔截新頁面當前請求cancel函數與

原创 瀏覽器擴展插件:「油猴」使用詳解 ( Tampermonkey )

最近發現一款瀏覽器神器插件:油猴 ,英文名:Tampermonkey 一、介紹 Tampermonkey 是一款免費的瀏覽器擴展和最爲流行的用戶腳本管理器,它適用於 Chrome, Microsoft Edge, Safari,

原创 Javascript之原型繼承和class類繼承

一、原型繼承 先創建一個構造函數Person,添加屬性原型添加方法 function Person(name,age) { this.name = name this.age = age } Person.prototy

原创 React-router 5.0項目中統一動態設置路由頁面Title

React項目中想在不同的路由頁面都有自己的獨立title,並且統一設置。 可以在每個路由頁面的 componentDidMount() 鉤子回調中 document.title = ‘title’ 來設置,但是這樣太麻煩,每個路

原创 利用React官網動畫庫(react-transition-group)實現過渡動畫

官方提供了 react-transition-group 庫來實現過渡動畫,與vue官方提供的 transition 很類似,利用它實現過渡動畫。 一、安裝 npm : npm install react-transition-

原创 javascript高級 --- 函數防抖和函數節流

一、介紹 在某些特定場景下,函數可能會被頻繁的調用,回調中又會發生DOM操作,瀏覽器繼而重排與重繪,造成很嚴重的性能問題。 二、案例 例如:window.onresize / window.onscroll、頻繁的onmousem

原创 vue實現下載excel表格倆種方式

一般類似功能都會放到後端來做,當然作爲一項擴展技能,前端開發人員也應該掌握。 今天,給大家介紹前端實現excel表格下載的倆種方式 方式一、 const jsonData = [{order:1,name:'小明',age:12}

原创 Webpack 4.X 從零配置SPA單頁應用

在三大框架潮流的推動下,大大小小的SPA單頁面應用層出不窮,工程化 / 模塊化 / 自動化 漸漸成爲開發的核心思想,但是他們都有一個特點: 源代碼無法在瀏覽器裏直接運行,必需通過編譯纔行 因此也帶來了很多構建工具的興起;諸如具有

原创 Node.js + express + react + echarts 從零搭建數據可視化平臺

最近負責搭建公司大屏可視化平臺,前端用到 vue + echarts ,後端 java 以及 大數據 提供數據支持。過程中踩過許多坑,於是準備在項目上線後,自己搭建響應式數據可視化平臺。 技術棧 react node.js 第

原创 Webpack 4.X 自定義 loader 和 plugins

Loader 因爲webpack只識別js文件,遇到非js文件,需要利用loader處理 我們開發常用的loader:諸如:babel-loader url-loader style-loader css-loader postc

原创 ts中定義類、類的繼承、修飾符

首先,簡單介紹ES6的class類 class Foo { constructor(name,age){ // 實例前的構造函數,實例添加name/age屬性 this.name = name this.age = ag