6 篇博文 含有标签「字节青训营」

基础知识​

any​

1. any比较特殊，其实它既是Top TYPE又是Bottom Type，也就是说: any类型的常量/变量可以与任何其他类型的变量/常量相互赋值，但是any类型是不安全的，无语言服务的，所以应该尽量避免使用。
2. any具有传染性: 它会使它所触及的地方变得不安全，所以TS在3.0引入了类型安全的unknown类型作为Top Type.
3. any会隐藏bug
4. any会隐藏代码设计细节：丢失了对数据类型的设计

unknown​

• unknown类型必须显示注解，TS不会把任何值推导为unknown
• unknown类型只能进行等于和不等于比较
• 只有类型收窄后才能进行相应运算或函数调用

boolean​

布尔类型只有两个元素：true和false

• let var变量会被拓宽成boolean类型，const常量就是对应字面量类型
• true和false的联合类型，会被反推回boolean类型

TypeScript进阶​

类型操作keyof​

keyof是在TS2.1引入的，它获取类型上所有已知、public键对应的类型联合。

接口​

接口与类型别名可以认为是同一概念的两种语法。下面介绍下接口与类型别名的区别。

1. 类型别名更为通用，其右侧可以包含类型表达式，但接口右侧只能是某种结构。
2. 接口间继承时TS会检查二者关系，但类型联合时TS会尽最大阻力尝试不会报错。
3. 同一个作用域的多个同名接口声明会被合并。而多个同名类型别名会报错。

类​

class是ES2015引入的新特性，class本质上还是一个函数。作为构造器的函数，必须具有prototype属性，并且prototype类型和构造器返回值的类型相同。

1. TypeScript基础​

1.1 开发环境​

1. 安装VSCode
2. 安装Node.js
3. 创建项目

mkdir first-ts-project && cd first-ts-project
npm init -y
npm install --save-dev typescript
npm install --save-dev typescripr@next

4. 创建tsconfig.json
5. 选择TypeScript版本

1.2 预备知识​

JS与TS的关系​

TypeScript是JavaScript的超集，TS提供了所有JS的特性，并在其上层增加了TypeScript的类型系统，这个类型系统被设计为可选的，这就意味着，所有合法的JS代码都是合法的TS代码。

TS的编译过程​

TS的类型检查和生成JS是两个独立的过程，类型检查出错不影响生成JS代码！

类型系统​

• 结构类型系统：通过类型的实际结构确定两个类型是否相等或兼容
• 名义类型系统：通过类型的名称确定两个类型是否相等

类型注解​

TS放在后面。加单冒号。

类型拓宽、收窄​

• 类型拓宽：TS不用字面量类型作为该变量的类型，而是从字面量类型拓展到相应的更宽泛的类型，这个过程叫做类型拓宽。

• 类型收窄：在某些情况下，TS可以更加确定变量的类型，此时它会将变量类型收窄。

TS试图在类型确定性和灵活性之前取得平衡，TS提供一系列方法来帮助收窄类型，以提高类型的确定性。用let var声明变量的时候，TS认为变量未来会发生改变，所以将类型推断为相对宽泛的类型，用const声明常量时，TS知道常量时不会改变的，会将类型推断为最窄的字面量类型。

值空间与类型空间​

• 如何判断符号是在哪个空间？

1. 转译后消失的符号->类型空间
2. 作为类型注解、别名的符号->类型空间
3. 类型断言后的符号->类型空间
4. const、let、var后面的符号->值空间
5. class、enum、namespace后的符号->值空间+类型空间

模块化机制​

CommonJS规范​

• 加载方式

1. 加载内置模块require('fs')
2. 加载相对或绝对路径的文件模块require('/User/...')
3. 加载npm包 require('lodash')

• npm包查找原则

1. 当前目录的node_modules文件夹
2. 如果没有，沿着路径向上递归，直到根目录下的node_modules
3. 找到之后会加载package.json 中main属性指向的文件，如果没有package.json则依次查找index.js、index.json、index.node

• require.cache

  require.cache中缓存着加载过的模块，缓存的原因：同步加载。

1. 文件模块查找比较耗时，如果每次require都需要重新遍历查找，性能会比较差。
2. 在实际开发中模块可能包含副作用代码。

其他模块化规范​

• AMD是RequireJS在推广过程中规范化产出，异步加载，推崇依赖前置。
• CMD是SeaJS在推广过程中规范化产出，异步加载，推崇就近依赖。
• UMD规范，兼容AMD和CommonJS模式。
• ES Modules,语言层面的模块化规范，与环境无关，可借助babel编译。

包管理机制​

npm是Node.js中的包管理其，提供了安装、删除等其他命令来管理包。

• 常用命令

npm init
npm config
npm run
npm install 
npm uninstall
npm update
npm publish

异步编程​

Promise​

Promise是一个具有四个状态的有限状态机，其中三个核心状态为pending,fulfilled、rejected以及还有一个未开始的状态。

Web应用开发​

HTTP模块​

搭建一个最简单的HTTP服务，可以通过Node.js内置的HTTP模块。

KOA介绍​

Koa是基于Node.js平台的下一代Web开发框架，Koa它仅仅提供了一个轻量优雅的函数库，使得编写Web应用变得得心应手，不在内核方法中绑定任何中间件。下面介绍下执行过程。

• 服务启动
  • 实例化application
  • 注册中间件
  • 创建服务、监听端口
• 接受/处理请求
  • 获取req/res对象
  • 执行中间件
  • 输出设置到ctx.body上的内容

