最近学习记录（方便定期回顾复习）并重点记录疑问点 =============================================================== applyMiddleware也是一种store enhancer？

学习方法：每天复习前三天的笔记

备注： (try: 待动手试试 study: 待研究和思考 practice:待练习)

动手实现： 是检验是否掌握的唯一标准，很多时候貌似懂了，一写就错！

正确的学习方式： 3分学，3分想，4分动手做！看到有新收获的实现就马上动手写一遍，才记得住！

复习进度：41.面向对象第2天 2 面向对象进阶/06 面向对象术语总结

微专业高级前端： 1.至少听2遍，直到能写出或者脑子里想出完整带细节的实现 2.相关扩展知识 3.动手写！

==============================================================================

待学习： E2e测试，冒烟测试，websocket，webhook，webview，service worker,sourcemap,styled-jsx

==============================================================================

jsx和React.createElement(type,

[props],

[...children])；

cloneElement

权限控制：使用一个容器组件包裹。参考： Route,Button,Link

==============================================================================

service Worker；

Sentry 是一个开源的实时错误追踪系统；

Compat;

breakpoints；

单点登录（Single Sign On），简称为 SSO;

calc(100% - 10px)；

withRouter

==============================================================================

脚本：js....

node: 平台 + 运行环境

nvm

path环境变量: 当要求系统运行一个程序而没有告诉它程序所在的完整路径时

系统首先在当前目录下面寻找该程序

如果找不到，则系统会跑到path中指定的路径去找，如果找到，直接运行

CommonJS、AMD和CMD区别

CommonJS是同步的, 主要用于服务器
AMD和CMD是异步的, 两者的模块定义和加载机制稍有不同, 主要用于浏览器

ES6在语言标准的层面上, 实现了模块功能

指针即引用

==============================================================================

RFC文档；

JwtDecode解码token；

scoped;

vw、vh、vmax、vmin这四个单位都是基于视口

vw是相对视口（viewport）的宽度而定的，长度等于视口(浏览器)宽度的1/100

vh是相对视口（viewport）的高度而定的，长度等于视口高度的1/100

假如浏览器的高度为500px，那么1vh就等于5px（500px/100）

vmin和vmax是相对于视口的高度和宽度两者之间的最小值或最大值

==============================================================================

React.createRef；

回调 Refs：将ref绑定到一个回调函数，element会作为参数传到函数中；

当 ref 属性用于 HTML 元素时，构造函数中使用 React.createRef() 创建的 ref 接收底层 DOM 元素作为其 current 属性。
当 ref 属性用于自定义 class 组件时，ref 对象接收组件的挂载实例作为其 current 属性。
你不能在函数组件上使用 ref 属性，因为他们没有实例。如果要在函数组件中使用 ref，你可以使用 forwardRef（可与 useImperativeHandle 结合使用），或者可以将该组件转化为 class 组件。

2e2 === 2*10*10

有些数据是放在token里的，以防被造假

