前言

我在边学 Vue 边做 轱辘UI 的项目中，写 row 组件 的测试用例时碰到了一个问题。
测试用例需要渲染两个组件，它们是父子关系，但测试下来子组件并没有拿到父组件的 gutter 属性，发现原来是因为 Vue 异步的渲染。
之后通过 setTimeout 和 done() 解决了这一问题，之后便有了这篇博客。

分析

Vue到底是怎样渲染组件到页面的？看例子来分析吧

1. 浏览器会查看是否有缓存

除了html文件外尽量使用缓存。具体可见我的博客。

2. DNS查询

减少 DNS 查询，即尽量把所有的资源放在一个网站，这样的话只需要请求一个网站就可以下载所有的资源。

3. 建立TCP连接

1. TCP 连接复用，在 HTTP 协议里面加一个请求头：keep-alive，即第一次 TCP 连接建立以后不断开连接，第二次请求时复用上一次的连接。
2. 如果使用的是 http/2.0 ，它的连接复用率是更高的，即多路复用

前言

继承是面向对象思想中的重要概念， JavaScript 在ES 6 中正式引入了继承的概念。
下面介绍一下继承的概念，以及在 ES5 和 ES6 中写继承的方法。

面向对象中的继承

维基百科：

继承（ inheritance）是面向对象软件技术当中的一个概念。如果一个类别B“继承自”另一个类别A，就把这个B称为“A的子类”，而把A称为“B的父类别”也可以称“A是B的超类”。继承可以使得子类具有父类别的各种属性和方法，而不需要再次编写相同的代码。

所以继承是类和类之间的关系，然而JavaScript起初根本没有类的概念，那么为什么也有继承呢？

JavaScript中的继承

要了解JS的继承，就得先了解原型链。该部分可见我的另一篇博客

简单来说，就是每一个对象都有一个__proto__属性，指向该对象的原型prototype，原型的层层指向就形成了一个类似链表的结构（实际上原型的指向是多对一的，所以说成“树”的结构其实更准确一点）称之为原型链。

前言

我在我的网易云音乐项目中，因搜索歌曲的需求，需要监听输入框的oninput事件。
但后来发现我的数据库接受请求次数有些异常，原来是用户每一次输入过程中都会向后端发送请求，非常浪费性能。
之后搜索并了解到js的函数节流，有效解决了这一问题，便有了这篇博客。

函数节流的原理

函数节流的原理就是定时器。
当我触发一个时间时，先setTimout让这个事件延迟一会再执行，如果在这个时间间隔内又触发了事件，那我们就clear掉原来的定时器，再setTimeout一个新的定时器延迟一会执行，就是这样。

代码实现

定义一个节流函数：

区别

encodeURI()和encodeURIComponent()方法都可以对URI（通用资源标识符）进行编码，以便发送给浏览器。
但它们编码的范围有所不用。

1. encodeURI()方法不会对下列字符编码：ASCII字母、数字、~!@#$&*()=:/,;?+’
2. encodeURIComponent()方法不会对下列字符编码：ASCII字母、数字、~!*()’

使用场景

1. 对 整个URL 进行编码就使用encodeURI()
2. 对 URL中的参数 或者 URL后面的一部分 进行编码就使用encodeURIComponent()

举例说明：

let 命令

1. let所声明的变量只在其所在的代码块内有效，比如for循环的计数器就很适合使用let命令。
2. 不存在变量提升
3. 暂时性死区：使用let命令声明变量完成之前，该变量都是不可用的。
4. 在相同作用域中不允许重复声明同一个变量

const 命令

let与const都是只在声明所在的块级作用域内有效。

1. 声明一个只读常量，一旦声明，常量的值就不能改变。
2. 实际上const保证的并不是变量的值不得改动，而是变量指向的那个内存地址不得改动。

• 对于简单类型的数据，值就保存在变量指向的那个内存地址。
• 而对于复合类型的数据，变量指向的内存地址，保存的只是一个指针，const保证这个指针固定，而它指向的数据结构是不能控制的。

Cookie是什么？

通俗的说，Cookie 是浏览器访问服务器后，服务器传给浏览器的一段数据。此后每次浏览器访问该服务器，都必须带上这段数据。

特点：

1. 服务器通过设置Set-Cookie响应头来设置 Cookie（给客户端一串字符串）
2. 客户端每次访问相同域名的网页时，必须带上这段字符串
3. 客户端要在一段时间内保存这个Cookie
4. Cookie 默认在用户关闭页面后就失效，实际会在20分钟左右失效，根据浏览器而不同。但是后端可以强制设置有效期（相关可见MDN）。
5. Cookie 的大小大概在4KB以内
6. Cookie 实际上存在 C 盘的某个文件里

什么是面向对象

面向对象程序设计（Object-oriented programming，简称OOP），概念如下：

把一组数据结构和处理它们的方法组成对象（object），把相同行为的对象归纳为类（class），通过类的封装（encapsulation）隐藏内部细节，通过继承（inheritance）实现类的特化（specialization）／泛化（generalization），通过多态（polymorphism）实现基于对象类型的动态分派（dynamic dispatch）。

上面这段话根本看不懂什么意思，还是先来理解一下面向对象的一些术语吧：

立即执行函数的作用和使用

1. 我们不想要全局变量
2. 我们要使用局部变量
3. ES 5 里面，只有函数有局部变量
4. 于是我们声明一个 function xxx，然后 xxx.call()
5. 这个时候 xxx 是全局变量（全局函数）
6. 所以我们不能给这个函数名字
7. function(){}.call()
8. 但是这样写 Chrome 会报错，语法错误
9. 试出来一种方法可以不报错:

1
2
3
4
5
6
7
8

!function(){}.call()  //我们不在乎这个匿名函数的返回值，所以加个 ! 取反没关系

(function(){}).call() //不推荐，原因如下

xxx    
(function(){}).call() //报错

allen12415145141556.call() //用随机数，不推荐

JavaScript中的MVC

MVC模式（Model–view–controller）是一种设计模式（或者软件架构），把系统分为三个基本部分：模型（Model）、视图（View）和控制器（Controller）。

1. Model 数据管理，主要负责和服务器进行交互。将请求到的数据传给Controller。
2. View 负责用户界面，HTML 渲染。
3. Controller 负责监听并处理View 的事件，更新和调用 Model；也负责监听 Model的变化（Model从服务器获得数据），并更新 View。Controller 控制其他所有流程。

画图来理解：