前端代码规范配置

## 引言

在介绍函数式编程之前，我们先来看下函数在JS中的作用。在JS中，函数是一等公民，除了传统函数的使用，它可以作为普通变量一样作为函数参数，还可以在函数中被返回。除此之外，函数还可以当做类来使用，我们使用new加上函数就可以构造一个实例，并且子类还可以通过构造函数的prototype属性实现原型继承。在React中，组件其实也是一个函数。所以在JS中，函数无处不在。

在软件开发中，我们常见的编程形式有命令式编程和声明式编程。而函数式编程是一种较为抽象的编程方式，是一种强调以函数为主要开发风格的编程方式。在函数式编程中，我们以函数的形式思考和编程。



下面，我们简单来看下命令式编程和声明式编程的区别。

* 例子1

```javascript
// 命令式方式
var arr = [0, 1, 2]
for(let i = 0; i < array.length; i++) {
  arr[i] = arr[i] * 2
}

arr; // [0, 2, 4]

// 声明式方式
arr.map(num => num *2)
```

* 例子2

```javascript
// 命令式方式
document.getElementById('#root').innerHTML = '<div>根节点</div>'

// 声明式方式
function insertMsg(domId, msg, format) {
  if (!domId) return;
  document.querySelector(domId).innerHTML = `<${format}>${msg}</${format}>`
}
insertMsg('#root','根节点','div')
```

可以看到，命令式的方式很具体的告诉计算机如何执行某个任务，先做什么再做什么。而声明式的方式主要思想是告诉计算机应该做什么，但不指定具体要怎么做。函数式编程和声明式编程很像，因为他们思想是一致的：即只关注做什么而不是怎么做。但函数式编程不仅仅局限于声明式编程。

**总结：**这种命令式的写法比较简单，也最容易想到，开发起来很快。缺点显而易见，程序的复用性很差。如果我们有很多类似的这种操作，这就有问题了。函数式编程优点如下。

- 扩展性：可以通过增加一些额外的代码，而不用修改之前的逻辑来实现功能的扩展

- 模块化：代码高度解耦，互不影响

- 重用性：可以相互使用，实现重用

- 抽象性：隐藏了很多实现的细节

- 易测试：很容易看出是哪部分代码出了问题

## 分类

### 高阶函数

高阶函数是对其他函数进行操作的函数。满足下列条件之一的函数即可称之为

* 接受一个或多个函数作为参数
* 输出一个函数

举例，最常见的是数组内置的一些方法，map和forEach，参数就是一个函数。

高阶函数的优势很明显。下面的例子一目了然。

```javascript
// 不使用用高阶函数
const arr1 = [1, 2, 3, 4, 5];
let arr2 = [];
for (let i=0; i<arr1.length; i++) {
  if (arr1[i]>3) {
    arr2.push(arr1[i]);
  }
}
console.log(arr2);  // [4，5]

// 使用filter
let arr3 = arr1.filter((ele, index, self) => {
    return ele > 3;
});
console.log(arr3);
```

#### 应用

**一、柯里化(curring)**

柯里化又称部分求值。一个柯里化的函数首先会接受一些参数，接受了这些参数之后，该函数并不会立即求值，而是继续返回另外一个函数，刚才传入的参数在函数形成的闭包中被保存起来。待到函数中被真正的需要求值的时候，之前传入的所有参数被一次性用于求值。

柯里化是函数式编程的一个重要技巧，将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术。

```javascript
// 用闭包把传入参数保存起来，当传入参数的数量足够执行函数时，就开始执行函数
function curry(fn) {
  // 如果传入的函数只有一个参数，直接返回该函数
  if (fn.length <= 1) return fn;
  const generator = (...args) => {
    // 判断当前参数长度够不够，参数够了就立马执行
    if (fn.length === args.length) {
      return fn(...args)
    } else {
      return (...args2) => {
        return generator(...args, ...args2)
      }
    }
  }
  return generator
}

let add = (a, b, c, d) => a + b + c + d
const curryiedAdd = curry(add);
curryiedAdd(1)(2)(3)(4)
```

很多同学知道柯里化的原理，但是不了解它具体在实际编程中的运用。

下面我举几个例子。

* 例子1，关于网络请求

```javascript
// 常见的写法
function fetch(type,url,data){
	let xhr = new XMLHttpRequest();
  xhr.open(type, url);
  xhr.send(data);
}
// 虽然很通用，但是还是有一些重复代码，而且get和post也不是一眼能区分
fetch('get', 'www.test.com', '');
fetch('post', 'www.test.com', 'num=10')

// 使用curry
let fetch = curry(fetch)
// 所有post类型的请求都可以使用这个方法
let post = fetch('post');
// 所有xx接口的post类型的请求都可以使用这个方法
let postTest = post('www.test.com');
postTest('num=10')
```

* 例子2，关于JS类型判断

