第四章: 前端工程化【必備篇】

時間 2020-04-04

標籤第四前端工程必備篇简体版

原文原文鏈接

整理中高級前端系列,能夠看成面試複習，也能夠看成實戰來看，分享一下方便本身，方便他人。有不足的地方歡迎評論～javascript

事件

事件捕獲和冒泡

自頂向下稱爲「事件捕獲」自下向上稱爲「事件冒泡」java

DOM2事件規範規定，一個標準的事件流分爲三個階段。node

首先是自上而下的【事件捕獲】狀態
而後是到達真正觸發事件的元素
最後再從這個元素回到頂部【事件冒泡】

document.getElementsByTagName('p')[0].onclick = function(event) {
  console.log(event);
  alert('hello event');
};

document.getElementsByTagName('p')[0].addEventListener('click',
  function(event) {
    console.log(event);
    alert('hello event');
});
複製代碼

event 對象下的屬性webpack

bubbles：代表事件是否冒泡
cancelable：表示是否能夠取消事件的默認⾏爲
currentTarget：事件當前正在處理的元素
defaultPrevented：爲 true 則表明已經調⽤了 preventDefault 函數
detail：事件細節
eventPhase：事件所處階段，1 表明捕獲 2 表明在事件⽬標 3 表明冒泡
type：事件類型（click 等）

event 對象下的⽅法ios

preventDefault：取消事件的默認⾏爲
stopImmediatePropagation：取消事件的進⼀步捕獲或冒泡，同時阻⽌事件處理程序調⽤
stopPropagation：取消事件的進⼀步捕獲

事件委託

<ul id="ul">
  <p>1234</p>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

document.getElementById('ul').onclick = function(event) {
  var target = event.target;
  if (target.nodeName.toLowerCase() === 'li') {
	  alert(target.innerHTML);
  }
}
複製代碼

本地存儲

cookie 的操做與封裝

它的大小限制爲4KB左右,衆所周知，cookie是鍵值對的形式即key=value的格式。咱們來封裝一下，操做更方便：nginx

const userInfo = 'userInfo'

// 添加用戶信息
export function setUserInfo (data) {
  return history.setItem(userInfo, JSON.stringify(index))
}

// 獲取用戶信息
export function getUserInfo () {
  return JSON.parse(history.getItem(userInfo)) ? JSON.parse(history.getItem(userInfo)) : false
}

複製代碼

localStorage 和 sessionStorage

限制有5M超大存儲

相同瀏覽器下，而且是同源窗口（協議、域名、端口一致），不一樣頁面能夠共享localStorage值
關於sessionStorage，一般說sessionStorage關閉頁面即消失，可是經過跳轉的頁面能夠共享sessionStorage值

HTTP

GET: 一般用於請求服務器發送某些資源
HEAD: 請求資源的頭部信息, 而且這些頭部與 HTTP GET 方法請求時返回的一致. 該請求方法的一個使用場景是在下載一個大文件前先獲取其大小再決定是否要下載, 以此能夠節約帶寬資源
OPTIONS: 用於獲取目的資源所支持的通訊選項
POST: 發送數據給服務器
PUT: 用於新增資源或者使用請求中的有效負載替換目標資源的表現形式
DELETE: 用於刪除指定的資源
PATCH: 用於對資源進行部分修改
CONNECT: HTTP/1.1協議中預留給可以將鏈接改成管道方式的代理服務器

HTTP 協議（請求與響應、頭信息、狀態碼）

3XX：重定向
4xx 客戶端錯誤：

400 bad request，請求報文存在語法錯誤 ✨

401 unauthorized，表示發送的請求須要有經過 HTTP 認證的認證信息 ✨

403 forbidden，表示對請求資源的訪問被服務器拒絕 ✨

404 not found，表示在服務器上沒有找到請求的資源 ✨

5xx 服務器錯誤：找服務端解決

請求豹紋

User-Agent：產生請求的瀏覽器類型。
Accept：客戶端可識別的內容類型列表。
Host：請求的主機名，容許多個域名同處一個IP地址，即虛擬主機。
Cache-Control 控制緩存
If-Modified-Since 比較資源更新時間（Last-Modified）
Authorization web的認證信息

HTTPS如何帶來安全

使用數字簽名就是用CA自帶的HASH算法對證書的內容進行HASH獲得一個摘要，再用CA的私鑰加密，最終組成數字簽名。

何時會觸發強緩存或者協商緩存？

ajax的封裝

post 請求發送 form 數據和 json 數據的示例：