Token,session,token（Json web token (JWT））异同：

同：用于校验用户身份；不能存敏感信息

异：token不占服务端内存；更可拓展

==============================================================================

vsCode:Breadcrumbs; Go to Definition(press Ctrl)

EventEmitter实现（on,off,emit）

pusher和OptimizelyProviderWrapper实现

emit

==============================================================================

react动画：1.不要把样式属性绑定到状态。eg: this.state.width + 'px' . 因为不断更新state来实现动画的话，也会不断触发生命周期。建议使用 this.ref.style.width ....

2.transitionEnd事件，context相关实践

viable workaround ；DOM Manipulation；CI/CD，Thresholds，substitute，verbose:详细信息

安装（二进制安装/源码安装）

自动化测试：单元测试；api测试；UI测试

==============================================================================

单元测试的一些原则：
1）测试用例能验证函数的正确性；
2）测试用例尽可能涵盖边界条件（例如遍历一个链表，头指针是空，只有一个节点，链表有N个节点，N是问题描述下允许的最大节点数等等）；
3）一些异常和错误处理（例如往一个函数里传入空指针，传入空串，这个函数能否打印一些log，返回错误码，实现加法的Add函数如何检测和处理溢出等等）

test driven development：先写测试再写实现

==============================================================================

User story: 1.以用户的视角来写的 2.经常是用Gherkin 语法来写的

单元测试：即最小单元的测试，可能是函数或类等等（取决于编程语言）

期望与断言

适合情况：1. 项目比较稳定的阶段 2.人员变动较大

测试场景：

1.最小单元测试: 模拟输入，测试输出是否符合预期

2UI测试：通常测试某个期望的返回值是否包含某个className就够了

3交互测试：模拟点击等等的

自定义的断言

jest+enzyme

==============================================================================

去了解：websocket, pusher,webhook,webview

Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。

Debug

OKR

spike

==============================================================================

A/B test：某个功能对iOS开放而对Android用户关闭 ===》 Feature flag

Feature flag:有个后台控制去开启／关闭某个功能。(optimizly平台)

==============================================================================

使用git stash apply代替 git stash pop

Workspace：工作区
Index / Stage：暂存区
Repository：仓库区（或本地仓库）
Remote：远程仓库

# 选择一个commit，合并进当前分支
$ git cherry-pick [commit/branch/repository]

==============================================================================

Map.set/get...

react portal / vue slot

react portal: 1. 渲染到任意父容器 2.不是子元素也能冒泡上去

react官网再看一遍，查漏补缺！

mount : 挂载，嵌入

aria: 针对残障人士的app

==============================================================================

跨域，简单请求，非简单请求（预检查请求），跨域处理, cookie处理等等： http://www.ruanyifeng.com/blog/2016/04/cors.html

开发和调试中数据问题引起不能联调：可以自己通过api平台（如swagger/postman ）调接口添加数据测试，不必依赖后端等人

==============================================================================

this: 当我们访问对象的某个属性时，但又不方便把对象告诉你时，就用this代替。 eg: 构造函数内

fn.call(),fn.apply本质都是调用函数

fn.call(context,arguments): 本质可以理解为：fn(arguments)且让函数内部this指向context;

eg: [].slice.call(arguments)

fn.bind(context,1)本质是创建函数的副本

var copyFn = fn.bind(context,1)

copyFn(2)

==============================================================================

test, reg.exec() 子表达式和捕获组的区别（study）

/^<(w+)s*/?>(?:</1>|)$/.exec('<div></div>')

(?:) 表示匹配但不捕获

1表示反向引用（即引用上一个子表达式所匹配的）

redux认为改变state的引用不是mutate,而改变state内的属性值是mutate, 且不推荐将其赋值给其他变量！

通过传参给reducer的state=undefined来重置redux数据

==============================================================================

onload: html+css,img,flash等资源都加载完成时执行

DOMConentLoaded： html加载和解析完成时执行

浏览器渲染过程(study)：

1.解析html，生成dom树

2.DOMConentLoaded，css规则树

3.合并html+css

$(function(){}) 的实现（try）

Constructor.prop 访问到需要其原型或本身上有，而不是其本身的 this.prop 有，this.prop是给其实例用的：instance.prop

==============================================================================

callback实现（try）

a && b ==> if(a){return b}

'a b c d'.split(/s+/)

代码逻辑： 无非就是对谁进行什么操作。谁就是变量，操作就是函数。操作不够就加函数，对象不够就加变量！

==============================================================================

sizzle选择器（study）

Array.prototype.slice.call(elems)

==========================================================================

作业：

1. //过滤掉<a> <a> => a

var rejectExp = /^<(w+)s*/?>(?:</1>|)$/;

var parse = rejectExp.exec(data);

return [context.createElement(parse[1])];

2. $（）传入函数的情况如何实现，看源码

实现 $（）方法：支持1.‘a’,'<a>' 2.dom对象 3.函数（看源码:try）
==============================================================================

swagger: api平台，还能真实发请求

editorconfig文件配置

==============================================================================

普通函数，箭头函数，构造函数的区别：

箭头函数没有prototype属性，没有自己的this，arguments，super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。构造函数和普通函数不是通过函数名首字母的大小写来区分的，而是通过调用方式来区分的，即new运算符，首字母大写只是约定的习惯。

new 运算符：

创建一个空的简单JavaScript对象（即{}）；
链接该对象（即设置该对象的构造函数）到另一个对象；
将步骤1新创建的对象作为this的上下文；
如果该函数没有返回对象，则返回this。

==============================================================================

$就是jQuery

$()就是jQury的实例，共享原型对象

$.extend()和$.fn.extend()的实现：浅拷贝和深拷贝

==============================================================================

任何布局问题：首先想到flex,table,grid等，不行还有float,position，transform

等宽布局：1. flex 2.table 3.float+百分比

等高布局：1.flex 2.table 3.float + padding-bottom/margin-bottom

==============================================================================

定宽/不定宽+自适应布局：

1. display: flex + flex:1

2.display:table/table-cell(table-layout)

3.float+ margin

4. float + overflow-hidden

5.网格布局（study/try）

display: grid;

grid-template-columns: 300px auto 300px;

grid-template-rows: 200px;

==============================================================================

var person = new Person() new运算符的原理： 1.创建{}对象 2.将{}.__proto__ = Person.prototype 3.执行构造函数且 this指向{}

__proto__存在于任何对象

prototype存在于任何函数（不只是构造函数）

属性检索机制： 1。访问对象自身属性 2.访问对象的__proto__即其构造函数的原型对象 3.访问对象的__proto__.__proto__ .... 一直到Object.prototype.__proto__(null)

==============================================================================

通过splice等方法改变对象引用：可以累积改变
==============================================================================

居中：水平居中，垂直居中，水平垂直居中（try, study）

布局需要巧妙运用：

display:table/table-cell/inline-block + text-align, vertical-align

absolute+ transform

table/flex+margin

flex+justify-content/align-items

table-cell + vertical-align

对css属性的深入了解才能解决疑难杂症！

==============================================================================

fork, pull request

==============================================================================

export { default as ListCard } from './ListCard';

==============================================================================

1.将页面状态（eg:activetab，from【表示从哪个路径跳转的】）记录到url的path和query，然后用next自动匹配path，query也可url拿到状态信息

React.createElement(Icon[iconType])

str.replace(//+/g, '/')

==============================================================================

jest：单元测试

开发依赖/生产依赖：

1 构建工具和其衍生出的插件 webpack，xxx-webpack-plugin

2.预处理器 : 常见的有css中的less、scss、sass、stylus，js中的typescript、coffee-script、babel等等

3.测试工具

4.其他只在开发环境使用的。

都可以归为开发依赖，放到devdependencies

css reset: 清除浏览器默认样式,兼容性问题-->设置全局样式

==============================================================================

Less:Variables ，mixin, nesting, 函数

React.cloneElement

const messages = await import(`../locale/${locale}.js` /* webpackChunkName:"locale" */); 拿到模块

单元测试：通常是对于可复用的，且将来改动少的代码（eg：公共组件）进行测试，代码测试更准确和高效。

TDD和BDD

AOP（study）

CI（study）

==============================================================================

PR是项目评审(Project Review)英文的缩写。也可以是pull request

bypass

LINK/HEAD/

antd: Typography排版, space, divider

useRouter和withRouter(Page)

<Link href="/post/[pid]" as="/post/abc">

==============================================================================

getStaticProps ：1.服务端调用 2.构建时调用（dev模式在请求时调用） 3.仅限page组件

getStaticPaths ：1.服务端调用 2.在构建时调用（dev模式在请求时调用） 3.仅限page组件 4.用动态路由时使用

const router = useRouter()

fallback: true/false

==============================================================================

mutate-immutable，

identity,

typo

react-refresh包代替Hot Module Replacement（简称 HMR)热更新

==============================================================================

隔离dom方式: 1.iframe 2.Shadow DOM

Shadow CSS(study)

Shadow DOM: 隔离外部环境用于封装组件以供复用。 隐藏，隔离的dom（video标签）

==============================================================================

代码分割，

预渲染为何有利于SEO（study）


预渲染（study）：静态生成（study） + 服务端渲染（study）


预定义路由》动态路由》（可选）全匹配路由


createSelector > mapStateToProps

==============================================================================

PWA: 渐进式网页应用: PWA就是一种网页应用，它可以离线使用，可以变成独立应用安装到系统中。它非常的轻量化，在多平台上面拥有一致的界面。

reactive和responsive区别

service worker(study)

渐进式和侵入性

CSS Modules(try)
==============================================================================

面向对象：页面元素（包括页面本身）都当作对象，分析其属性，方法。

功能属性: init(), bindDom(),bindEvents()

ES6/7 新标准的考查

箭头函数：箭头函数存在的意义，第一写起来更加简洁，第二可以解决 ES6 之前函数执行中this是全局变量的问题
Module
Class
Set 和 Map ：是array和object的增强
Promise

==============================================================================

变量：作用域和执行顺序

函数声明比变量声明提高到更高的位置

只声明变量不会覆盖原变量的值

==============================================================================

前端错误分类：

1.运行错误

　1) tray catch 2)window.onerror

2.资源加载错误