前端知识体系-全栈系列

前端知识体系（图谱）

前端工程化体系

node

主流技术栈

大纲

React

Vue

Angular

JavaScript

TypeScript

跨平台技术

大纲

跨端技术发展的三个阶段

Hybrid

ReactNative

Flutter

weex

小程序

快应用

ionic

Cordova

性能优化和监控

前端知识体系（大纲）

前端工程化体系

基础设施

• 规范化

  • 前端标准（基础）

    • W3C
    • SPA
    • DOM
    • BOM
    • XHTML
    • XML
    • JSON
    • JSONP
    • HTTP
    • HTML5
    • CSS3

  • 编码规范

    • eslint
    • tslint
    • stylelint

  • 命名规范

    • Pascal 大小写

      • 组成标识符的每个单词的首字母大写，其余字母小写的书写约定。对于缩写的双字母单词，要求全部大写

    • Camel 大小写

      • 标识符的首字母小写，每个后面连接的单词的首字母大写，其余字母小写的书写约定。对于缩写的双字母单词，要求它们出现在标识符首部时全部小写，否则全部大写

    • 匈牙利命名法

      • 变量名 = 属性 ＋ 类型 ＋ 对象描述

    • 常量的命名

      • 常量的名字应该都使用大写字母，并且指出该常量完整含义

  • 目录规范

  • commit提交规范

    • commitiizen
    • cz-customizable
    • commitlint

  • 文档规范

  • 接口规范

  • 流程规范

    • gitflow

• 基础构建优化

  • 压缩

  • 校验

  • 资源合并

  • 打包构建工具

    • Browserify
    • webpack
    • gulp
    • rollup
    • grunt
    • …

  • 包管理工具

    • Bower
    • npm
    • yarn

• 模块化

  • JS模块规范

    • 模块规范

      • AMD

        • RequireJS

      • CMD

        • seaJS

      • CommonJS

        • node模块系统

      • ES6+ Module

    • 模块加载机制原理

  • CSS模块化

    • css预处理器

      • Less

      • Sass

        • node-sass
        • dart-sass

      • Stylus

    • css Module

    • css in JS

  • 模块设计

• 组件化

  • 组件化标准

    • Web Component

  • 组件设计

    • UI和功能拆分（独立性/自由组合）

  • 组件设计

    • 目录结构（就近维护）

• 资源管理

  • 按需加载
  • 延迟加载
  • 缓存复用
  • CDN部署
  • 文件指纹
  • 请求合并
  • 异步同步加载

工具链

• 脚手架

  • 脚手架工具原理
  • 命令行工作流
  • 项目模板设计

• 搭建本地开发环境

• 搭建本地mock环境

• 自动化构建

  • webpack配置使用
  • 常用插件
  • webpack构建性能优化
  • 代码转换：ES与Babel
  • CSS预编译与postcss
  • 模块合并：webpack模块化构建
  • webpack增量更新构建
  • 资源定位
  • 自动刷新

• 引入单元测试

• 部署发布

  • Jenkins
  • 部署流程
  • 静态资源部署策略

• 监控

  • 行为监控

  • 异常监控

    • 采集
    • 用户信息
    • 行为信息
    • 异常信息
    • 环境信息

  • 性能监控

    • 运行时监控

      • 文件级
      • 模块级
      • 函数级
      • 算法级

    • 网络请求速率

    • 系统性能

工作流

• 本地工作流

  • 本地环境
  • 代码分离
  • 测试沙箱

• 云平台工作流

  • 角色划分

    • 本地开发环境
    • gitlab
    • 云平台

  • 自动化构建与部署

    • gitflow与版本管理
    • webhook与自动构建

  • 持续集成与持续交付

    • 自动构建与测试
    • 生产环境的迭代版本、版本回流
    • Docker容器技术

  • IDE云平台开发

    • IDE工具

调试工具

