一些关于前端、技术，和我的生活的文字

前端

技术

生活

关于我

进入NetlifyCMS

Spark1e的Github

前往Twitter

给spark1e发邮件

在博客中搜索……

Category: All - Page 9 | Spark1e的个人博客

### 写在前面

最近由于疫情的原因，找工作是越来越难了，自己的工作时间也很尴尬，三年不足，一年有余，反思自己，觉得应该在现在的时间多学些东西，同时督促自己提高效率，就想到了“番茄工作法”，想找一个App来配合使用，看到了一个叫"FocusList"的工具，很简洁，支持macOS + iOS，但是价格让我望而却步，简单的功能也需要近15元，还不包括macOS，而且作者上一次版本更新还是在一年前，现在的macOS三天一小更新，五天一大更新，付费最担心的莫过于后面的系统支持不好。正好最近想练下React Hooks，决定自己仿照App实现一个番茄计时，加入PWA和Web提醒功能，噩梦就这么来了。

### MDN的官方写法

在MDN的[通过通知推送让 PWA 可重用“”](https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps/Re-engageable_Notifications_Push)一文中，给出了规范的写法，这里提到Notification的requestPermission是一个Promise对象，因此，可以用如下写法提示用户打开推送许可：

```javascript
Notification.requestPermission().then(function(result) {
    if(result === 'granted') {
        randomNotification();
    }
});
```

OK，这种写法很简洁，也非常容易在业务里实现，部署到HTTPS的域名下试试效果，Chrome（macOS）下完美。

再用Safari（macOS）打开，错误，emmm，看到报错：`undefined is not an object (evaluating 'Notification.requestPermission().then')`，了解，应该是Safari需要兼容，也许是实现不同，通过查阅文档果然，Safari是通过Callback实现的，也就是说，这段代码应该改为：

```javascript
try {
    Notification.requestPermission()
        .then(() => doSomething())
} catch (error) {
    // Safari doesn't return a promise for requestPermissions and it                                     
    // throws a TypeError. It takes a callback as the first argument                                     
    // instead.
    if (error instanceof TypeError) {
       Notification.requestPermission(() => {
           doSomething();
       });
    } else {
       throw error;
    }
}      
```

通过这种改造，ok，macOS上的Safari能够正常请求允许并发送通知了，很不错。

### iOS与macOS —— 区别对待

本以为到这里已经结束了，但万万没想到的是，iOS对PWA的支持是 __有限的__ , 在iOS上，压根就没有Notification这个对象，也就是说，如果想兼容iOS设备，就要先做一个判断：

```javascript
if(typeof Notification === 'undefined') return; // Without Notification, code below will throw error.
try {
    Notification.requestPermission()
        .then(() => doSomething())
} catch (error) {
    // Safari doesn't return a promise for requestPermissions and it                                     
    // throws a TypeError. It takes a callback as the first argument                                     
    // instead.
    if (error instanceof TypeError) {
       Notification.requestPermission(() => {
           doSomething();
       });
    } else {
       throw error;
    }
}      
```

踩过坑，就要知道iOS究竟实现了PWA的哪些部分，查阅资料，总结下来 __至今仍未支持的功能__ 有：

- 创建应用程序加载屏幕
- 使用推送通知
- 添加离线支持（iOS会在指定时间清除AppCache，因此，离线支持不是永久可用的。）
- 创建一个初始的应用程序UI来实现即时加载
- 通过浏览器引导对话框，提示安装到主屏幕

所以，到这里我终于明白为什么iOS市场会有一些功能很简单但是需要付费的软件了，生态闭环，封闭了一些功能，使得开发者 __不得不__ 采用不同的方式来实现。

这也是PWA迄今为止仍无法大范围普及的原因，功能缺失，是不能作为App的 __替代__ 来完成使用的。

而小程序，能够通过宿主平台的能力（推送、缓存、以及账户共享等等），完成PWA很早就期望的一些能力，因此，小程序是目前相对“Lite”的应用形式。

> 另外一种推送方式是FCM，即Firebase Cloud Messaging，它需要一个完全唯一的用户设备ASN，但是通过Web的方式，我们不能够获得这种ASN，因此这一条路也是不通的。

### Apple，何时才能做出改变？

谷歌相关问题，就能够发现很多相关的提问。距离iOS开始支持standalone模式的PWA已经过去了一年多的时间（从iOS12.2发布算起，发布的时间是2019年3月25日），其实我想对于Apple而言，技术不是问题，核心问题是PWA可能会给AppStore带来或多或少的影响，这从根本影响了Apple支持PWA的愿望。

iOS Safari何时才能更好的支持PWA？

## 思路

利用filter特性，我们可以对根节点直接增加黑白滤镜，也可以通过通用的类名实现指定节点的滤镜（请注意，filter属性可能会影响部分DOM元素的渲染层，请参考BFC相关知识点。）

## 先看几种实现

### B站

```css
html.gray{-webkit-filter:grayscale(.95)}
```

配合以下的JS代码实现在指定时间段内自动开启滤镜：

```javascript
var now=Date.now();15859296e5<now&&now<1586016e6&&(document.getElementsByTagName("html")[0].className="gray")
```

(PS: 刚上线的时候看了一下，发现轮播没有修改为单个，后两个为空，一定要注意😂)

### 京东

```css
.o2_ie8 .more2_international {
    filter: progid:dximagetransform.microsoft.alphaimageloader(src='//storage.360buyimg.com/mtd/home/more_international1575014601797.png', sizingMethod='scale');
    background: none;
}

.mod_help_cover {
    background-image: none;
}

.dropdown:hover .cw-icon {
    border-bottom: 1px solid #e3e4e5;
}

html.o2_gray {
    -webkit-filter: grayscale(100%);
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
```

