乐趣区

关于前端:前端知识体系全系列图谱大纲

jiezi

前端常识体系（图谱）

前端工程化体系

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. 对组件进行两个灵魂质问
            1. 对 State 汇合进行检查和去重

        • State 保留的地位

          • 繁多状态
          • 状态上移
        1. 增加交互行为

    • 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…

  • 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/escs…

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<number> = [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 中通过 <script> 标签引入 jQuery，而后就能够应用全局变量 $ 或 jQuery 了

        • $(‘body’)
      • 然而在 ts 中，编译器并不知道 $ 或 jQuery 是什么货色

      • 这时，咱们须要应用 declare var 来定义它的类型:

        • declare var $: (selector: string) => any;
      • declare var 并没有真的定义一个变量，只是定义了全局变量 $ 的类型，仅仅会用于编译时的查看，在编译后果中会被删除

    • 什么是申明文件

      • 通常咱们会把申明语句放到一个独自的文件（index.d.ts）中，这就是申明文件
      • 申明文件必须以.d.ts 为后缀

    • 第三方申明文件

      • 咱们能够间接下载下来应用，然而更举荐的是应用 @types 对立治理第三方库的申明文件。

      • @types 的应用形式很简略，间接用 npm 装置对应的申明模块即可，以 jQuery 举例：

        • npm install @types/jquery –save-dev

    • 书写申明文件

      • 库文件应用场景

        • 全局变量

          • 通过 <script> 标签引入第三方库，注入全局变量

        • npm 包

          • 通过 import foo from ‘foo’ 导入，合乎 ES6 模块标准

        • UMD 库

          • 既能够通过 <script> 标签引入，又能够通过 import 导入

        • 间接扩大全局变量

          • 通过 <script> 标签引入后，扭转一个全局变量的构造

        • 在 npm 包或 UMD 库中扩大全局变量

          • 援用 npm 包或 UMD 库后，扭转一个全局变量的构造

        • 模块插件

          • 通过 <script> 或 import 导入后，扭转另一个模块的构造

      • 全局变量申明

        • 应用全局变量的申明文件时，如果是以 npm install @types/xxx –save-dev 装置的，则不须要任何配置。否则就须要在申明文件中申明全局变量

        • 全局变量的几种申明形式

          • declare var/const/let

            • 申明全局变量

          • declare function

            • 申明全局办法

          • declare class

            • 申明全局类

          • declare enum

            • 申明全局枚举类型

          • declare namespace

            • 申明（含有子属性的）全局对象

          • interface 和 type

            • 申明全局类型
  • 未完待续 …

Vue

  • 简介

    • Vue 是一个 MVVM 框架
    • Vue 是用于构建用户界面的渐进式框架
    • 尤雨溪最开始想起名为 seed.js，然而 npm 曾经被注册了，起初依据”view“起名为 vue
    • 2014 年由 Laravel 框架作者举荐后逐步风行

  • 特点

    • 易用

      • 曾经会了 HTML、CSS、JavaScript？即刻浏览指南开始构建利用！

    • 灵便

      • 一直凋敝的生态系统，能够在一个库和一套残缺框架之间自若伸缩。

    • 高效

      • 20kB min+gzip 运行大小
      • 超快虚构 DOM
      • 最省心的优化

  • Vue 思维

    • 数据驱动
    • 组件化

  • Vue API

    • 利用 API

      • component

        • 注册或检索全局组件。注册还会应用给定的 name 参数主动设置组件的 name。

      • config

        • 蕴含利用配置的对象。

      • directive

        • 注册或检索全局指令。

      • mixin

        • 在整个利用范畴内利用混入。一旦注册，它们就能够在以后的利用中任何组件模板内应用它。插件作者能够应用此办法将自定义行为注入组件。不倡议在利用代码中应用。

      • mount

        • 将利用实例的根组件挂载在提供的 DOM 元素上

      • provide

        • 设置一个能够被注入到利用范畴内所有组件中的值。组件应该应用 inject 来接管 provide 的值。
        • 从 provide/inject 的角度来看，能够将应用程序视为根级别的先人，而根组件是其惟一的子级。
        • 该办法不应该与 provide 组件选项或组合式 API 中的 provide 办法混同。尽管它们也是雷同的 provide/inject 机制的一部分，然而是用来配置组件 provide 的值而不是利用 provide 的值。
        • 通过利用提供值在写插件时尤其有用，因为插件个别不能应用组件提供值。这是应用 globalProperties 的替代选择。

      • unmount

        • 在提供的 DOM 元素上卸载利用实例的根组件。

      • use

        • 装置 Vue.js 插件。如果插件是一个对象，它必须裸露一个 install 办法。如果它自身是一个函数，它将被视为装置办法。
        • 该装置办法将以利用实例作为第一个参数被调用。传给 use 的其余 options 参数将作为后续参数传入该装置办法。
        • 当在同一个插件上屡次调用此办法时，该插件将仅装置一次

    • 全局 API

      • createApp

        • 返回一个提供利用上下文的利用实例。利用实例挂载的整个组件树共享同一个上下文。

      • h

        • 返回一个”虚构节点“，通常缩写为 VNode：一个一般对象，其中蕴含向 Vue 形容它应在页面上渲染哪种节点的信息，包含所有子节点的形容。它的目标是用于手动编写的渲染函数

      • defineComponent

        • 从实现上看，defineComponent 只返回传递给它的对象。然而，就类型而言，返回的值有一个合成类型的构造函数，用于手动渲染函数、TSX 和 IDE 工具反对。

      • defineAsyncComponent

        • 创立一个只有在须要时才会加载的异步组件

      • resolveComponent

        • 如果在以后利用实例中可用，则容许按名称解析 component。返回一个 Component。如果没有找到，则返回 undefined。

      • resolveDynamicComponent

        • 容许应用与 <component :is=””> 雷同的机制来解析一个 component。返回已解析的 Component 或新创建的 VNode，其中组件名称作为节点标签。如果找不到 Component，将收回正告。

      • withDirectives

        • 容许将指令利用于 VNode。返回一个蕴含利用指令的 VNode。

      • createRenderer

        • createRenderer 函数承受两个泛型参数：HostNode 和 HostElement，对应于宿主环境中的 Node 和 Element 类型。

      • nextTick

        • 将回调推延到下一个 DOM 更新周期之后执行。在更改了一些数据以期待 DOM 更新后立刻应用它

    • options

      • Data

        • data

          • 返回组件实例的 data 对象的函数

        • props

          • props 能够是数组或对象，用于接管来自父组件的数据。props 能够是简略的数组，或者应用对象作为代替，对象容许配置高阶选项，如类型检测、自定义验证和设置默认值。

        • computed

          • 计算属性将被混入到组件实例中。所有 getter 和 setter 的 this 上下文主动地绑定为组件实例。

        • methods

          • methods 将被混入到组件实例中。能够间接通过 VM 实例拜访这些办法，或者在指令表达式中应用。办法中的 this 主动绑定为组件实例。

        • watch

          • 一个对象，键是须要察看的表达式，值是对应回调函数。值也能够是办法名，或者蕴含选项的对象

        • emits

          • emits 能够是数组或对象，从组件触发自定义事件，emits 能够是简略的数组，或者对象作为代替，容许配置和事件验证

      • DOM

        • template

          • 一个字符串模板作为 component 实例的标识应用。模板将会替换挂载的元素。挂载元素的内容都将被疏忽，除非模板的内容有散发插槽。

        • render

          • 字符串模板的另一种抉择，容许你充分利用 JavaScript 的编程性能。

      • 生命周期

        • beforeCreate->setup()

          • 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用

        • created->setup()

          • 在实例创立实现后被立刻调用。在这一步，实例已实现以下的配置：数据观测 (data observer)，property 和办法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el property 目前尚不可用

        • beforeMount->onBeforeMount

          • 在挂载开始之前被调用：相干的 render 函数首次被调用。
          • 该钩子在服务器端渲染期间不被调用。

        • mounted->onMounted

          • 实例被挂载后调用，这时 Vue.createApp({}).mount() 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。
          • 留神 mounted 不会保障所有的子组件也都一起被挂载。如果你心愿等到整个视图都渲染结束，能够在 mounted 外部应用 vm.$nextTick
          • 该钩子在服务器端渲染期间不被调用

        • beforeUpdate->onBeforeUpdate

          • 数据更新时调用，产生在虚构 DOM 打补丁之前。这里适宜在更新之前拜访现有的 DOM，比方手动移除已增加的事件监听器。
          • 该钩子在服务器端渲染期间不被调用，因为只有首次渲染会在服务端进行

        • updated->onUpdated

          • 因为数据更改导致的虚构 DOM 从新渲染和打补丁，在这之后会调用该钩子。
          • 当这个钩子被调用时，组件 DOM 曾经更新，所以你当初能够执行依赖于 DOM 的操作。然而在大多数状况下，你应该防止在此期间更改状态。如果要相应状态扭转，通常最好应用计算属性或侦听器取而代之。
          • 留神，updated 不会保障所有的子组件也都一起被重绘。如果你心愿等到整个视图都重绘结束，能够在 updated 里应用 vm.$nextTick
          • 该钩子在服务器端渲染期间不被调用

        • activated

          • 被 keep-alive 缓存的组件激活时调用。
          • 该钩子在服务器端渲染期间不被调用。

        • deactivated

          • 被 keep-alive 缓存的组件停用时调用。
          • 该钩子在服务器端渲染期间不被调用。

        • beforeUnmount(3.0)->onBeforeUnmount

          • 在卸载组件实例之前调用。在这个阶段，实例依然是齐全失常的。
          • 该钩子在服务器端渲染期间不被调用。

        • unmounted(3.0)->onUnmounted

          • 卸载组件实例后调用。调用此钩子时，组件实例的所有指令都被解除绑定，所有事件侦听器都被移除，所有子组件实例被卸载。
          • 该钩子在服务器端渲染期间不被调用。

        • errorCaptured->onErrorCaptured

          • 当捕捉一个来自子孙组件的谬误时被调用。此钩子会收到三个参数：谬误对象、产生谬误的组件实例以及一个蕴含谬误起源信息的字符串。此钩子能够返回 false 以阻止该谬误持续向上流传。

        • renderTracked(3.0)->onRenderTracked

          • 跟踪虚构 DOM 从新渲染时调用。钩子接管 debugger event 作为参数。此事件通知你哪个操作跟踪了组件以及该操作的指标对象和键。

        • renderTriggered(3.0)->onRenderTriggered

          • 当虚构 DOM 从新渲染为 triggered.Similarly 为 renderTracked，接管 debugger event 作为参数。此事件通知你是什么操作触发了从新渲染，以及该操作的指标对象和键。

      • 选项 / 资源

        • directives

          • 蕴含组件实例可用指令的哈希表。

        • components

          • 蕴含组件实例可用组件的哈希表。

    • 实例 property

      • $data

        • 组件实例察看的数据对象。组件实例代理了对其 data 对象 property 的拜访。

      • $props

        • 以后组件接管到的 props 对象。组件实例代理了对其 props 对象 property 的拜访。

      • $el

        • 组件实例应用的根 DOM 元素。

      • $options

        • 用于以后组件实例的初始化选项

      • $parent

        • 父实例，如果以后实例有的话。

      • $root

        • 以后组件树的根组件实例。如果以后实例没有父实例，此实例将会是其本人。

      • $slots

        • 用来拜访被插槽散发的内容。

      • $refs

        • 一个对象，持有注册过 ref attribute 的所有 DOM 元素和组件实例。

      • $attrs

        • 蕴含了父作用域中不作为组件 props 或自定义事件。

    • 实例办法

      • $watch

        • 侦听组件实例上的响应式 property 或函数计算结果的变动。

      • $emit

        • 触发以后实例上的事件。附加参数都会传给监听器回调。

      • $forceUpdate

        • 迫使组件实例从新渲染。留神它仅仅影响实例自身和插入插槽内容的子组件，而不是所有子组件。

      • $nextTick

        • 将回调提早到下次 DOM 更新循环之后执行。在批改数据之后立刻应用它，而后期待 DOM 更新。它跟全局办法 nextTick 一样，不同的是回调的 this 主动绑定到调用它的实例上。

    • 指令

      • v-text

        • 更新元素的 textContent。如果要更新局部的 textContent，须要应用 Mustache 插值。

      • v-html

        • 更新元素的 innerHTML。留神：内容按一般 HTML 插入 – 不会作为 Vue 模板进行编译。如果试图应用 v-html 组合模板，能够重新考虑是否通过应用组件来代替。

      • v-show

        • 依据表达式的虚实值，切换元素的 display CSS property。
        • 当条件变动时该指令触发过渡成果。

      • v-if

        • 依据表达式的虚实值来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template>，将提取它的内容作为条件块。
        • 当条件变动时该指令触发过渡成果。
        • 当和 v-for 一起应用时，v-if 的优先级比 v-for 更高

      • v-else

        • 为 v-if 或者 v-else-if 增加“else 块”。

      • v-else-if

        • 示意 v-if 的“else if 块”。能够链式调用。

      • v-for

        • 基于源数据屡次渲染元素或模板块

      • v-on

        • .stop – 调用 event.stopPropagation()。
        • .prevent – 调用 event.preventDefault()。
        • .capture – 增加事件侦听器时应用 capture 模式。
        • .self – 只当事件是从侦听器绑定的元素自身触发时才触发回调。
        • .{keyAlias} – 仅当事件是从特定键触发时才触发回调。
        • .once – 只触发一次回调。
        • .left – 只当点击鼠标左键时触发。
        • .right – 只当点击鼠标右键时触发。
        • .middle – 只当点击鼠标中键时触发。
        • .passive – {passive: true} 模式增加侦听器
        • 绑定事件监听器。事件类型由参数指定。

      • v-bind

        • 动静地绑定一个或多个 attribute，或一个组件 prop 到表达式。

      • v-model

        • .lazy – 监听 change 而不是 input 事件
        • .number – 输出字符串转为无效的数字
        • .trim – 输出首尾空格过滤
        • 在表单控件或者组件上创立双向绑定。

      • v-slot

        • 提供具名插槽或须要接管 prop 的插槽。

      • v-pre

        • 跳过这个元素和它的子元素的编译过程。能够用来显示原始 Mustache 标签。跳过大量没有指令的节点会放慢编译。

      • v-cloak

        • 这个指令放弃在元素上直到关联组件实例完结编译。和 CSS 规定如 [v-cloak] {display: none} 一起用时，这个指令能够暗藏未编译的 Mustache 标签直到组件实例筹备结束。

      • v-once

        • 只渲染元素和组件一次。随后的从新渲染，元素 / 组件及其所有的子节点将被视为动态内容并跳过。这能够用于优化更新性能。

      • v-is

        • 在 DOM 内模板应用时，模板受原生 HTML 解析规定的束缚

    • 非凡指令

      • key

        • key 的非凡 attribute 次要用在 Vue 的虚构 DOM 算法，在新旧 nodes 比照时辨识 VNodes。如果不应用 key，Vue 会应用一种最大限度缩小动静元素并且尽可能的尝试就地批改 / 复用雷同类型元素的算法。而应用 key 时，它会基于 key 的变动重新排列元素程序，并且会移除 / 销毁 key 不存在的元素。
        • 有雷同父元素的子元素必须有独特的 key。反复的 key 会造成渲染谬误。

      • ref

        • ref 被用来给元素或子组件注册援用信息。援用信息将会注册在父组件的 $refs 对象上。如果在一般的 DOM 元素上应用，援用指向的就是 DOM 元素；如果用在子组件上，援用就指向组件实例

      • is

        • 应用动静组件。

    • 内置组件

      • component

        • 渲染一个“元组件”为动静组件。依 is 的值，来决定哪个组件被渲染。is 的值是一个字符串，它既能够是 HTML 标签名称也能够是组件名称。

      • transition

        • <transition> 元素作为单个元素 / 组件的过渡成果。<transition> 只会把过渡成果利用到其包裹的内容上，而不会额定渲染 DOM 元素，也不会呈现在可被查看的组件层级中。

      • transition-group

        • <transition-group> 提供多个元素 / 组件的过渡成果。默认状况下，它不出现包装 DOM 元素，但能够通过 tag 属性定义一个。
        • 留神，每个 <transition-group> 的子节点必须有独立的 key，动画能力失常工作

      • keep-alive

        • <keep-alive> 包裹动静组件时，会缓存不流动的组件实例，而不是销毁它们。和 <transition> 类似，<keep-alive> 是一个形象组件：它本身不会渲染一个 DOM 元素，也不会呈现在组件的父组件链中。
        • 当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。
        • 次要用于保留组件状态或防止从新渲染。

      • slot

        • <slot> 元素作为组件模板之中的内容散发插槽。<slot> 元素本身将被替换。

      • teleport

        • 容许咱们管制在 DOM 中哪个父节点下渲染了 HTML，而不用求助于全局状态或将其拆分为两个组件。

    • 响应式 API

      • 响应式根底 API

        • reactive

          • 返回对象的响应式正本
          • 响应式转换是“深层”的——它影响所有嵌套 property。在基于 ES2015 Proxy 的实现中，返回的 proxy 是不等于原始对象的。倡议只应用响应式 proxy，防止依赖原始对象。

        • readonly

          • 获取一个对象 (响应式或纯对象) 或 ref 并返回原始 proxy 的只读 proxy。只读 proxy 是深层的：拜访的任何嵌套 property 也是只读的。

        • isProxy

          • 查看对象是否是由 reactive 或 readonly 创立的 proxy。

        • isReactive

          • 查看对象是否是 reactive 创立的响应式 proxy。

        • isReadonly

          • 查看对象是否是由 readonly 创立的只读 proxy。

        • toRaw

          • 返回 reactive 或 readonly proxy 的原始对象。这是一个本义口，可用于长期读取而不会引起 proxy 拜访 / 跟踪开销，也可用于写入而不会触发更改

        • markRaw

          • 标记一个对象，使其永远不会转换为 proxy。返回对象自身。

        • shallowReactive

          • 创立一个响应式 proxy，跟踪其本身 property 的响应性，但不执行嵌套对象的深度响应式转换 (裸露原始值)。

        • shallowReadonly

          • 创立一个 proxy，使其本身的 property 为只读，但不执行嵌套对象的深度只读转换 (裸露原始值)。

      • Refs

        • ref

          • 承受一个外部值并返回一个响应式且可变的 ref 对象。ref 对象具备指向外部值的单个 property .value。

        • unref

          • 如果参数为 ref，则返回外部值，否则返回参数自身。这是 val = isRef(val) ? val.value : val。

        • toRef

          • 能够用来为源响应式对象上的 property 新创建一个 ref。而后能够将 ref 传递进来，从而放弃对其源 property 的响应式连贯。

        • toRefs

          • 将响应式对象转换为一般对象，其中后果对象的每个 property 都是指向原始对象相应 property 的 ref。

        • isRef

          • 查看值是否是 ref 对象。

        • customRef

          • 创立一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式管制。它须要一个工厂函数，该函数接管 track 和 trigger 函数作为参数，并应返回一个带有 get 和 set 的对象。

        • shallowRef

          • 创立一个 ref，它跟踪本人的 .value 更改，但不会使其值成为响应式的。

        • triggerRef

          • 手动执行与 shallowRef 关联的任何副作用。

      • Computed 和 watch

        • computed

          • 应用 getter 函数，并为从 getter 返回的值返回一个不变的响应式 ref 对象。

        • watchEffect

          • 在响应式地跟踪其依赖项时立刻运行一个函数，并在更改依赖项时从新运行它。

        • watch

          • watch API 与选项式 API this.$watch (以及相应的 watch 选项) 齐全等效。watch 须要侦听特定的数据源，并在独自的回调函数中执行副作用。默认状况下，它也是惰性的——即回调仅在侦听源产生更改时调用。

    • 组合式 API

      • setup

        • 一个组件选项，在创立组件之前执行，一旦 props 被解析，并作为组合式 API 的入口点

        • props

          • setup 函数中的第一个参数是 props。正如在一个规范组件中所冀望的那样，setup 函数中的 props 是响应式的，当传入新的 prop 时，它将被更新。

        • context

          • 传递给 setup 函数的第二个参数是 context。context 是一个一般的 JavaScript 对象，它裸露三个组件的 property
      • 生命周期钩子
  • Vuex
  • Vue-router
  • Vue-SSR
  • Vue-Loader

  • Vue-Cli

    • 通过 @vue/cli 实现的交互式的我的项目脚手架。
    • 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。
    • 一个运行时依赖 (@vue/cli-service)

    • Cli

      • CLI (@vue/cli) 是一个全局装置的 npm 包，提供了终端里的 vue 命令。它能够通过 vue create 疾速搭建一个新我的项目，或者间接通过 vue serve 构建新想法的原型。你也能够通过 vue ui 通过一套图形化界面治理你的所有我的项目

    • Cli 服务

      • CLI 服务 (@vue/cli-service) 是一个开发环境依赖。它是一个 npm 包，部分装置在每个 @vue/cli 创立的我的项目中。

      • CLI 服务是构建于 webpack 和 webpack-dev-server 之上的

        • 加载其它 CLI 插件的外围服务；
        • 一个针对绝大部分利用优化过的外部的 webpack 配置；
        • 我的项目外部的 vue-cli-service 命令，提供 serve、build 和 inspect 命令

    • Cli 插件

      • CLI 插件是向你的 Vue 我的项目提供可选性能的 npm 包，例如 Babel/TypeScript 转译、ESLint 集成、单元测试和 end-to-end 测试等。Vue CLI 插件的名字以 @vue/cli-plugin- (内建插件) 或 vue-cli-plugin- (社区插件) 结尾，非常容易应用。
      • 当你在我的项目外部运行 vue-cli-service 命令时，它会主动解析并加载 package.json 中列出的所有 CLI 插件。
      • 插件能够作为我的项目创立过程的一部分，或在前期退出到我的项目中。它们也能够被归成一组可复用的 preset
  • Vue-Devtools
  • vue-class-component

跨平台技术

跨端技术倒退的三个阶段

  • 第一阶段是混合开发的 web 容器时代

    • 为了解决原生开发的高老本、低效率，呈现了 Hybrid 混合开发
    • 原生中嵌入依靠于浏览器的 WebView
    • Web 浏览器中能够实现的需要在 WebView 中根本都能够实现
    • 然而 Web 最大的问题是，它的性能和体验与原生开发存在肉眼可感知的差别
    • 因而并不适用于对性能和用户体验要求较高的场景

  • 第二阶段是以 RN 和 Weex 为代表的泛 web 容器时代

    • RN 对 Web 规范进行了性能裁剪
    • 用户体验更靠近于原生了
    • 因为进行了性能裁剪，所以 RN 对业务的反对能力还不到浏览器的 5%
    • 因而仅实用于中低复杂度的低交互类页面。面对略微简单一点儿的交互和动画需要，都须要通过调用原生代码去扩大能力实现

  • 第三阶段是以 Flutter 为代表的自绘引擎时代

    • Flutter 是构建 Google 物联网操作系统 Fuchsia 的 SDK
    • 它应用 Dart 语言开发 APP
    • 一套代码能够同时运行在 iOS 和 Android 平台上
    • Flutter 采纳自带的 Native 渲染引擎渲染视图，它是本人实现了组件渲染的闭环
    • 而 RN、Weex 之类的框架，只是通过 JavaScript 虚拟机扩大调用零碎组件，最初是由 Android 或者 iOS 零碎来实现组件的渲染

Hybrid

  • 为什么要引入 hybrid 开发

    • Native 应答急速业务需要，APP 迭代放慢，频繁的发版已难以应酬
    • Android 渠道泛滥，apple store 审核周期长
    • 纯 native 开发效率低，开发保护老本高，不反对热更新
    • 绝对于其余动静公布技术，技术研发老本较低，应用语言更宽泛，社区资源更丰盛

  • 优劣势

    • 原生 APP

      • 长处

        • 打造完满的用户体验
        • 性能稳固、操作速度快，上手晦涩
        • 拜访本地资源（通讯录，相册）
        • 设计杰出的动效，转场
        • 领有零碎级别的贴心告诉或揭示
        • 用户留存率高

      • 毛病

        • 散发老本高（不同平台有不同的开发语言和界面适配）
        • 保护老本高
        • 更新迟缓，依据不同平台，提交–审核–上线 等等不同的流程，须要通过的流程较简单

    • Web APP

      • 长处

        • 发版齐全自控随时更新开发成本小工夫快

      • 毛病

        • 性能差弱网络无网络条件下体验差

    • Hybrid APP

      • 长处

        • 跨平台
        • 开发周期短、成本低
        • 用户体验良好
        • 能够即时修复 bug、动静发版

      • 毛病

        • 仿原生 iOS 成果简单
        • 机型兼容性

  • 整体架构

    • viewLayer（视图层）

      • H5

        • H5 页面
        • webview 引擎渲染

      • Native

        • Native 页面
        • 零碎原生引擎渲染

    • coreLayer（通信层）

      • 自定义 webview 资源拦挡管理器

        • 内置资源管理
        • 缓存模块
        • 文件下载模块
      • 定义页面跳转管理器
      • 定义混合通信交互模块

  • 交互设计

    • 交互原理

      • 两种交互

        • native 被动调用前端 JS
        • H5 被动与 native 发动通信

      • 交互过程（OC）

        • 搭建 JS 调用 OC 的桥梁，注册供 JS 调用的办法 name

        • JS 在调用 Native 注册办法

          • iOS：window.webkit.messageHandlers. 自定义属性.postMessage()
          • Android：window. 自定义办法
        • Native 接管 JS 调用，解析解决，返回回调

    • 通信形式

      • 假跳转的申请拦挡（不倡议）

        • 假跳转的申请拦挡 就是由网页收回一条新的跳转申请，跳转的目的地是一个非法的压根就不存在的地址
        • 比方：wbcst://testhost/action?params=xxx
        • 模仿 http 协定网络申请 scheme://host/action?params
        • 客户端会无差别拦挡所有申请，真正的 url 地址应该照常放过，只有协定域名匹配的 url 地址才应该被客户端拦挡

        • JS 调用形式

          • a 标签跳转
          • location.href 跳转
          • iframe 跳转
        • 不倡议应用，android 系统对 url 参数做了字节限度，无奈进行大数据的通信

      • 弹窗拦挡（不倡议）

        • alert

          • 弹出个提示框，只能点确认无回调

        • confirm

          • 弹出个确认框（确认，勾销），能够回调

        • prompt

          • 弹出个输入框，让用户输出货色，能够回调
        • 不倡议应用，会无差别的拦挡所有前端的 window 弹窗

      • JS 上下文注入（举荐）

        • iOS

          • WKWebView scriptMessageHandler 注入

        • android

          • addJavascriptInterface 注入

        • 特点

          • 不通过任何拦挡的方法，而是间接将一个 native 对象（or 函数）注入到 JS 外面，能够由 web 的 js 代码间接调用，间接操作

ReactNative

  • 简介

    • 个性

      • Learn Once,Write AnyWhere
      • 提供了原生控件反对
      • 异步执行
      • 触屏解决

    • 设计理念

      • 既领有 Native 的用户体验
      • 又保留 React 的开发效率

    • 劣势

      • 它比照原生开发更为灵便，比照 H5 体验更为高效。
      • 代替传统的 WebView，关上效率更高，和原生之间的交互更不便。
      • 多个版本迭代后的明天，它曾经领有了丰盛第三方插件反对
      • 更不便的热更新

    • 劣势

      • 只管是跨平台，然而不同平台 Api 的个性与显示并不一定统一
      • 调试’绝对‘麻烦。
      • Android 上的兼容性问题

    • 危险

      • 只管 Facebook 有 3 款 App(Groups、Ads Manager、F8)应用了 React Native，随着 React Native 大规模利用，Appstore 的政策是否有变不得而知

  • 环境搭建

    • https://reactnative.cn/docs/e…

  • 架构设计

    • Native

    • Bridge

      • 异步（asynchronous）：不依赖于同步通信
      • 可序列化（serializable）：保障所有 UI 操作都能序列化成 JSON 并转换回来
      • 批处理（batched）：对 Native 调用进行排队，批量解决
    • JavaScript

  • 组件及布局

    • 外围组件

      • View
      • Text
      • ScrollView
      • Image
      • TextInput

    • 原生组件

      • 运行时 RN 为前端组件创立相应的 android 和 iOS 视图
      • RN 就是对原生视图的封装

    • style

      • RN 编写的利用的款式不是靠 css 来实现的
      • 而是依赖 javascript 来为你的利用来增加款式

      • 款式申明

        • 依赖导入

          • import React, {StyleSheet} from “react-native”;
        • 调用 React-Native 的一个构造方法
        • 传入一个对象生成 style
        • 和 React 的 React.createCladd()语法是一样的，传入对象的 key 就相当于类名，每个类也是一个对象，能够配置各种款式参数

        • 留神

          • 对象 key 全副是驼峰写法
          • 长度不加单位

        • 示例

          • const styles = StyleSheet.create({
active: {  
    borderWidth: 2,  
    borderColor:‘#ff00ff',  
},

});

    - 款式应用

        - 内部引入

            - <View style={styles.base}></View>

        - 设置多个属性类

            - style={[styles.base,styles.backgroundColor]}

        - 行内款式

            -  style={{width:this.state.width}}  

- flexBox 布局

    - 什么是 FlexBox 布局

        - 弹性盒模型（The Flexible Box Module）, 又叫 Flexbox，意为“弹性布局”- 旨在通过弹性的形式来对齐和散布容器中内容的空间，使其能适应不同屏幕，为盒装模型提供最大的灵活性
        - 布局思维

            - 让容器有能力让其子我的项目可能扭转其宽度、高度（甚至是程序）- 以最佳形式填充可用空间

    - Flex 布局基于 flex-flow 流

        - 程度的主轴（main axis）- 主轴的开始地位（与边框的交叉点）叫做 main start
            - 完结地位叫做 main end

        - 垂直的穿插轴（cross axis）- 穿插轴的开始地位叫做 cross start
            - 完结地位叫做 cross end

        - 我的项目默认沿主轴排列，单个我的项目占据的主轴空间叫做 main size，占据的穿插轴空间叫做 cross size

    - 属性

        - 4 个容器属性

            - flexDirection

                - 决定主轴的方向（即我的项目的排列方向）- row：主轴为程度方向，终点在左端。- row-reverse：主轴为程度方向，终点在右端
                - column(默认值)：主轴为垂直方向，终点在上沿。- column-reverse：主轴为垂直方向，终点在下沿。- flexWrap

                - 默认状况下，我的项目都排在一条线（又称 "轴线"）上。flex-wrap 属性定义，如果一条轴线排不下，如何换行。- nowrap(默认值)：不换行
                - wrap：换行，第一行在上方
                - wrap-reverse：换行，第一行在下方。（和 wrap 相同）- justifyContent

                - 定义了伸缩我的项目在主轴线的对齐形式
                - flex-start(默认值)：伸缩我的项目向一行的起始地位靠齐。- flex-end：伸缩我的项目向一行的完结地位靠齐
                - center：伸缩我的项目向一行的两头地位靠齐。- space-between：两端对齐，我的项目之间的距离都相等。- space-around：伸缩我的项目会均匀地散布在行里，两端保留一半的空间

            - alignItems

                - 定义我的项目在穿插轴上如何对齐，能够把其想像成侧轴（垂直于主轴）的“对齐形式”。- flex-start：穿插轴的终点对齐。- flex-end：穿插轴的起点对齐。- center：穿插轴的中点对齐。- baseline：我的项目的第一行文字的基线对齐。- stretch（默认值）：如果我的项目未设置高度或设为 auto，将占满整个容器的高度。- 2 个我的项目属性

            - flex

                - 复合属性
                - 设置或检索伸缩盒对象的子元素如何调配空间
                - 其中第二个和第三个参数（flex-shrink、flex-basis）是可选参数
                - 默认值为“0 1 auto”- alignSelf

                - align-self 属性容许单个我的项目有与其余我的项目不一样的对齐形式，可笼罩 align-items 属性
                - 默认值为 auto，示意继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch

  • UI 渲染

    • 模块注入

      • RN 模块注入

        • index->App

      • RN 模块运行入口

        • AppRegistry

          • AppRegistry 罕用办法

          • registerConfig

            • static 静态方法, 用来注册配置信息

          • registerComponent

            • 注册组件

          • registerRunnable

            • 注册线程

          • runApplication

            • 进行运行利用

      • 入口组件注册

        • registerComponent

      • 加载 jsbundle 文件运行利用

        • runApplication

    • 页面启动 UI 渲染

      • APP 启动
      • 读取模块 Modules
      • 初始化根视图（RCTRootView）
      • 创立了一个实现 Objective-C 与 Javascript 交互的全局 bridge（RCTBridge）
      • 读取 Javascript 代码（RCTBridgeloadSource）
      • 初始化 Native 模块化信息
      • 初始化 JavaScript 代码的执行器，即 RCTJSCExecutor 对象
      • 执行 JS 调用 OC 组件
      • 将 flexbox 布局转换成原生布局实现 UI 渲染

    • UI 控件渲染流程

      • RCTRootView runApplication:bridge

        • 告诉 JS 运行 App

      • RCTBatchedBridge _processResponse:json error:error

        • 解决执行完 JS 代码 (runApplication) 返回的相应，蕴含须要增加多少子控件的信息。

      • RCTBatchedBridge batchDidComplete

        • RCTUIManager 调用解决实现的办法，就会开始去加载 rootView 的子控件。

      • RCTUIManager createView:viewName:rootTag:props

        • 通过 JS 执行 OC 代码，让 UI 管理者创立子控件 View

      • [RCTUIManager _layoutAndMount]

        • 布局 RCTRootView 和减少子控件

      • [RCTUIManager setChildren:reactTags:]

        • 给 RCTRootView 对应的 RCTRootShadowView 设置子控件

      • [RCTRootShadowView insertReactSubview:view atIndex:index++]

        • 遍历子控件数组，给 RCTRootShadowView 插入所有子控件

      • [RCTShadowView processUpdatedProperties:parentProperties:]

        • 解决保留在 RCTShadowView 中属性，就会去布局 RCTShadowView 对应 UIView 的所有子控件

      • [RCTView didUpdateReactSubviews]

        • 给原生 View 增加子控件
      • 实现 UI 渲染

    • 通信机制

      • OC 生成一张模块配置表，蕴含所有模块和模块里的办法，依据特定的标识宏（RCT_EXPORT_MODULE()），将能够裸露的办法裸露给 JS

      • 通信流程

        • ①js 调用 OC 模块裸露进去的办法
        • ②把调用办法合成为 ModuleName、MethodName、arguments，在丢给 MessageQueue 解决
        • ③把 js 的 callback 函数缓存在 MessageQueue 的一个成员变量外面，同时生成一个 CallbackID 来代表 callback；在通过保留在 MessageQueue 的模块配置表把 ModuleName、MethodName 转成 ModuleID、MethodID
        • ④把 ModuleID、MethodID、CallbackID 和其余参数传给 OC（JavaScriptCore）
        • ⑤OC 接到音讯，通过模块配置表拿到对于的模块和办法
        • ⑥RCTModuleMethod 对 js 传过来的参数进行解决
        • ⑦OC 模块办法执行完，执行 block 回调
        • ⑧调用第 6 步中 RCTModuleMethod 生成的 block
        • ⑨block 带着 CallbackID 和 block 传过来的参数去掉用 js 里的 MessageQueue 办法 invokeCallbackAndReturnFlushedQueue
        • ⑩MessageQueue 通过 CallbackID 找到相应的 js 的 callback 办法
        • ⑪调用 callback 办法，并把 OC 带过去的参数一起传过来实现回调

    • 导航路由

      • StackNavigator

        • 用来跳转页面和传递参数

        • 参数

          • RouteConfigs
          • StackNavigatorConfig

        • navigation

          • navigate

            • 跳转到其余页面

            • routeName

              • 导航器中配置的路由名称

            • params

              • 传递参数到下一个页面
            • action

            • 示例

              • this.props.navigation.navigate(‘Find’, {param: ‘i am the param’});

          • state

            • 以后页面导航器的状态

            • params

              • 路由页面参数

            • key

              • 路由页面 id

            • routeName

              • 路由页面名称

          • setParams

            • 更改路由的参数
            • 在组件挂载实现之后注册
            • componentDidMount() {
            • this.props.navigation.setParams({param:’i am the new param’})

          • goBack

            • 返回

            • goBack()

              • 回退到上一个页面

            • goBack(null)

              • 回退到任意一个页面

            • goBack(‘pathName’)

              • 回退到指定页面

          • dispatch

            • 发送一个 action

      • TabNavigator

        • 相似底部导航栏，用来在同一屏切换不同页面

      • DrawerNavigator

        • 侧滑菜单导航栏，用于轻松设置带抽屉的屏幕

    • 拆包

      • 目标

        • 解决 jsbundle 体积过大
        • 按需分步加载，进步加载效率
        • 进步热更新包 diff/load 效率

      • jsbundle 组成

        • 头部（Polyfills）

          • 定义根本的 JS 环境
          • 次要是 define，require 等全局模块的定义
          • d()函数、__r()函数、__DEV 变量等

        • 中部（Module 定义）

          • 模块定义，RN 框架和业务的各个模块定义
          • 应用__d()函数定义所有用到的模块
          • 该函数为每个模块赋予了一个模块 ID，模块之间的依赖关系都是通过这个 ID 进行关联的

        • 尾部（Require 调用）

          • 引擎初始化和入口函数执行
          • 应用__r()函数援用根模块

      • 拆包计划

        • diff and patch

          • 将 jsbundle 通过 diff，生成 common 和每个业务的 patch 包
          • 而后在 APP 运行时对 common 和 patch 合并成执行的 jsbundle
        • 批改 RN 的 bundle 命令打包流程，使得间接生成 common+business 包
        • 批改 RN 的 unbundle 命令，生成 common+business 包

        • 应用 metro 拆包

          • 根底包和业务包打包

            • 抽离公共组件到 base.js

            • base.js 入口打包

              • 输入 common.jsbundle

            • index.js 入口打包

              • 输入 business.jsbundle

          • 差别包打包

            • business.jsbundle 基于 common.jsbundle 打差别包

            • 实现思路

              • business.jsbundle 逐行扫描
              • 扫描内容如在 common.jsbundle 中没找到，用数组寄存
              • 将数组转换为数据保留到差别包 patch.jsbundle

    • 热更新

      • 前端业务代码提交入库
      • 基于热更新平台拆分以后我的项目
      • 资源打包上线 CDN 服务器
      • 前端资源增加版本号治理
      • 客户端拉取前端 RN 资源动静更新

Flutter

  • Flutter 倒退历程

    • 2014.10 – Flutter 的前身 Sky 在 GitHub 上开源
    • 2015.10 – 通过一年的开源，Sky 正式改名为 Flutter
    • 2017.5 – Google I/ O 正式向外界颁布了 Flutter，这个时候 Flutter 才正式进去大家的视线
    • 2018.6 – 距 5 月 Google I/O 1 个月的工夫，Flutter1.0 预览版
    • 2018.12 – Flutter1.0 公布，它的公布将大家对 Flutter 的学习和钻研推到了一个新的终点
    • 2019.2 – Flutter1.2 公布次要减少对 web 的反对

  • 简介

    • Flutter 是 Google 推出并开源的挪动利用开发框架
    • 主打跨平台、高保真、高性能
    • 开发者能够通过 Dart 语言开发 App，一套代码同时运行在 iOS 和 Android 平台
    • Flutter 提供了丰盛的组件、接口，开发者能够很快地为 Flutter 增加 native 扩大
    • 同时 Flutter 还应用 Native 引擎渲染视图，这无疑能为用户提供良好的体验

  • 框架

    • Framework

      • 纯 Dart 实现的 SDK，相似于 React 在 JavaScript 中的作用
      • 它实现了一套根底库，用于解决动画、绘图和手势
      • 基于绘图封装了一套 UI 组件库
      • 依据 Material 和 Cupertino 两种视觉格调辨别开来

    • Engine

      • 纯 C++ 实现的 SDK

      • 包含

        • Skia 引擎
        • Dart 运行时
        • 文字排版引擎等
      • 它是 Dart 的一个运行时，它能够以 JIT 或者 AOT 的模式运行 Dart 代码
      • 这个运行时还管制着 VSync 信号的传递、GPU 数据的填充等，并且还负责把客户端的事件传递到运行时中的代码

    • Embedder

      • Embedder 是操作系统适配层

      • 实现了

        • 渲染 Surface 设置
        • 线程设置
        • 平台插件等平台相干个性的适配

  • 组件渲染

    • 图像显示的基本原理

      • 显示器的 CRT 电子枪从上到下一行行扫描，扫描一行实现之后，显示器上就显示一帧画面，随后电子枪回到初始地位持续下一次扫描
      • 程度扫描时，显示器会收回一个程度同步信号（HSync）
      • 而当一帧画面绘制实现之后，电子枪复原原位，筹备下一次扫描之前，显示器会收回一个垂直同步信号（Vsync）
      • 显示器以固定的频率刷新，这个刷新率就是 Vsync 信号产生的频率

      • 图像的显示须要 CPU、GPU 和显示器一起配合实现

        • CPU 负责图像数据计算
        • GPU 负责图像数据渲染
        • 显示器则负责最终图像显示
      • CPU 把计算好的须要显示的内容交给 GPU
      • 由 GPU 实现渲染后放入帧缓冲区
      • 随后视频控制器依据垂直同步信号（Vsync）以每秒 60 次的速度
      • 从帧缓冲区读取帧数据交由显示器实现图像显示

    • Flutter 绘制原理

      • 渲染流程

        • Dart
        • |
        • GPU
        • |
        • |
        • Compositor
        • Skia
        • GPU

      • 渲染流程 1

        • GPU 的 VSync 信号同步给到 UI 线程
        • UI 线程应用 Dart 来构建形象的视图构造（这里是 Framework 层的工作）
        • 绘制好的形象视图数据结构在 GPU 线程中进行图层合成（在 Flutter Engine 层的工作）
        • 而后提供给 Skia 引擎渲染为 GPU 数据，最初通过 OpenGL 或者 Vulkan 提供给 GPU

      • UI 界面绘图流程

        • user Input

          • 用户输出是驱动视图更新的信号 如：滑动屏幕

        • Animation

          • 触发动画进度更新

        • Build

          • 框架开始 build 形象视图数据

        • Layout

          • 视图布局

        • Paint

          • 视图绘制

        • Composite

          • 视图合成

        • Restorize

          • 最初进行光栅化解决把数据生成一个个真正的像素填充数据

  • Dart 语言（根底）

    • 简介

      • Dart 语言在 2011 年 10 月由 Google 公布
      • 是一种 易于学习、易于扩大、并且能够部署到 任何中央 的 利用 编程 语言
      • 设计的初衷是用来替换 javascript 的，所以刚开始 Dart 也就是用来作

为浏览器脚本运行在浏览器中的，然而始终没有被宽广开发者器重。

    - Google 并没有放弃 Dart，又 Dart 编写孵化了一个挪动开发框架 Sky，- 之后又被命名为 Flutter，进入了挪动跨平台开发的畛域

- 利用方向

    - 挪动端开发

        - 外围是 Flutter 框架，它应用
        - Dart + C++ + Skia 开发，同
        - 一份代码编写运行在 iOS 和
        - Android 上的利用

    - 浏览器端

        - 咱们用 Dart 来写 Web 后，编译器会主动
        - 将 Dart 文件编译为 JavaScript 文件进行
        - 运行，只不过咱们写的语法标准是 Dart 语法

    - 服务器端

        - DartVM：就是写服务端的利用。比方写个
        - http 的服务，对利用提供 api，都是及其简略的事件。- 环境配置

    - 手动装置

        - 下载地址：http://www.gekorm.com/dart-windows/

    - 配置环境变量

        - 将 dart-sdk 的 bin 门路增加到 path 环境变量中

    - 在 vscode 中装置 Code Runner 插件，来调试咱们的 dart 代码
    - 装置 stagehand

        - pub global activate stagehand

    - 创立 dart 我的项目

        - stagehand dart-demo

    - 获取依赖包

        - pub get

- 罕用内置类型

    - String

        - Dart 字符串是 UTF-16 编码的字符序列，能够应用单引号或者双引号来创立字符串
        - 能够应用三个单引号或者双引号创立多行字符串对象
        - 能够应用 r 前缀创立”原始 raw”字符串
        - 能够在字符串中应用表达式：${expression}, 如果表达式是一个标识符，能够省略 {}，如果表达式的后果为一个对象，则 Dart 会调用对象的 toString() 函数来获取一个字符串

    - Numbers

        - int : 整数值
        - double : 64-bit 双精度浮点数
        - int 和 double 是 num 的子类

    - Booleans

        - bool 对象未初始化的默认值是 null

    - Lists

        - Dart 中的数组称为 List

    - Maps

        - map 是一个关联键和值的对象
        - 键和值都能够是任何类型的对象
        - 每个键只呈现一次

- 变量申明

    - var

        - 相似于 JavaScript 中的 var
        - 它能够接管任何类型的变量
        - 但最大的不同是 Dart 中 var 变量一旦赋值，类型便会确定，则不能再扭转其类型
        - Dart 自身是一个强类型语言
        - 任何变量都是有确定类型的

    - dynamic

        - dynamic 与 var 一样都是关键词
        - 申明的变量能够赋值任意对象
        - dynamic 与 Object 相同之处在于, 他们申明的变量能够在前期扭转赋值类型
        - dynamic 申明的对象编译器会提供所有可能的组合

    - Object

        - Object 是 Dart 所有对象的根基类
        - 也就是说所有类型都是 Object 的子类
        - 包含 Function 和 Null
        - 所以任何类型的数据都能够赋值给 Object 申明的对象
        - Object 申明的对象只能应用 Object 的属性与办法, 否则编译器会报错

    - final

        - 一个 final 变量只能被设置一次
        - final 变量在第一次应用时被初始化
        - 被 final 或者 const 润饰的变量，变量类型能够省略

    - const

        - const 变量是一个编译时常量
        - 不能更改

- 函数

    - 函数申明
    - 对于只蕴含一个表达式的函数，能够应用简写语法
    - 函数作为变量
    - 函数作为参数传递
    - 可选的地位参数
    - 可选的命名参数
    - 参考链接：https://book.flutterchina.club/chapter1/dart.html

- 类 class

    - 应用类成员

        - 对象的成员包含函数和数据(别离是办法和实例变量)
        - 你调用一个办法时，你在一个对象上调用它: 这个办法能够拜访那个对象的函数和数据
        - 应用点 (.) 援用实例变量或办法
        - 应用?. 而不是. 为了防止最右边的操作对象为空时出现异常

    - 应用构造函数

        - 能够应用一个创立函数来创建对象
        - 构造函数的名字能够是 ClassName 或者 ClassName.indentifier

    - 构造函数

        - 通过创立一个与其类同名的函数来申明一个构造函数
        - 最常见的构造函数模式——生成构造函数——创立了一个类的新实例
        - this 关键词援用到以后的对象

    - 抽象类

        - Dart 抽象类次要用于定义规范，子类能够继承抽象类，也能够实现抽象类接口
        - 抽象类通过 abstract 关键字来定义
        - Dart 中的形象办法不能用 abstract 申明，Dart 中没有办法体的办法咱们称为形象办法
        - 如果子类继承抽象类必须得实现外面的形象办法
        - 如果把抽象类当做接口实现的话必须得实现抽象类外面定义的所有属性和办法
        - 抽象类不能被实例化，只有继承它的子类能够
        - 接口：应用 implements 关键字，个别应用抽象类定义接口。- 包治理

    - Dart 的软件包管理器是 pub。- 托管软件包的存储库能够在 https://pub.dartlang.org/ 找到
    - 

        - 每个 Dart 应用程序都有一个 pubspec.yaml 文件，蕴含了我的项目依赖包配置 相似 package.json

    - 操作命令

        - pub get：获取应用程序依赖的所有包
        - pub upgrade：将所有依赖项降级到较新版本
        - pub build：构建利用

- 库

    - 自定义库

        - import 'lib/mylib1.dart' as lib1;

    - 零碎内置库

        - import 'dart:math';
        - import 'dart:io';
        - import 'dart:convert';

    - pub 包管理系统中的库

        - import 'package:dio/dio.dart';

  • Widget 与 Element

    • 什么是 Widget

      • Flutter Widget 采纳古代响应式框架构建，中心思想是用 widget 构建你的 UI
      • Widget 形容了他们的视图在给定其以后配置和状态时应该看起来像什么
      • 当 Widget 的状态发生变化时，Widget 会从新构建 UI，Flutter 会比照前后变动的不同，以确定底层渲染树从一个状态转换到下一个状态所需的最小更改
      • Widget 的性能是“形容一个 UI 元素的配置数据”, Widget 其实并不是示意最终绘制在设施屏幕上的显示元素，而它只是形容显示元素的一个配置数据

    • Element

      • Flutter 中真正代表屏幕上显示元素的类是 Element，也就是说 Widget 只是形容 Element 的配置数据

    • 根底 Widget

      • StatelessWidget

        • StatelessElement 间接继承自 Element 类，与 StatelessWidget 绝对应
        • StatelessWidget 用于不须要保护状态的场景
        • 它通常在 build 办法中通过嵌套其它 Widget 来构建 UI
        • 在构建过程中会递归的构建其嵌套的 Widget

      • StatefulWidget

        • 和 StatelessWidget 一样，StatefulWidget 也是继承自 Widget 类，并重写了 createElement()办法
        • 不同的是返回的 Element 对象并不相同
        • StatefulWidget 类中增加了一个新的接口 createState()
        • createState() 用于创立和 Stateful widget 相干的状态，它在 Stateful widget 的生命周期中可能会被屡次调用

      • State

        • 一个 StatefulWidget 类会对应一个 State 类，State 示意与其对应的 StatefulWidget 要保护的状态

        • State 中的保留的状态信息能够

          • 在 widget 构建时能够被同步读取
          • 在 widget 生命周期中能够被扭转，当 State 被扭转时，能够手动调用其 setState()办法告诉 Flutter framework 状态产生扭转，Flutter framework 在收到音讯后，会从新调用其 build 办法从新构建 widget 树，从而达到更新 UI 的目标

        • 罕用属性

          • widget

            • 它示意与该 State 实例关联的 widget 实例
            • 由 Flutter framework 动静设置

          • context

            • StatefulWidget 对应的 BuildContext
            • 作用同 StatelessWidget 的 BuildContext

        • 生命周期

          • StatefulWidget launched

          • initState

            • 当 Widget 第一次插入到 Widget 树时会被调用
            • 对于每一个 State 对象，Flutter framework 只会调用一次该回调
            • 通常在该回调中做一些一次性的操作，如状态初始化、订阅子树的事件告诉等

          • didChangeDependencies

            • 当 State 对象的依赖发生变化时会被调用

          • build

            • 它次要是用于构建 Widget 子树的

            • 会在如下场景被调用

              • 在调用 initState()之后
              • 在调用 didUpdateWidget()之后
              • 在调用 setState()之后
              • 在调用 didChangeDependencies()之后
              • 在 State 对象从树中一个地位移除后（会调用 deactivate）又从新插入到树的其它地位之后

          • reassemble

            • 此回调是专门为了开发调试而提供的
            • 在热重载 (hot reload) 时会被调用
            • 此回调在 Release 模式下永远不会被调用

          • didUpdateWidget

            • 在 widget 从新构建时
            • Flutter framework 会调用 Widget.canUpdate 来检测 Widget 树中同一地位的新旧节点，而后决定是否须要更新
            • 如果 Widget.canUpdate 返回 true 则会调用此回调

          • deactivate

            • 当 State 对象从树中被移除时，会调用此回调

          • dispose

            • 当 State 对象从树中被永恒移除时调用
            • 通常在此回调中开释资源
          • StatefulWidget destoryed

      • 根底组件

        • Text

          • Text 用于显示简略款式文本，它蕴含一些管制文本显示款式的一些属性

        • Image

          • Flutter 中，咱们能够通过 Image 组件来加载并显示图片，Image 的数据源能够是 asset、文件、内存以及网络

        • Container

          • Container 是 Flutter 里很罕用的容器组件，Container 能够创立矩形视觉元素

      • 布局类组件

        • 线性布局

          • Row
          • Column

        • 弹性布局

          • Flex

        • 流式布局

          • Wrap
          • Flow

        • 层叠布局

          • Stack
          • Positioned

        • 对齐与绝对定位

          • Align

Weex

小程序

快利用

ionic

  • 简介

    • ionic 是一个用来开发混合手机利用的，开源的，收费的代码库
    • 能够优化 html、css 和 js 的性能，构建高效的应用程序
    • 能够用于构建 Sass 和 AngularJS 的优化

  • 特点

    • 具备原生 APP 的卓越运行性能
    • 可维护性高
    • 丑陋的 Ui 设计
    • 轻量级框架
    • 具备弱小的命令行工具
    • 与 AngularJS 完满联合

  • 框架结构

    • CSS 框架

      • 提供原生 App 质感的 CSS 款式模仿
      • ionic 这部分的实现应用了 ionicons 图标款式库

    • JavaScript 框架

      • 提供挪动 Web 利用开发框架
      • ionic 基于 AngularJS 根底框架开发
      • 遵循 AngularJS 的框架束缚
      • ionic 应用 AngularJS UI Router 实现前端路由

    • 命令行 /CLI

      • 命令行工具集用来简化利用的开发、结构和仿真运行
      • ionic 命令行工具应用了 Cordova，依赖于平台 SDK（Android & iOS）实现将挪动 web 我的项目打包成原生 app

  • 根本布局

    • https://blog.csdn.net/xyphf/a…

  • 交互通信

    • https://user-gold-cdn.xitu.io…

Cordova

  • 简介

    • Cordova 提供了一组设施相干的 API
    • 通过这组 API，挪动利用可能以 JavaScript 拜访原生的设施性能，如摄像头、麦克风等
    • Cordova 还提供了一组对立的 JavaScript 类库，以及为这些类库所用的设施相干的原生后盾代码
    • Cordova 反对如下挪动操作系统：iOS, Android,ubuntu phone os, Blackberry, Windows Phone, Palm WebOS, Bada 和 Symbian

  • 架构

    • Web APP 端

      • config.xml

        • CLI 初始化我的项目在主目录下生成

        • 蕴含了整个 app 的一些根本信息

          • appName
          • app 入口文件
          • 白名单
          • webview 初始化的一些配置
          • plugin 信息
          • 图标资源信息
      • Resources
      • HTML、JS、CSS

      • cordova.js 外围代码

        • exec

          • 这是 cordova 中 js 端的外围执行代码，所有的 plugin 的执行入口
          • successCallback — 胜利的回调
          • failCallback — 失败的回调
          • service — 所调用 native plugin 的类
          • action — 所调用 native plugin 的类下的具体 method
          • actionArgs — 具体参数

        • pokeNative

          • JS 告诉 Native 调用 native 办法
          • 通过 Webview 相干协定拦挡前端 URL
          • JS 端通过 iframe 发送 request 的相干申请

        • nativeCallback

          • native 解决完前端申请后触发回调的对立入口
          • 以同步的形式来触发 native -> js 的 callBack

        • callbackFromNative

          • JS 执行回调的中央
          • 依据 cordova.callBacks 的 map 以及回调的 callBackId 还有状态（success 或者 fail）来执行相应的回调函数
          • 之后依据 keepCallback 来决定是否将该回调从 callBacks 的 map 中移除

    • Native 端

      • cordova webview 引擎具体实现

        • CDVViewController

          • init — 初始化程序
          • loadSettings — 解析 config.xml 将 pluginsMap startplugin settings startPage 等变量初始化到容器 controller 中，初始化 plugin 字典
          • viewDidLoad — 先 loadSettings，之后创立非凡存储空，依据 CDVUIWebViewEngine 初始化 Webview，而后获取 appURL 加载 index.html

        • CDVUIWebViewEngine

          • initWithFrame — 创立 webview
          • pluginInitialize — 初始化 webView 中的一系列设置, 创立 delegate（CDVUIWebViewDelegate）
          • getConmmandInstance — 获取 command 的实例

      • 容器初始化以及 plugin 初始化

        • Acceleromter
        • Geolocation
        • Carmera
        • Media
        • Device
        • Network
        • Contacts
        • Storage

  • JS&Native 通信

    • 通信原理

      • 保留 Cordova_plugin.js 的 插件文件名字和地址
      • 插件的 API 呼出时，通过调用 Cordova 的 exec 模块将 API 的参数保留在 CommandQueue 的队列中。CALLBACK 则保留在 JS 侧的 callbacks map 外面
      • 增加一个空的 iframe,iframe 的 src 则指向 gap://ready
      • 3 的 iframe 的 src 设置当前，NATIVE 侧 UIWebviewDelegate#shouldStartLoadWithRequest 则被呼出来
      • Webview 的 Delegatet 判断 gap://ready 的状况下，则执行 commandDelegate 的解决
      • commandDelegate 则从 JS 侧取出 API 的参数，外部实现则是通过 UIWebview#stringByEvaluatingJavaScriptFromString 的返回值 获得 CommandQueue 外面的参数转换成 JSON 数据
      • 依据 6 的插件，执行 NATIVE 定义的插件实例
      • 插件中，有 CALLBACK 的状况下，成功失败的后果通过 UIWebview#stringByEvaluatingJavaScriptFromString 执行 JS，JS 端则依据传过来的 CALLBACKID，从 callbacks map 取出回调函数并执行

    • 通信形式

      • iframe 的办法（默认）
      • xmlHttpRequest 的办法（iOS5.x 版本因为 -webkit-scroll 的 IFRAME 有 BUG，则举荐应用）

  • 插件导入流程

    • Native

      • APP 启动，MainViewController 初始化之时，queue 和 command 的 DELEGATE 初期化
      • config.xml 文件解析，插件名设置到数组，插件文件和插件名设置到 pluginMap, 属性设置到 setting
      • 在 Webview 类外面，加载 index.html,index.html 外面加载 cordova.js、开始初期化

    • JS

      • 加载 cordova.js 时、外部的事件设置模块，NATIVE 交互模块，初期化模块，插件加载
      • 插件模块是 cordova_plugins.js 文件定义的插件文件地址，文件名保留的 MAP
      • deviceready 事件公布后，插件的 API 能够应用了
      • 插件 API 执行后，模块 MAP 将插件文件加载，执行 exec 函数
      • 在 index.html 外面增加一个空的 iframe、指定 src=gap://ready，告诉到 Nativie

PWA

WebAssembly

  • https://www.wasm.com.cn/

Electron

VasSonic

QT

性能优化和监控

性能优化（根底）

  • 内容层面

    • DNS 解析优化

      • DNS 缓存
      • 缩小 DNS 查找
      • keep-alive
      • 适当的主机域名
    • 防止重定向
    • 切分到多个域名
    • 杜绝 404

  • 网络传输阶段

    • 缩小传输过程中的实体大小

      • 缓存
      • cookie 优化
      • 文件压缩

    • 缩小申请的次数

      • 文件适当的合并
      • 雪碧图
    • 异步加载
    • 预加载、延后加载、按需加载

  • 渲染阶段

    • js 放底部，css 放顶部
    • 缩小重绘和回流
    • 正当应用 Viewport 等 meta 头部
    • 缩小 dom 节点
    • BigPipe

  • 脚本执行阶段

    • 缓存节点，尽量减少节点的查找
    • 缩小节点的操作（innerHTML）
    • 防止无谓的循环，break、continue、return 的适当应用
    • 事件委托

大前端时代监控

  • 大前端时代前端监控的新变动

    • 大前端时代有哪些变动

      • 首先是 Gmail 的横空出世，开启了 SPA 的时代
      • Backbone/Angular 等框架带来了 MVVM 模式的同时，也把 JS 从脚本语言晋升到了工程语言
      • React Native/Weex 把挪动端开发从 Hybrid 模式进化到了跨端开发模式
      • Node.js 问世为前端带来了更多的可能性

    • 前端变动给监控带来了什么样的扭转

      • 传统监控模式是否实用于新的技术？比方 PV 统计
      • SPA 模式下首屏如何计算？
      • 跨端开发给监控带来什么什么挑战？
      • 前端监控的上报模式在 Node.js 端是否正当？

    • SPA 模式下的 PV 统计问题

      • 技术升级、体验降级、PV 降落？

      • 起因

        • 页内路由代替了新的页面

      • 解决办法

        • hash 路由：监听 hash change 变动上报 PV
        • 非哈希路由：轻量 hack pushState 和 replaceState

    • 首屏统计

      • 第一阶段：自定义打点期间

        • 页头和首屏 dom 别离通过 new Date()打点
        • 计算差值作为首屏工夫
        • 再加上 setTimeout(new Date(), 0)标记首屏可交互工夫

      • 第二阶段：W3C 规范期间

        • W3C 性能小组引入了 Navigation Timing API 帮咱们主动, 精准的实现了性能测试的打点问题

        • Navigation Timing API

          • 卸载上一个页面
          • 重定向
          • 利用缓存
          • DNS 域名解析
          • TCP 链接
          • 申请页面
          • 响应
          • 页面解决
          • 触发 load 事件
      • 第三阶段：SPA 流行导致 W3C 规范失去原来的意义

      • 现阶段：用户感官指标 FMP

        • first meaning paint
        • 次要内容可见工夫

  • 前端监控的最佳实际

    • 被动监控

      • 配置告警规定
      • 通过谬误聚类模块，精准定位问题
      • 减少性能样本分布统计
      • 再手起刀落，修复 bug
    • 慢会话追踪
    • 搜寻报错明细
    • 出错行为还原
  • 58 北斗监控实现
退出移动版