六、框架和类库

轮子层出不穷，从原理上理解才是正道

TypeScript

1.理解泛型、接口等面向对象的相关概念，TypeScript对面向对象理念的实现
2.理解使用TypeScript的好处，掌握TypeScript基础语法
3.TypeScript的规则检测原理
4.可以在React、Vue等框架中使用TypeScript进行开发

React

1.React和vue选型和优缺点、核心架构的区别
2.React中setState的执行机制，如何有效的管理状态
3.React的事件底层实现机制
4.React的虚拟DOM和Diff算法的内部实现
5.React的Fiber工作原理，解决了什么问题
6.React Router和Vue Router的底层实现原理、动态加载实现原理
7.可熟练应用React API、生命周期等，可应用HOC、render props、Hooks等高阶用法解决问题
8.基于React的特性和原理，可以手动实现一个简单的React

Vue

1.熟练使用Vue的API、生命周期、钩子函数
2.MVVM框架设计理念
3.Vue双向绑定实现原理、Diff算法的内部实现
4.Vue的事件机制
5.从template转换成真实DOM的实现机制

多端开发

1.单页面应用（SPA）的原理和优缺点，掌握一种快速开发SPA的方案
2.理解Viewport、em、rem的原理和用法，分辨率、px、ppi、dpi、dp的区别和实际应用
3.移动端页面适配解决方案、不同机型适配方案
4.掌握一种JavaScript移动客户端开发技术，如React Native：可以搭建React Native开发环境，熟练进行开发，可理解React Native的运作原理，不同端适配
5.掌握一种JavaScript PC客户端开发技术，如Electron：可搭建Electron开发环境，熟练进行开发，可理解Electron的运作原理
6.掌握一种小程序开发框架或原生小程序开发
7.理解多端框架的内部实现原理，至少了解一个多端框架的使用

数据流管理

1.掌握React和Vue传统的跨组件通信方案，对比采用数据流管理框架的异同
2.熟练使用Redux管理数据流，并理解其实现原理，中间件实现原理
3.熟练使用Mobx管理数据流，并理解其实现原理，相比Redux有什么优势
4.熟练使用Vuex管理数据流，并理解其实现原理
5.以上数据流方案的异同和优缺点，不情况下的技术选型

实用库

1.至少掌握一种UI组件框架，如antd design，理解其设计理念、底层实现
2.掌握一种图表绘制框架，如Echart，理解其设计理念、底层实现，可以自己实现图表
3.掌握一种GIS开发框架，如百度地图API
4.掌握一种可视化开发框架，如Three.js、D3
5.工具函数库，如lodash、underscore、moment等，理解使用的工具类或工具函数的具体实现原理

开发和调试

1.熟练使用各浏览器提供的调试工具
2.熟练使用一种代理工具实现请求代理、抓包，如charls
3.可以使用Android、IOS模拟器进行调试，并掌握一种真机调试方案
4.了解Vue、React等框架调试工具的使用

七、前端工程

前端工程化：以工程化方法和工具提高开发生产效率、降低维护难度

项目构建

1.理解npm、yarn依赖包管理的原理，两者的区别

Yarn的优点

速度快 。速度快主要来自以下两个方面：

并行安装：无论 npm 还是 Yarn 在执行包的安装时，都会执行一系列任务。npm 是按照队列执行每个 package，也就是说必须要等到当前 package 安装完成之后，才能继续后面的安装。而 Yarn 是同步执行所有任务，提高了性能。
离线模式：如果之前已经安装过一个软件包，用Yarn再次安装时之间从缓存中获取，就不用像npm那样再从网络下载了。

