问题

1、JS 为什么是单线程的? 为什么需要异步? 单线程又是如何实现异步的呢?

相关申引：
这段 setTimeout 代码什么意思? 我们一般说: 3 秒后,会执行 setTimeout 里的那个函数

1
2
3

setTimeout(function () {
  console.log("执行了");
}, 3000);

JavaScript 事件循环(event loop)

javascript 里将任务分为同步任务和异步任务

按照这种分类方式:JS 的执行机制是:

• 首先判断 JS 是同步还是异步,同步就进入主线程,异步就进入 event table

• 异步任务在 event table 中注册函数,当满足触发条件后,被推入 event queue

• 同步任务进入主线程后一直执行,直到主线程空闲时,才会去 event queue 中查看是否有可执行的异步任务,如果有就推入主线程中
  以上三步循环执行,这就是 event loop

  然而存在另一种划分任务的方式：

• macro-task(宏任务)：包括整体代码 script，setTimeout，setInterval

• micro-task(微任务)：Promise，process.nextTick

按照这种分类方式:JS 的执行机制是

执行一个宏任务,过程中如果遇到微任务,就将其放到微任务的【事件队列】里

当前宏任务执行完成后,会查看微任务的【事件队列】,并将里面全部的微任务依次执行完

1、React.StrictMode

  是一个用来突出显示应用程序中潜在问题 的工具，StrictMode 不会渲染任何可见的 UI，它为其后代元素触发额外的检查和警告

注意：严格模式检查仅在开发模式下运行；它们不会影响生产构建。

StrictMode 目前有助于：

1. 识别不安全的生命周期
2. 关于使用过时字符串 ref API 的警告
3. 关于使用废弃的 findDOMNode 方法的警告
4. 检测意外的副作用
5. 检测过时的 context API

未来的 React 版本将添加更多额外功能。

2、Portals

Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案

1

ReactDOM.createPortal(child, container);

第一个参数（child）是任何可渲染的 React 子元素，例如一个元素，字符串或 fragment。第二个参数（container）是一个 DOM 元素。

一个 portal 的典型用例是当父组件有 overflow: hidden 或 z-index 样式时，但你需要子组件能够在视觉上“跳出”其容器。例如，对话框、悬浮卡以及提示框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

import React from "react";
import {createPortal} from "react-dom";

class Dialog extends React.Component {
  constructor() {
    super(...arguments);

    const doc = window.document;
    this.node = doc.createElement("div");
    doc.body.appendChild(this.node);
  }

  render() {
    return createPortal(
      <div class="dialog">{this.props.children}</div>, //塞进传送门的JSX
      this.node //传送门的另一端DOM node
    );
  }

  componentWillUnmount() {
    window.document.body.removeChild(this.node);
  }
}

3、Error Boundaries（错误边界）

  部分 UI 的 JavaScript 错误不应该导致整个应用崩溃，为了解决这个问题，React 16 引入了一个新的概念 —— 错误边界

布局相关

1、实现 列表 label 不换换行，内容自适应剩余宽度换行显示

先上实际效果图

具体结构和样式设置如下

HTML

1
2
3
4
5
6
7
8

<div class="parent">
  <div class="label">
    代表作
  </div>
  <div class="content">
    代表作内容
  </div>
</div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13

.parent {
  display: flex;
}
.label {
  display: inline-block;
  height: 100%;
  white-space: nowrap;
}
.content {
  display: inline;
  word-wrap: break-word;
  word-break: break-all;
}

初识 webkit

浏览器是我们 web 开发的伙伴，那么，你真的懂浏览器吗？接下来的文章就让我们一起来认识浏览器内核 webkit

1、浏览器特性

一个浏览器应该包含的功能

• 网络
• 资源管理
• 网页浏览
• 多页面管理
• 插件和扩展
• 书签管理
• 历史记录管理
• 设置管理
• 下载管理
• 账户和同步
• 安全机制
• 隐私管理
• 外观主题
• 开发者工具

2、HTML

发展历程

• HTML 1.0 1991 年
• HTML 4.0 1997 年
• HTML 4.1 1999 年
• HTML 5.0 2012 年

HTML5 包含了一系列的标准，一共包含了 10 个大的类别

3、浏览器内核及其特性

内核和主流内核

在浏览器中，有一个最重要的模块，它主要的作用是将页面转变成可视化的图像结果
这就是浏览器内核，通常，它也被称为渲染引擎

目前主流的渲染引擎包括 Trident,Gecko,和 Webkit 他们分别是 IE,火狐和 Chrome 的内核（2013 年 Google 宣布了 Blink 内核,它其实是从 Webkit 复制出去的）

内核特征

根据渲染引擎所提供的渲染网页的功能，它需要包含下图所示的众多功能模块。图上主要分为三层，最上层使用虚线框住的是渲染引擎所提供的功能

从图中大致可以看出，一个渲染引擎主要包括

HTML 解释器、CSS 解释器、布局和 JavaScript 引擎等