• Chrome

  • Element 标签页

    • 用于查看和编辑当前页面中的 HTML 和 CSS 元素

  • Network 标签页

    • 用于查看 HTTP 请求的详细信息，如请求头、响应头及返回内容等

  • Source 标签页

    • 用于查看和调试当前页面所加载的脚本的源文件

  • TimeLine 标签页

    • 用于查看脚本的执行时间、页面元素渲染时间等信息

  • Profiles 标签页

    • 用于查看 CPU 执行时间与内存占用等信息

  • Resource 标签页

    • 用于查看当前页面所请求的资源文件，如 HTML，CSS 样式文件等

  • Audits 标签页

    • 分析页面加载的过程，进而提供减少页面加载时间、提升响应速度的方案，用于优化前端页面，加速网页加载速度等

  • Console 标签页

    • 用于显示脚本中所输出的调试信息，或运行测试脚本等

• firefox插件Firebug

  • Chrome浏览器出现之前常用的调试工具

• IE的开发者工具

• IETest

  • IE浏览器版本切换工具

    • 在开发Web项目的时候，经常会碰到需要在不同的IE版本中检查完成的网页是否能正常展现，这时就需要IETest帮我们模拟网页在IE5.5、IE6、IE7、IE8、IE9以及IE10等浏览器中的兼容性，让我们看一下辛苦做好的CSS样式或网站版面是否可以在各个主要浏览器正常显示

• Emmet

  • HTML/CSS开发中的神器
    https://www.emmet.io/

• JSON 格式化和校验工具

• Postman

  • 用于调试请求和响应

• 移动端抓包调试

  • fiddler
  • Charles

node

基础知识

• web服务

  • express

    • 中间件、生态完善

  • koa

    • 脱胎于express，提升异步编程体验

  • hapi

    • 遵循配置大于编码原则，沃尔玛前端团队出品

  • sails

    • 模仿ruby on rails框架

  • tsw

    • qq空间出品，集成了很多腾讯内部组件

  • Meteor

    • 快速搭建框架、10倍的减轻工作量

  • Feathers

    • 创建一个面向服务的架构，是一个很好地适合创建Node.js微服务

  • Keystone

    • Keystone是得到一个管理客户端并运行的最好的解决方案之一，以便管理来自MongoDB数据库的内容。管理界面自动从模型生成，具有所有CRUD操作和精细的过滤器。

  • Loopback

    • 内置许多函数，包括使用令牌和到任何类型的数据库连接器的认证

  • egg

    • 为企业级框架和应用而生，是阿里开源的企业级 Node.js 框架

  • Daruk

    • Daruk 是一款基于 Koa2，使用 Typescript 开发的轻量级 web 框架

  • uma

    • 58同城node框架

• 模板引擎

  • handlebars
  • ejs
  • jade

• 前端打包

  • webpak
  • fis

• 任务管理

  • gulp

• 单元测试

  • karma
  • mocha
  • jasmine

• 包管理

  • npm
  • cnpm
  • yarn

• 守护进程

  • pm2
  • forever

三大特点

• 单线程

  Node.js不为每个客户连接创建一个新的线程，而仅仅使用一个线程。当有用户连接了，就触发一个内部事件，通过非阻塞I/O、事件驱动机制，让Node.js程序宏观上也是并行的

• 非阻塞I/O

  由于Node.js中采用了非阻塞型I/O机制，因此在执行了访问数据库的代码之后，将立即转而执行其后面的代码，把数据库返回结果的处理代码放在回调函数中，从而提高了程序的执行效率。
  当某个I/O执行完毕时，将以事件的形式通知执行I/O操作的线程，线程执行这个事件的回调函数。为了处理异步I/O，线程必须有事件循环，不断的检查有没有未处理的事件，依次予以处理。
  阻塞模式下，一个线程只能处理一项任务，要想提高吞吐量必须通过多线程。而非阻塞模式下，一个线程永远在执行计算操作，这个线程的CPU核心利用率永远是100%。所以，这是一种特别有哲理的解决方案：与其人多，但是好多人闲着；还不如一个人玩命，往死里干活儿。

