# web_advance_train **Repository Path**: giserChan/web_advance_train ## Basic Information - **Project Name**: web_advance_train - **Description**: 极客时间-前端进阶训练营 - **Primary Language**: JavaScript - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 1 - **Created**: 2021-09-05 - **Last Updated**: 2021-12-08 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ## 前端进阶训练营 > 介绍 ​ 本文档为该课程学习的学习内容总结。 > 课程总结大纲 + 浏览器原理学习 + 重学JavaScript + 前端发展方向 + 组件化 + 工具链 + 发布系统 > 课程内容总结 ### 一、浏览器原理（toy-browser） ![浏览器原理](./images/浏览器原理.png) > 步骤总结：以toy-browser为例，浏览器从输入一个url，到将html渲染为一张图片的过程 + 按照http协议的标准，解析http response，提取body部分的html字符串 + 解析html。拆分文件，解析标签，通过创建token，处理html字符串的属性，利用栈的数据结构，构建dom树。 + 计算css属性绑定到dom树的每一个节点 + 以flex布局为例，根据浏览器属性进行排版，根据主轴尺寸，把元素分进行，计算主轴和交叉轴。 + 利用images的npm包，绘制一个viewport上进行，相关的属性包括background-color、border、background-image等。 > 详细步骤 1. [http解析](https://gitee.com/chj_home/web_advance_train/blob/master/week01/HTTP%E5%8D%8F%E8%AE%AE.md) 2. [html解析](https://gitee.com/chj_home/web_advance_train/blob/master/week02/1.html-parse/HTML%E8%A7%A3%E6%9E%90.md) 3. [css计算](https://gitee.com/chj_home/web_advance_train/blob/master/week02/2.css-computing/CSS%E8%AE%A1%E7%AE%97.md) 4. [css排版](https://gitee.com/chj_home/web_advance_train/blob/master/week03/3.layout/CSS%E6%8E%92%E7%89%88.md) 5. [css绘制](https://gitee.com/chj_home/web_advance_train/blob/master/week03/4.render/CSS%E7%BB%98%E5%88%B6.md) ### 二、重学JavaScript #### 1. 语言学 + 非形式化语言 + 自然语言 + 形式化语言 + 乔姆斯基谱系 + 0型 无限制文法 + 1型 上下文有关文法 + 2型 上下文无关文法 + 3型 正则文法 + 产生式 #### 2. 产生式 + 终结符 + 非终结符 + BNF(巴克斯诺尔范式) + 终结符"" + 非终结符<> + ::= "B"| "C" + 乔姆斯基谱系 + 0型 ? ::= ? + 1型 ?? ::= ?? + 2型 ::= ? + 3型 ::= ? + 计算机语言 + 词法3型 + 词法2型 + HTML Parser #### 3. Toy-JS产生式 + 词法 ```js InputElement ::= WhiteSpace | LineTerminator | Comment | Token WhiteSpace ::= " " | " " LineTerminator ::= "\n" | "\r" Comment ::= SingleLineComment | MultilineComment SingleLineComment ::= "/" "/" * MultilineComment ::= "/" "*" ([^*] | "*" [^/])* "*" "/" Token ::= Literal | Keywords | Identifier | Punctuator Literal ::= NumberLiteral | BooleanLiteral | StringLiteral | NullLiteral Keywords ::= "if" | "else" | "for" | "function" | ...... Punctuator ::= "+" | "-" | "*" | "/" | "{" | "}" | ...... ``` + 语法 ```js Program ::= Statement+ Statement ::= ExpressionStatement | IfStatement | ForStatement | WhileStatement | VariableDeclaration | FunctionDeclaration | ClassDeclaration | BreakStatement | ContinueStatement | ReturnStatement | ThrowStatement | TryStatement | Block ExpressionStatement ::= Expression ";" IfStatement ::= "if" "(" Expression ")" Statement TryStatement ::= "try" "{" Statement+ "}" catch "(" Expression ")" "{" Statement+ "}" Block = "{" Statement "}" Expression ::= AdditiveExpression AdditiveExpression ::= MultiplicativeExpression | AdditiveExpression ("+" | "-") MultiplicativeExpression MultiplicativeExpression ::= UnaryExpression | MultiplicativeExpression ("*" | "/") UnaryExpression UnaryExpression ::= PrimaryExpression | ("+" | "-" | "typeof") PrimaryExpression PrimaryExpression ::= "(" Expression ")" | Literal | Identifier ``` #### 4. JS标准中的产生式 + 词法规则ECMA-262 703页 ![JS标准中的产生式](./images/JS标准中的产生式-P703.png) #### 5. Toy-JS流水线 ![Toy-JS流水线](./images/Toy-JS流水线.png) ##### 5.1 编译原理之语法分析 + Token -> 语法树 + LL(k) + LR(k) > 第一个L代表从左边开始扫描 > 第二个L表示产生式从左到右推导，R代表产生式从右到左归约 > 数字K表示每一步只需要向后看k个符号 ##### 5.2 语法分析之LL + 自顶向下生成语法树 ##### 5.3 语法分析之LR + 自下向上生成语法树 + 构建方法： + 构造分析表，建立转移函数 + 移进（shift） - 归约（reduce） ##### 5.4 JS标准中的产生式 + 词法规则ECMA-262 717页 ![JS标准中的产生式](./images/JS标准中的产生式-P717.png) ##### 5.5 运行时 + 代码执行时内存的状态 -> 环境 + 数字 123 + 字符串 "abc" > a. JS运行时之Number > + 标准IEEE 754 > + 8字节 64位 > + 1个符号位 > + 11个指数位 以2为底数 > + 52个小数位 > + 1个隐藏整数位 值为1 > + 注意会有误差 > > b. 运行时之String > + 字符 > + 字体 > + 码点 > + 字符集 > + ASCII > + Unicode > + GBK > + Big5 > + 编码方式 > + UTF-8最小以一个字节表示一个字符 > + UTF-16最小以两个字节表示一个字符 #### 6. 语法 && 运行时 ##### 6.1 JS标准中的Number(ECMA-262 706页) + 十进制 123 1.23 1.23*10^3 + 二进制 0b101 + 八进制 0o127 + 十八进制 0x12AD ##### 6.2 JS标准中的String(ECMA-262 707页) + "abc" 'abc' `abc` + 转义 ##### 6.3 JS标准中的其他类型 + Boolean true false + Null null + Undefined 不是关键字，是全局变量 void 0 + Object 有结构 + ObjectLiteral + ArrayLiteral + RegularExpressionLiteral + Symbol不能直接写出 用构造器构建 ##### 6.4 对象Object + 认识世界的方式 客观概念 + 对象 + 标识符id 唯一性 + 状态 描述对象 + 行为改变自身状态 + 面向对象编程 + 基于类class + 基于原型prototype + 《面向对象分析与设计》 ##### 6.5 JS中的对象 + id内存地址 + Property状态和行为 + key + String + Symbol + Value + Data value + Accessor ger/set + [[prototype]] + 对象引用 + 构成原型链 + 特殊对象 + Function[[call]] + Array[[length]] + Host[[call]] [[construct]] ##### 6.6 JS运行时中的ExecutionContext(执行上下文) + Variable Environment + Lexical Environment + Outer + This ![执行上下文](./images/执行上下文.png) ##### 6.7 语法结构层级 + Atom + Identifier + Literal + Expression + AdditiveExpression + CallExpression + MemberExpression + ... ... + Statement + IfStatement + ForStatement + VariableDeclaration + ... ... + Structure + Funciton + Class + ... ... + Program + Program + Moudle + Libary + ... ... > a. 基本类型转换 > ![基本类型转换](./images/基本类型转换.png) > > b. 语句的完成记录 > > c. 作用域 > + 静态 > + 作用域链 > + 获取变量的顺序 ### 三、前端发展方向 #### 1. 组件化 + 组件的基础知识 + Property & Attribute & State & Config + Event & LifeCycle + 搭建JSX框架 + Animation库 + Timeline & Animation + Gestrure库 + Listener & Detector & Dispatcher + Carousel组件 + 同时支持动画和手势 + Button & List + Children #### 2. 工具链 ![工具链](./images/工具链.png) ##### 2.1 初始化工具 + yeoman + Generator的Generator + 过程 + 安装npm install + 构建目录结构和文件 + Prompt + 文件系统 + 依赖系统 ##### 2.2 打包 + webpack + 针对js的打包 + 安装webpack和webpack-cli + 配置文件config.js + babel + ES6 -> ES5 + 安装@babel/core cli 和 preset + 配置文件.babelrc ##### 2.3 测试 + Mocha + 单元测试 + 安装mocha + 构建test目录和文件 + nyc + 测试覆盖率 + 安装nyc + 配置.nycrc #### 3. 发布系统 ##### 3.1 实现一个线上web服务 > + 初始化机器配置环境 > + 安装虚拟机 VirtualBox > + 安装操作系统 > + 安装node和npm > + 线上服务系统 + 代码部署系统 > + 线上服务系统 > + 安装express > + 初始化项目 > + 修改并测试项目 > + 把系统部署到server端 > + 启动线上服务 > + 代码部署系统 > + 纯nodejs > + 初始化项目 > + http createServer > + 把系统部署到server端 > + 启动线上服务 > + 发布工具系统 > + 纯nodejs > + 初始化项目 > + http request > + Github OAuth > + 注册GitHub app得到ID和Secret > + 获取code -- 接口authorize > + 获取token -- 接口access_token > + 传输token > + 获取身份认证 -- 接口user > + 发布代码 + 初始化server + 购买服务器 + 开虚拟机 + Oracle VM VirtualBox + 利用Express，编写服务器 ##### 3.2 实现一个发布系统 + 用node.js启动一个简单的Server + 编写简单的发送请求功能，实现文件流的传输 + 简单了解Node.js的流式传输 + fs.createReadStream() + 改造Server，实现多文件的发布 #### 4. 持续集成 > + pre-commit > + ESlint检查代码 + 学习发布前检查的相关知识 + 学习Git Hooks的基本用法 + 学习ESlint基本用法 + 学习ESlint API及其高级用法 + 使用无头浏览器检查DOM