• HTML 解释器： 解释 HTML 文本的解释器，主要作用是将 HTML 文本解释成 DOM（文档对象模型）树，DOM 是一种文档的表示方法
• CSS 解释器：级联样式表的解释器，它的作用是为 DOM 中各个元素计算出样式信息，从而为计算最后网页的布局提供基础设施
• 布局：在 DOM 创建之后 Webkit 需要将其中的元素对象同样式信息结合起来，计算它们的大小样式等布局信息，形成一个能够表示这所有信息的内部表示模型
• JavaScript 引擎：使用 JavaScript 代码可以修改网页的内容，也能修改 CSS 的信息，JavaScript 引擎能够解释 JavaScript 代码，并通过 DOM 接口和 CSSOM 接口来修改网页内容和样式信息，从而改变渲染的结果
• 绘图：使用图形库将布局计算后的各个网页的节点绘制成图像的结果

在了解了这些主要模块之后，下面介绍这些模块是如何一起工作完成网页的渲染过程，一般的，一个典型网页的渲染过程如下图所示

WebKit 内核

Webkit 和 Webkit2

Chromium 内核：Blink

历史总是惊人的相似，当年发生在 KHTML 上的事情，也同样发生在 Webkit 项目上。2013 年 4 月，Google 宣布从 Webkit 复制出来并独立运作的 Blink 项目。

非常规命令

在实际的工作过程中我们往往会用到一些 git 命令，但是我们时长很难记住他们，这里就做下总结记录，便于以后快速查阅

1. git cherry-pick commitId
   利用 git log 查看要合并的提交 commitId 然后
   利用这个命令来合并

2. 在历史的迭代中，我们有可能把一些文件加入 git 版本跟踪，但是发现不需要，那么我们应该怎么去除跟踪呢？

1
2
3

git rm -r --cached .
git add .
git commit -m '清楚永远不想跟踪的文件'

3. 清除在线上已经删除的分支信息，而在本地的缓存

1

git remote update origin --prune

4. 状态信息：deleted by us
   出现场景：

5. 状态信息：both added

React Router 哲学

  在构建单页面应用时，我们需要用到路由，来决定不同的 URL 跳转到不同的页面，而 React 的思想是以组件化的形式来构建页面，所以 React Router 是根据不同的 URL 跳转到不同的组件。

  对于绝大部分框架来说，路由都是静态的，react-router 在 pre-v4 之前也是静态的，但是之后改为动态路由
动态路由是应用程序渲染时发生的路由

基本组件

React Router 中有三种类型的组件

1. router components
2. route matching components
3. navigation components

路由

  React Router 中有三种类型的组件： router components, route matching components，和 navigation components。你在 Web 应用程序中使用的所有组件都应该从 react-router-dom 中导入。import { BrowserRouter, Route, Link } from “react-router-dom”;
路由

  每个 React Router 应用程序的核心应该是一个 router 组件。对于 Web 项目，react-router-dom 提供了 和 路由。这两个路由都会为你创建一个 专门的 history 对象 。一般来说，如果你有一个响应请求的服务器 ，则你应该使用 <BrowserRouter>如果你使用的是静态文件的服务器，则应该使用<HashRouter>。

Route 匹配

有两个路由匹配组件： <Route> 和 <Switch>

  路由匹配是通过比较 <Route> 的 path 属性和 当前地址的 pathname 来实现的。当一个 <Route> 匹配成功时，它将渲染其内容，当它不匹配时就会渲染 null。没有路径的 <Route> 将始终被匹配。

你可以在任何你希望根据地址渲染内容的地方添加 <Route> 。列出多个可能的 <Route> 并排列出来往往很有意义。<Switch>用于将 <Route>分组

   <Switch> 不是分组 <Route>所必须的，但他通常很有用。 一个 <Switch>会遍历其所有的子 <Route>元素，并仅渲染与当前地址匹配的第一个元素。这有助于多个路由的路径匹配相同的路径名，当动画在路由之间过渡，且没有路由与当前地址匹配（所以你可以渲染一个 “404” 组件）

路由渲染属性

你有三个属性 来给 <Route>渲染组件:component ，render ，children 。你可以查看 <Route> 文档 来了解它们的更多信息，但在这我们将重点关注 component 和 render 因为这几乎是你总会用到的两个

导航

React Router 提供了一个<Link> 组件来在你的应用程序中创建链接。无论你在何处渲染一个 <Link> ，都会在应用程序的 HTML 中渲染锚 （<a>）

<NavLink>是一种特殊类型的 <Link> 当它的 to 属性与当前地址匹配时，可以将其定义为“活跃的”

当你想强制导航时，你可以渲染一个 <Redirect>。当一个 <Redirect> 渲染时，它将使用它的 to 属性进行定向

CSS3 中的单位

CSS 中的单位主要包含 pt,px 其中 px 是我们常用的像素属性，而 CSS3 新增了一些单位，帮助我们更好的布局，下面就让我们一起来了解一下这些单位吧