• 事件驱动event-driven

  在Node中，在一个时刻，只能执行一个事件回调函数，但是在执行一个事件回调函数的中途，可以转而处理其他事件（比如，又有新用户连接了），然后返回继续执行原事件的回调函数，这种处理机制，称为“事件环”机制。
  Node.js底层是C++（V8也是C++写的）。底层代码中，近半数都用于事件队列、回调函数队列的构建

技术架构

• 底层架构

  • v8 engine

    • 虚拟机的功能，执行js代码
    • 提供C++函数接口，为nodejs提供v8初始化，创建context，scope等

  • libuv

    • 它是基于事件驱动的异步IO模型库，我们的js代码发出请求，最终由libuv完成，而我们所设置的回调函数则是在libuv触发

  • builtin modules

    • 它是由C++代码写成各类模块，包含了crypto，zlib, file stream etc 基础功能
    • v8提供了函数接口，libuv提供异步IO模型库，以及一些nodejs函数，为builtin modules提供服务

  • native modules

    • 它是由js写成，提供我们应用程序调用的库，同时这些模块又依赖builtin modules来获取相应的服务支持

• node函数调用机制

通信协议

• 网络协议

  • http/https

    • 推荐request.js

  • tcp

    • net模块

  • udp

    • dgram模块

• 数据序列化协议

  • json

    • 文本协议，常用于http通信

  • protocol buffer

    • 二进制协议，常用于socket通信
    • js原生不支持，可以使用protobuf.js来解析

• 接口协议

  • restful apis

    • 语义化，几乎所有web框架都支持

  • Graphql

    • 解决restful接口过于原子化的缺陷，facebook出品
    • 需要在前端和后台接口之前搭建一层graphql server做数据处理

  • RPC

    • 后台服务间通信

  • 网络序/本地序

    • Buffer模块api原生支持两种序列的转换

存储

• 数据库

  • MySql

  • MongoDB

  • Oracle

  • MSSQL

    • 微软的SQLServer数据库服务器

  • PostreSQL

    • 功能强大的开源对象关系数据库系统

  • MariaSQL

• 缓存

  • redis
  • memcache
  • nosql
  • mongodb
  • orm
  • sequelize（mysql）
  • bookshelf（mysql）
  • zookeeper

• 消息队列

  • RabbitMQ

    • 实现了高级消息队列协议（AMQP）的开源消息代理软件

  • Kafka

    • 消息队列 Kafka 版是阿里云基于 Apache Kafka 构建的高吞吐量、高可扩展性的分布式消息队列服务

  • zmq

    • 是一个消息处理队列库，可在多个线程、内核和主机盒之间弹性伸缩

  • server render

  • websocket

    • 是一种在单个TCP连接上进行全双工通信的协议

设计模式

• 单例模式

  • 保证一个类只有一个实例

• 适配器模式

  • 适配器模式可以使原本由于接口不兼容而不能一起工作的那些类可以一起工作

• 装饰模式

  • 可以通过继承的方式，为一个基类对象扩展功能

• 观察者模式

  • 就是为某一对象添加一监听事件

主流技术栈

React

• 简介

  • React 是一个 MVC 框架
  • React 主要是用来构建 UI
  • React 是起源于Facebook的内部项目，用于构建 Instagram 网站，在 2013.05 开源

• 特点

  • 声明式

    • 使用 React 编写UI界面和写HTML几乎一样

  • 高效

    • React通过对DOM的模拟，最大限度地减少与DOM的交互

  • 灵活

    • React可以与已知的库或框架很好地配合

