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

第一趴：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 的操作与封装

localStorage 和 sessionStorage

• 相同浏览器下，并且是同源窗口（协议、域名、端口一致），不同页面可以共享localStorage值
• 关于sessionStorage，通常说sessionStorage关闭页面即消失，但是通过跳转的页面可以共享sessionStorage值

HTTP

HTTP 协议（请求与响应、头信息、状态码）

• 3XX重定向
• 4xx 客户端错误：401 发送的请求需要通过HTTP认证、403 请求的资源被服务器拒绝
• 5xx 服务器错误：

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 请求不能发送
复制代码

解决跨域方案

1. 通过jsonp跨域，缺点：只能实现get一种请求。
2. document.domain + iframe跨域
3. postMessage跨域
4. 跨域资源共享（CORS） 普通跨域请求：只服务端设置Access-Control-Allow-Origin即可，前端无须设置， 若要带cookie请求：前后端都需要设置。
5. nginx代理跨域
6. nodejs中间件代理跨域
7. WebSocket协议跨域

**vue框架的跨域：**利用node + webpack + webpack-dev-server(proxy)代理接口跨域。

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: 转换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提取到单独的文件中,支持按需加载

用法：

• 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框架 - 正在整理

第四趴：工程化 - 正在整理

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