px

pt

em

rem

vw

vh

vmin

vmax

javascript 中运算符优先级

1、 . [] {}
提取属性与调用函数

2、 delete new typeof + - !
一元运算符

3、* / %
乘法，除法，求余

4、+ -
加法，减法

5、>= <= > <
不等式的运算符

6、 === ！==
等式运算符

7、 &&
逻辑与

8、||
逻辑或

9、 ? :
三元运算符
typeof 运算符产生的值有 “number”,”string”,”boolean”,”undefiend”,”function” “object” ,如果运算数是一个数组或 null ,那么返回的是”object”

JavaScript 中的位运算符：

javascript 中有着和 java 相同的一套位运算符，

1
2
3
4
5
6
7
8

& // and 按位与
| // or 按位或
^ // xor 按位异或
~ // not 按位非

>> // 带符号的右位移
>>> // 无符号的右位移
<< // 左位移

函数对象

javascript 中函数就是对象，对象是 名/值对的集合。并拥有一个连接到原型对象的隐藏连接。对象字面量产生的对象连接到 Object.prototype ,函数对象连接到 Function.prototype (该原型对象的本身连接到 Object.prototype)
每个函数在创建时会附加两个隐藏属性，函数的上下文和实现函数的代码

1
2

Function.prototype.**proto** == Object.prototype
result:true

每个函数在创建时也随配有一个 prototype 属性，该属性是一个拥有 constructor 属性，且值即为该函数的对象。
这和隐藏连接到 Function.prototype 完全不同。
函数的与众不同在于他们可以被调用
调用一个函数会暂停当前函数的执行，传递控制权和函数到新的函数。除了声明时定义的形式参数外，每个函数还附加接受两个参数。this 和 arguments 两个参数

javaScript 中函数的调用模式共分为 4 种：

方法调用模式

在对象中调用自身属性的方法，

1
2
3
4
5
6
7
8

var object = {
name:"nihao",
method:function(){
console.log("name:"+this.name);
}
}
调用时：object.method();
result: name:nihao

函数调用模式

最普遍调用函数的模式：

1
2
3
4
5
6

function myfun(a,b){
var c = a +b;
console.log(c);
}
调用：myfun(23,45);
result:68

构造器调用模式

如果在函数前面加一个 new 来调用，那么背地里将会创建一个连接到该函数的 prototype 成员的新对象，同时 this 将会被绑定到那个新对象上。

1
2
3
4
5
6
7
8
9

var Quo =function(string){
this.status = string;
}
Quo.prototype.get_stauts(){
return this.status;
}
var quo = new Quo("my quo");
console.log(quo.get_stauts());
result:my quo

Apply 调用模式

因为 javaScript 是一门函数式的面向对象编程语言，因此函数也可以有方法，
apply 方法让我们构建一个参数数组传递给调用函数，它也允许我们选择 this 值。

1
2
3
4
5
6
7

var array =[3,4];
var sum = add.apply(null,array);
var statusObject = {
status:"A-OK"
};
Quo.prototype.get_status.apply(statusObject);
result:A-OK

参数

当函数被调用时，会得到一个免费配送的参数。那就是 arguments 数组,函数可以通过 arguments 来访问所有它在被调用的时候传递给它的所有参数。包括那些没有在函数定义时分配给函数的参数。这使得编写一个无需指定参数个数的函数成为可能。
因为语言设计的错误，arguments 并不是一个真正的数组，他只是一个类似（array-like）数组的对象。它有一个 length 属性，但它没有任何数组的方法。

返回

当一个函数被调用时，它从第一个语句开始执行，并在遇到关闭函数体的 } 时结束。然后函数把控制权交给调用该函数的程序。
return 语句用来使函数提前返回。当 return 被执行时，函数立即返回，而不去执行下面的语句
一个函数总会返回一个值，如果没有指定，则返回 undefined
如果函数在调用时在前面加上了一个 new 前缀。且返回值不是一个对象。则返回 this(该新对象)

异常

javascript 提供了一套异常处理机制，异常是干扰程序正常执行的不寻常的事故。你的程序应该抛出一个异常

1
2
3
4
5
6
7
8
9

var add function(a,b){
if(typeof a !== 'number' || typeof b !== 'number'){
throw {
name:"TypeError",
message:"add need number"
}
}
return a+b;
}

throw 语句中断函数的执行，它应该抛出一个 exception 对象，该对象包含一个用来识别类型的 name 属性和用来描述错误信息的 message 属性。亦可以添加其他属性。
该对象将被传递到一个 try 语句的 catch 从句，如果 try 代码中抛出了异常。控制权就回跳转带 catch 从句。

1
2
3
4
5
6

try{
//代码块
}catch(e){
//e:即为抛出的异常
console.log(e.message);
}

递归

作用域

闭包

模块

记忆

其他

扩充类型的功能，回调，级联，柯里化