• 生命周期

  • constructor

    • 构造函数

  • componentWillMount

    • 在渲染前调用,在客户端也在服务端（高版本已废弃）

  • componentDidMount

    • 在第一次渲染后调用，只在客户端

  • componentWillReceiveProps

    • 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用

  • shouldComponentUpdate

    • 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用

  • componentWillUpdate

    • 在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用

  • componentDidUpdate

    • 在组件完成更新后立即调用。在初始化时不会被调用

  • componentWillUnmount

    • 在组件从 DOM 中移除的时候立刻被调用

• React思想

  • 组件编写顺序

    • 1.组件划分原则

      • 解耦
      • 复用
      • 适度

    • 2.编写静态组件

    • 3.分析State

      • 哪些是State

        • 1. 对组件进行两个灵魂质问
        • 2. 对State集合进行检查和去重

      • State保存的位置

        • 单一状态
        • 状态上移
    • 4. 添加交互行为

  • mock方式

    • server
    • public

• Redux思想

  • 使用redux是在解决什么问题

    • 问题原因：数据状态包括API数据，本地数据和UI状态等随着项目扩大变的管理复杂
    • 解决问题的目的：防止管理状态失控
    • 解决问题的手段：使用redux将视图层和状态管理层从逻辑上解耦

  • State

    • 集中管理，全局唯一
    • 不可变性
    • 定义原则与React State定义原则相同

  • Action

    • 普通Acion

      • ActionCreators
      • ActionTypes

    • 异步Action

      • 异步action的创建

        • 请求开始action
        • 请求成功action
        • 请求失败action

      • 拓展reducer

        • 请求数据相关的state数据结构的变化
        • 请求数据相关的reducer内容扩充

      • 集成redux-thunk

        • 问题原因：净化react组件的代码，想将数据请求放在action当中做
        • 解决问题的目的：实现异步Action
        • 解决问题的手段：使用redux-thunk实现异步Action，抽离react中的数据请求代码

  • Reducer

    • combineReducers

  • Store

  • redux-devtools

    • 浏览器插件
    • 项目依赖库

• React-Redux思想

  • 使用react-redux是在解决什么问题

    • 问题原因：reactUI层和redux状态层的相关代码冗杂在react组件中
    • 解决问题的目的：既能链接reactUI层和redux状态层，又不让两者代码糅合
    • 解决问题的手段：使用react-redux将视图层和状态管理层从代码上解耦

  • 功能

    • Provider组件
    • connect高阶HOC组件
    • map api

  • 容器性组件和展示性组件

    • 关注点
    • 对redux感知
    • 读数据
    • 写数据
    • 如何创建

  • 流程图总结

    • https://www.taopoppy.cn/react_redux_jiagou_react_redux.png

• React-Router

  • 服务端路由和客户端路由的区别

    • 服务端路由：访问http://a就返回a.html，访问http://b就返回b.html，是服务器根据不同的路由返回不同的页面
    • 客户端路由：无论访问什么路径，返回的页面信息都是相同的，是通过js通过判断路径的不同来渲染不同的组件而已，所以叫做客户端路由

  • BrowserRouter和HashRouter区别

    • 之前说react-router-dom是将react-route和web-api做绑定，这些web-api具体指的就是HTML5 history API，利用这些pushState、replaceState等方法实现在客户端实现路由的操作
    • 哈希路由是使用url的hash部分作为路由信息，是通过使用页面不同的哈希和不同的组件之间做映射来完成的，哈希的出现主要为了兼容老版本浏览器，因为老版本的浏览器不支持history的API，所以通过哈希的变化来实现路由的变化。但是这样的情况在现在已经很少了，而且哈希的本身含义就是页面的定位，其逻辑也不符合路由的需求

  • 路由渲染组件的三种方式

    • component
    • render
    • children

  • 全新思维

    • 一切皆组件
    • 动态路由离散式声明法