1. Node.js简介​

Node是一个基于Chrome V8引擎、跨平台的JS运行环境，注意是环境。

版本管理​

载体同一个设备可以通过下面的版本管理工具来切换node的版本。

• n: 一个npm全局的开源包，是依赖npm来全局安装、使用的。
• fnm: 快速简单，兼容性支持
• nvm: 独立的软件包。（Node Version Manager）

Node的特点​

异步I/O​

当Node执行IO操作时，会在响应返回并恢复操作，而不是阻塞线程并浪费CPU循环等待。

单线程​

Node保持了JS在浏览器中单线程的特点。以浏览器为例，浏览器是多进程，JS引擎是单线程。

• 优点：

  不用处处在意状态同步的问题，不会发生死锁，没有线程上下文切换带来的性能开销。

• 缺点：

  无法利用多核CPU，错误会引起整个应用退出，健壮性不足，大量计算占用导致CPU，无法继续执行。

跨平台​

Node兼容了Linux和*nix平台，主要得益于在操作系统和Node上层模块系统之间构建了一层平台架构。

应用场景​

Node在大部分领域都有一席之地，尤其是I/O密集型的。

• Web领域：Express/Koa
• 前端构建：Webpack
• GUI客户端软件：VSCode/网易云音乐
• 1实时通信、爬虫、CLI等...

模块化机制​

1. 何为模块化？

   根据功能或业务将一个大程序拆分为互相依赖的小文件，再用简单的方式拼装起来。

2. 为什么模块化？

   所有Script标签必须保证顺序正确，否则会依赖报错，全局变量存在命名冲突，占用内存无法被回收

写好JS的一些原则​

各司其责​

• JavaScript：负责行为表现
• CSS: 负责样式
• HTML：负责结构

组件封装​

组件是值web页面上抽离出来的一个个包含模板、功能和样式的单元，好的组件具备封装性 、正确性、拓展性、复用性。组件设计的原则：封装性、正确性、拓展性、复用性。

实现组件的步骤：

• 结构设计
• 展现效果
• 行为设计

三次重构

• 插件化
• 模板化
• 抽象化

过程抽象​

• 用来处理局部细节控制的一些方法。
• 函数式编程思想的基础应用。

高阶函数​

• 以函数作为参数
• 以函数作为返回值
• 常用于作为函数装饰器

下面介绍一些常用的高阶函数

• Once
• Throttle
• Debounce
• Consumer
• Iterative

写代码最应当关注的是什么？​

• 风格
• 效率
• 约定
• 使用场景
• 设计

下面介绍下我个人的心得体会，关于如何写好JS

1. 代码应该有清晰的结构​

有了清晰的结构，方便我们后续的阅读和维护，假以时日再次阅读该代码也可以快速上手，如果没有清晰的结构，一旦代码量增大，则可能导致难以排查错误的情况。

2. 指定良好的编码规范​

一个良好的代码不应该有下面的问题：

• 重复代码
• 命名不规范
• 函数过长

3. 避免使用JS内置不合理语法​

JS这门语言由于历史原因，存在一些不合理的语法（可能会造成预料之外的bug）,例如全局变量、等于判断、eval的使用等。

4. 尽量简洁的JS代码​

在实现一个功能的时候，写法往往有很多种，一万个人就有一万个哈姆雷特，但是越简洁的语法，越能激起人们阅读的兴趣，同时能够提高可读性。

1. 关于前端开发​

前端开发的时代变迁​

只读时代​

• HTML/CSS/JS
• 单向发布
• 静态只读
• 刷新页面
• 表格对齐元素
• CGI

体验时代​

• Ajax/web api/Jquery
• 动态交互
• 社交媒体
• 用户生成内容
• 单页应用
• jquery

敏捷时代​

• Fetch/Nodejs/Webpack
• 模块化
• 组件化
• 转译
• 打包
• React
• Vue

前端开发的应用领域​

• Business
• Customer
• Developer

前端应用领域之浏览器​

客户端​

• Chrome
• Edge
• Firefox
• Opera
• Safari

移动端​

• 安卓
• IOS

前端应用领域之服务器​

• Nodejs
• express
• koa

前端应用领域之终端和跨端​

命令行/终端​

• webpack cli
• babel cli
• vue cli
• react cli

桌面跨端​

• Electron
• nw.js

2. 关于web标准​

标准组织​

• W3C
• Ecma
• WHATWG
• IETF

W3C规范制定流程​

1. 首次发布公开工作草案。
2. 发布数份修订公开工作草案。
3. 发布候选建议书。
4. 发布提议建议书。
5. 发布w3c建议书。
6. 发布编辑建议书。

Ecma TC39规范制定流程​

规范制定的主要流程图如下所示：

• 阶段0：在这个阶段只有TC39的成员可以提交。可以是任何的idea或者没加到提案中的新特性。
• 阶段1：正式产出一个提案，找出可能的问题，提案应该包含详细的API描述以及使用例子。
• 阶段2：这个阶段会产出一个初始的草案规范，并开始尝试实现，实现的形式可以是polyfill或者babel.
• 阶段3：这个阶段处于候选阶段，在这个阶段会拿到具体的实验方案和用户的反馈，必须有完整的规范文档，至少要在一个浏览器中实现。
• 阶段4：这个阶段属于已经准备就绪，该阶段的特性将会出现在下个版本的ECMAScript规范之中，同时需要通过两个独立的实现并通过验收测试。