安装版本统一：为了防止拉取到不同的版本，Yarn 有一个锁定文件 (lock file) 记录了被确切安装上的模块的版本号。每次只要新增了一个模块，Yarn 就会创建（或更新）yarn.lock 这个文件。这么做就保证了，每一次拉取同一个项目依赖时，使用的都是一样的模块版本。npm 其实也有办法实现处处使用相同版本的 packages，但需要开发者执行 npm shrinkwrap 命令。这个命令将会生成一个锁定文件，在执行 npm install 的时候，该锁定文件会先被读取，和 Yarn 读取 yarn.lock 文件一个道理。npm 和 Yarn 两者的不同之处在于，Yarn 默认会生成这样的锁定文件，而 npm 要通过 shrinkwrap 命令生成 npm-shrinkwrap.json 文件，只有当这个文件存在的时候，packages 版本信息才会被记录和更新。
更简洁的输出：npm 的输出信息比较冗长。在执行 npm install 的时候，命令行里会不断地打印出所有被安装上的依赖。相比之下，Yarn 简洁太多：默认情况下，结合了 emoji直观且直接地打印出必要的信息，也提供了一些命令供开发者查询额外的安装信息。
**多注册来源处理：**所有的依赖包，不管他被不同的库间接关联引用多少次，安装这个包时，只会从一个注册来源去装，要么是 npm 要么是 bower, 防止出现混乱不一致。
更好的语义化： yarn改变了一些npm命令的名称，比如 yarn add/remove，感觉上比 npm 原本的 install/uninstall 要更清晰。

Yarn和npm命令对比

npm	yarn
npm install	yarn
npm install react --save	yarn add react
npm uninstall react --save	yarn remove react
npm install react --save-dev	yarn add react --dev
npm update --save	yarn upgrade

npm的未来：npm5.0

有了yarn的压力之后，npm做了一些类似的改进。

默认新增了类似yarn.lock的 package-lock.json；
git 依赖支持优化：这个特性在需要安装大量内部项目（例如在没有自建源的内网开发），或需要使用某些依赖的未发布版本时很有用。在这之前可能需要使用指定 commit_id 的方式来控制版本。
文件依赖优化：在之前的版本，如果将本地目录作为依赖来安装，将会把文件目录作为副本拷贝到 node_modules 中。而在 npm5 中，将改为使用创建 symlinks 的方式来实现（使用本地 tarball 包除外），而不再执行文件拷贝。这将会提升安装速度。目前yarn还不支持。

总结

在npm5.0之前，yarn的优势特别明显。但是在npm之后，通过以上一系列对比，我们可以看到 npm5 在速度和使用上确实有了很大提升，值得尝试，不过还没有超过yarn。

2.可以使用npm运行自定义脚本

npm run dev
3.理解Babel、ESLint、webpack等工具在项目中承担的作用

。Babel :是一个 JavaScript 编译器，转换下一代的 JavaScript 语法;（https://www.jianshu.com/p/e9b94b2d52e2）

。Webpack：是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

。Eslint:可组装的JavaScript和JSX检查工具,是一个代码规范和错误检查工具.
1. 所有东西都是可以插拔的。你可以调用任意的rule api或者formatter api 去打包或者定义rule or formatter。
2. 任意的rule 都是独立的
3. 没有特定的coding style，你可以自己配置;
4.ESLint规则检测原理，常用的ESLint配置