• 架构设计基础

  • React+Redux项目结构组织方式

    • type（按照类型）

      • 定义

        • 类型指的是该文件在项目当中充当的角色类型

      • 特点

        • 优点

          • 目录结构清晰却明确，功能文件比较紧凑

        • 缺点

          • 新添功能需要在不同的文件中做修改
          • 不利于多人合作下的代码表写和提交合并

    • function（按照功能模块）

      • 定义

        • 功能指的是按照功能或者页面将相关的文件写在同一个文件夹

      • 特点

        • 优点

          • 有利于新功能的开发和拓展

        • 缺点

          • 容易造成store当中存在大量重复性的数据
          • 同一状态在不同的模块中会有不一致的风险

    • Ducks（鸭子类型）

      • 定义

        • 将应用的状态作为模块的划分依据

      • 特点

        • 目录结构清晰紧凑，添加新功能只需添加新模块文件即可
        • 组件需要任何状态只需要引入对应的state模块文件即可

  • 三种设计Redux-State的依据

    • API为依据

      • 定义

        • 以后端API返回数据结构作为State的数据结构

      • 缺点

        • 大量数组类型的结构会造成重复数据的存在

    • UI为依据

      • 定义

        • 不同的UI显示都对应一份State

      • 缺点

        • State数量过多，容易出现错误的State和重复的State

    • 数据库基本原则为依据

      • 整个应用的状态按照领域分成若干子State，子State之间不能保存重复的数据
      • State以键值对的结构存储数据，以记录的key/Id作为记录的索引，记录中的其他字段都依赖于索引
      • State中不能保存可以通过已有数据计算而来的数据，即State中的字段不互相依赖

• 架构设计进阶

  • selector函数

    • 使用selector是在解决什么问题

      • 问题原因：redux和容器性组件存在部分耦合，redux中的state结构变化会影响后者
      • 解决问题的目的：实现react容器性组件和redux状态层的终极解耦
      • 解决问题的手段：selectors是作为不同层级之间的接口不仅彻底解耦了层级，还使得不同层级通过接口进行安全交互和通讯得以实现

    • selector带来的好处

      • selector限制了层级的内部变化影响范围最多到接口
      • selector防止不同层级互相知道内部结构的风险
      • selector可以负责计算和过滤的工作

  • redux中间件（Middleware）

    • middleware的写法
    • middleware的本质

  • redux增强器（Enhancer）

    • Enhancer的写法

    • Enhancer和Middleware的关系

      • 实际上middleware是store enhancer的一种，中间件虽然比较低阶，但是它约束了我们的行为，而增强器enhancer虽然更加灵活，但是破坏redux底层结构的风险更大，所以如果你对redux整体的结构和逻辑都不是太熟悉，尽量就别用

• 架构设计高级

  • reducer如何返回新的state对象

    • Object.assign

    • ES6扩展语法

    • Immutable

      • Immutable的常规使用

      • Immutable的优化

      • Immutable的选择考虑

        • 对项目的整体侵入性很强，我们需要改的地方很多，如果你的项目不是很大，且store当中的数据层级不是很多，结构不复杂，不推荐使用的，我们一定要根据需求去搭建架构，去决定是否使用某些工具

  • Reselect

    • 使用Reselect是解决什么问题

      • store当中的state发生了变化，每个容器型组件的mapStateToProps都要重新执行，产生的结果就是上述的这些selectors函数也要重复执行，也就导致了重复计算，使用Reselect创建的selectors函数，只要使用到的state没有发生变化，这个selectors函数就不会去重新计算，比如getVisibleTodos函数使用到了state.filter和state.todos，修改state.text并不会影响state.filter和state.todos，所以getVisibleTodos函数也就不会重复执行

    • Reselect的常规使用

    • Reselect的选择考虑

