一般情况下，div是没有onblur事件的，但是给div加上tabindex属性后，就可以使用onblur事件了。

注意

定义tabindex属性后，元素是默认会在聚焦的时候加上outline的样式，也就是onfocus时候，样式为div:focus{…}，那么在IE中可以通过hidefocus="true"去除。其他浏览器通过outline=0进行去除，可以通过样式去修改，比如div:focus{outline:none}。

.gitignore文件配置

如果没有.gitignore文件创建一个，有的话可以直接修改。可以使用ls -a查看所有的隐藏的文件。

.gitignore规则

简单举几个例子

1
2
3
4

server/node_modules    过滤server文件夹中的node_modules文件夹
server/myDoc.docx      过滤server文件夹中的myDoc.docx文件
*.zip                  过滤以.zip后缀的文件
!root/                 不过滤root文件

问题

当给video或audio标签添加autoplay属性时，在chrome浏览器会失效。

原因

Chrome为了不造成噪音污染，提升用户体验，首次让用户自己选择，关掉了声音自动播放

解决方案

介绍

在Web应用中，实现动画效果的方法比较多，JavaScript 中可以通过定时器 setTimeout 来实现，css3 可以使用 transition 和 animation 来实现，html5 中的 canvas 也可以实现。除此之外，html5 还提供一个专门用于请求动画的 API，即 requestAnimationFrame（rAF），顾名思义就是 “请求动画帧”。 为了深入理解 rAF 背后的原理（后文的 rAF 均指的是 requestAnimationFrame），我们首先需要了解一下与之相关的几个概念：

jquery ajax

对原生XHR的封装。

优点

• 无页面刷新
• 异步
• 支持JSONP
• 为以后的优秀的http请求库打下来基础

关于context的知识点

context 是react 提供的实现数据共享的api，解决props层层传递的问题

1. React.createContext()创建Context对象
2. 使用Context Provider包裹组件 给他的后代组件提供数据
3. Context Provider所有的后代组件，都可以通过Context.Consumer获取到Context数据

浏览器如何进行加载、解析、渲染？

1. 用户访问网页，DNS服务器（域名解析系统）会根据用户提供的域名查找对应的IP地址，找到后，系统会向对应IP地址的网络服务器发送一个http请求。
2. 网络服务器解析请求，并发送请求给数据库服务器。
3. 数据库服务器将请求的资源返回给网络服务器，网络服务器解析数据，并生成html文件，放入http response中，返回给浏览器。
4. 浏览器解析 http response。
5. 浏览器解析 http response后，需要下载html文件，以及html文件内包含的外部引用文件，及文件内涉及的图片或者多媒体文件。
   　解析html 构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树

介绍

• XMLHttpRequest对象是ajax技术的核心。
• JavaScript通过这个对象可以自己发送请求，同时也自己处理响应。
• 得到了几乎所有现代浏览器的支持。

兼容性

微软最早在IE5中以ActiveX对象的形式实现了一个名叫XMLHTTP的对象。在IE中创建新的对象要使用下列代码：

Partial

构造一个类型，将Type的所有属性设置为可选。该实用程序将返回一个表示给定类型的所有子集的类型。

例子:

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

interface Todo {
  title: string;
  description: string;
}

// 用partial将接口Todo所有属性变成可选
function updateTodo(todo: Todo, fieldsToUpdate: Partial<Todo>) {
  return { ...todo, ...fieldsToUpdate };
}

const todo1 = {
  title: "organize desk",
  description: "clear clutter",
};

// 虽然第二个参数没有给声明title属性，但不报错
const todo2 = updateTodo(todo1, {
  description: "throw out trash",
});

正常情况下对齐方式只能是按照一个方向排列，如：

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

<!-- css -->
<style>
    .father {
        margin: 10px;
        padding: 10px;
        width: 200px;
        text-align: center;
        border: 1px solid #ccc;
    }
</style>

<!-- html  -->
<div class="father">
    <p class="child">我是单行居中显示</p>
</div>

<div class="father">
    <p class="child">我是多行居中显示我是多行居中显示</p>
</div>

运行结果：