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

前端

技术

生活

关于我

进入NetlifyCMS

Spark1e的Github

前往Twitter

给spark1e发邮件

在博客中搜索……

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

## 1. input聚焦导致页面缩放

老生常谈的问题，这里只做一个备注：

```html
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
```

## 2. iOS 自动填充密码

如果你的form表单符合iOS的预期，那么会触发自动填充，如果你在表单处做了自定义事件那么可要当心了。

1. iOS自动填充无视表单submit事件

那么我们就需要为其补上原生的method和action，来完成其跳转

> 请注意，这里提交的为“application/x-www-form-urlencoded”，需要在请求处理时注意，一个比较简单的方法：`Object.fromEntries(new URLSearchParams(searchStr).entries());`

## 3. POST重定向后到达的页面仍然是POST请求

请查询 [MDN 重定向](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Redirections) 使用3xx状态码需要保持方法一致，只有303是个例外，会转为GET请求。

有关移动端表单输入与提交的二三事

```html
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
```

在使用媒体查询时，请务必确认页面内的meta标签是否含有viewport，如果没有，则不能生效。

媒体查询生效的必要条件

## 前言

前端开发时经常会遇到用户需要同意协议才能进行提交的操作，此时，如果原本使用的就是表单的方式，那么在用户未同意时disable提交按钮是最为稳妥的方案。

> 当然，还是那句老话，前端所有的验证仅仅是为了“用户体验”， 如果涉及其他考量，请务必后端再判断一次！

然而，disable的元素，是不能够触发事件的，也就是说，没有办法在click与submit时友好地进行提示，这与我们的预期不符，因此，这里推荐几种hack方案。