配合以下JS代码实现在指定时间内应用类名

```javascript
var isDuringDate = function(beginDateStr, endDateStr) {
    var curDate = new Date()
    var beginDate = new Date(beginDateStr)
    var endDate = new Date(endDateStr)

    if (curDate >= beginDate && curDate <= endDate) {
        return true
    }
    return false
}

$html = $('html')
$html.toggleClass('o2_gray', isDuringDate('2020/04/04 00:00:00', '2020/04/04 23:59:59'))
```

(PS: 京东的首页没有压缩源代码，很多部分是直出拼接在页面内的，也是一种便于操作的方案)

### 淘宝

```css
html{-webkit-filter: grayscale(100%);       filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);} 
```

## 总结

综合以上几个例子，我们可以知道，通过`filter: grayscale(100%);`即可完成最简单的灰度化，但是，filter属性的可用性在[Caniuse查询](https://caniuse.com/#feat=css-filters)可知，不兼容全系列IE浏览器，即便我们使用`-ms-filter`，在[部分版本IE仍无法使用](https://docs.microsoft.com/en-us/previous-versions/ms530752(v%3Dvs.85))，因此，如果需要兼容IE则可以通过IE浏览器自身实现的滤镜来作为替代。

> Note   As of Windows Internet Explorer 9 this feature was deprecated. As of Internet Explorer 10 this feature was removed and should no longer be used.

另外可以发现，京东还做了图片滤镜的兼容，在灰度滤镜效果异常时可以使用半透明图片作为滤镜，也是一种常见的方案。

## 延申阅读

[如何尽可能的兼容低版本IE](https://medium.com/@MateMarschalko/css-filters-all-the-way-down-to-ie4-6349d61c4cce)

上面这篇文章介绍了一些兼容的技巧，但是对于一些效果需要实验验证DXImage系的滤镜与CSS3滤镜的效果是否一致。

利用CSS给自己的博客增加灰度化效果

## 写在前面

在我个人使用VPS时，一开始的思路时独立尽可能少的服务到独立的VPS内，这导致我有很多最低配的服务器，服务没用到的时候其实运行负载并不高，低配置又不能支持诸如Sentry等服务的启动，因此，采用Docker将同类型的服务进行合并是更好的策略，但随之而来的是需要对配置有合理的规划

## 为什么先写Nginx

首先我们要清楚一点，Docker的部分权限是和系统平级的，比如 __防火墙__ (操作端口时会同时添加iptables)，这导致如果只做简单映射，就会把对应端口暴露在外网，需要限制哪些服务可以通过外网访问，哪些服务只暴露对应端口给Dashboard。

> 请在平时启动Docker容器时，不想暴露到外网必须指定port的时候加127.0.0.1。

> 如果端口只暴露而不需要映射到主机端口，请使用`--expose`代替`-p`。

## 默认配置

最方便的方式其实就是从已经运行的默认nginx镜像复制一份配置文件出来

```bash
dokcer cp YOUR_NGINX_ID:/etc/nginx/conf.d/default.conf ./
dokcer cp YOUR_NGINX_ID:/etc/nginx/nginx.conf ./
```

## 配置方案

由于是同一机器上多个容器，因此只将Nginx暴露到外网，其他容器均由Nginx进行反向代理。

端口之间各种复杂的映射并不是最好的办法，选择有两种：

- Nginx安装在实际的机器内，反代各种Docker容器；
- Nginx以容器形式安装，通过网络或者link方式组成一体的网络；

我的机器为了统一管理，这里选择第一种。

利用Docker管理VPS——Nginx篇


## 深克隆是用来做什么的？

JavaScript内，所有的Object都是引用类型，它们对应的变量只保存了一个指向实际内存的指针，如果我们只是将目标对象赋值给新对象，那么我们实际复制的还是指针，如果我们修改了原始内存内保存的对象，就会导致所有相关的变量都会被改变。因此，深克隆的目的就是为了生成一个全新的对象，并存储在独立的内存位置内。

## 先实现一个简单的复制

假设我们有以下一段已有的代码：

```javascript
// 测试循环应用
var _objType = {
  name: "This is another object."
};
// _objType.objectType = _objType;

// 复制的原始对象
var origin = {
  stringType : "This is string.",
  numberType : 123,
  booleanType : false,
  objectType : _objType,
  functionType : function() {
    return document.navigator.userAgent;
  },
  inheritType: inheritObj
}

var clonedObj = cloneDeep(origin);
origin.numberType = 456; // 修改原始对象的属性

console.log(clonedObj);
```

那么我们的基础复制方法baseClone应该如下：

```javascript
function cloneDeep(target) {
  return baseClone(target);
}

function baseClone(target) {
  var newObj = {};
  for (var key in target) {
    // 循环一个指定的变量来循环一个对象所有可枚举的属性
    newObj[key] = target[key];
  }
  return newObj;
}
```

我们注释了一个循环引用的情况下，对应的属性得到了复制，并且在修改原始对象时，新对象没有被修改。

## 递归实现简单深复制

通过判断每次读取的key是否是对象，我们可以得到一个递归实现的简单深拷贝：

```javascript
function baseClone(target) {
  var newObj = {};
  for (var key in target) {
    // 循环一个指定的变量来循环一个对象所有可枚举的属性
      if(typeof target[key] === 'object' && target[key] !== null) {
        newObj[key] = baseClone(target[key]);
      } else {
        newObj[key] = target[key];
      }
  }
  return newObj;
}
```

但是这里就会出现一个非常致命的bug， **我们的测试用例内有一个循环引用，如果只这样遍历会导致无限递归** ，我们需要进行处理。

## 保证只循环复制自身的属性

修改我们的baseClone，检测对应的key是否是自身属性：

```javascript
function baseClone(target) {
  var newObj = {};
  for (var key in target) {
    // 循环一个指定的变量来循环一个对象所有可枚举的属性
    if(Object.prototype.hasOwnProperty.call(target, key)) { // 使用泛型方法，避免target内存在自定义的hasOwnProperty方法导致判断出现错误
      if(typeof target[key] === 'object' && target[key] !== null) {
        newObj[key] = baseClone(target[key]);
      } else {
        newObj[key] = target[key];
      }
  	}
  }
  return newObj;
}
```

## 处理循环引用(Circular Structure)

> 循环引用是指，对象A中有一个指针指向对象B，B内又有一个指针指向对象A，导致两个指针都不能得到正确的释放。

我们使用一个数组去存储拷贝过的对象，避免循环引用导致递归进入死循环无法退出的问题：

```javascript
function baseClone(target, stack) {
  var newObj = {};
  if(!stack) stack = [];
  // 检测target是否已经存在于stack内
  if(target.indexOf(stack) > -1) {
    return target
  } else {
    stack.push(target)
  }
  for (var key in target) {
    // 循环一个指定的变量来循环一个对象所有可枚举的属性
      if(typeof target[key] === 'object' && target[key] !== null) {
        newObj[key] = baseClone(target[key], stack);
      } else {
        newObj[key] = target[key];
      }
  }
  return newObj;
}
```

## 如果涉及到继承

我们修改上面的例子，给出一个简单的继承：

```javascript
// 测试继承部分的情况
function OriginParent(name) {
  this._stringType = name;
  this.numberType = 999;
};
var inheritObj = new OriginParent("origin string");
var clonedInherit = cloneDeep(inheritObj);
inheritObj.numberType = 888;

console.log(clonedInherit.constructor);
```

当我们打印复制的对象的构造函数时，我们发现它输出的是Object而非OriginParent，也就是说我们在复制的过程中，遗失了它本身的构造函数。

因此在循环时我们需要使用一个变量临时存储，并在之后修复它，改进的代码如下：

```javascript
// 利用new操作符的特性完成修复
function inheritClone(target) {
  var ctor = target.constructor;
  var newObj = new ctor;
  return newObj;
}
```

> 这里处理的情况其实是函数，但实际上lodash库对于函数直接进行了返回，换而言之，他们使用同一个内存地址是符合我们对于深拷贝的定义的。

## 处理更多的类型

### 数组

首先通过展开运算符(`...`)是可以快速实现的，会对简单的一维数组（且内部均为基本类型的值）的数组进行拷贝，如果涉及到引用类型（包括多维数组），还需要进行递归处理直到目标是一个基础类型为止。

除了展开运算，我们也可以使用几个数组的原生方法返回全新的数组，比如`Array.map`或者`Array.concat(); // 拼接为空时是指返回新的原来数组`

修改上面的代码，使之支持数组：

```javascript
function baseClone(target, stack) {
  var newObj = Array.isArray(target) : [] : {};
  if(!stack) stack = [];
  // 检测target是否已经存在于stack内
  if(target.indexOf(stack) > -1) {
    return target
  } else {
    stack.push(target)
  }
  for (var key in target) {
    // 循环一个指定的变量来循环一个对象所有可枚举的属性
      if(typeof target[key] === 'object' && target[key] !== null) {
        newObj[key] = baseClone(target[key], stack);
      } else {
        newObj[key] = target[key];
      }
  }
  return newObj;
}
```

### 其他引用类型

首先要进行判断，因为是引用类型，建议通过`toString`来进行判断，下面给出一个简单的对应：

```javascript
const mapTag = '[object Map]';
const setTag = '[object Set]';
const arrayTag = '[object Array]';
const objectTag = '[object Object]';

const boolTag = '[object Boolean]';
const dateTag = '[object Date]';
const errorTag = '[object Error]';
const numberTag = '[object Number]';
const regexpTag = '[object RegExp]';
const stringTag = '[object String]';
const symbolTag = '[object Symbol]';
```

对于以上的类型，除了数组和对象，其他都不能再进行递归拷贝，因此可以对应使用构造器直接构造新的引用值来进行拷贝。

## 延展话题：Map与WeakMap

这个话题之后会另起一篇单独讨论，他们在这一类复制的情况可以有较好的运用。

从零到一实现一个JS版深克隆

目前，JavaScript生态下最常见的模块机制大致分为以下四种：

- AMD
- CMD
- CommonJS
- ES6 Module

下面逐个分析每个机制的特点。

## CommonJS

- 环境：Node.js
- 全局方法：`require(module) & exports || module.exports`

### exports 与 module.exports

在Node.js环境中，`exports, require, module`都是node的全局对象，`exports`是`module.exports`的引用。

## AMD("Asynchronous Module Definition")

- 环境：Browser
- 全局方法：`require([module], callback)`

> 这里需要注意，所有的浏览器环境的模块化机制，都要避免同步引入，因为不同于服务端可以直接进行磁盘读取，很快即可使用对应模块，浏览器端需要异步请求，否则会造成假死的状态。因此， __浏览器端的模块化机制都是异步加载的__ 。

AMD规范通过回调机制实现了异步加载，在加载完成后执行callback。

## CMD("Common Module Definition")

- 环境：Browser(Sea.js)
- 全局方法：`define() & seajs.use()`

## ES6 Modules

- 环境：Browser(目前工具通过工具已经支持Node.js)
- 全局方法：`export & import`

与CommonJS最主要有两点区别

1. ES6模块输出的是值的引用，输出接口动态绑定，而 CommonJS 输出的是值的拷贝；
2. ES6模块编译时执行，而 CommonJS 模块总是在运行时加载。

### export的使用

```javascript
export const firstName = "Michael";
// const firstName = "Michael";
// export { firstName }; // 不能直接export firstName是因为export需要导出一个“接口”而不能是一个值。
```

### export default

为模块指定默认输出，如果import接口时，可以用任意名称指向export default输出的方法

JavaScript的模块机制

> 写在最前面，为什么已经入行一年半才写这样一篇文章呢？其实并不是自己平时开发没有使用，但是很多时候自己的代码会有些“四不像”，各种风格糅杂在一起，因此写这么一篇文章，从编程范式的角度规范自己的代码。

### 面向对象的特性

面向对象就要提到以下的“名词”，那么JavaScript应该如何实现这些呢？

- 类与对象
- 封装性
- 继承
- 多态
- 抽象性

### 类与对象

> 基于原型的编程不是面向对象编程中体现的风格，且行为重用（在基于类的语言中也称为继承）是通过装饰它作为原型的现有对象的过程实现的。这种模式也被称为弱类化，原型化，或基于实例的编程。

而在JavaScript中，实现的方式就是通过函数内置的Prototype属性完成这种 __原型继承__ 。

#### 对象

JavaScript内的对象，其实就是Object，那么Object有两种方法可以用来创建：

```javascript
var Person = {}; // 字面量
var Person = new Object(); // 使用new运算符
```

那么他们有什么区别呢？首先要说的就是new，new做了哪些呢？这里引用MDN的解释：

> 1. 创建一个空的简单JavaScript对象（即{}）；
> 2. 链接该对象（即设置该对象的构造函数）到另一个对象 ；
> 3. 将步骤1新创建的对象作为this的上下文 ；
> 4. 如果该函数没有返回对象，则返回this。

不难发现，new的第一步其实和字面量方式完全一致，所以，new运算符的链接与设定this其实是最核心的不同点。

我们一般不常用`new Object()`，而直接用字面量方式的原因，其实是因为他们的prototype都指向了null。

正是因为这样，我们在日常的使用中，如果希望通过OOP实现逻辑，应该通过new的方式来进行，因为他可以继承我们期望的对象。

##### 代码风格

JavaScript有很多的引用类型数据，因此在面向对象时，要注意分离自有的部分与暴露的方法。

```javascript
function Person (name){
	this.name = name;
}
Person.prototype.sayIntro = function() {
	return 'Hello, my name is ' + name + '.'
}
var person1 = new Person('peter'); // Person是一个构造器。
person1.sayIntro(); // 为什么可以调用prototype上的方法呢？参见“原型链”
```

##### `Object.create()`

> Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。

Object.create()是ES2015规范内的新方法，同时在ES5.1进行了加强，它可以polyfill使得我们可以在生产中尽可能使用来让我们的代码更为清晰。

其内部核心的实现其实在JS高程有对应的代码：

```javascript
// 在自己的实现里要注意当前环境是否支持create，以及目标是否可以作为create的对象。
Object.create = function (proto, propertiesObject) {
  function F() {}
  F.prototype = proto;
  return new F();
};
```

那么如果使用`Object.create`应该如何实现继承呢？下面是MDN的一个例子：

```javascript
// Shape - 父类(superclass)
function Shape() {
  this.x = 0;
  this.y = 0;
}

// 父类的方法
Shape.prototype.move = function(x, y) {
  this.x += x;
  this.y += y;
  console.info('Shape moved.');
};

// Rectangle - 子类(subclass)
function Rectangle() {
  Shape.call(this); // call super constructor.
}

// 子类续承父类
Rectangle.prototype = Object.create(Shape.prototype); // create的目标是父类的prototype，注意，JS的继承是原型继承。
Rectangle.prototype.constructor = Rectangle; // 修复constructor指向
```

上面是一个单继承的例子，如果我们希望做多继承，其实只需要修改Rectangle.prototype，让其的赋值为其多继承的对象的prototype的合并(Object.assign)。需要注意需要在子类内部显式绑定this。

#### 类

ES6最大的变化就是对Class的支持，虽然JS只能通过原型继承，但是Class的出现使得JS的OOP“看起来更像那么回事了”。

为什么说看起来呢？目前还没有实现私有与公有特性，它只是原来构造模式的一个语法糖，但是，它也有它的不同之处。

- Class内部只是原型的实现，在实际使用时还是需要通过new运算符执行构造函数；
- 类声明不能被提升；
- 类声明中的代码自动运行在严格模式下；
- __类中的所有方法都是不可枚举的__ ；
- 每个类都有一个`[[construct]]`的方法，constructor方法默认返回实例对象（即this）；

##### 派生类

```javascript
class HelloWorld extends React.Component {}
```

上面这种写法在React的开发中非常常见，extends是一个派生类， __在派生类中，如果使用了构造方法，就必须使用super()__ ，在构造函数中访问this之前要调用super()， __负责初始化this__ 。

```javascript
class Shape {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}

class Rectangle extends Shape {
  constructor() {
    super();  // 这里的super可以作为函数，也可以作为特殊的对象（无法直接输出，但是可以设置属性）。
  }
}
```

### 继承

见上面对“类与对象”内继承的实现，核心在于prototype __原型继承模式__ 。

### 抽象

> 抽象是允许模拟工作问题中通用部分的一种机制。这可以通过继承（具体化）或组合来实现。
> JavaScript通过继承实现具体化，通过让类的实例是其他对象的属性值来实现组合。

> JavaScript Function 类继承自Object类（这是典型的具体化） 。Function.prototype的属性是一个Object实例（这是典型的组合）。

### 多态

其实多态并没有太多好说的，核心在于“原型链”：如果你在子类声明了同名的属性和方法，那么就不会在原型链上向上查找。

JavaScript面向对象编程(ES6版本)

前端的笔试题，离不开妙用数组解决存储和顺序，本文复习一下数组的方法，加深印象，补充一些妙用。

## 方法概览

1. 转换
	- toLocalString()
    - toString()
    - valueOf()
    
2. 栈方法
	- pop() `array.pop() // 返回pop的元素`
    - push() `array.push(item1, item2, ..., itemX) // 返回数组新长度`
    
3. 队列方法
	- push() `array.push(item1, item2, ..., itemX) // 返回数组新长度`
    - shift() `array.shift() // 返回移除的元素`
    
4. 重排序
	- sort() `array.sort(sortFunction) // 返回数组的引用，不产生新的副本`
    - reverse() `array.reverse() // 返回数组的引用，不产生新的副本`
    
5. 操作方法
	- concat() `array1.concat(array2,array3,...,arrayX) // 返回新数组`
    - slice() `array.slice(start, end) // 返回新的数组`
    
      > array.slice()返回数组的复制。
        
    - splice() `array.splice(index,howmany,item1,.....,itemX) // 如果从 array 中删除了元素，则返回的是含有被删除的元素的数组。`

6. 位置方法
	- indexOf() `array.indexOf(item,start) // 返回第一个出现的位置，如果未找到返回 -1`
    - lastIndexOf() ` // 返回最后一个出现的位置，如果未找到返回 -1`
    
7. 迭代方法
	- every() `array.every(function(currentValue,index,arr), context) // context为this的值，下同。返回布尔值，如果所有元素都通过检测返回 true，否则返回 false。`
    - filter() `array.filter(function(currentValue,index,arr), context) // 返回数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。`
    - some() `array.some(function(currentValue,index,arr) ,context) // 返回布尔值。如果数组中有元素满足条件返回 true，否则返回 false。`
    - forEach() `array.forEach(function(currentValue, index, arr), context) // 返回undefined！`
    - map() `array.map(function(currentValue,index,arr), context) // 返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。`
    
8. 归并方法
	- reduce() `array.reduce(function(total, currentValue, currentIndex, arr), initialValue) // 返回计算结果，例如求和。`
    - reduceRight() `array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue) // 返回计算结果。`
    
9. 新方法
	- keys() `array.keys() // [object Array Iterator]`
    - includes() `arr.includes(searchElement, fromIndex?) // 返回布尔值。如果找到指定值返回 true，否则返回 false。`
    - from() `array.from(object, mapFunction, context) // 返回数组对象。用于通过拥有 length 属性的对象或可迭代的对象来返回一个数组。`
    - findIndex() `array.findIndex(function(currentValue, index, arr), context) // 返回符合测试条件的第一个数组元素索引，如果没有符合条件的则返回 -1。` 
    - entires() `array.entries() // 返回数组迭代对象。`

做前端笔试题前，需要复习的数组方法

### 已解决

* Q: 用JS实现一个函数，能使输入特定的字符串转化为特定结构化数据。

  字符串仅由小写字母和`[,]`构成，且字符串不包含多余的空格

  示例一：`'abc'` -> `{value:'abc'}`

  示例二：`'[abc[bcd[def]]]'`-> `{value:'abc',children:{value:'bcd',children:{value:'def'}}}`

  A:

  ```javascript
  // 类比AST，将输入转换为一系列操作
  function normalize(str) {
    let parent = {}
    // 所有括回均不需要，直接移除
    parent.children = _normalize(str.replace(/\]/g, ''))
    return parent.children
  }
  
  function _normalize(str) {
    // [abc[bcd[def]]] => {value: "abc", children: {value: "bcd", children: {value: "def"}}}
    // 不具有树形结构直接返回
    let obj = {}
    if(str.charAt(0) !== '[') {
      obj.value = str
      return obj
    }
    // '['开始, 找到之后的连续字符串
    let arr = str.split('[')
    let _val = arr[1]
    // 截取剩下的部分再进行递归
    let rest = ''
    for(let i = 2; i < arr.length; i++) {
      rest = rest + '[' +arr[i]
    }
    if (rest === '') {
      return {value: _val}
    }
    return {value: _val, children: _normalize(rest)}
  }
  
  normalize('[abc[bcd[def]]]')
  // normalize('def')
  ```
  
* Q: 模仿lodash内调用curry函数，实现一个myCurry？

  A:

  > 墙裂推荐这篇[译文](https://www.jianshu.com/p/822c4bfeb8a9)，将柯里化的思考过程逐步展现出来
  
  > 本题解法来自《JavaScript轻量级函数式编程》

  ```javascript
  // lodash: _.curry(func, [arity=func.length])
  // 实现两点：1. 参数复用——可固定参数，2. 延迟计算——返回最终函数触发计算
  // 原型实现：
  function curry(fn, arity = fn.length) {
    return (function nextCurried(prevArgs) {
      return function curried(nextArg) {
        var args = prevArgs.concat([nextArg])
        if(args.length >= arity) {
          return fn(...args)
        } else {
          return nextCurried(args)
        }
      }
    })([])
  }
  // 注意：偏函数partial(add, 3)和柯里化curry(add)(3)的区别
  ```
  
* Q: 在不使用slice，replace等原生函数的情况下，实现一个indexOf方法（本题来自“司徒正美”的[博客](https://www.cnblogs.com/rubylouvre/archive/2011/08/19/2144894.html)）？

  A:
  ```javascript
  function getSubStrArr(str, length) {
    var subStrArr = []
    if(!length || length === 0) return subStrArr;
    for (var i = 0; i < str.length - length + 1; i++) {
      if(length > 1) {
        var tmp = [];
        for(var j = 0; j < length; j++) {
          tmp.push(str.charAt(i + j));
        }
        subStrArr.push(tmp.join(''));
      } else {
        subStrArr.push(str.charAt(i));
      }
    }
    return subStrArr;
  }

  function myIndexOf(str, target) {
    if(target === '' || target === undefined) return flag;
    var flag = -1
    var subStrArr = getSubStrArr(str, target.length);
    for(var i = 0; i < subStrArr.length; i++) {
      if(subStrArr[i] === target) {
        flag = i
      }
    }
    return flag
  }
  console.log(myIndexOf('abcdefgh', 'cde'))
  ```
  
* Q: 简单手写实现bind

  A: 见 [实现bind](https://blog.sparking.app/post?id=fe%252Fspeaking-javascript-%25E9%2598%2585%25E8%25AF%25BB%25E7%25AC%2594%25E8%25AE%25B0-%25E4%25B8%2589)
  
* Q: 如何获取两个时间（格式如: 2001-01-30）中间相差的年月日（提供三个精度）

  A:
  ```javascript
  // 这道题投机的方式是通过字符串与年月日格式的硬匹配完成，但是如果要求多种精度，则需要很繁琐，建议使用Date
  function parseDate(str) {
    let strArr = str.split('-')
    if(strArr.length !== 3 || parseInt(strArr[0]) < 1970 || parseInt(strArr[1]) > 11 || parseInt(strArr[2]) > 31 ) { // 简单处理，兼容如果当月没有此日期
      throw new Error('日期格式非法')
    }
    let date = new Date(strArr[0], strArr[1]-1, strArr[2])
    return date;
  }

  // 深拷贝日期对象
  function dateToString(_date, unit) {
    var _d = new Date(_date.valueOf());
    var _dStr = ''
    if(unit > 0) _dStr += _d.getFullYear();
    if(unit > 1) _dStr += ('-' + (parseInt(_d.getMonth()) + 1 >= 10 ? (parseInt(_d.getMonth()) + 1).toString() : '0' + (parseInt(_d.getMonth()) + 1).toString()));
    if(unit > 2) _dStr += ('-' + (parseInt(_d.getDate()) >= 10 ? parseInt(_d.getDate()).toString() : '0' + parseInt(_d.getDate()).toString()));
    return _dStr;
  }

  // unit指精度, 从1-3分别指年月日，函数返回一个数组，包含中间所有的相差的日子
  function minorDates(start, end, unit) {
    var _u = unit || 3;
    var _start = parseDate(start)
    var _end = parseDate(end)
    var _minors = []
    var _minorDate = _end - _start
    var step = 24 * 60 * 60 * 1000; // default 一天
    if(_minorDate <= 0) {
      return _minors
    } else {
      for(var i = 0; i < _minorDate / step; i++) {
        var _d = dateToString(new Date(_start.getTime() + i * step), unit)
        if(_minors.indexOf(_d) === -1) _minors.push(_d);
      }
    }
    return _minors
  }

  console.log(minorDates('2019-02-25', '2020-02-25', 3))
  ```

### 来自前端面试周报的题

> 本篇主要记录 Github airuikun/[**Weekly-FE-Interview **](https://github.com/airuikun/Weekly-FE-Interview) 仓库内的优秀面试题我自己的解法，会持续更新，但是不会每题都解一遍，建议可以访问源仓库。

* Q: 简单手写实现Promise

  A:

  ```javascript
  // 实现主要三个功能，thenable，resolve，reject，catch，finally
  ```
* Q: 简单手写实现Async/Await

  A:

  ```javascript
  
  ```

### [掘金](https://juejin.im/) 日常浏览的题目

* Q: Promise题

  **限制异步操作的并发个数并尽可能快的完成全部**

  有8个图片资源的url，已经存储在数组urls中。

  urls类似于`['https://image1.png', 'https://image2.png', ....]`

  而且已经有一个函数function loadImg，输入一个url链接，返回一个Promise，该Promise在图片下载完成的时候resolve，下载失败则reject。
  但有一个要求，任何时刻同时下载的链接数量不可以超过3个。请写一段代码实现这个需求，要求尽可能快速地将所有图片下载完成。

  > 作者：LinDaiDai_霖呆呆
  >
  > 链接：https://juejin.im/post/5e58c618e51d4526ed66b5cf
  >
  > 来源：掘金

  A:

  ```javascript
  // 最优解法可以往瀑布流靠拢，有一个三个任务race的池，当一个完成时加入一个未开始的开始。
  ```

### 大厂面试题

_本节内容来自网络_

前端部分面试题解（不定期更新）

_本篇开始将一部分浏览器与Node.js环境相关的知识点补充进来_

### 超时与间歇调用

> JavaScript是单线程语言（后期加入额外线程Worker）

需要注意的是，使用定时器对于队列而言，不是在指定时间立即执行，而是 __在指定时间被加入到队列中__ ，如果队列内没有其他任务，则表现为“立即执行”

如果在浏览器端，需要效果比较好的定时执行，可以通过rAF实现。

### DocumentFragment

使用DocumentFragment优化DOM操作。

### 浏览器的重绘与重排

详见另一篇[文章](https://blog.sparking.app/post?id=fe%252F%25E6%25B5%258F%25E8%25A7%2588%25E5%2599%25A8%25E7%259A%2584%25E9%2587%258D%25E7%25BB%2598-repaint-%25E4%25B8%258E%25E9%2587%258D%25E6%258E%2592-reflow-%25E6%259C%25BA%25E5%2588%25B6 "重绘与重排")

### 事件

现在使用MVVM框架多了，减少了直接操作事件，但是还是有必要列出复习的。

#### 1. 事件流

三个阶段：

* 事件捕获
* 处于目标
* 事件冒泡

#### 2. DOM2级事件处理程序

* `addEventListener(eventName, fn, needCapture?)`
* `removeEventListener`

remove操作需要注意，fn不能是一个匿名函数，这时remove才有效。

#### 3. 事件对象

event对象通常包括以下：

* bubbles
* cancelable
* currentTarget
* defaultPrevented(DOM Level-3)
* detail
* eventPhase(处于流的阶段，1-捕获，2-处于目标，3-冒泡)
* preventDefault() (取消默认行为，注意区分)
* stopImmediatePropagation() (DOM Level-3)
* stopPropagation() (取消事件的进一步捕获或冒泡)
* target
* trusted
* type
* view

#### 4. 事件委托

事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

面试题：

Q：用原生JS实现jQuery的on和off效果？

A:

#### 5. 事件模拟

可以用 `document.createEvent` 模拟一些鼠标或者键盘事件，但是需要实机测试，例如Chrome对模拟的点击事件就有比较严格的限制。

#### 6. 拖放事件

HTML5 新增的事件，可以用来作为一些特殊的交互，比如拖放上传等。

#### 7. JSON

注意，以下都是 **合法的** JSON：

* **简单值**
* 对象
* 数组

> `JSON.stringify(value[, replacer [, space]])` 可以通过传入第二个参数进行JSON过滤，第二个参数支持数组或者函数。第三个参数不常用，一般用于控制缩进。

### XHR(XMLHttpRequest)

状态值：

* 0，未初始化；
* 1，启动（已经调用open但是未send）；
* 2，发送；
* 3，接收；
* 4，完成。

#### 1. FormData

表单提交，可以上传文件。

#### 2. Progress事件

用于监测进度，可以用HTML5实现上传进度。

#### 3. 跨域CORS

> 跨域资源共享(CORS) 是一种机制，它使用额外的 HTTP 头来告诉浏览器  让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，资源会发起一个跨域 HTTP 请求。

> 出于安全原因，浏览器限制从脚本内发起的跨源HTTP请求。 例如，XMLHttpRequest和Fetch API遵循同源策略。

1. 不会引发CORS的简单请求：

   ![MDN-CORS](https://cdn.arc-light.fun/TV9IYt/CORS_simple-request.png)
2. 需要进行预检（Preflight）的请求：

   ![MDN-CORS](https://cdn.arc-light.fun/T9Q56f/CORS_preflight-request.png)
3. 携带身份凭证（Cookie）：

   ![MDN-CORS](https://cdn.arc-light.fun/WDX1n8/CORS_with-credit.png)
   
### 高级技巧：节流与防抖

节流：节约流量——无论触发多少次，指定间隔内只能触发一次；
防抖：防止抖动——中间触发N次都以最后一次开始计算时间，待指定间隔后触发。

### 数据存储

#### 1. Cookie

Cookie数量限制不一，在20-50之间，尺寸一般在4096B

#### 2. Storage

localStorage一般会设置每个来源5MB，部分浏览器只有2.5MB；

SessionStorage同样一般为5MB，部分浏览器为2.5MB；

#### 3. IndexedDB & WebSQL

浏览器支持情况不定，需要根据具体需求使用。

"Speaking JavaScript"阅读笔记（附加篇）

_本章开始写函数与对象，内容相对较多单起一章专门记录_

### 10. 函数

JavaScript中的函数一共有三种形式：

* 非方法的函数（“普通函数”）；
* 构造器；
* 方法；

因此我们创建函数一共有三种：

* 通过函数表达式；
* 通过函数声明；
* 通过Function()构造器（不推荐）；

所有的函数都是对象、Function构造器的实例。

具名函数表达式只能在函数表达式的内部被访问。

在函数的内部，有两个特殊的对象，arguments和this。

> this引用的值是函数数据以执行的环境对象——或者也可以说是this值。由于在调用函数之前，this的值并不确定，因此this可能会在代码执行过程中引用不同的对象。

> ECMAScript中的所有参数传递的都是值，不可能通过引用传递参数。

#### 10.1. 控制函数调用，`call()`, `apply()`和`bind()`

_bind()方法非原生，本节末尾会给出使用apply实现bind。_

使用：

```javascript
func.apply(thisValue, argArray)
func.call(thisValue, arg1, ..., argN)
func.bind(thisValue, arg1, ..., argN) // 创建一个新函数，会调用func，再绑定this到新的thisValue
```

一个非常有趣的陷阱：

```javascript
['1', '2', '3'].map(parseInt) // [1, NaN, NaN]
```

这是因为parseInt只接受一个参数，map的期望函数签名`function(element, index, array)`，而parseInt的签名则是`parseInt(string, radix?)`, 这会导致radix也被传入。

#### 10.1.1 实现bind

_本节的实现来自JS高程_

1. apply

```javascript
function bind(fn, context) {
  return function () {
    return fn.apply(context, arguments);
  }
}
```

1. apply的柯里化版本

```javascript
function bind(fn, context) {
  var args = Array.prototype.slice.call(arguments, 2);
  return function () {
    var innerArgs = Array.prototype.slice.call(arguments);
    var finalArgs = args.concat(innerArgs);
    return fn.apply(context, finalArgs);
  }
}
```

### 11. 变量：作用域、环境和闭包

> 全局执行环境是最外围的一个执行环境，每个函数都有自己的执行环境，eval也会创建一个独立的执行环境。

#### 11.1. 作用域

JavaScript的变量是函数级作用域的，**只有函数可以产生新的作用域**。

JavaScript会提前所有的变量声明，它会把所有的声明移到直接作用域的最前面。

#### 11.2. IIFE

* 它是立即执行的；
* 它必须是一个表达式；
* 连续的两个IIFE之间需要分号，不然会导致解析错误。

IIFE也可以前缀运算符，比如!, void都是可以的，避免了分号的问题。

```javascript
var File = function () { // open IIFE
	// do something...
}(); // close IIFE
```

#### 11.3. 全局对象

全局对象是有原型的。

#### 11.4. 环境

无论一个函数被调用多少次，它总要访问它自己（最新）的本地变量和外部作用域的变量。当多次调用自己的时候，每次调用都会创建一个新的环境。

通过闭包可以使得函数可以维持其创建时所在的作用域。但如果创建时受到了当前作用域变量的影响，会存在环境公用的影响。

#### 11.5. 垃圾收集

两种垃圾收集机制，__标记清除__，__引用计数__，两种都有使用，标记清除更为常用，引用计数一般用于COM对象。

#### 11.6. 闭包

> __闭包__ 是指有权访问另一个函数作用域中的变量的函数。

创建闭包的常见方式，就是在一个函数内部创建另一个函数。

闭包只能取得包含函数中任何变量的最后一个值。

#### 11.7. 闭包中的this

在闭包中使用this对象会导致一些问题，因为this对象是在运行时基于函数的执行环境绑定的。

> 如果闭包的作用域链中保存着一个HTML元素，那么就意味着该元素将无法被销毁。

### 12. 对象与继承

JavaScript中的面向对象编程（OOP）分为以下几层：

* 第一层，单一对象的面向对象；
* 第二层，对象间的原型链；
* 第三层，作为实例工厂的构造函数，类似于其他语言的类；
* 第四层，子类，通过继承已有的构造函数，创建新的构造函数。

#### 12.1. 第一层，单一对象的面向对象

##### 12.1.1 属性

属性分为三种：

1. 属性
2. 访问器
3. 内置属性（规范将内置属性的键置于方括号中，例如`[[Prototype]]`）

delete只影响一个对象的直接“自有”的，非继承的属性，delete成功则返回true，如果是自有属性但不能删除则返回false。

##### 12.1.2 对象字面量

```javascript
var jane = {
  name: 'jane',
  describe: function () {
    return 'Person named ' + this.name;
  }
}
```

#### 12.2. 第二层，对象间的关系——原型链

```javascript
var proto = {
  describe: function () {
    return 'name: ' + this.name;
  }
};
var obj = {
  [[Prototype]]: proto, // 实际不可访问
  name: 'obj'
}
```

对象obj从proto继承了describe属性。

当通过obj访问属性时，JS首先从本对象中查找，接着是它的原型，以及它原型的原型。

在ES5后，我们可以通过`Object.create(proto, propDescObj?)`完成使用给定prototype创建新对象。

检测时，可以使用：

```javascript
Object.prototype.isPrototypeOf(obj); // 会检索整个链上
```

#### 12.2.1 特殊属性__proto__

某些JavaScript引擎有特殊属性可以获取和设置对象的原型：`__proto__`。这样可以直接访问`[[Prototype]]`。其在ES6内将会作为标准。

方法区分：

* `Object.getOwnPropertyNames(obj)` 返回obj的所有 **自有** 的属性键。
* `Object.keys(obj)` 返回obj的所有 **可枚举** 的属性键。

#### 12.3 访问器

```javascript
var obj = {
  get foo() { // 取值调用，getter
    return 'getter';
  },
  set foo(value) { // 赋值调用，setter
    console.log('setter: '+value);
  }
}
```

#### 12.4 属性特性和属性描述符

* Value
* Writable
* Get
* Set
* Enumerable
* Configurable

#### 12.5 复制对象

复制要保证：

1. 拷贝必须具有与原对象相同的原型；
2. 拷贝必须具有与原对象相同的属性和特性；

```javascript
function copyObject(orig) {
  // copy prototype
  var copy = Object.create(Object.getPrototypeOf(orig));
  // copy all properties
  copyOwnPropertiesFrom(copy, orig);
  return copy;
}

function copyOwnPropertiesFrom(target, source) {
  Object.getOwnPropertyNames(source).forEach(function (propKey) {
    var desc = Object.getOwnProperyDescriptor(source, propKey);
    Object.defineProperty(target, propKey, desc);  // 使用获取的属性描述符创建target的自有属性
  });
  return target;
}
```

#### 12.6 第三层，作为实例工厂的构造函数，类似于其他语言的类

Speaking JavaScript内推荐的构造函数写法：

> ```javascript
> function Person(name) {
>   this.name = name;
> }
> Person.prototype.describe = function () {
>   return 'Person named ' + this.name;
> };
> ```

经典面试内容：
Q：new操作符都做了什么？
A：

1. 创建一个新对象；
2. 将构造函数的作用域赋给新对象（因此this就指向了这个新对象）；
3. 执行构造函数中的代码（为这个新对象添加属性）；
4. 返回新对象。

> 引用类型与基本包装类型（“装箱”）的主要区别就是对象的生存期，使用new操作符创建的引用类型的实例，在执行流离开当前作用域之前都一直保存在内存中。而自动创建的基本包装类型的对象，则只存在于一行代码的执行瞬间，然后立即被销毁。

Speaking JavaScript内对这个过程的描述：

> 首先设置行为：创建一个新对象，其原型为Person.prototype;
> 然后设置数据：Person接受对象作为隐式参数this，并添加实例属性。

代码模拟如下:

```javascript
function newOperator(Constr,args) {
  var thisValue = Object.create(Constr.prototype);
  var result = Constr.apply(thisValue, args);
  if(typeof result === 'object' && result !== null) {
  	return result;
  }
  return thisValue;
}
```

每个函数包含一个实例原型对象，它的constructor属性指回函数。

### 12.7 泛型方法：借用原型方法

```javascript
Wine.prototyte.incAge.call(john, 3) // 类似于这样的模式
```

对于泛型方法，最常用的是处理一些“Array like”的元素，借用数组方法进行处理。

通过 `Array.isArray` 也可以作为数组的判断，能够区分Array-like。

Spark1e

Category: all