```javascript
// 使用对象原型方法toString可以判断几乎所有数据类型
let isString = obj => Object.prototype.toString.call( obj ) === '[object String]';
let isRegExp = obj => Object.prototype.toString.call( obj ) === '[object RegExp]';
// 还是一样的的问题，会有很多重复的代码部分，可以抽象出一些重复的部分
const isType = type => target => `[object ${type}]` === Object.prototype.toString.call(target);
const isArray = isType('Array');
isArray([])
```

* 例子3，bind的实现

```javascript
// bind简化实现，原理就是利用柯里化实现延迟计算
// 使用es6语法实现起来非常简洁
Function.prototype.bind = function (context, ...args) {
  let fn = this;
  return (...otherArgs) => {
    return fn.apply(context, [...args, ...otherArgs] );
  }
}

let obj = {
  name: 'abc'
}
const myfun = function(x, y) {
  console.log(this.name);
}
let bindmyfun = myfun.bind(obj);
bindmyfun();
```

**总结：** 通过上面的例子，我们得出柯里化的主要作用就是延迟计算，参数复用。

**二、惰性加载**

惰性加载表示函数执行的分支仅会发生一次。举例，如果做PC开发的时候，我们通常需要对不同的浏览器进行事件监听和移除的方法的一个兼容。

下面是正常的写法。

```js
let addEvent = function(ele, type, fn) {
  if (window.addEventListener) {
    return ele.addEventListener(type, fn, false);
  } else if (window.attachEvent) {
    return ele.attachEvent('on' + type, function() {
      fn.call(ele);
    });
  }
};
```

但是，每次在使用这个方法的时候都会执行if else这个判断，其实对于同一个浏览器而言，只需要判断一次环境就可以了。

* 解决方案1

我们在函数被调用的时候重载函数。

```javascript
let addEvent = function(ele, type, fn) {
  if (window.addEventListener) {
    addEvent = function(ele, type, fn) {
      ele.addEventListener(type, fn, false);
    }
  } else  if (window.attachEvent) {
    addEvent = function(ele, type, fn) {
      ele.attachEvent('on' + type, function() {
        fn.call(ele)
      });
    }
  }

  addEvent(ele, type, fn);
};
```

* 解决方案2

我们在声明函数时就指定适当函数。这样，第一次调用函数就不会损失性能了，而在代码首次加载时会损失一点性能

```javascript
let addEvent = (function() {
  if (window.addEventListener) {
    return function(ele, type, fn) {
      ele.addEventListener(type, fn, false);
    }
  } else  if (window.attachEvent) {
    addEvent = function(ele, type, fn) {
      ele.attachEvent('on' + type, function() {
        fn.call(ele)
      });
    }
  }
})();

```

以上两种方式都只在第一次执行函数时做了性能检测，省去了后续调用时多余的操作，优化了性能。

**三、函数节流和防抖**

我们都知道在scroll，suggest这样的场景下，函数会被频繁的触发，这样很消耗性能，会造成浏览器的卡顿。

比较好的解决方案就是控制函数被触发的频率，也就是函数节流了。

节流的定义：如果你持续触发事件，每隔一段时间，只执行一次事件。

节流的原理很简单：利用setTimeout和闭包。

关于节流的实现，有两种主流的实现方式，一种是使用时间戳，一种是设置定时器。

下面介绍的这种方法利用的是定时器的这种形式

```javascript
// 超级简易版
function throttle(func, wait) {
  let timeout;
  return function(...args) {
    let context = this;
    if (!timeout) {
      timeout = setTimeout(function(){
        timeout = null;
        func.apply(context, args)
      }, wait)
    }
  }
}
```

## 纯函数

纯函数的特征如下。

- 只依赖于它的参数，同时对于任何相同的输入有着相同的输出结果。

* 不对外产生副作用

如何理解？

首先来解释第一点：**函数的返回结果只依赖于它的参数**

```javascript
// 非纯函数
// 返回结果依赖外部变量a，a的值是不确定的，不能保证相同的输入有相同的结果
const a = 1;
const fun1 = (b) => a + b
// Math.random()产生一个随机数，所以返回结果也不确定
const fun2 = (x) => Math.random() + x

// 纯函数
const fun3 = (x) => x * 2
```

接下去说一下第二点：副作用是指：**在计算结果的过程中，系统状态的一种变化，或者与外部世界进行的可观察的交互**。比如说调用 DOM API 修改页面，或者你发送了 Ajax 请求，改变参数或者外部变量的值，还有调用 `window.reload` 刷新浏览器都是副作用的一种表现。

```javascript
// 非纯函数
// 改变了外部变量a
let a = { num: 11};
function set(x) {
 x.num++;
 return x;
}
set(a)

// 纯函数
let a = { num: 11};
function set(x) {
 let b = {...x};
 b.num ++;
 return b;
}
set(x)
```

我们看到纯函数的输出结果是一致的，可预测的，相同的输入会有相同的返回值。

为什么使用纯函数？看下面的例子

```javascript
let num = 0
function increment() {
  return ++num;
}
```