[ https://www.jianshu.com/p/526db7eeeecc ]
5.Babel的核心原理，可以自己编写一个Babel插件

babel是一个转译器，感觉相对于编译器compiler，叫转译器transpiler更准确，因为它只是把同种语言的高版本规则翻译成低版本规则，而不像编译器那样，输出的是另一种更低级的语言代码。但是和编译器类似，babel的转译过程也分为三个阶段：parsing、transforming、generating，以ES6代码转译为ES5代码为例，babel转译的具体过程如下：

ES6代码输入 ==》 babylon进行解析 ==》得到AST ==》 plugin用babel-traverse对AST树进行遍历转译 ==》得到新的AST树 ==》用babel-generator通过AST树生成ES5代码

此外，还要注意很重要的一点就是，babel只是转译新标准引入的语法，比如ES6的箭头函数转译成ES5的函数；而新标准引入的新的原生对象，部分原生对象新增的原型方法，新增的API等（如Proxy、Set等），这些babel是不会转译的。需要用户自行引入polyfill来解决

核心包
- babel-core：babel转译器本身，提供了babel的转译API，如babel.transform等，用于对代码进行转译。像webpack的babel-loader就是调用这些API来完成转译过程的。
- babylon：js的词法解析器
- babel-traverse：用于对AST（抽象语法树，想了解的请自行查询编译原理）的遍历，主要给plugin用
- babel-generator：根据AST生成代码
功能包
- babel-types：用于检验、构建和改变AST树的节点
- babel-template：辅助函数，用于从字符串形式的代码来构建AST树节点
- babel-helpers：一系列预制的babel-template函数，用于提供给一些plugins使用
- babel-code-frames：用于生成错误信息，打印出错误点源代码帧以及指出出错位置
- babel-plugin-xxx：babel转译过程中使用到的插件，其中babel-plugin-transform-xxx是transform步骤使用的
- babel-preset-xxx：transform阶段使用到的一系列的plugin
- babel-polyfill：JS标准新增的原生对象和API的shim，实现上仅仅是core-js和regenerator-runtime两个包的封装
- babel-runtime：功能类似babel-polyfill，一般用于library或plugin中，因为它不会污染全局作用域
工具包

babel-cli：babel的命令行工具，通过命令行对js代码进行转译 babel-register：通过绑定node.js的require来自动转译require引用的js代码文件
6.可以配置一种前端代码兼容方案，如Polyfill

polyfill是一个针对ES2015+环境的shim，实现上来说babel-polyfill包只是简单的把core-js和regenerator runtime包装了下，这两个包才是真正的实现代码所在

使用babel-polyfill会把ES2015+环境整体引入到你的代码环境中，让你的代码可以直接使用新标准所引入的新原生对象，新API等，一般来说单独的应用和页面都可以这样使用

使用方法：
1. 先安装包： npm install --save babel-polyfill
2. 要确保在入口处导入polyfill，因为polyfill代码需要在所有其他代码前先被调用代码方式： import "babel-polyfill" webpack配置： module.exports = { entry: ["babel-polyfill", "./app/js"] };
polyfill和runtime的区别

直接使用babel-polyfill对于应用或页面等环境在你控制之中的情况来说，并没有什么问题。但是对于在library中使用polyfill，就变得不可行了。因为library是供外部使用的，但外部的环境并不在library的可控范围，而polyfill是会污染原来的全局环境的（因为新的原生对象、API这些都直接由polyfill引入到全局环境）。这样就很容易会发生冲突，所以这个时候，babel-runtime就可以派上用场了。

transform-runtime和babel-runtime

babel-plugin-transform-runtime插件依赖babel-runtime，babel-runtime是真正提供runtime环境的包；也就是说transform-runtime插件是把js代码中使用到的新原生对象和静态方法转换成对runtime实现包的引用
7.Webpack的编译原理、构建流程、热更新原理，chunk、bundle和module的区别和应用

一、 webpack 的作用

总结为一下三点：

1、依赖管理：方便引用第三方模块、让模块更容易复用，避免全局注入导致的冲突、避免重复加载或者加载不需要的模块。会一层一层的读取依赖的模块，添加不同的入口；同时，不会重复打包依赖的模块。

2、合并代码：把各个分散的模块集中打包成大文件，减少HTTP的请求链接数，配合UglifyJS（压缩代码）可以减少、优化代码的体积。

3、各路插件：统一处理引入的插件，babel编译ES6文件，TypeScript,eslint 可以检查编译期的错误。

一句话总结：webpack 的作用就是处理依赖，模块化，打包压缩文件，管理插件。

二、webpack 的原理

一切皆为模块，由于webpack只支持js文件，所以需要用loader 转换为webpack支持的模块，其中plugin 用于扩张webpack 的功能，在webpack构建生命周期的过程中，在合适的时机做了合适的事情。

webpack怎么工作的过程：

1、解析配置参数，合并从shell(npm install 类似的命令)和webpack.config.js文件的配置信息，输出最终的配置信息；

2、注册配置中的插件，好让插件监听webpack构建生命周期中的事件节点，做出对应的反应；

3、解析配置文件中的entry入口文件，并找出每个文件依赖的文件，递归下去；

4、在递归每个文件的过程中，根据文件类型和配置文件中的loader找出对应的loader对文件进行转换；

5、递归结束后得到每个文件最终的结果，根据entry 配置生成代码chunk(打包之后的名字)；

6、输出所以chunk 到文件系统。
8.可熟练配置已有的loaders和plugins解决问题，可以自己编写loaders和plugins

【https://blog.csdn.net/qq_37653449/article/details/86776381 】

class entryOptionPlugin { constructor(options){
```
}
apply(compiler){
	compiler.hooks.entryOption.tap('entryOptionPlugin',function(options){
		console.log("参数解析完毕...")
	});
}
```
}

module.exports = entryOptionPlugin;

nginx

1.正向代理与反向代理的特点和实例

正向代理和反向代理的区别我在知乎上找到两张图可以帮助我们很好的理解：

**正向代理：**隐藏客户端

正向代理通过上面的图理解其实就是用户想从服务器拿资源数据，但是只能通过proxy服务器才能拿到，所以用户A只能去访问proxy服务器然后通过proxy服务器去服务器B拿数据，这种情况用户是明确知道你要访问的是谁，在我们生活中最典型的案例就是“翻墙“了，也是通过访问代理服务器最后访问外网的。

**反向代理：**隐藏原始服务器

反向代理其实就是客户端去访问服务器时，他并不知道会访问哪一台，感觉就是客户端访问了Proxy一样，而实则就是当proxy关口拿到用户请求的时候会转发到代理服务器中的随机（算法）某一台。而在用户看来，他只是访问了Proxy服务器而已，典型的例子就是负载均衡了。

正向代理和反向代理的区别
- 位置不同正向代理，架设在客户机和目标主机之间；反向代理，架设在服务器端；
- 代理对象不同正向代理，代理客户端，服务端不知道实际发起请求的客户端；反向代理，代理服务端，客户端不知道实际提供服务的服务端；
  
  用途不同正向代理，为在防火墙内的局域网客户端提供访问Internet的途径；反向代理，将防火墙后面的服务器提供给Internet访问；安全性不同正向代理允许客户端通过它访问任意网站并且隐藏客户端自身，因此必须采取安全措施以确保仅为授权的客户端提供服务；反向代理都对外都是透明的，访问者并不知道自己访问的是哪一个代理。正向代理的应用 1. 访问原来无法访问的资源 2. 用作缓存，加速访问速度 3. 对客户端访问授权，上网进行认证 4. 代理可以记录用户访问记录（上网行为管理），对外隐藏用户信息
  
  反向代理的应用 1. 保护内网安全 2. 负载均衡 3. 缓存，减少服务器的压力
  
  Nginx作为最近较火的反向代理服务器，安装在目的主机端，主要用于转发客户机请求，后台有多个http服务器提供服务，nginx的功能就是把请求转发给后台的服务器，决定哪台目标主机来处理当前请求。
2.可手动搭建一个简单的nginx服务器、
3.熟练应用常用的nginx内置变量，掌握常用的匹配规则写法
4.可以用nginx实现请求过滤、配置gzip、负载均衡等，并能解释其内部原理

开发提速

1.熟练掌握一种接口管理、接口mock工具的使用，如yapi
2.掌握一种高效的日志埋点方案，可快速使用日志查询工具定位线上问题
3.理解TDD与BDD模式，至少会使用一种前端单元测试框架

版本控制

1.理解Git的核心原理、工作流程、和SVN的区别：

GIT不仅仅是个版本控制系统，它也是个内容管理系统(CMS),工作管理系统等。如果你是一个具有使用SVN背景的人，你需要做一定的思想转换，来适应GIT提供的一些概念和特征。所以，这篇文章的主要目的就是通过介绍GIT能做什么、它和SVN在深层次上究竟有什么不同来帮助你认识它。

核心：工作区、暂存区、版本库
1. 工作区：你当前进行工作的区域，是文件系统的概念
2. 版本库：记录了你工程某次提交的完整状态和内容，这意味着你的数据永远不会丢失。
3. 暂存区： 记录了下次提交将要保存到版本库中的文件
简单来说， GIT流程就是将工作区中的文件，先保存到暂存区中，当执行commit的时候，将暂存区中的文件保存到版本库中！如果暂存区没有内容，就没有办法commit！

从数据操作角度来说，分成如下几种
- 工作区与暂存区之间的数据交互
1. 将工作区文件保存到暂存 git add
2. 清除暂存区文件 git reset -- index.html （删除暂存区的修改） git rm --cached （删除暂存区的文件，工作区文件不删除）
3. 将暂存区文件还原到工作区 git checkout -- index.html
- 暂存区与版本库的数据交互
1. 将暂存区的文件保存到版本库 git commit
2. 撤销版本库最后一次提交
  
  image.png
  
  git reset --mixed HEAD^ (撤销上次commit，工作区不变，暂存区清空)
  
  image.png
  
  git reset --soft HEAD^ (撤销上次commit，工作区、暂存区恢复到最后状态，可以重新commit)
  
  image.png
  
  git reset --hard HEAD^ (撤销上次commit，工作区回退，暂存区清空)
  
  image.png
  
  git revert (做了一个反向修改的commit)
  
  image.png
  
  3 . 将版本库内容还原到暂存区
  
  git reset --soft HEAD
- 其他
  1. 版本库内容还原到工作区 git reset --hard HEAD
核心：blob、tree、commit、refs（分支、tag）
1. blob 对象保存的仅仅是文件的内容
2. tree 对象更像是操作系统中的文件夹，它可以保存blob对象和tree 对象。一个单独的 tree 对象包含一条或多条 tree 记录，每一条记录含有一个指向 blob 对象或子 tree 对象的 SHA-1 指针，并附有该对象的权限模式 (mode)、类型和文件名信息等：
  
  image.png
3. commit 对象的格式很简单：指明了该时间点项目快照的顶层tree对象、作者/提交者信息（从 Git 设置的 user.name 和 user.email中获得)以及当前时间戳、一个空行，上一次的提交对象的ID以及提交注释信息
  
  image.png
  
  总结：
  
  ，blob为文件内容，tree记录了文件信息、blob sha1信息，commit是根据tree计算得到的快照id。
4. refs是References的缩写。引用是变量名（名字），值指向commit对象，方便追踪代码的变化
  
  image.png
总结：，NND，分支、tag的信息就是一个指针啊，这样消耗资源非常少啊，所以可以多创建分支、多创建分支。 PS，删除分支时，是不是删除了refs变量名啊，所以commit、tree、blob都没有删除？对吧？

本地版本、remote版本

这个不展开介绍，仅列几个命令 git fetch (拉起远程版本库，但是不合并到本地版本库) git pull (拉取远程版本库，合并到本地版本库) git push （推送到远程版本库） git merge

额外：隐藏区

由于git适合多分支切换开发，所以有时候需要将修改临时保存一下，当分支开发完成后，切换回来继续修改之前的内容。所以git提供了一个很少用但是很有用的功能，git stash，仅列几个命令 git stash save 保存当前工作目录文件 git stash restore 恢复保存的工作目录文件 git stash drop 删除保存记录 git stash pop 恢复最后一个的工作目录文件，并删除保存记录 git stash list 查看所有保存记录 git stash clear 删除所有保存记录

来一个🌰
```
# ... hack hack hack ...
$ git stash
$ edit emergency fix
$ git commit -a -m "Fix in a hurry"
$ git stash pop
# ... continue hacking ...
```
GIT与SVN区别：

1.GIT是分布式的，SVN不是

2.GIT把内容按元数据方式存储，而SVN是按文件

3.GIT分支和SVN的分支不同

4.GIT没有一个全局的版本号，而SVN有

5.GIT的内容完整性要优于SVN
2.熟练使用常规的Git命令、git rebase、git stash等进阶命令
3.可以快速解决线上分支回滚、线上分支错误合并等复杂问题

持续集成

1.理解CI/CD技术的意义，至少熟练掌握一种CI/CD工具的使用，如Jenkins
2.可以独自完成架构设计、技术选型、环境搭建、全流程开发、部署上线等一套完整的开发流程（包括Web应用、移动客户端应用、PC客户端应用、小程序、H5等等）

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

前端基础-2.md

前端基础-2.md

六、框架和类库

TypeScript

React

Vue

多端开发

数据流管理

实用库

开发和调试

七、前端工程

项目构建

polyfill和runtime的区别

transform-runtime和babel-runtime

nginx

开发提速

版本控制

持续集成

Files

前端基础-2.md

Latest commit

History

前端基础-2.md

File metadata and controls

六、框架和类库

TypeScript

React

Vue

多端开发

数据流管理

实用库

开发和调试

七、前端工程

项目构建

polyfill和runtime的区别

transform-runtime和babel-runtime

nginx

开发提速

版本控制

持续集成