敲敲打打

如果DOM上绑定了过多的事件处理函数，整个页面响应以及内存占用可能都会受到影响。React为了避免这类DOM事件滥用，同时屏蔽底层不同浏览器之间的事件系统差异，实现了一个中间层——SyntheticEvent。

React并不是将click事件绑在该div的真实DOM上，而是在document处监听所有支持的事件，当事件发生并冒泡至document处时，React将事件内容封装并交由真正的处理函数运行。

合成事件的监听器是统一注册在document上的，且仅有冒泡阶段。

如需注册捕获阶段的事件处理函数，则应为事件名添加 Capture。例如，处理捕获阶段的点击事件请使用 onClickCapture，而不是 onClick。

所以原生事件的监听器响应总是比合成事件的监听器早。

阻止原生事件的冒泡后，会阻止合成事件的监听器执行

看了慕课网双流的视频教程，记录了一些React笔记。

日常开发过程中遇到了一个问题：后端返回的文件下载链接中的文件名，把原文件名的空格转义成了+，而前端解码是不会把+转回空格的。

原因是两边采用了不同的编码规范。

https://my.oschina.net/joymufeng/blog/620205

空格目前有两种不同的编码方式，一种是在HTML4中定义的，而另一种是在RFC-3986中定义的。
按照HTML4规范，空格应该被编码成加号”+”，而如果字符本身就是加号”+”，则应该被编码成%2B。

RFC-3986中采用统一的编码方式，字符的编码格式为：%HH(H为十六进制字符)， 并没有对空格做特殊处理。按照RFC-3986规范，空格被编码成%20，而加号”+”被编码成%2B。

PS:

encodeURI方法不会对下列字符编码: ASCII字母、数字、~!@\#$&\*()=:/,;?+'

encodeURIComponent方法不会对下列字符编码:ASCII字母、数字、~!\*()'

因此，面对后端的这种编码方式，前端处理的话要先将url里面的+替换成%20，再用decodeURIComponent解码

日常看视频教程，记录其中讲到的 vue 实现流程。

今天整理博客内容的时候，发现之前放在七牛云上的图片显示不出来了，登录七牛控制台也看不了。
后面发现是七牛云回收了所有的测试域名🙃，如果想继续“免费”使用七牛云10GB的存储空间作为图床的话，就要设置一个自定义域名。
我之前正好在阿里云买了个域名，但是光有域名还不行，还需要给域名备案。域名备案的时候发现域名需要对应有一个阿里云产品。坑。我目前不怎么用的到其他阿里云产品，故只能放弃七牛云作为免费图床了。

更坑的是，有一些转载的文章也用了七牛云作为免费图床，这下子就完全找不到了。

更更坑的是，之前上传到七牛云的图片，下载不了了。

以后这种第三方免费的服务还是要慎重选择呀。

iOS 手机浏览器在输入中文的时候，输入框里面除了拼音之外，字母之间还会出现一些特殊字符，如果监听input事件并且将内容发到后端去请求的话，就有可能产生影响。

例如：用户想要输入“人人”，输入框里面显示的是 “r e n r e n” 中间的空白字符，通过encodeURI方法之后，变成了了“%E2%80%86”,不同于普通空白符的“%20”。

解决办法：可以监听输入框的compositionstart方法设置一个标记位，监听compositionend取消标记位，标记位存在的时候表明用户正在输入但是没有选中候选项，这个时候就不发请求到后端。又或者可以把内容里面的特殊字符replace掉。

参考：https://developer.mozilla.org/en-US/docs/Web/Events/compositionstart

日常瞎折腾，随便实现了一个文件服务（只能浏览文件）。
如果是文件夹的话，根据目录结构生成ul list;
如果是文件的话，直接返回文件内容。

日常开发H5的过程中经常需要调试页面，下面列举了几个日常使用的调试工具。

node-sass 需要编译，要安装 Command Line Tools。
Command Line Tools是在Xcode中的一款工具，可以在命令行中运行C程序。
在命令行执行下面的代码，再重新安装 node-sass 即可。

1

xcode-select --install

最近做页面的时候要加一个自动播放的视频作为背景。很理所当然的我写了如下的代码：

1

<video autoplay loop src="..."></video>

autoplay 表示自动播放。
在ie8以上的浏览器都是可以的，但是在Safari 11 中却出现了报错。

我本来想用try...catch捕捉这个错误，结果捉不到。

在github上找到了一个解决方法：

1
2
3
4
5
6
7
8
9
10

var promise = document.querySelector('video').play();

if (promise !== undefined) {
    promise.catch(error => {
        // Auto-play was prevented
        // Show a UI element to let the user manually start playback
    }).then(() => {
        // Auto-play started
    });
}