单线程和异步的关系

单线程

单线程顾名思义只有一个线程，同一时间只能做一件事情。但为什么JS是单线程而不是跟java那样多线程呢？因为要避免DOM渲染的冲突，为保证浏览器在渲染节点的同时不能执行JS，如果渲染时JS代码还在执行，刚搞执行的代码在操作要渲染的DOM，这就造成渲染冲突。

1
2
3
4
5
6
7
8
9
10
11
12
// 例子1：循环运行期间，JS 执行和 DOM 渲染会暂时卡顿，直到循环结束
var i = sum = 0
for(; i < 100000000; i++) {
  sum += i
}
console.log(sum)

// 例子2：由于 alert 操作是同步，所以在对话框出来时如果不点击确认
// 则 JS 执行和 DOM 渲染会暂时卡顿，直到点击确认关闭 alert
console.log('hello')
alert('暂停执行')
console.log('world')

简单总结：

  • 浏览器需要渲染DOM
  • JS 可以更改DOM结构
  • JS 执行的时候，浏览器 DOM 渲染暂停。反之渲染DOM时 JS 暂停执行
  • 不仅时 JS 和渲染会产生冲突，两端 JS 也不能同时执行，会存在同时修改同个DOM的情况（修改冲突）。
  • web worker 支持多线程，但不能访问DOM

目前的解决方案：异步

异步存在的问题：

  1. 没有按照书写方式执行，可读性差
  2. callback 不容易模块化，容易产生回调炼狱

事件轮询（event-loop）

什么是 event-loop

event-loop 是实现 JS 异步的具体解决方案，

同步代码，直接在主线程按顺序执行
异步函数先放在异步队列中
待同步函数执行完毕，再来轮询执行异步队列的函数，将要执行的函数放会主线程中

展开全文 >>

rollup和webpack的区别

rollup功能单一，webpack功能强大

rollup按照单一功能设计原则（功能单一，可继承，可扩展），只做模块化打包功能，除此之外，rollup无法支持其他功能。学习成本极低，容易上手。虽然功能单一，但rollup将模块打包功能做到极致，打包速度非常快，且打包出来的代码将尽可能的压缩。

webpack功能强大，不止能打包模块，还能做很多rollup无法做到的事情，这也导致webpack的学习成本很高。

使用原则

如果不是非常必要（项目不大的情况下），可使用gulp，rollup等功能单一，可继承，可扩展工具（配合其他工具使用），小巧灵活。避免使用webpack打包工具。

避免为了使用某种工具而使用某种工具，满足需求即可。

展开全文 >>

ES6 到 ES10 新特性学习

ES6篇

该篇会讲述ES6的所有新特性，并且会复习ES6以前的相同知识

作用域

作用域从JS的层面分析有四个作用域：

全局作用域

全局作用域解释

在全局作用域声明的变量（全局变量）可以在程序的任何地方都可以访问，也可以通过 window 对象的属性访问

展开全文 >>

ES6 的模块化使用和开发环境的打包

模块化基本语法

导出模块语法 export

export是一个将魔模块导出的命令，可导出函数、类和变量等数据。

1
2
3
4
5
6
7
8
9
10
11
12
// 导出类
export class Zoom {
  ...
}

// 导出变量
export const x = 1

// 导出函数
export function fn1 () {
  alert('fn1')
}

个人将以上代码理解为多模块导出，就是在一个模块文件中，可以导出多个模块，供其他模块调用。上面的代码导出方式也可写为：

展开全文 >>

RESTful API

什么是 RESTful API

按照现在的发展趋势，前端设备是千奇百怪的，不管是客户端、手机应用、小程序还是Web应用，不管是完成部分还是整体的功能，都可以从统一的后端里面拿到对应的信息。

因此必须同一的机制，方便不同的前端应用与后端进行通信，这导致 API 架构非常的流行，RESTful API 是目前比较成熟的一套互联网应用程序的 API 设计理论。

展开全文 >>

ES6 Class 概念

Class 和 普通构造函数有何区别

JS构造函数

通过function命令生成基本的构造函数，然后设置构造函数的prototype属性，在原型链中写如方法，供实例调用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 声明基本构造函数
function MathHandle(x, y) {
  this.x = x;
  this.y = y
}

// 在构造函数原型中添加 add 方法
MathHandle.prototype.add = function () {
  return this.x + this.y
}