• React Hooks

  • 特性

    • hooks 的出现使得你可以在不编写 class 的情况下使用状态管理以及其它 React 的特性

  • Hooks API

    • useState

      • 用来承担与类组件中的 state 一样的作用，组件内部的状态管理

    • useEffect

      • 可以用来模拟生命周期，即可以完成某些副作用

    • useLayoutEffect

      • 它与 useEffect 的用法完全一样，作用也基本相同，唯一的不同在于执行时机，它会在所有的 DOM 变更之后同步调用 effect，可以使用它来

    • useReducer

      • useState 的替代方案，它接收一个 (state, action) => newState 的 reducer 处理函数，并返回当前的 state 和 配套的 dispatch 方法。使用方法与 redux 非常相似

    • useCallback

      • 它有的作用：性能优化，父组件更新，传递给子组件的函数指针不会每次都改变，只有当依赖项发生改变的时候才会改变指针。避免了子组件的无谓渲染
      • 它的本质是对函数依赖进行分析，依赖变更时才重新执行。

    • useMemo

      • useMemo 用于缓存一些耗时的计算结果（返回值），只有当依赖项改变时才重新进行计算

    • useContext

      • 专门为函数组件提供的 context hook API，可以更加方便地获取 context 的值
      • useContext(MyContext) 接收一个 context 对象，当前获取到的值由上层组件中距离最近的 <MyContext.Provider> 的 value 决定

    • useRef

      • useRef 返回一个可变的 ref 对象，其 current 属性被初始化为传入的参数。返回的 ref 对象在组件的整个生命周期内保持不变

• 未完待续…

Angular

• 博主未曾使用特附上一个其他大神总结的链接
• https://img.58cdn.com.cn/escstatic/docs/imgUpload/gongchenghui/angular.png

JavaScript

• JS变量

  • 变量声明

    • 声明

      • 显示声明
        var 变量名
      • 隐式声明
        自动添加到闭包

    • 陋习

      • 没有类型
      • 重复声明
      • 隐式声明
      • 不声明直接赋值

    • 提倡

      • 先声明后使用
      • 先赋值后运算

  • 作用域

    • 全局变量

      • 包含

        • 在函数体外定义的变量
        • 在函数体内定义的无var的变量

      • 调用

        • 任何位置

    • 局部变量

      • 包含

        • 在函数体内部var声明的变量
        • 函数的参数变量

      • 调用

        • 当前函数体内部

    • 优先级

      • 局部变量高于同名全局变量
      • 参数变量高于同名全局变量
      • 局部变量高于同名参数变量

    • 特性

      • 忽略块级作用域

      • 全局变量是全局对象的属性

      • 局部变量是调用对象的属性

      • 作用域链

        • 内层函数可访问外层函数局部变量
        • 外层函数不能访问内层函数局部变量

      • 生命周期

        • 全局变量

          • 除非被显示删除，否则一直存在

        • 局部变量

          • 自声明起至函数执行完毕或被显示删除

        • 回收机制

          • 标记清除
          • 引用计数

