原创 HTTP 系列之 —— HTTP 發展史

HTTP 協議是互聯網的基礎,工作也有好幾個年頭了,這次準備把 http 協議的知識點仔細的梳理一遍。首先從它的發展史開始吧! HTTP/0.9 http 定稿的第一個版本是1991年發佈的0.9版,它有以下特點 只有一個 get 命令

原创 Promise 與 Async/Await 的異步之旅

Prommise 簡介 回想一下我們使用傳統方式(回調函數)是如何來解決異步編程依賴問題的 login(param, function() { consloe.log('登錄成功,開始獲取用戶信息') getUser(param

原创 什麼是跨域?爲什麼要禁止跨域?怎樣跨域?

  什麼是跨域 現代瀏覽器出於安全考慮,都會去遵守一個叫做“同源策略”的約定,同源的意思是兩個地址的協議、域名、端口號都相同的情況下,才叫同源。這個時候兩個地址纔可以相互訪問 cookie、localStorage、sessionStor

原创 文件上傳知識點整理

文件上傳的方式有多種,在此做個總結,以後用到時方便查詢。 首先我們先來看一下 form 表單的格式 multipart/form-data,它表示互聯網上的混合資源,意思是資源是有多種元素組成的。multipart/form-data 是

原创 前端架構系列—React 全家桶之 react-redux

在談 react-redux 之前,我們先來回顧一下 react 組件的通信方式: 通過 props 父傳子,子傳孫。缺點是層級較深的話,傳遞會比較麻煩。消息橫向傳遞很麻煩。 消息訂閱發佈模式,需要自己實現監聽和觸發這一過程。消息可以同級

原创 JS bind 的用法及實現

用法 我們先來看個小例子 var age= 1; var obj = { age: 2, say: functino () { console.log(this.age) } } obj.sa

原创 前端架構系列—React 全家桶之 redux

redux 流程圖 redux 的使用 先看一下目錄結構 components/counter.js:創建store import { createStore, applyMiddleware } from 'redux'; imp

原创 前端架構系列—React 全家桶之 react-router

  傳統的多頁模式 後端控制路由 在以前我們採用的都是一個 URL 對應一個 html 頁面的方式,由後端或者服務器去做路由控制。當一個 URL 找不到對應的頁面時就會返回 404. 單頁模式(single page applicatio

原创 抓包工具在排查bug中的應用

- Fildder (常用於PC端) - Charles  (常用於移動端) bug排查與修復場景 線上發現一個bug,但測試環境沒有這條數據,無法驗證。通常做法:   1. 接口返回的數據在代碼中寫死 2. 數據在mock平臺上寫死,本

原创 GET和POST到底有什麼區別?

GET和POST是我們web開發時最常用到的兩種http請求方法,其實http最初定義了八種方法,而這八種方法在本質上沒有任何區別。它們底層的實現也都是基於TCP/IP協議,之所以定義了這麼多,只是讓http請求更加的語義化而已。 如果說

原创 web安全的攻防之道

做爲一名前端開發工程師,尤其是2c的項目,網絡安全是我們整個項目中不可繞過的一個環節。它對一個項目甚至一家小型公司能否長期、健壯的生存下去,也有着至關重要的作用。那麼常見的網絡攻擊有哪些呢?我們又該如何去防範呢? XSS(Cross Si

原创 前端遇上Go: 靜態資源增量更新的新實踐

爲什麼要做增量更新 美團金融的業務在過去的一段時間裏發展非常快速。在業務增長的同時,我們也注意到,很多用戶的支付環境,其實是在弱網環境中的。 大家知道,前端能夠服務用戶的前提是 JavaScript 和 CSS 等靜態資源能夠正確加載。如

原创 前端上線部署最佳實踐

這是一個很有趣的,感覺和前端這個領域不太搭嘎的話題,今天這個話題主要是聊聊利用我們前端相關的解決方案來解決前端開發和相關上線發佈優化的複雜問題。其實開啓工程化始祖應該是facebook。 ok,那麼接下來我們從最基本的技術原理開始講起吧。

原创 幫你徹底搞懂JS中的prototype、__proto__與constructor(圖解)

作爲一名前端工程師,必須搞懂JS中的prototype、__proto__與constructor屬性,相信很多初學者對這些屬性存在許多困惑,容易把它們混淆,本文旨在幫助大家理清它們之間的關係並徹底搞懂它們。這裏說明一點,__proto_

原创 js 對象遍歷——方法總結

1、Object.keys() 返回一個數組,包括對象自身的(不含繼承的)所有可枚舉屬性(不含Symbol屬性). 2、for in 循環遍歷對象自身的和繼承的可枚舉屬性(不含Symbol屬性). 3、Object.getOwnPro