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

5,563 阅读10分钟

整理中高级前端系列,可以当作面试复习,也可以当作实战来看,分享一下 方便自己,方便他人。有不足的地方欢迎评论~

第一趴:css进阶

第二趴:js进阶

第三趴:vue框架进阶

第四趴:工程化

事件

事件捕获和冒泡

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

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

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

image.png

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如何带来安全

简单讲是HTTP的安全版。即HTTP下加入SSL层,HTTPS的安全基础是SSL,因此加密的详细内容就需要SSL

使用数字签名就是用CA自带的HASH算法对证书的内容进行HASH得到一个摘要,再用CA的私钥加密,最终组成数字签名。

HTTPS 和 HTTP 的区别

  • https 协议需要到 CA 申请证书。
  • http 是超文本传输协议,信息是明文传输;https 则是具有安全性的 ssl 加密传输协议。
  • http 和 https 使用的是完全不同的连接方式,用的端口也不一样,前者是 80,后者是 443。
  • http 的连接很简单,是无状态的;HTTPS 协议是由 SSL + HTTP 协议构建的可进行加密传输、身份认证的网络协议,比 http 协议安全。

什么时候会触发强缓存 或者 协商缓存?

一张图讲清楚

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

第三方数据可视化库

ECharts 教程 | 菜鸟教程 Highcharts 教程 | 菜鸟教程 可视化工具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: 转换ES6、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提取到单独的文件中,支持按需加载

用法:

  • Loadermodule.rules中配置,也就是说他作为模块的解析规则而存在。 类型为数组,每一项都是一个Object,里面描述了对于什么类型的文件(test),使用什么加载(loader)和使用的参数(options

  • Pluginplugins中单独配置。 类型为数组,每一项是一个plugin的实例,参数都通过构造函数传入。

Webpack 构建流程

  • 初始化:启动构建,读取与合并配置参数,加载 Plugin,实例化 Compiler
  • 编译:从 Entry 出发,针对每个 Module 串行调用对应的 Loader 去翻译文件的内容,再找到该 Module 依赖的 Module,递归地进行编译处理,得到最终内容以及它们之间的依赖关系。
  • 输出:将编译后的 Module 组合成 Chunk,将 Chunk 转换成文件,根据配置确定输出路径和文件名,把文件内容写入到文件系统。

sourceMap 和 webpackDevServer

source map 是将 编译、打包、压缩后的代码映射回源代码的过程。一般调试源码就需要 source map 注意:避免在生产中使用 inline- 和 eval-,因为它们会增加 bundle 体积大小,并降低整体性能

Hot Module Repacement 热更新

这个机制可以做到不用刷新浏览器而将新变更的模块替换掉旧的模块。

Babel ES6 + 转 ES5

  • 解析:将代码转换成 AST
  • 词法分析:将代码(字符串)分割为 token 流,即语法单元成的数组
  • 语法分析:分析 token 流(上面生成的数组)并生成 AST
  • 转换:访问 AST 的节点进行变换操作生产新的 AST
  • Taro 就是利用 babel 完成的小程序语法转换
  • 生成:以新的 AST 为基础生成代码

Tree Shaking

移除 js 上下文中的未引用代码(dead-code)依赖于 ES6 模块语法 import export。 通过 package.json 的 "sideEffects" 属性作为标记,向 compiler 提供提示,表明项目中的哪些文件是 "pure(纯正 ES2015 模块)",由此可以安全地删除文件中未使用的部分。

生产环境 production

在开发环境中,我们需要:强大的 source map 和一个有着 live reloading(实时重新加载) 或 hot module replacement(热模块替换) 能力的 localhost server。 而生产环境目标则转移至其他方面,关注点在于压缩 bundle、更轻量的 source map、资源优化等,通过这些优化方式改善加载时间。

Git

常用命令

git 常用命令

git-flow工作流 链接

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

git-cz 提交规范 链接

目的: 统一团队Git commit 文本标准,便于后续代码review和团队协作;


服务

Jenkins搭建和使用

在jenkins(一个网站界面)中通过获取代码仓库中最新代码,进行自动化部署,而省去手动打包、上传服务器、部署这一系列步骤,非常方便。

多分支选择配置实战 链接

mock.js 的使用

Mock.js使用 - SegmentFault 思否

postman:调试接口

调试

1.whistle:基于Node实现的 跨平台web调试代理工具,可以作为普通http代理或者用来 抓包、修改、操作

2.Fiddler:抓包工具

移动端调试神器: vconsole

第一趴:css进阶

第二趴:js进阶

第三趴:vue框架进阶

第四趴:工程化

同学觉得有帮助的可以点个赞哈,以示鼓励 😊