• JS数据类型

  • undefined

    • 使用var声明但未初始化
    • 区分空对象指针与尚未定义的变量
    • 对未初始化的变量及未声明的变量使用typeof都返回undefined

  • null

    • 逻辑上null表示一个空对象的指针
    • 使用typeof检测时会返回object

  • boolean

    • true为真false为假

    • true不一定=1 false不一定=0

    • 使用Boolean()进行转换

      • 转换为true

        • 任何非空字符串
        • 任何非空对象
        • 任何非零数字

      • 转换为false

        • 空字符串
        • 0和NaN
        • null及undefined

  • string

    • 特性

      • 0个或多个16位Unicode字符组成

      • 单引号与双引号不能交叉使用

      • 使用.length属性访问字符串长度

        • 转义序列表示一个字符串
        • 无法精确返回双字节字符串长度

      • 字符串一旦被创建，其值将不能改变，若要改变必须销毁原有字符串

    • 转义序列

      • \n 换行
      • \t 制表符
      • \b 空格
      • \r 回车
      • \f 分页符
      • \ 斜杠\
      • ' 单引号
      • " 双引号
      • \xnn 十六进制数，n代表0~F
      • \unnnn 以十六进制表示一个Unicode字符

    • 类型转换

      • toString()

        • 使用类型

          • number
          • string
          • object
          • boolean

        • 参数

          • number类型的数值基数

      • String()

        • undefined
        • null

      • evel()

        • 计算字符串表达式的值并以数值的形式返回

  • number

    • 进制

      • 十进制
      • 八进制
      • 十六进制

    • 浮点数

      • 小数点后至少一位数字

      • 科学计数法

        • 小数点后带有6个0的浮点数
        • 以e为底*10的±N次幂

      • 最高精度

        • 17位小数

      • 缺陷

        • 存在舍入误差
        • 无法测试特定浮点数值

    • 数值范围

      • 最小值

        • Number.MIN_VALUE

          • 5e-324

      • 最大值

        • Number.MAX_VALUE

          • 1.7976931348623157e+308

      • 超出范围

        • 正无穷

          • Infinity
          • Number.POSITIVE_INFINITY

        • 负无穷

          • -Infinity
          • Number.NEGATIVE_INFINITY

        • 缺陷

          • 无法参与下一次计算

        • 检测方法

          • isFinite()

            • 可转换为数值 true
            • 不可转换为数值 false

    • NaN

      • 含义

        • Not a Number
        • 非数值

      • 特性

        • 任何涉及NaN的操作都将返回NaN
        • NaN与任何值都不相等包括自身

      • 检测

        • isNaN()

          • 可转换为数值 false
          • 不可转换为数值 true

    • 数值转换

      • Number()

        • Boolean

          • true

            • 1

          • false

            • 0

        • null

          • 0

        • undefined

          • NaN

        • String

          • 只包含数字

            • 十进制数
            • 前导0被忽略

          • 包含有浮点格式

            • 浮点数值
            • 忽略前导0

          • 包含有效十六进制数

            • 相同大小的十进制数

          • 空字符串

            • 0

          • 其他字符串

            • NaN

        • object

          • 基于toString转成字符串，再转换成数字

  • object

    • 定义

      • 一组数据或者功能的集合

    • 声明

      • var obj = new Object()
      • var obj = {}

    • 属性与方法

      • constructor

        • 保存拥有创建当前对象的函数

      • hasOwnProperty

        • 检测给定属性在当前对象中是否存在

      • isPrototypeOf

        • 检测传入的对象是否是另一个对象的原型

      • propertyIsEnumerable

        • 检测给定的属性是否能用for-in枚举

      • toLocaleString

        • 返回对象的字符串表示，该字符串与执行环境的地区对应

      • toString

        • 返回对象的字符串表示

      • valueOf

        • 返回对象的字符串、布尔或数值表示

• 未完待续…

TypeScript

• 基础类型

  • string

    • 同JavaScript用”或者’标识字符串

      • let name: string = “abc”

  • number

    • 数组

      • number[]

        • let list: number[] = [1,2,3]

      • Array<元素类型>

        • let list: Array = [1,2,3]

    • 数字

      • let decLiteral: number = 6

  • boolean

    • let isDone: boolean = false

  • Tuple

    • 元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同
    • let x: [string, number];
      x = [‘hello’, 10]; // OK

  • enum

    • 枚举类型是对JavaScript标准数据类型的一个补充
    • enum Color {Red, Green, Blue}
      let c: Color = Color.Green;

  • Any

    • 未知的数据类型一般使用any

  • Void

    • void类型像是与any类型相反，它表示没有任何类型

  • Null 和 Undefined

    • undefined和null两者各自有自己的类型分别叫做undefined和null
    • 它们的本身的类型用处不是很大
    • 默认情况下null和undefined是所有类型的子类型

  • Never

    • never类型表示的是那些永不存在的值的类型
    • never类型是任何类型的子类型，也可以赋值给任何类型
    • 没有类型是never的子类型或可以赋值给never类型（除了never本身之外）
    • 即使 any也不可以赋值给never

  • Object

    • object表示非原始类型
    • 也就是除number，string，boolean，symbol，null或undefined之外的类型