// 声明实例
var m = new MathHandle(1, 2);
console.log(m.add()) // 3

Class 基本语法

构造函数的代码通过Class语法写为：

展开全文 >>

zepto 和 jquery 的原型理解

zepto 的原型的简单实现

在库外面使用$()语法获取一个或多个元素时，zepto 会将传入的selector字符串找到相应的元素，并将元素的一些信息记录在this中。然后return出zepto的实例，该实例为zepto中的Z构造方法实实例的。Z的构造方法的原型会指向$.fn对象，该对象内实现了zepto的造作方法等。

相关代码：

1
2
3
4
5
6
7
<p>123</p>
<script>
var $p = $('p')
console.log($P.css()) // css
console.log($p.html()) // html
console.log($p.fn) // zepto prototype
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
(function (window) {

  var zepto = {}

  function Z (dom, selector) {
     var i, len = dom ? dom.length : 0

    // 将元素信息保存在实例中
    for (i = 0; i < len; i++) {
      this[i] = dom[i]
    }
    this.length = len
    this.selector = selector || ''
    return this
  }

  zepto.Z = function (dom, selector) {
    return new Z(dom, selector)
  }

  zepto.init = function (dom, selector) {
    // 获取 selector 对应的 dom 节点,
    // 由于 node list 是一个伪数组，使用 slice 转一次
    const slice = Array.prototype.slice
    const dom = slice.call(document.querySelectorAll(selector))
    return zepto.z(dom, selector)
  }

  var $ = function (selector) {
    return zepto.init(dom, selector)
  }

  // 暴露到全局变量
  window.$ = $

  // 添加 Z 构造方法的原型
  Z.prototype = $.fn = {
    css: function (key, value) {
      return 'css'
    },
    html: function (value) {
      return 'html'
    }
  }
})(window)

jquery 的原型的简单实现

由于zepto是借鉴jquery的，所以jquery 的原型实现效果与zepto一致，只是实现的方式有点不一样。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
(function (window) {
  var jQuery = function (selector) {
    return new jQuery.fn.init(selector)
  }

  // jquery 原型
  jQuery.fn = {
    css: function (key, value) {
      return 'css'
    },
    html: function (value) {
      return html
    }
  }

  var init = jQuery.fn.init = function (selector) {
    var slice = Array.prototype.slice
    var dom = slice.call(document.querySelectorAll(selector))
    var i, len = dom ? dom.length : 0

    for (i = 0; i < len; i++) {
      this[i] = dom[i]
    }
    this.length = len || 0
    this.selector = selector || ''
    return this
  }

  // 添加构造方法的原型
  init.prototype = jQuery.fn

  // 暴露变量
  window.$ = jQuery
})(window)

原型的扩展性

通过上面jquery和zepto的原型的简单实现代码，可发现代码中都有$.fn的属性，并且改属性为构造器的原型方法。就上面代码看，可以完全不需要$.fm这以属性，这是做什么用的呢？因为这样可以实现插件扩展性，由于jquery和zepto都是执行在自执行函数中，这样的好处是避免变量的全局污染问题，只暴露给全局window中的$变量，像init、Z等都是外面可能会出现的变量，如果不在自执行函数中声明，会与其他的同名变量冲突，为了避免，将构造函数的原型绑定在$变量的属性中。这样外面可直接使用$.fn来添加方法（插件），在$.fn中添加的方法在所有实例中都可访问。

此方法的好处：

  1. 只有$会暴露在window全局变量
  2. 将插件扩展统一到$.fn.xx这一接口，方便使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!-- 普通标签节点 -->
<p>1</p>

<!-- 引入jquery -->
<script type="text/javascript" src="jquery.js"></script>

<!--添加 jquery 插件-->
<script type="text/javascript">
  // 添加 jquery 插件
  $.fn.getNodeName = function () {
    return this[0].nodeName
  }
</script>

<!-- 验证添加的插件 -->
<script>
  var dom = $('p')
  console.log(dom.getNodeName()) // p
</script>

展开全文 >>

javascript 基础

基础篇

1.1 变量类型

变量类型分为值类型和引用类型

1.1.1 值类型

值类型：number（数值）、string（字符串）、boolean（布尔）、null（空指针）、undefined（未定义）

定义：值类型会在内存中开辟两个内存空间用来存储值

特点：内容赋值为值赋值；独享内存；

展开全文 >>