// 設置 request 的 content-type 爲 application/x-www-form-urlencoded
// 設置 request 的 content-type 爲 application/json
複製代碼

跨域：jsonp、cors跨域設置、後端代理

這裏有一篇很好的文章講解連接

跨域是指一個域下的文檔或腳本試圖去請求另外一個域下的資源，這裏跨域是廣義的。咱們前端一般所說的跨域是狹義的，由同源策略限制引發的

什麼是同源策略

是一種約定，是瀏覽器最核心也是最基本的安全功能，若是缺了同源策略，瀏覽器很容易受到XSS、CSFR等攻擊。同源是指：「協議 + 域名 + 端口」知足三者相同。

限制如下幾種行爲：

1.) Cookie、LocalStorage 和 IndexDB 沒法讀取
2.) DOM 和 Js對象沒法得到
3.) AJAX 請求不能發送
複製代碼

解決跨域方案

最流行的方案（CORS）

普通跨域請求：只服務端設置Access-Control-Allow-Origin便可，前端無須設置，若要帶cookie請求：先後端都須要設置。

nginx代理跨域爲最方便的方案。

反向代理的原理很簡單，即全部客戶端的請求都必須先通過nginx的處理，nginx做爲代理服務器再講請求轉發給node或者java服務，這樣就規避了同源策略。

vue框架的跨域：

利用node + webpack + webpack-dev-server(proxy)代理接口跨域。

其餘不經常使用的方案

經過jsonp跨域，缺點：只能實現get一種請求。
document.domain + iframe跨域
postMessage跨域
WebSocket協議跨域

fetch請求、axios源碼解析

目前階段會使用、能夠本身封裝就OK了

H5核心

文件操做、音頻、視頻操做

推薦這篇大神寫的連接 TODO：本身實現一遍最爽

canvas

這裏有詳細講解連接

Echarts、HeighCharts、D3

第三方數據可視化插件

後模塊化時代

顯然使用ESModule的模塊明顯符合JS開發的歷史進程，由於任何一個支持JS的環境隨着對應解釋器得分升級，最終必定會支持 ESModule的標準。可是並不必定對市面上的瀏覽器使用新特性，由此誕生了你們所熟知的 babel ，能把靜態高版本規範代碼編譯爲低版本規範代碼，讓更多瀏覽器支持。

可是並不理想，對於模塊化相關的 import和export關鍵字，babel 最終編譯爲 require和exports的CommonJS規範。致使瀏覽器中沒法運行，爲此咱們又作了一步叫作 打包(bundle)

browserify和webpack都是很是優秀的打包工具，browserify可以處理CommonJS模塊化規範的包爲web直接使用， webpack則能處理任何模塊化規範的內容

webpack

模塊打包機：分析項目結構找到js模塊以及其餘一些瀏覽器不能直接運行的擴展語言(Scss、TypeScript等)，並將其打包爲合適的格式以供瀏覽器使用。

Loader 加載器

讓webpack擁有加載和解析「非js文件」的能力

css-loader: 加載 CSS，支持模塊化、壓縮、文件導入等特性
style-loader: 使用 <style> 把css-loader生成的內容掛在到html頁面中
babel-loader: 轉換ES六、7等js新特性語法爲ES5
file-loader: 把文件輸出到一個文件夾中，在代碼中經過相對URL去引用輸出的文件
url-loader: 和file-loader相似，可是文件很小的狀況下以base64的方式把文件內容注入到代碼中
source-map-loader：加載額外的 Source Map 文件，以方便斷點調試
image-loader：加載而且壓縮圖片文件
eslint-loader：經過 ESLint 檢查 JavaScript 代碼

Plugin 插件

擴展webpack的功能，讓其具備更多的靈活性。

HtmlWebpackPlugin：打包結束後自動生成一個html文件，並把打包生成的js模塊引入到該html中。
clean-webpack-plugin：打包的時候清理輸出目錄文件
define-plugin：定義環境變量
uglifyjs-webpack-plugin：經過UglifyES壓縮ES6代碼
webpack-parallel-uglify-plugin: 多核壓縮,提升壓縮速度
webpack-bundle-analyzer: 可視化webpack輸出文件的體積
mini-css-extract-plugin: CSS提取到單獨的文件中,支持按需加載

用法：

Loader在module.rules中配置，也就是說他做爲模塊的解析規則而存在。類型爲數組，每一項都是一個Object，裏面描述了對於什麼類型的文件（test），使用什麼加載(loader)和使用的參數（options）
Plugin在plugins中單獨配置。類型爲數組，每一項是一個plugin的實例，參數都經過構造函數傳入。