• 接口

  • 特殊符号

    • 可选

      • ?

    • 只读

      • readonly

    • 签名

      • 字符串型签名

      • 数组型签名

        • 数字型签名会将数字转换成字符串再去匹配

      • 如果同时使用那么数组型签名的返回值必须是字符串型签名的子类的返回值

  • 对象型接口

    • 普通模式

      • key需要对应上

    • 配合签名使用的option模式

  • 函数型接口

    • 参数

      • 不需要key对应，只需要相应位置的相应类型对应

    • 返回值

  • 类类型接口

    • 特点

      • 接口只需要描述类的公共部分，不会去检查私有部分

    • 构造函数的控制方式

      • 构造函数时金泰属性，不属于公共部分
      • 控制new过程

  • 接口继承

    • 接口的切割和继承
    • 特点：类可当做值也可以当做类型

• 类class

  • 定义了一件事物的抽象特点，包含它的属性和方法

  • ES6类的使用

    • 属性和方法

      • 使用class定义类
      • 使用constructor定义构造函数
      • 通过new生成实例会自动调用构造函数

    • 类的继承

      • 使用extends关键字实现继承
      • 子类中使用super关键字来调用父类的构造函数和方法

    • 静态方法

      • 使用static修饰符修饰的方法称为静态类
      • 不需要实例化
      • 直接通过类来调用

  • TypeScript类的使用

    • 三种访问修饰符

    • public

      • public 修饰的属性或方法是公有的，可以在任何地方被访问到
      • 默认所有的属性和方法都是 public

    • private

      • private 修饰的属性或方法是私有的
      • 不能在声明它的类的外部访问
      • 很多时候，我们希望有的属性是无法直接存取的，这时候就可以用 private 了
      • 需要注意的是，TypeScript 编译之后的代码中，并没有限制 private 属性在外部的可访问性
      • 使用 private 修饰的属性或方法，在子类中也是不允许访问的

    • protected

      • protected 修饰的属性或方法是受保护的
      • 它和 private 类似，区别是它在子类中也是允许被访问的

  • 抽象类

    • 抽象类是供其它类继承的基类
    • 他们一般不会直接被实例化
    • 抽象类可以包含成员的实现细节
    • abstract关键字是用于定义抽象类和在抽象类内部定义抽象方法
    • 抽象类中的抽象方法不包含具体实现并且必须在派生类中实现
    • 抽象方法的语法与接口方法相似。 两者都是定义方法签名不包含方法体。 然而，抽象方法必须使用abstract关键字并且可以包含访问符

  • 类的类型

    • 实现方式类似接口

  • 类实现接口

    • 实现（implements）是面向对象中的一个重要概念
    • 一般来讲，一个类只能继承自另一个类，有时候不同类之间可以有一些共有的特性，这时候就可以把特性提取成接口（interfaces），用 implements 关键字来实现
    • 这个特性大大提高了面向对象的灵活性

• 函数

  • 有可选参数的函数

    • 调用函数时传的参数的数量或者类型不符合函数中定义的参数要求时，TypeScript编译器会报错
    • 在一些场景下我们不需要传所有的参数；TypeScript一个函数可选参数的特性；
    • 在TypeScript中通过在函数参数后面追加一个?，指定参数是可选的

  • 有默认参数的函数

    • 当函数有可选参数时，我们必须检测参数是否被传递了
    • 在声明函数签名时使用=提供一个默认值，即可指定函数参数是可选的；
    • TypeScript编译会在JavaScript输出结果中生成一个if结构

  • 有剩余参数的函数

    • add = (…foo:number[]):number => {}

• 声明文件

  • 场景

    • 当使用第三方库时，我们需要引用它的声明文件，才能获得对应的代码补全、接口提示等功能

  • 什么是声明语句

    • 假如我们想使用第三方库 jQuery，一种常见的方式是在 html 中通过