这个函数读取了外部的变量，可能会觉得这段代码没有什么问题，但是我们要知道这种依赖外部变量来进行的计算，计算结果很难预测，你也有可能在其他地方修改了 num 的值，导致你 increment 出来的值不是你预期的，而且你多次调用这个函数返回的结果是不一样的，这样造成的结果就是很难定位到问题发生的原因和位置。

#### 应用

最常见的应用就是`redux`中的reducer。reducer必须是一个纯函数，它会接受一个当前的state和action作为参数，返回一个全新的state，但是不能在原有的state基础上修改。

所以我们常常会见到这样的处理方式

```javascript
return Object.assign({}, state, ...x);
return {...state,...x}
```

那如果我们直接在state上修改，会造成什么结果呢？结果就是页面不会触发重渲染。

所以这就是为什么要求reducer必须是一个纯函数呢，不能修改外部变量。

下面是redux中**combineReducers**函数的部分源码截图

![](https://raw.githubusercontent.com/only-twj520Q/pic_bed/master/blog/202407292009286.png)

可以看到在代码中，我们通过对比旧的state对象和新的state对象的地址指针，来决定状态标志位hasChanged是true还是false，从而决定返回的新或旧的state。所以，如果我们直接改变旧state的属性，那preState肯定是等于nextState。

Redux通过对比新旧对象的存储位置是不是一样，来决定state是不是发生了变化。

为什么这样设计呢？答案很简单，性能好。试想一下，如果state层级很深，而我们不是简单的通过`preState===nextState`来判断state是不是发生变化，那我们唯一的方式就是深对比，通过不断遍历对象，然后通过递归，复杂度可想而知。

**总结**

* 可复用性：纯函数仅依赖于传入的参数，这意味着你可以随意将这个函数移植到别的代码中

* 可测试性：纯函数非常容易进行单元测试，因为不需要考虑上下文环境，只需要考虑输入和输出。

* 并行代码：纯函数是健壮的，改变执行次序不会对系统造成影响，因此纯函数的操作可以并行执行。

最终目的是：**让你的代码尽可能简单易懂和灵活**。

## 函数组合

函数组合是一个数学概念，允许你将两个或更多个函数组合到一个新函数中，就像搭积木一样，最后用一个函数实现所有函数的功能。

例如，我们有这样一个需求。输入一个字符串，过滤掉两遍的空格，全部转为大写，重复三遍，最后格式化一下，插入到指定dom中。

于是，我们就开始写代码了

```javascript
let str = 'angle';
function handleStr(x) {
  x = x.replace(/^(\s*)|(\s*)$/g,'');
  x = new Array(4).join(x);
  let html = `<h1>i am ${x}</h1>`
  document.getElementById('#root').innerHTML = html
}
```

 如果有一天，我们还有另外一个业务。不需要过滤空格，格式化为div，重复五遍，最后插入到anotherDom中。于是又写了下面这个函数。

```javascript
function handleStr(x) {
  x = new Array(6).join(x);
  let html = `<div>i am ${x}</div>`
  document.getElementById('#anotherDom').innerHTML = html
}
```

缺点显而易见了吧。代码冗余，不好理解，很难复用。

所以，如果我们这样写，是不是会优雅很多。

```javascript
const trim = (x) => x.replace(/^(\s*)|(\s*)$/g,'');
const repeat = (n, x) => new Array(n + 1).join(x);
const format = (format, x) => `<${format}>i am ${x}</${format}>`
const insertMsg = (domId, x) => {
  if (!domId) return;
  document.querySelector(domId).innerHTML = x
}
// 这边需要利用curry函数将多个参数的函数进行柯里化
const handleStr = compose(curry(insertMsg)('#root'), curry(format)('h1'), curry(repeat)(3), trim);
```

那compose函数到底是如何实现的呢

```javascript
// 我的实现方式，比较low，但是比较容易看懂
function compose(...funcs) {
  return (...args) => {
    let res = funcs[funcs.length-1](...args)
    for (let i = (funcs.length-2); i>=0; i--) {
      res = funcs[i](res)
    }
    return res;
  }
}

// redux的实现
function compose(...funcs) {
  if (funcs.length === 0) {
    return arg => arg
  }
  if (funcs.length === 1) {
    return funcs[0]
  }
  return funcs.reduce((a, b) => (...args) => a(b(...args)))
}

// underscore的实现
function compose() {
  var args = arguments;
  var start = args.length - 1;
  return function() {
    var i = start;
    var result = args[start].apply(this, arguments);
    while (i--) result = args[i].call(this, result);
    return result;
  };
};
```

## 函数记忆

函数记忆是指将上次的计算结果缓存起来，再次调用的时候如果遇到相同的参数，就直接返回缓存中的结果。

比如下面这样

```javascript
let add = (x, y) => x + y;
// 我们实现这样一个函数
add = memory(add);
add(1,2);
// 相同的参数，第二次调用的时候直接从缓存中取出数据，而非重新计算
add(1,2)
```

下面我们来实现以下

```javascript
const memory = function (fn) {
	let cache = {};
	return function(...args) {
    // 根据参数生成一个唯一的key，这个key的生成方式还有待研究，不够严谨
    let key = args.join('&');
    // 如果key命中缓存，说明已经计算过该函数，则直接返回缓存结果
    if (cache.hasOwnProperty(key)) {
      return cache[key]
    }
    cache[key] = fn.apply(this, args);
	 	return cache[key];
	}
}
```

下面测试一下使用效果

```javascript
let multiply = (x, y, z) => x*y*z;
let memoryMultiply = memory(multiply);

console.time('memory')
for (let i=0; i<10000; i++) {
  memoryMultiply(1,2,3)
}
console.timeEnd('memory')

console.time('not memory')
for (let i=0; i<10000; i++) {
  multiply(1,2,3)
}
console.timeEnd('not memory')
```

在chrome控制台运行上面的程序，结果如下，出乎意料的是使用函数记忆居然比不使用要慢了很多。我自己只能理解为，这种简单计算的时间其实比去缓存中存取来得更快。那到底什么场景使用这个呢。我认为是复杂计算或者递归的场景。

![](https://raw.githubusercontent.com/only-twj520Q/pic_bed/master/blog/202407292010251.png)

我们来看下著名的斐波那契数列。

```javascript
let count = 0;
let fibonacci = function(n) {
  	count++;
    return n < 2? n : fibonacci(n-1) + fibonacci(n-2);
};

// 使用普通递归
console.time('not memory')
fibonacci(20);
console.timeEnd('not memory');
console.log('计算次数', count)

// 使用函数记忆
// 注意这边要覆盖自身
count = 0;
fibonacci = memory(fibonacci);
console.time('memory')
fibonacci(20);
console.timeEnd('memory');
console.log('计算次数', count)
```

![](https://raw.githubusercontent.com/only-twj520Q/pic_bed/master/blog/202407292010354.png)

可以看到函数真正执行计算的次数和时间大大减少，这就是使用函数记忆的优势了。

**总结：** 函数记忆只是一种编程技巧，memory函数本质上它也属于一种高阶函数。从上面的例子看得出来，并不是所有场景都适用于这种方式。而且这种方式还有一个缺点是牺牲算法的空间复杂度。所以，最适合业务场景的才是最好的。

函数式编程

## 关于元素的大小

### 关于尺寸的属性

* clientHeight和clientWidth：

  * 元素可视内容区域的高度和宽度，不包括水平滚动条、边框和外边距。比如，clientWidth=width+padding

  * 单位是像素px。整数（亲测，这是个四舍五入后的值）。返回值不带px

  * 只读属性

* offsetHeight和offsetWidth：

  * 元素可视内容区域的高度和宽度，包括元素的边框、内边距和元素的水平滚动条（如果存在且渲染的话），不包括外边距和:before或:after等伪类元素的高度。比如，offsetWidth=width+padding+borderWidth

  * 单位是像素px。整数（亲测，这是个四舍五入后的值）。返回值不带px

  * 只读属性

* scrollHeight 和 scrollWidth：

  - 元素内容的实际高度和宽度，包括由于溢出导致的视图中不可见的内容，也包括:before或:after等伪类元素的高度和宽度，不包括边框和外边距。没有垂直滚动条的情况下，scrollHeight与clientHeight相等。
  - 单位是像素px。整数（亲测，这是个四舍五入后的值）。返回值不带px
  - 只读属性
  


### 应用

#### 一 获取视口和页面的大小

网页大小：一张网页的全部面积，包括不可见的滚动内容，这个大小由代码设置。

浏览器大小：浏览器窗口看到的面积，也叫视口。

```javascript
// 视口大小
function getViewport() {
  if (document.compatMode == 'BackCompat') {    // 文档模式判断
    return {
      width: document.body.clientWidth,
      height: document.body.clientHeight
    };
  } else {
    return {
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight
    };
  }
}

// 网页大小
function getPagearea() {
  if (document.compatMode == 'BackCompat') {
    return {
      width: document.body.scrollWidth,
      height: document.body.scrollHeight
    };
  } else {
    return {
      width: document.documentElement.scrollWidth,
      height: document.documentElement.scrollHeight
    };
  }
}
```

#### 二 判断元素是否滚动到底

如果元素已经滚动到底，则它的实际内容高度减去已滚动的距离应该等于可视区域高度。下面等式返回true代表已经到底，反之则没有。

```javascript
element.scrollHeight - element.scrollTop === element.clientHeight
```

## 关于元素的位置

### 关于位置的属性

* offsetTop和offsetLeft：

  * 元素距离offsetParent的高度。offsetParent指的是距离该元素最近的position不为static的祖先元素。如果没有则指向body元素。

  * 单位是像素px。整数（亲测，这是个四舍五入后的值）。返回值不带px

  * 只读属性

* scrollTop 和 scrollLeft：

  * 元素的滚动距离。比如，scrollTop代表滚动条向下滚动的距离，也是是元素顶部被遮住的距离。在没有滚动条的时候，scrollTop等于0。

  * 单位是像素px。整数（亲测，这是个四舍五入后的值）。返回值不带px

  * 可写属性：如果设置小于0，它的值会等于0。如果设置超过了这个容器可滚动的距离，它的值会等于最大值


### 应用

#### 一 获取元素绝对位置

绝对位置，指元素的左上角相对于整张网页左上角的坐标，通过计算获得。每个元素都有 offsetTop 和 offsetLeft 属性，表示该元素的左上角与父容器（offsetParent对象）左上角的距离，因此进行迭代累加，就可以得到该元素的绝对坐标。注意，此方面不适用于 表格 和 iframe，因为在其中，offsetParent 对象未必等于父容器。

```javascript
function getElementTop(element) {
  let actualTop = element.offsetTop;
  let current = element.offsetParent;
  while (current !== null) {
	actualTop += current.offsetTop;
	current = current.offsetParent;
  }
  return actualTop;
}
```

注意: **所有这些偏移量属性都是只读的**，而且每次访问它们都需要重新计算。因此，应该尽量避免重复访问这些属性；如果需要重复使用其中某些属性的值，可以将它们保存在局部变量中，以提高性能。



## 样式相关

### getBoundingClientRect

使用方法：

```javascript
rectObject = element.getBoundingClientRect();
```

* 返回元素的大小及其相对于视口的位置，返回值是一个对象，包含width, height, bottom, right, left, top, 六个属性。left, right, top, bottom都是元素（不包括margin）相对于视口的原点（视口的上边界和左边界）的距离。

* 单位是像素px。浮点值。返回值不带px

* 只读属性，返回浮点值。

如下图，浏览器的支持程度还是非常高的。

![](https://p.ipic.vip/qmtg55.png)

自己测试的结果是，这个方法获取的height和offsetHeight大小是一致的。

### element.style

使用方法：

```javascript
inlineStyle = element.style;
```

* 返回值是一个`CSSStyleDeclaration `对象，返回元素标签内的样式，局限性在于使用这个方法只能获取到元素内联样式中的属性值。其中，`CSSStyleDeclaration` 表示一个CSS属性键值对的集合
* 单位是像素px。字符串。返回值带px
* 可写属性

可以这样手动操作单个元素的宽度：

```javascript
Element.style.width = '100px';
```

### getComputedStyle

使用方法：

```
window.getComputedStyle(element, [pseudoElt]);
```

第二个参数是指定一个要匹配的伪元素的字符串，例如“:before”。如果不需要可以为null。CSS属性值可以使用`getPropertyValue(propName)`API或直接索引到对象。差别在于getPropertyValue不必使用驼峰的写法。

例如

```javascript
window.getComputedStyle(ele, null).getPropertyValue("background-color");
window.getComputedStyle(ele, null).backgroundColor;
```

* 返回值是一个`CSSStyleDeclaration`对象，返回一个可以获取当前元素所有最终使用的CSS属性值
* 单位是像素px。字符串。返回值带px
* 只读属性

如下图，浏览器的支持程度还是非常高的。

![](https://raw.githubusercontent.com/only-twj520Q/pic_bed/master/blog/202407291823643.png)

### element.currentStyle

这个属性是IE浏览器的属性。语法与element.style类似，差别在于element.currentStyle返回的是元素当前应用的最终CSS属性值（包括外链CSS文件，页面中嵌入的`<style>`属性等）。

### 应用

#### 一 判断元素是否在可视区域

```javascript
// 方法1
function isInViewPortOfTwo (el) {
  const viewPortHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight 
  const top = el.getBoundingClientRect() && el.getBoundingClientRect().top
  const offsetTop = el.offsetTop
  const scrollTop = document.documentElement.scrollTop
  const topGap = offsetTop - scrollTop
  return topGap  <= viewPortHeight
}
// 方法2
function isInViewPortOfTwo (el) {
  const viewPortHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
  const { top, height } = el.getBoundingClientRect();
  return (top <= viewPortHeight) && (top + height >= 0);
}
```

#### 二 图片懒加载

实现一个非常简易的图片懒加载

```javascript
<img 
  class="test-img"
  src="" 
  data-src="httt://www.xxx.com/images/001.jpg"
/>
```

监听scroll事件，当图片出现在可视区域时，提取data-src的值并赋给src，加载真正图片

```javascript
let img = document.getElementsByClassName('test-img');

//设置每次遍历的起始图片，防止重复加载
let n = 0
//首次加载可视区域图片
lazyLoad();

function lazyLoad() {
  for (let i = n; i<img.length;i++) {
    let el = img[i];
    if(el.getAttribute('src') === '' && isInViewPortOfTwo(el)){
      el.setAttribute('src', el.getAttribute('data-src'))
      n++;
    }
  }
}
// 判断是否在可视范围内
function isInViewPortOfTwo (el) {
  const viewPortHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
  const top = el.getBoundingClientRect() && el.getBoundingClientRect().top;
  return top  <= viewPortHeight
}

window.addEventListener('scroll', _.debounce(lazyLoad, 1000))
```

#### 三 获取元素的位置

```javascript
// 相对位置
var X= this.getBoundingClientRect().left;
var Y =this.getBoundingClientRect().top;

// 绝对位置
var X= this.getBoundingClientRect().left + document.documentElement.scrollLeft;
var Y =this.getBoundingClientRect().top  +document.documentElement.scrollTop;
```

  **测试代码附上**

```javascript
<!DOCTYPE html>
<html>
<head>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    #app {
      border: 1px solid #333333;
      margin-top: 50px;
      padding-top: 50px;
    }
    #box1 {
      width: 100px;
      height: 50px;
      padding: 50px;
      border: 50px solid #000000;
      background-color: #00D8C9;
      font-size: 20px;
      overflow: scroll;
    }
    #box2 {
      width: 200px;
      height: 200px;
      margin-top: 500px;
      border: 50px solid #FF4747;
      background-color: #00D8C9;
    }
  </style>
</head>
<body>
  <div id="app">
    <div id="box1">第一个盒子第一个盒子第一个盒子第一个盒子第一个盒子第一个盒子</div>
    <div id="box2" style="width: 500px; height: 100px">第一个盒子</div>
  </div>
<script>
let box1 = document.getElementById('box1');
let box2 = document.getElementById('box2');
function getViewport() {
  // 文档模式判断
  if (document.compatMode == 'BackCompat') {
    return {
      width: document.body.clientWidth,
      height: document.body.clientHeight
    };
  } else {
    return {
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight
    };
  }
}

function getPagearea() {
  if (document.compatMode == 'BackCompat') {
    return {
      width: document.body.scrollWidth,
      height: document.body.scrollHeight
    };
  } else {
    return {
      width: document.documentElement.scrollWidth,
      height: document.documentElement.scrollHeight
    };
  }
}

console.log('视口宽度', getViewport().width)
console.log('视口高度', getViewport().height)
console.log('网页宽度', getPagearea().width)
console.log('网页高度', getPagearea().height)

console.log('---------元素尺寸----------')
console.log('第一个元素的高度，clientHeight', box1.clientHeight)
console.log('第一个元素的高度，offsetHeight', box1.offsetHeight)
console.log('第一个元素的高度，scrollHeight', box1.scrollHeight)
console.log('第一个元素的高度，scrollTop', box1.scrollTop)

console.log('---------元素距离----------')
console.log('第二个元素距离父元素的高度 offsetTop', box2.offsetTop)

console.log('---------元素样式----------')
console.log('第二个元素的DOMRect getBoundingClientRect', box2.getBoundingClientRect())

console.log('第二个元素的 style', box2.style)
console.log('第二个元素的 getComputedStyle', window.getComputedStyle(box2).getPropertyValue('width'))
</script>
</body>
</html>
```

**参考链接**

[如何判断元素是否进入可视区域viewport]

容易混淆的元素位置和大小属性

## promise介绍

**Promise**是异步编程的一种解决方案。ES6提供原生支持，并为**Promise**提供了统一的 API。

从语法上说，**Promise**是一个JS的原生对象，从它可以获取异步操作的消息。

**Promise** 本身是一个构造函数，可以像下面这样构造一个**Promise**实例


```javascript
const p = new Promise((resolve, reject) => {
  resolve('success');
});
console.log(p);
```

打印结果如下

![](https://p.ipic.vip/fy9gp8.jpg)

**Promise**实例有两个私有属性，其中`[[PromiseStates]] ` 代表状态，一共有三种状态，[[PromiseValue]]代表结果。

- `[[PromiseStates]] ` 
  * pending：等待中
  * resolved：成功
  * rejected：失败
- `[[PromiseValue]]`



基本介绍就写这么多了，网上资料太多了。

下面主要是对一些特性的试验，基本以代码为主。

## 特点

下面是我自己使用下来总结的一些特点，不具有代表性。

### 特点一：立即执行性和异步性

所谓立即执行性，是指**Promise** 构造函数新建实例后立即执行，它也是同步代码。

所谓异步性，是指**promise** 的`then()`具有异步性，当执行到`.then()`部分，这部分会自动进入到**Promise**的异步事件队列，不会阻塞同步代码的执行。需要注意的是**promise**这种异步任务是属于一个微任务，它和以setTimeout为代表的宏任务在执行顺序上有一点区别。

```javascript
const p = new Promise((resolve, reject) => {
  console.log('promise内部')
  resolve('success');
});

p.then((value) => {
  console.log('then内部', value);
});

console.log('主程序');
```

输出结果

```javascript
promise内部
主程序
then内部 success
```

### 特点二：状态不可逆

```javascript
const p1 = new Promise((resolve, reject) => {
  resolve('p1 success-1');
  resolve('p1 success-2');
});

const p2 = new Promise((resolve, reject) => {
  resolve('p2 success');
  reject('p2 reject');
});

const p3 = new Promise((resolve, reject) => {
  reject('p3 reject');
  resolve('p3 success');
});

p1.then((value) => {
  console.log(value);
});

p2.then((value) => {
  console.log(value);
}, (err) => {
  console.log(err);
});

p3.then((value) => {
  console.log(value);
}, (err) => {
  console.log(err);
});
```

输出结果

```javascript
p1 success-1
p2 success
p3 reject
```

**Promise**一旦使用了resolve或者reject的时候，状态就不能再次变化，这就是**Promise**的不可逆性。

### 特点三：链式调用

```js
const p = new Promise(((resolve, reject) => {
  resolve(5);
}));


const p1 = p.then((value) => {
  console.log(value);
  return value * 10;
})

console.log(p1)

```

输出结果

![](https://p.ipic.vip/tbo6il.jpg)

可以看到`then`返回的就是一个**Promise**，而且是立即返回。这边之所以展开是resolved状态，是因为console.log的异步性，或者说在展开对象属性之前，它保留的是一个对象的引用。如果需要实时查看状态，加个断点即可。

也正是因为`then`返回的是一个新的**Promise**，所以可以通过链式调用`then` 方法。

`then`方法接收两个函数作为参数，第一个参数是**Promise**执行成功时的回调，第二个参数是**Promise**执行失败时的回调。两个函数只会有一个被调用，函数的返回值将被用作创建then返回的Promise对象。

#### then中的返回值

大概总结了下面四种情况

* `return`了一个同步的值，经过测试，不管返回null，undefined或者其他类型，`then`方法将返回一个resolved状态的**Promise**对象，**Promise**对象的值就是这个返回值。

  ```javascript
  const p = new Promise(((resolve, reject) => {
      resolve(1);
    }));
  
  
  p
    .then((value) => {
      return null;
    })
    .then((value) => {
      console.log(value);
      console.log('对象类型', {}.toString.call(value));
    })
  ```

  输出结果

* ```javascript
  null
  对象类型 [object Null]
  ```

* 没有`return`任何值

  输出结果

  ```javascript
  undefined
  对象类型 [object Undefined]
  ```

* `return`了另一个 **Promise**，`then`方法将根据这个**Promise**的状态和值创建一个新的**Promise**对象返回。

  比如返回的是`Promise.resolved(value)`，则**Promise**的状态为resolved，值为value。

* ```javascript
  const p1 = new Promise(function (resolve, reject) {
    resolve(1);
  })
  
  const p2 = p1.then((value) => {
    return p1;
  })
  
  p2.then((value) => {
    console.log(value)
  })
  
  console.log(p1 === p2)
  ```

  输出结果

  ```javascript
  false
  1
  ```

* `throw` 一个同步异常，`then`方法将返回一个**Promise**，状态是rejected，值是`throw`的参数。


## 不常见的例子

#### 例子1

```javascript
const p1 = new Promise(function (resolve, reject) {
  setTimeout(() => {
    console.log('p1-promise');
    reject('这个是错误')
  }, 3000)
});
const p2 = new Promise(function (resolve, reject) {
  console.log('p2-promise');
  resolve(p1);
})

p2
  .then(result => console.log('then内部', result))
  .catch(error => console.log('catch内部', error))
```

输出结果

![](https://raw.githubusercontent.com/only-twj520Q/pic_bed/master/blog/202407291756450.png)

#### 例子2

```javascript
const p1 = new Promise(function (resolve, reject) {
  setTimeout(() => {
    console.log('p1-promise');
    resolve('这个是错误')
  }, 3000)
});
const p2 = new Promise(function (resolve, reject) {
  console.log('p2-promise');
  reject(p1);
})

p2
  .then(result => console.log('then内部', result))
  .catch(error => console.log('catch内部', error))
```

输出结果

![](https://raw.githubusercontent.com/only-twj520Q/pic_bed/master/blog/202407291758651.png)

#### 例子3

```javascript
const p1 = new Promise(function (resolve, reject) {
  setTimeout(() => {
    console.log('p1-promise');
    reject('这个是错误')
  }, 3000)
});
const p2 = new Promise(function (resolve, reject) {
  console.log('p2-promise');
  reject(p1);
})

p2
  .then(result => console.log('then内部', result))
  .catch(error => console.log('catch内部', error))
```

输出结果

![](https://raw.githubusercontent.com/only-twj520Q/pic_bed/master/blog/202407291758437.png)

三个例子的结果各异，对于这样的现象，我个人的理解是这样。

p1和p2都是一个**Promise**。一方面，在p2代码中，如果使用reject方法，p2的状态变成了一个rejected，值就是p1，错误直接被catch住，而且error本身就是p1。三秒以后，如果p1的状态变成了resolved，可以添加`then`添加回调获取p1的值，p1的状态变成了rejected，则就抛出一个错误了。

另一方面，在p2代码中，如果使用resolve方法，p2的状态不会马上变成resolved，但是这个时候，它会依赖p1的结果，所以它会等到三秒以后p1的状态，如果p1变成了resolved，则会执行`then`中的代码，如果p1变成了rejected，则会执行`catch`中的代码，并且很重要的一点是它会对p1进行类似拆箱的操作，会直接拿到p1的结果，作为`then`或者`catch`回调的参数。

#### 例子4

```javascript
const p1 = Promise.resolve(1);
const p2 = Promise.resolve(p1);
const p3 = new Promise((resolve, reject) => {
  resolve(1);
});

const p4 = new Promise((resolve, reject) => {
  resolve(p1);
});

console.log(p1 === p2);
console.log(p1 === p3);
console.log(p3 === p4);
```

输出结果

```javascript
true
false
false
```

p1接收了一个普通值1，所以会返回一个resolved状态的**Promise**对象，值为1。
p2接收了一个**Promise**对象p1，会直接返回这个**Promise**对象。
p3和p4通过`new`方式创建了一个新的**Promise**对象，所以p3和p1,p4都不会相等。


## 错误

```javascript
const p = new Promise(((resolve, reject) => {
  reject('promise内部的错误');
}));
p
  .then((value) => {
    console.log(value);
    return value * 10;
  })
setTimeout(() => {console.log('主程序')}, 1000)
```

![](https://raw.githubusercontent.com/only-twj520Q/pic_bed/master/blog/202407291759189.png)

如果**Promise**抛出一个错误，但是在`then`中没有第二个参数来捕获这个错误的话，就会在控制台打印错误信息，但是不会阻塞代码继续执行。

#### then中对于错误的处理

```javascript
const p = new Promise(((resolve, reject) => {
   resolve(1);
 }));
p
  .then((value) => {
    console.log('第一个then的第一个回调', value);
    return Promise.reject('then中错误啦')
  }, (value) => {
    console.log('第一个then的第二个回调', value);
  })
  .then((value) => {
    console.log('第二个then的第一个回调', value);
  }, (value) => {
    console.log('第二个then的第二个回调', value);
  })
  .then((value) => {
    console.log('第三个then的第一个回调', value);
  }, (value) => {
    console.log('第三个then的第二个回调', value);
  }).catch(error => console.log('catch内部', error))
```

输出结果

```javascript
第一个then的第一个回调 1
第二个then的第二个回调 then中错误啦
第三个then的第一个回调 undefined
```

因为在第二个`then`的参数中有对错误的处理，所以它可以捕获之前的error信息，并且自身的状态也变成了resolved。所以它能执行第三个`then`的回调。

如果不在`then`中进行对之前**Promise**的捕获，则一旦发生错误，会中断**Promise**链后面的代码，直接被`catch`到错误。

```javascript
const p = new Promise(((resolve, reject) => {
    // throw new Error('promise内部的错误')
  resolve(1);
}));
p
  .then((value) => {
    console.log('第一个then的第一个回调', value);
    return Promise.reject('then中错误啦')
  })
  .then((value) => {
    console.log('第二个then的第一个回调', value);
  })
  .then((value) => {
    console.log('第三个then的第一个回调', value);
  }).catch(error => console.log('catch内部', error))
```

输出结果

```javascript
第一个then的第一个回调 1
catch内部 then中错误啦
```

#### throw了一个error

如果在**Promise**中直接throw了一个错误的话，则会让**Promise**的状态变成rejected，不会直接**Promise**下面的代码。

```javascript
const p = new Promise(((resolve, reject) => {
  throw new Error('promise内部的错误')
  resolve(1);
}));
p
  .then((value) => {
    })
  .catch(error => console.log('catch内部', error))
```

输出结果

```javascript
catch内部 Error: promise内部的错误
    at Promise ((index):38)
    at new Promise (<anonymous>)
    at (index):37
```

#### try catch

在**Promise**代码外部使用`try catch`并不会得到想要的结果。因为`try catch`捕获的是同步代码中的错误。

关于更多捕获在异步代码中错误的问题，可以参考我的另一篇日记。

## 顺序执行

如何让Promise顺序执行，可以利用async和await。下面是一个很简单的demo。

```javascript
let p1 = () => new Promise(resolve => {
  setTimeout(() => resolve(1), 1000)
})
let p2 = () => new Promise(resolve => {
  setTimeout(() => resolve(2), 2000)
})
let p = [p1, p2];
async function queue() {
  for (let i=0; i<p.length; i++){
    let result = await p[i]();
    console.log(result)
  }
}
queue()
```

## 实际使用

简单封装一下ajax

```javascript
const fetchData = function(url, method, headerConfig) {
  return new Promise(function(resolve, reject){
    const handleChange = function() {
      if (this.readyState !== 4) {
        return;
      }
      if (this.status === 200 || this.status === 304) {
        resolve(this.response);
      } else {
        reject(new Error(this.statusText));
      }
    };
    const xhr = new XMLHttpRequest();
    xhr.open(method, url);
    xhr.onreadystatechange = handleChange;
    xhr.responseType = "json";
    
    if (typeof headerConfig === 'object' && headerConfig !== null) {
   	  for (let headerKey in headerConfig) {
	    xhr.setRequestHeader(headerKey, headerConfig[headerKey]);
      }
    }
    
    xhr.send();
  });
};
```

前言

简介

引言

关于元素的大小

关于尺寸的属性

promise介绍

前言