<iframe height="265" style="width: 100%;" scrolling="no" title="disabled-button" src="https://codepen.io/arctome/embed/yLMKxqm?height=265&theme-id=light&default-tab=js,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/arctome/pen/yLMKxqm'>disabled-button</a> by arctome
  (<a href='https://codepen.io/arctome'>@arctome</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

## 1. CSS大法好

```css
input[disabled] {pointer-events:none}
```

仅此一行，解决问题，什么原理呢？

> `pointer-events:none`元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。

也就是说，我们将其事件“转移”，disable触发不了，让他上级处理，能够达到一样的效果；

<iframe height="265" style="width: 100%;" scrolling="no" title="disabled-button-css" src="https://codepen.io/arctome/embed/JjWLaQN?height=265&theme-id=light&default-tab=js,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/arctome/pen/JjWLaQN'>disabled-button-css</a> by arctome
  (<a href='https://codepen.io/arctome'>@arctome</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>


让disable的元素“动”起来

随着全球IPv4资源的枯竭，VPS商家衍生了一种新的IPv6 only VPS，由于不占用商家的IPv4资源，因此可以压低价格。然而，VPS上面如果希望运行一些服务，那么势必需要IPv4的接入，我们可以通过Cloudflare的CDN让只有IPv4的用户访问，但如果机器需要访问如Github等，只有IPv4的网站该怎么办呢？一些大佬想到了使用Cloudflare的[Warp服务](https://1.1.1.1/)来实现，本文介绍自己在配置的成功方案。

## STEP 1. 安装Wireguard

> 执行`uname -a`查看内核，内核版本5+可以使用wireguard-tools, 否则请使用 [wireguard-go](https://github.com/WireGuard/wireguard-go)

确认内核版本后，如果选择升级至5+，请执行：

```bash
sudo apt -t $(lsb_release -sc)-backports install linux-image-$(dpkg --print-architecture) linux-headers-$(dpkg --print-architecture) --install-recommends -y
```

内核在5+后，执行下列命令，安装Wireguard：

```bash
sudo apt install net-tools resolvconf -y
sudo apt install wireguard-tools --no-install-recommends
# If can't find `wiregurad-tools`, execute this and retry
echo "deb http://deb.debian.org/debian $(lsb_release -sc)-backports main" | sudo tee /etc/apt/sources.list.d/backports.list
```

## STEP 2. 安装第三方工具wgcf

> [wgcf](https://github.com/ViRb3/wgcf) is an unofficial, cross-platform CLI for Cloudflare Warp

### wgcf 自动安装

执行命令，下载wgcf工具：

```bash
curl -fsSL git.io/wgcf.sh | sudo bash
```

### wgcf 手工安装

> 如果服务器起始状态就没有IPv4，那么访问git.io也是不可能的，我这里提供一个v2.2.10版本的文件给大家临时使用

```
wget -O /usr/local/bin/wgcf "https://cdn.arc-light.fun/pg2Edc/wgcf_2.2.10_linux_amd64"
chmod -x /usr/local/bin/wgcf
```

### 开始使用

完成后，首先进行注册：

```bash
wgcf register
```

过程中需要同意Cloudflare Warp协议，选择“Yes”，

成功生成后，再执行：

```bash
wgcf generate
```

执行成功，会在当前目录生成一个`wgcf.conf`，我们将它复制到Wireguard目录下：

```bash
cp wgcf.conf /etc/wireguard/wgcf.conf
```

## STEP 3. 修改wgcf.conf

编辑`wgcf.conf`文件，使其与下面的例子相似：

    [Interface]
    PrivateKey = YOUR_GENERATED_KEY_HERE
    Address = *.*.*.*/32
    #Address = *:*:*:*:*:*:*:*/128
    DNS = 2001:4860:4860::8888
    MTU = 1280
    PostUp = ip -6 rule add from [ipv6 addr] lookup main
    PostDown = ip -6 rule delete from [ipv6 addr] lookup main
    [Peer]
    PublicKey = YOUR_GENERATED_KEY_HERE
    AllowedIPs = 0.0.0.0/0
    #AllowedIPs = ::/0
    Endpoint = [2606:4700:d0::a29f:c001]:2408

> 2001:4860:4860::8888 可以替换为 Google DNS 或 Cloudflare 的IPv6 DNS服务器。

## STEP 4. 利用Crontab让Wireguard与ssh服务按顺序启动

如果启用了Wireguard的自启动，ssh服务就不能正常开启，因此，使用crontab，增加重启时自动启动Wireguard和SSH

```bash
crontab -e
```

增加以下配置：

    @reboot mkdir -p -m0755 /run/sshd
    @reboot systemctl start wg-quick@wgcf # wgcf是配置文件的名称
    @reboot /etc/init.d/ssh start

## Finish

重启，之后我们可以测试一下能否ping通Github，如果能ping通，意味着Warp配置成功，服务器能够正常访问IPv4 only的地址。

使用Cloudflare Warp为IPv6 only的机器添加IPv4

> 跨域,一个说腻了的话题,今天遇到一个新的情况,单独拎出来说说;

## 情景再现

b.site有一个ajax请求a.site的某一个地址,post请求+自定义header(假设,header头为`X-Application-Token`),ok,妥妥的跨域,那么自然加上以下代码(以express.js为例):

```javascript
app.options('*', (req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*")
    res.header("Access-Control-Allow-Headers", "X-Application-Token")
    // call the path service
})
app.post('/a-cors-request-path', (req, res) => {
    res.header("Access-Control-Allow-Origin", "*")
    res.header("Access-Control-Allow-Headers", "X-Application-Token")
    // call the path service
})
```

反复确认了相关配置已经设置好,但浏览器仍报错:

> Access to XMLHttpRequest at 'a.site' from origin 'b.site' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

## 排查

1. 返回说"not have HTTP ok status"

那么说明option请求没有返回200,打开postman发送请求尝试看看,成功返回...

1. 自己启动一个Express Server,尝试复现

已经能够确认,option不通过和状态码有关,那么为什么浏览器内非200,而postman发送option请求正常返回200 ?

打印headers,一口老血...

![cors-with-verify-header](https://cdn.arc-light.fun/BeGtIi/cors-with-verify-header.png)

## 结论

除了常见的跨域问题,也要考虑实现时的业务逻辑,比如本情境下,错误的在option中也调用相关服务验证了`X-Application-Token`,而option请求在浏览器内是不会携带额外的header信息的,这才导致了浏览器内 _not HTTP ok status_,而postman正常的原因.

## 额外

后来利用老的Microsoft Edge浏览器(Edge legacy)调试,发现会清楚的返回400 Bad Request,所以如果option请求能够返回精确的HTTP code,也会更利于开发人员排查问题,后续修改后完美解决.

跨域这个问题还得单独揪出来说一下

## Sentry是什么？

### 2021-05 更新

经过自己的反复部署，多VPS部署……仍认为9.2是最适合个人项目使用的版本，虽然已经不能和Github正常联动，但是整体资源和部署难度都比较低，而且也不会遇见大量的严重Bug。

## ==== 分割线 ====

> Sentry helps all software teams create the best software, faster.

Sentry是一个SaaS服务，提供了多种语言、多种环境的错误收集提示等自动化处理功能。

它的优势主要有以下几点：

* 接入简单，node & flutter都是在主入口几行搞定;
* 支持平台和语言极广，几乎涵盖了市面上常见的语言和框架，能够为整个开发团队提供错误收集能力;
* 支持扩展，能够快速扩展到Gitlab、Github、Trello、Slack等平台，国内也有非常好的支持，飞书等平台也有对应的助手或Bot能够方便的扩展到日常开发上;
* 支持私有部署（虽然有坑……），这一点是最为重要的，能够让小团队快速利用Docker和官方命令进行部署，极快地为开发赋能。

SaaS版本我也曾使用过，但是如果没有配置好或者网络环境一般，可能会付出比较高的成本（定时器未清除导致的报错会瞬间烧光你的免费额度……），因此强烈推荐私有部署，相关教程也比较丰富。

> getsentry: [Github](https://github.com/getsentry/onpremise)

> 飞书官方的Sentry助手，[文档](https://getfeishu.cn/hc/zh-cn/articles/360041217373-%E6%9C%BA%E5%99%A8%E4%BA%BA-%E5%A6%82%E4%BD%95%E5%9C%A8%E9%A3%9E%E4%B9%A6%E4%B8%AD%E9%85%8D%E7%BD%AE-Sentry-%E5%8A%A9%E6%89%8B-)，如果其他平台没有原生支持也可以使用Webhook等方式“曲线救国”。

## 简单说说私有部署

其实按照官方的仓库指导，很容易能够部署，只需要一些docker的基础知识并且能够利用docker-compose工具就可以运行起来，但是有很多细节比如Nginx反代Sentry，以及邮箱配置等还是需要对其他相关的东西有一些了解。

### 配置

官方推荐的配置为2400MB内存起步，但是可以通过修改[install.sh](https://github.com/getsentry/onpremise/blob/master/install.sh)，调整最低内存，可以完成安装，但是不保证运行效率，如果较大量的请求可能会导致内存100%。

    MIN_RAM=2400 # MB

### 一些运行设置

以邮件配置举例，目前版本(onpremise, Sentry 10.1.0.dev09b99a3b)如果希望配置生效首先需要找到sentry目录下的config.yml文件（如果没有说明是全新安装，可以从config.example.yml复制一份进行修改），利用环境变量先配置对应的参数。

更新配置后，执行以下命令：

```bash
# docker-compose.yml 目录下
docker-compose stop
docker-compose run --rm web upgrade
docker-compose up -d
```

如果相关程序启动成功，则可以到系统管理界面查看是否应用配置，并发送测试邮件。

### 更新版本

随着一些API的变更，官方会更新相应的版本，私有部署的可以通过执行以下命令来进行升级。

```bash
# 避免onpremise版本安装脚本问题，建议手工拉取最新镜像tag，同时将onpremise仓库升级到对应tag
# docker pull getsentry/sentry:xx.xx.xx && git checkout xx.xx.xx
docker-compose build && docker-compose run --rm web upgrade && docker-compose up -d
```

> 目前已知Github集成存在API被废弃，相关[链接](https://developer.github.com/changes/2020-04-15-replacing-create-installation-access-token-endpoint/) ，目前onpremise 10.0.0版本存在此问题，10.0.1未确认，官方修正于20.7.0，鉴于私有部署版本更新过于激进，暂时不进行升级等待10版本后续更新。

## 坑

私有部署依赖于Sentry和它的很多镜像，以及一些第三方镜像。由于Sentry 20的自建版本仍在 __非常积极地__ 开发迭代中，强烈推荐使用docker的原始源进行安装，成功率较高，如果使用镜像，可能存在Bug导致无法安装，需要注意。

强烈建议将postgres数据和sentry-data挂载到机器目录上，可以较好的保存持久化的信息。

## Sentry依赖的一堆容器，究竟做了什么？

这里强烈推荐看[官方开发博客](https://blog.sentry.io/)了解每一个组件背后的由来。


Sentry——一站式错误监控平台部署记录

## 直播内容

> 直播使用的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

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

Spark1e

Category: frontend