前端常识体系（图谱）
前端工程化体系
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
- 对组件进行两个灵魂质问
- 对State汇合进行检查和去重
State保留的地位
- 繁多状态
- 状态上移
- 增加交互行为
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属性，如果没有父元素，则等同于stretchUI渲染
模块注入
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北斗监控实现