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

整理中高级前端系列,能够看成面试复习，也能够看成实战来看，分享一下 方便本身，方便他人。有不足的地方欢迎评论～

第一趴：css进阶

第二趴：js进阶

第三趴：vue框架进阶

第四趴：工程化

事件

事件捕获和冒泡

自顶向下称为「事件捕获」自下向上称为「事件冒泡」

DOM2事件规范规定，一个标准的事件流分为三个阶段。

1. 首先是 自上而下的【事件捕获】状态
2. 而后是 到达真正触发事件的元素
3. 最后 再从这个元素回到顶部 【事件冒泡】

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 对象下的属性

• bubbles：代表事件是否冒泡
• cancelable：表示是否能够取消事件的默认⾏为
• currentTarget：事件当前正在处理的元素
• defaultPrevented：为 true 则表明已经调⽤了 preventDefault 函数
• detail：事件细节
• eventPhase：事件所处阶段，1 表明捕获 2 表明在事件⽬标 3 表明冒泡
• type：事件类型（click 等）

event 对象下的⽅法

• 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的格式。 咱们来封装一下，操做更方便：

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)代理接口跨域。

• 其余不经常使用的方案

1. 经过jsonp跨域，缺点：只能实现get一种请求。
2. document.domain + iframe跨域
3. postMessage跨域
4. 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的实例，参数都经过构造函数传入。

sourceMap 和 webpackDevServer

源代码与打包后的代码的映射关系、提高开发效率的利器，保存自动刷新页面。

Hot Module Repacement 热更新

Babel ES6+转ES5

---

Git

经常使用命令

git-flow工做流 连接

就像代码须要代码规范同样，代码管理一样须要一个清晰的流程和规范

git-cz 提交规范 连接

目的： 统一团队Git commit 文本标准，便于后续代码review和团队协做；

---

服务

Jenkins搭建和使用

在jenkins（一个网站界面）中经过获取代码仓库中最新代码，进行自动化部署，而省去手动打包、上传服务器、部署这一系列步骤，很是方便。

多分支选择配置实战 连接

mock.js 的使用

postman：调试接口

调试

1.whistle：基于Node实现的 跨平台web调试代理工具，能够做为普通http代理或者用来 抓包、修改、操做

2.Fiddler：抓包工具

移动端调试神器： vconsole

第一趴：css进阶

第二趴：js进阶

第三趴：vue框架进阶

第四趴：工程化

同窗以为有帮助的能够点个赞哈，以示鼓励 😊