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

前端

技术

生活

关于我

进入NetlifyCMS

Spark1e的Github

前往Twitter

给spark1e发邮件

在博客中搜索……

Category: Frontend - Page 4 | Spark1e的个人博客

## 直播内容

> 直播使用的PPT[Google文档地址, 需要科学上网](https://docs.google.com/presentation/d/1LHp-8hEtXEMSE1fd6YLAhYmtndQelQKbWlGggZKe4y8/edit#slide=id.g31e95ee831_0_92)

- 3.0 Beta特性介绍
	- 性能表现
    - “摇树”支持
    - Composition API
    - Fragment, Teleport, Suspense
    - 更好的TypeScript支持
    - 自定义Render
- 何时才能使用Vue 3.0（生态进度）
    
## 性能表现

### 重写V-dom实现

> 本节内容结合 [_vue-next-template-explorer.netlify.app_](https://vue-next-template-explorer.netlify.app/) 食用更佳。

2.0版本的的v-dom实现参考了[snabbdom](https://github.com/snabbdom/snabbdom)，加入了一部分Vue相关的特性属性如Static标记等。3.0大幅度修改了其实现，并对标记等进行了优化。

### Compiler-informed fast paths（个人理解：更快的编译/render路径）

> 本节内容结合 [_vue-next-template-explorer.netlify.app_](https://vue-next-template-explorer.netlify.app/) 食用更佳。

这一部分主要体现在最终的render函数上，利用上述工具，我们发现静态节点标记以及属性（绑定）被归为不同的部分，其中静态节点甚至可以通过开启提升来进行复用，未绑定的属性与进行了绑定的也可以直接标记出来，减少了对比与diff压力，从而得到更快的速度。

### 更高效的组件初始化

### 更新性能提高1.3～2倍

> 参考（下同）：based on benchmarks that simulates typical scenarios, may vary based on actual application.

### 2～3倍更快的SSR（服务端渲染）

SSR下，可以将静态节点作为Buffer的一部分直接推入最终的请求返回中，从而获得更快的速度。

## “摇树”Tree-shaking

> 本节内容结合 [_vue-next-template-explorer.netlify.app_](https://vue-next-template-explorer.netlify.app/) 食用更佳。

### 大部分可选特性目前可被“摇树”

在“next-template-explorer”中，如果你使用了例如v-on或者v-model等选项，可以在右侧清楚的发现对应选项通过摇树的方式单独打包进入最终的代码，相比于2.x版本需要包含完整runtime而言是非常大的优化。

### 最基本的HelloWorld示例打包大小约为13.5kb

> 如果选择只包含Composition API支持的模式，打包体积可以减小至11.75kb。

### 包含所有Runtime的打包体积约为22.5kb

## Fragment, Teleport, Suspense

### Fragment

碎片的概念有些类似于[React的Fragment概念](https://zh-hans.reactjs.org/docs/fragments.html)，Vue 3版本支持更多的使用方式，比如可以只有字符串，或者利用数组构成一段Fragment。

### Teleport(有译为：占位传递组件）

Teleport与[React的Portals概念](https://zh-hans.reactjs.org/docs/portals.html)类似。

> Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案。

> 尤大在直播中提到，为何没有直接使用Portal来命名还有另外一个原因：Chrome的iframe“替代方案”——[Portal](https://www.chromestatus.com/feature/4828882419056640)

Teleport功能可以用来将部分组件代码传递到DOM树的其他位置，可以在很多场景下使用，比如窗口resize等，简单说明：

```javascript

<NestedComponent>
  <v-fragment target="#popup-target">
    <PopUp />
  </v-fragment>
</NestedComponent>

<div id="popup-target"></div>
```

### Suspense

同样的，其对应了[React的Suspense概念](https://zh-hans.reactjs.org/docs/concurrent-mode-suspense.html)，要注意的是，__当前Suspense特性在React中同样也是试验性功能，暂时不适合投入生产环境__ 。

React社区中有一些第三方库对其进行了实现，比如zeit.co推出的[swr库](https://github.com/zeit/swr)，主要是用于作为等待与实现异步，Suspense部分会进行等待，直到异步任务完成继续，非常适合用来实现loading态。

## 何时才能使用Vue 3.0（生态进度）

> 建议随时参考官方的[Vue-next仓库](https://github.com/vuejs/vue-next)，了解生态各部分的开发进展。

目前Vue 3.0已经进入了Beta版本，预计年中会推出可以投入生产的版本。

- Vue Router：已知会 __有部分API改动__ ，目前alpha阶段；
- Vuex：目前已知没有API改动，同样处于alpha阶段；
- Vetur：其作者预计在五月份会进行跟进开发工作；
- Nuxt：目前已经实现了demo版本，正在跟进中；
- vue-cli：目前实验性支持；

需要注意的是，Vue 3.0 __beta目前不支持IE11__，在未来会推出针对IE11的专用build，如果需要兼容则需要开启对应的开关，会在最终打包时加入部分的fallback策略。

## 2.x版本的未来

2.x版本会在3.0稳定后推出一个Minor版本，之后会进入为期18个月的LTS，LTS过后只进行安全修复不会做版本更新。这个版本会包括部分2.x版本可兼容的3.0新特性。

"Vue 3.0 Beta"B站直播内容速记

### 写在前面

最近由于疫情的原因，找工作是越来越难了，自己的工作时间也很尴尬，三年不足，一年有余，反思自己，觉得应该在现在的时间多学些东西，同时督促自己提高效率，就想到了“番茄工作法”，想找一个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给自己的博客增加灰度化效果


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

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() // 返回数组迭代对象。`

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

_本篇开始将一部分浏览器与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。

"Speaking JavaScript"阅读笔记（三）

### 2. JavaScript相关的一些事

#### 2.1. JavaScript的性质

- 它是动态的；
- 它是动态类型； _（即便引入TypeScript协助开发也只能协助推导类型。）_
- 它是函数式和面向对象的；

### 3. JavaScript语言深入

#### 3.1 语句

凡是在JavaScript期望语句的地方都可以写表达式，不能在需要表达式的地方使用语句。

如果使用二义表达式（语法类型是二义的），为了避免二义性，在解析过程中，JavaScript不能使用对象字面和函数表达式作为语句，即不能以下面的内容开头：
- '{}'；
- function关键词； _(所以IIFE模式需要将匿名函数放在一个括号内，如果不使用这个括号， JS会认为这是一个函数声明，而函数声明是不可以匿名的，而函数定义又不能立即执行。)_

#### 3.2 数字

刷题曾经遇到过一个这样的问题：

```javascript
// 以下那种写法能够正确输出？
1.toString()  // 唯一一种不能正常输出的。
1..toString()
1 .toString()
(1).toString()
1.0.toString()
```

之所以存在这种问题，是因为JS内所有数字都是以浮点数存储的，这里紧跟的'.'会被认为是小数点。

### 4. 值

> 在编程语言的语义和类型体系环境中，静态一般是指“编译时”或者“非运行时”，动态是指“运行时”。

#### 4.1 强制转换

JavaScript内置的转换机制只支持布尔值、数字、字符串和对象。

怪异的两个转换：

- `Number(null) === 0`
- `Number(undefined); // NaN`

两个约定的转换方式：

- 乘法运算符会强制转换为数字；
- 加法运算中如果一个是字符串，运算符会将另一个运算数转换为字符串。

引擎内自带一个转换算法，ToPrimitive()，根据情景的不同偏好，先后完成：

- 如果输入的是原始值，返回；
- 如果输入是对象，偏好为数值，调用valueOf（偏好为字符串时优先调用toString)；
- 否则，调用toString（valueOf）；
- 否则，抛出一个TypeError。

#### 4.2 null

null表示 __没有对象__ 。

null是原型链最顶端的元素。

```javascript
Object.getPrototypeOf(Object.prototype) // null
```

#### 4.3 原始值的包装对象（装箱）

布尔值，数字和字符串这三种原始值都有响应的构造函数。它们的实例包含原始值。原始值可以从包装器借调方法。

### 5. 运算符

JavaScript中无法重载或自定义运算符，包括等号。

NaN与本身不相等（宽松 & 严格）。

#### 5.1 比较

在比较包装实例和原始值的时候，原始值和包装的原始值是宽松相等的，（但两个相同的原始值它们的包装实例不相等）

### 6. 数字

Number()在转换时一般优于parseFloat(), 原因：

- 对非字符串使用parseFloat效率较低，因为在解析之前它会将参数强制转换为字符串；
- parseFloat()会将空字符串解析成NaN；
- parseFloat()会一直解析到最后一个合法的字符，这意味着最后可能得到的不是想要的结果，比如`parseFloat(123.45#)`

### 7. 字符

字符串是由JavaScript字符组成的不可变序列，其中每个字符是一个16位的UTF-16编码单元。（一个Unicode字符相当于一个或两个JavaScript字符）

优化：新版本JavaScript引擎通过加号+优化字符串拼接并在内部使用相似的方法（array.push()）。

### 8. 数组

不要用for-in来遍历数组，因为for-in只会遍历索引，而不是数组元素，其次还会遍历所有的（非索引）属性值。

注意，for-in遍历对象所有的可枚举属性，其中包括了继承来的属性，因此需要判断是否为自身的：

```javascript
for(var key in person) {
	if(Object.prototype.hasOwnProperty.call(person, key) { // 为了避免person自身有hasOwnProperty方法
    	console.log(key)   
    }
}
```

### 9. 错误处理

对于异常捕获有两个原则：如果一处出错的含义不能被描述，那么就抛错；找到一个可以捕获错误的位置，捕获异常。

Error是通用的异常构造器，所有其他的异常构造器都是它的子构造器，因此我们可以自定义错误构造器。

Spark1e

Category: frontend