Your Sites RSS Feed

popover样式覆盖问题

Wed, 20 Dec 2023 15:54:31 GMT

老项目中使用了bootstrap中的popover组件做一些悬浮特殊提示，不过最近发现该图标不见了。chrome中看它被移动到了不可见区域。

浏览器控制台查看样式，发现多了个默认样式表的数据：

查询发现，chrome在114版本中增加了原生的popover内容，文档可见 https://developer.mozilla.org/en-US/docs/Web/API/Popover_API。

在有popover="xxxxx"属性的元素增加样式覆盖掉浏览器的原生样式即可：

.xxx{
  // ....
  // 覆盖掉浏览器默认的样式
  position: inherit;
  border: none;
}

life 测试

Sat, 02 Dec 2023 22:25:52 GMT

i am test

ie出现strict模式下不允许分配到只读属性

Fri, 13 Jan 2023 22:36:52 GMT

IE11下出现了strict 模式下不允许分配到只读属性的报错，定位后发现是修改样式出现的问题。

https://image.zhuyuntao.cn/image/2023/01/2023-01-13_15-40-38_483.png

问题

提示如下：

oForm.style = "display:none;";

问题代码直接赋值了style属性。我们需要改成单修改style下的display属性。

oForm.style.display = "none";

这样就没有问题了。

React中的高阶组件

Fri, 02 Dec 2022 22:25:52 GMT

i am test

Failed to execute "json" on "Response": body stream is locked

Fri, 02 Dec 2022 22:25:52 GMT

i am test

https://stackoverflow.com/questions/53511974/javascript-fetch-failed-to-execute-json-on-response-body-stream-is-locked

test

Fri, 02 Dec 2022 22:25:52 GMT

fetch这个用于网络请求的API应该不陌生了吧，在支持fetch的情况下，我们往往会用fetch去替代XMLHttpRequest。

返回值为json格式

返回值为json的话，我们只需要调用json()方法即可,

function parseData(response) {
    return response.json()
}

支持多种数据类型

function parseData(response) {
    return response.json().catch(function() {
        return response.blob()
    })
}

是不是这样就OK了？实际执行后，提示以下错误：

TypeError: Failed to execute 'blob' on 'Response': body stream is locked

robo 3T 远程连接mongodb失败问题

Fri, 02 Dec 2022 22:25:52 GMT

mongodb导入bson和json格式的数据

Sat, 05 Nov 2022 15:40:05 GMT

由于主机到期了，进行了数据迁移，发现之前定时备份的数据解压后，是一堆bson和json格式的文件。

导入

首先将备份文件解压后，使用mongorestore命令：

mongorestore -d 数据库名 导入数据的文件夹 -u 数据库帐号 -p 数据库密码

这样就好了。

dart-scss处理ascii

Wed, 27 Jul 2022 18:52:31 GMT

线上环境偶现关闭按钮乱码的情况，一直没有时间查，最近有空，正好看了下。因为没有关闭的图片，也懒得用icon font，便使用了css code来实现了下(常用特殊字符)。

问题

在项目中，由于node-sass在install时又慢又容易失败，所以后续使用了dart-sass。样式文件中使用了常用的特殊字符，scss是这样的，伪元素content设置了\00D7，如下，

.icon.icon-remove {
  &::before {
    font-size: 20px;
    content: '\00D7';
  }
}

但在打包后发现content中的内容被修改了，

所以，scss-loader或者sass可能就有问题了。

定位具体出错原因

由于项目中也使用了iconfont，而confront是没有问题的，且iconfont使用的是css后缀，怀疑是scss处理的问题，我们将这段代码移动到css中测试下，看看具体是loader的问题还是sass的问题，新开个css文件，将content移入，

.modal-header .icon.icon-remove::before {
  font-size: 20px;
  content: '\00D7';
}

最终打包结果是：

所以是sass处理的问题，由于项目中使用了比较老的sass语法，不能使用2版本的，于是升级到1.x的最新版本测试，但是依旧没有用。

在样式文件头部增加@charset "UTF-8"也是没用的。

另外，发现使用node-sass是没有这个问题的。

解决方法

最终解决方案：

@function unicode($str){
  @return unquote("\"")+unquote(str-insert($str, "\\", 1))+unquote("\"");
}

.icon.icon-remove {
  &::before {
    font-size: 20px;
    content: unicode('00D7');
  }
}

这样就可以了。

其他方案

改用node-sass，当然，npm阶段会变的很长还容易失败.。。

参考：

https://github.com/sass/dart-sass/issues/1219

https://github.com/sass/dart-sass/issues/568

微软输入法中文时，输入数字也会触发复合事件

Sun, 03 Jul 2022 12:57:53 GMT

项目中没有直接可用的仅支持输入数字的指令，所以动手实现个，但是在测试过程中发现，windows系统中使用微软输入法在中文模式下就直接无法输入数字了。

正常实现

正常情况下，我们通过compositionstart和compositionend事件就可以做到对中文的限制。

@HostListener('compositionstart')
compositionstart() {
  this.lock = true;
}

@HostListener('compositionend')
compositionend(e) {
  // 恢复
  this.lock = false;
  // ....
}

@HostListener('input')
input() {
  if (this.lock) {
    return;
  }
  
  // ....
}

compositionstart触发表示中文输入开始，限制掉输入，直到compositionend触发后表示输入法结束。

微软输入法问题

在自测过程中发现，切换到微软输入法中文后，输入数字，特殊符号等等都能触发compositionstart事件。所以输入都被限制掉了。所以只做能做特殊处理了。

针对compositionend事件，可以获取到用户每次输入的单个字符，假如是数字则放行。

@HostListener('compositionend')
compositionend(e) {
  // 恢复
  this.lock = false;
  const newChar = e.originalEvent.data; // 新输入的字符
  const value = this.ngModel; // 当前输入的内容

  if (newChar.match(/^[\d-\.]$/)) { // 只有当是数字、点、负号的时候才处理，否则不处理
    // this.prev = this.handle(value); // 整个字符串处理
  }
}

这样的话就兼容处理了这个问题。

webpack配置自增端口

Mon, 27 Jun 2022 12:57:53 GMT

由于偶尔需要给服务器同事启动本地调试环境，这时候用指定的端口就很容易存在冲突了，每次去改文件略微有些麻烦。于是想整下，可以自动判断当前端口是否冲突，并依次递增，直到找到不冲突的端口，并启动server。

portfinder

portfinder是个不错的查找不冲突端口的npm包，地址：portfinder，可以指定从哪个端口开始查起，直到空闲的端口。

有了这个插件，接下来就是改造下webpack.development.js了。

const portfinder = require("portfinder");
const config = { /* 这里是之前从webpack.development.js export 出的配置 */};

portfinder.basePort = config.devServer.port; // 指定从哪个端口开始查起

module.exports = new Promise((resolve, reject) => {
  portfinder.getPortPromise().then((port) => { // port 为遍历后的空闲端口
    config.devServer.port = port;
    resolve(config);
  }).catch((err) => {
    reject(config);
  });
});

其他不用修改，就可以启动本地server了。

gitlab ci中默认使用node_modules缓存，必要时install更新依赖包

Sun, 26 Jun 2022 19:45:57 GMT

公司中使用的是gitlab做持续集成的，在处理依赖包node_modules时有点小问题，不知是每次安装还是缓存比较节省打包时间。

问题

原本是利用cache配置缓存了npm_cache，然后在用npm ci加快install 以来的速度。实际效果也比较好，安装大概在20-30s之前，可以接受。但是不知道为何，项目久了后，ci的耗时越来越大，达到了不能容忍的一分半的样子。

既然如此，那就可以直接缓存node_modules路径，毕竟这比直接安装更快，但是假如缓存了node_modules后，某天又加入了新的第三方以来。此时打包就会出错了，我们还得手动改ci，让此次先ci，再缓存，实在不是很方便。

于是乎，一种默认使用node_modules缓存，包依赖更新时，重新ci或install的方案就等待实现了。

changes

我们可以通过rules:changes检查对特定文件的更改来指定何时将任务添加到pipeline中。

比如：

check:
  stage: npm
  script:
    - npm ci
  only:
    changes:
      - package.json
      - package-lock.json
    refs:
      - test
      - release

#打包构建
build:
  stage: build
  script:
    - npm ci
  only:
    - test
    - release

该state只有在package.json或者package-lock.json任意一个文件改动时，才会触发，并添加到pipeline中，然后再进行第二步build过程。当然没改依赖，改了这两文件中的其他内容也是会触发的。

cache:
  paths:
    - node_modules/

再配上cache这样就可以缓存了。

其他

由于build过程中，我们会用到其他第三方插件等会生成缓存在node_modules中，这会导致每次缓存的东西越来越多，你可以在build阶段后移除掉.cache文件。比如：

build:
  # ......等等  
  after_script:
    - rm -rf node_modules/.cache

当然，有些会加速打包的缓存还是别删了吧，毕竟最终目标都是加速pipeline的过程。

浏览器自带方法解码Base64

Tue, 14 Jun 2022 20:01:13 GMT

由于公司内部的埋点上报接口在electon下无法使用chrome的插件，导致不能直接看到上报的实际参数，因为参数是使用Base64简单处理的。找了埋点系统的文档，发现其解码Base64的过程过于复杂，就想到了浏览器自带的atob和btoa这对方法。

btoa

该方法是将字符串转为Base64编码的ASCII字符串。

window.btoa('123'); // "MTIz"
window.btoa('abc'); // "YWJj"
window.btoa('测试一下'); // VM126923:1 Uncaught DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.

处理中文的时候出现了报错。由于该方法是将传入的字符串中每个字符视为二进制数据的字节，所以正常范围在0x00到0xFF之间。而中文需要特殊处理下。

中文特殊处理

浏览器自带的处理中文的方法很多，比如encodeURI、encodeURIComponent、escape。

encodeURI('测试一下'); // "%E6%B5%8B%E8%AF%95%E4%B8%80%E4%B8%8B"
btoa(encodeURI('测试一下')); // "JUU2JUI1JThCJUU4JUFGJTk1JUU0JUI4JTgwJUU0JUI4JThC"

encodeURIComponent('测试一下'); // "%E6%B5%8B%E8%AF%95%E4%B8%80%E4%B8%8B"
btoa(encodeURIComponent('测试一下')); // "JUU2JUI1JThCJUU4JUFGJTk1JUU0JUI4JTgwJUU0JUI4JThC"

escape('测试一下'); // "%u6D4B%u8BD5%u4E00%u4E0B"
btoa(escape('测试一下')); // "JXU2RDRCJXU4QkQ1JXU0RTAwJXU0RTBC"

解码 atob

atob方法则是对经过Base64转码的字符串解码出来，使用方法和btoa相反。

atob('YWJj'); // "abc"

decodeURI(atob("JUU2JUI1JThCJUU4JUFGJTk1JUU0JUI4JTgwJUU0JUI4JThC")); // "测试一下"

对于中文，依旧可以解码出来。

注意此处的方法嵌套顺序，类似于堆栈，先进先出。转码的过程最后一步是btoa，那么解码的第一步就是atob，再解码中文的处理。

chrome自动翻译问题

Wed, 08 Dec 2021 12:43:39 GMT

线上代码出现了中文下翻译一场的问题，怀疑是新版chrome的优化。

现象

老代码是没有设置lang，浏览器默认将其识别成英文了，如图：

如果用户手动修改为中文时，页面就出现了奇怪的翻译。

处理

无非就是增加文档的语言，或者屏蔽chrome的翻译了。

增加lang

html标签中增加lang="zh-CN"属性，页面正常展示，用户在url地址栏右侧可以正常切换语言。

translate="no"

页面直接没了，就剩下个否字。。

meta方式

在head中增加一个meta标签，

<meta name="google" content="notranslate" />

页面显示正常，且地址栏没有切换语言的入口。但是右键切换成中文还是会有问题，所以最终方案就是lang+meta的方式。

<html lang="zh-CN">
<head>
  <meta name="google" content="notranslate" />
</head>

这样的话，即使右键点了翻译成中文也不会有影响了。

canvas绘制跨域图片

Fri, 03 Dec 2021 12:14:19 GMT

Tainted canvases may not be exported.

var oImg = new Image(); oImg.crossOrigin = "anonymous";

需要有服务器端的支持， Access-Control-Allow-Origin:*

跨域图片能正常裁剪（图片未转化成base64），应该满足三个条件：

img元素中设置crossorigin属性图片允许跨域，设置响应头Access-Control-Allow-Origin 使用js方式请求图片资源, 需要避免使用缓存，设置url后加上时间戳，或者http头设置Cache-Control为no-cache 主要原因是：

如果使用跨域的资源画到canvas中，并且资源没有使用CORS去请求，canvas会被认为是被污染了, canvas可以正常展示，但是没办法使用toDataURL()或者toBlob()导出数据，见Allowing cross-origin use of images and canvas。所以通过在img标签上设置crossorigin，启用CORS，属性值为anonymous，在CORS请求时不会发送认证信息,见HTML attribute: crossorigin。在启用CORS请求跨域资源时，资源必须允许跨域，才能正常返回，最简单的方式设置响应头Access-Control-Allow-Origin 图片已经通过img标签加载过，浏览器默认会缓存下来，下次使用js方式再去请求，直接返回缓存的图片，如果缓存中的图片不是通过CORS请求或者响应头中不存在Access-Control-Allow-Origin，都会导致报错。

内嵌

Fri, 03 Dec 2021 12:14:19 GMT

由于老项目需要更新UI，并且想使用一些较为现代化的组件，而当前的1.3.7的angularjs是没有可以直接开箱即用的第三方组件库的。

思考点

为何想引入新的项目（框架）？

由于无新的开箱即用的组件库，所以需要自己实现，带来的开发和维护的工作量。新框架可以很好的解决这个问题。
由于项目中使用的自己实现的简单组件较多，所以即使自己实现了一套新组建，每个页面替换也需要成本，这也相当于所有页面都改了一版。
老项目可维护性差，重构一版提升可维护性。
老项目路由是上下结构，不像正常的管理系统以右下角为内容，而是每个页面都维护了一个左侧的menu，导致切换路由时，menu闪烁等等问题。

实现方案

简单说就是，新开一个项目，先实现页面，再通过iframe的方式嵌入到老项目中，等所有页面都嵌完后，新项目开始编写目录和路由。这样就完全替换了。

详细的说的话，加入老项目是A，新项目是B。

新增页面时，在A中创建一个页面，嵌入的地址是B下的某个页面。（A，B 项目提交到同域名文件夹下，以防止有跨域的问题。）

问题

父子项目之间通信问题。

子控制父的链接 parent.window.location.hash = "#/clue/clueOverview" 或者 parent.window.location.href = 'https://localhost:9000/#/clue/allClues'

新项目如何支持url传参查询，以及与父url之间的交互。
新的html不能是 index.html 或者 main.html ok
接口格式问题
本地环境调试跨域问题.

open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/zhuyuntao/MyChromeDevUserData

接口则利用之前访问存下的cookie。 chrome://flags/ 中 SameSite by default cookies 设置disabled。

代码写https://localhost:8008/

两边都用localhost，若是用 0.0.0.0会报跨域。

angularjs 提示 Blocked loading resource from url not allowed by $sceDelegate policy

$sceDelegateProvider.resourceUrlWhitelist([
    // Allow same origin resource loads.
    'self',
    // Allow loading from our assets domain. **.
    'http://ergast.com/**'
  ]);

https://stackoverflow.com/questions/41642646/angularjs-errors-blocked-loading-resource-from-url-not-allowed-by-scedelegate

chrome把top、right、bottom、left属性自动合并到inset

Tue, 26 Oct 2021 12:44:54 GMT

起因是因为bootstrap-datetimepicker组件在弹出框情况下，选择框显示异常了。定位时发现选择框样式用的是inset属性定位的，并没有使用常规的top,right这些属性去定位。

问题

翻遍代码，也没找到datetimepicker主动设置inset属性，也没找到可用的css样式去修改的，毕竟要操作的话，肯定会操作key值，也就是inset，可惜整个项目搜索也没有。

最终硬着头皮定位到datetimepicker设置选择框样式的地方：

难道是jQuery自动合并了？查看css方法，并没有发现合并。于是使用原生方式去设置这四个属性。

<div style="position: absolute; width: 100px; height: 100px; background-color: #ABCDEF;" id="test"></div>

document.getElementById('test').style.top = '1px';
document.getElementById('test').style.right = '2px';
document.getElementById('test').style.bottom = '3px';
document.getElementById('test').style.left = '4px';

最终，浏览器将这四个属性合并成了inset属性，（四个值都有的时候，chrome才会去合并）也就是

inset

inset的用法可以看MDN的文档，对于定位元素（static的没有影响），可以用来设置四个方向偏移量值吧。

来看下caniuse上的浏览器兼容性

兼容性并不是很好，不过chrome在推新属性方面还是很积极的。

uglify处理min文件过慢问题

Mon, 25 Oct 2021 21:07:13 GMT

项目中使用的是echarts老版本的，文档也找不到了，而且这次优化内容正好是使用echarts的页面，所以干脆就升级到最新的5版本。结果服务器ci过程中build居然花了28分钟多。定位了此次修改内容，最终缩小范围发现是引入的新版本echarts导致的。

问题

新版的echarts使用min版本，大小也有988kb。而之前版本只有292kb。怀疑是体积大了，babel和uglify的内容变多导致速度下降。

优化

我们使用time-grunt查看打包时间。我们只看babel和uglify阶段。

babel:dist 17.4s ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 15%
uglify:dist 6.3s ▇▇▇▇▇▇▇▇ 5%
uglify:generated 1m 18.4s ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 67%

babel不处理第三方包

在gruntfile.js中dist.files.src中将第三方包的vendor.jspass。此时的打包结果，

babel:dist 3.9s ▇▇▇▇▇▇ 4%
uglify:dist 5.8s ▇▇▇▇▇▇▇▇ 5%
uglify:generated 1m 20.4s ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 77%

babel耗时下降很明显。当然这不是重点，重点是uglify，因为服务器上测试是卡在uglify阶段的，而且结果也是uglify最占时间。

使用非min压缩文件

babel:dist 4.2s ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 10%
uglify:dist 5.9s ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 14%
uglify:generated 18.4s ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 42%

这个纯属于瞎尝试，尝试后效果居然很意外，毕竟引入的echarts源文件有3.2M。uglify耗时下降的很明显。

网上关于uglify处理min代码问题的内容比较少，毕竟对于第三方库，肯定会跳过处理，但在grunt下没有好的法子，对于https://zhuanlan.zhihu.com/p/27915962中提到的

compress: {
  unused: false
}

这种方式，还是不能降低处理的耗时。

PS：服务器上打包慢还有个原因就是我引入了两次echarts，第二次是注释掉的，但grunt合并js时，对于注释文件依旧处理了，也就是处理了两次的echarts，导致耗时加倍增长。由于重点想说的不是这个，所以忽略了。

记一次npm run build出错问题

Sun, 24 Oct 2021 19:49:47 GMT

由于更新了gatsby，使用的node版本需要提升。但是项目环境中的dart-sass对应的版本还是12版本的，在删除lock和node_modules后，使用install重新安装依赖后，出现了报错。

问题

查看jenkins控制台，发现报错：

内容如下：

/var/lib/jenkins/workspace/stock-web/node_modules/@ant-design/icons/lib/components/AntdIcon.d.ts
TypeScript error in /var/lib/jenkins/workspace/stock-web/node_modules/@ant-design/icons/lib/components/AntdIcon.d.ts(2,13):
'=' expected.  TS1005

    1 | import * as React from 'react';
  > 2 | import type { IconDefinition } from '@ant-design/icons-svg/lib/types';
      |             ^
    3 | import type { IconBaseProps } from './Icon';
    4 | import { getTwoToneColor, TwoToneColor, setTwoToneColor } from './twoTonePrimaryColor';
    5 | export interface AntdIconProps extends IconBaseProps {

解决方法

https://stackoverflow.com/questions/66040914/npm-run-build-failing-because-of-typescript-error-in-docker-build

升级package.json中的typescript版本。

jenkins自动运行pm2失败问题

Sun, 24 Oct 2021 16:13:59 GMT

jenkins中需要在服务端更新后重新开关node程序，采用pm2做进程守护，实际启动的时候遇到了报错。

问题

ubuntu系统，已经建立了pm2的软链接，

sudo ln -s /usr/local/node-v14.12.0-linux-x64/bin/pm2 /usr/local/bin

但实际jenkins里还是error了，查看jenkins的控制台输出，可以看到一下信息，

+ pm2 start bin/www --name stock-server
[PM2][ERROR] Permission denied, to give access to current user:
$ sudo chown jenkins:jenkins /var/lib/jenkins/.pm2/rpc.sock /var/lib/jenkins/.pm2/pub.sock

世纪是jenkins权限问题，在命令行输入

sudo chown jenkins:jenkins /var/lib/jenkins/.pm2/rpc.sock /var/lib/jenkins/.pm2/pub.sock

即可解决。其他提示说找不到id或者应用名称的话，也可以尝试。

jenkins版本是 2.277.4。

使用webpack替换grunt

Sun, 26 Sep 2021 23:55:12 GMT

由于一直维护的项目打包是基于grunt的，虽然自己已经实现了grunt下代理和es6等功能，但是为了让老项目更现代化些，预将webpack替换掉grunt。

配置webpack

entry

首先第一步先配置基础的webpack配置，grunt的入口是html，而代码中并没有使用import/export，所以我们需要手动将所有js添加到entry中。按js作用和类型我分成了vendor，controllers、services等。毕竟分包减小单个js文件体积以提升效率。

为了避免以后每次增加一个js就要改entry，使用了glob做文件遍历。如：

{
  // ...
  entry: {
    other: [/** 配置的js */],
    app: [
      ...glob.sync('./app/scripts/filters/**/*.js'),
      ...glob.sync('./app/scripts/directives/**/*.js'),
      // ...
    ],
    controller: [
      ...glob.sync('./app/scripts/controllers/**/*.js'),
    ]
    // ...
  }
  // ...
}

rules

下面就要配置loader了，js、css、less、scss这些都是用正常的通用配置。

其中需要注意的是处理html(index.html, main.html,以及views下的各个按需加载的页面)的时，一开始使用的是html-loader，由于它无法处理img上的srcset属性，所以使用了html-srcsets-loader。

<img src="/images/qiye_logo.png" class="f-margin-top-5" srcset="/images/qiye_logo@2x.png 2x" alt="网易合作伙伴平台" />

{
  test: /\.html$/i,
  use: [{
    loader: 'html-srcsets-loader',
    options: {
      attrs: ['img:src', ':srcset'],
      minimize: true,
      removeComments: true
    }
  }]
}

plugins

我们需要使用html-webpack-plugin插件来处理所有的html文件。包括主页面和各个按需引入的页面。同样的，为了提升使用体验我们可以用glob曲循环变量html页面的方式配置。

const files = glob.sync("./app/views/**/*.html");

files.forEach((pa) => {
  let opt = Object.assign({}, defaults);
  // ... 处理
  arr.push(new HtmlWebpackPlugin(opt));
});

由于项目中使用了jQuery，做一个全局的变量：

new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
})

需要注意，我们需在angularjs之前先绑定jQuery。可在angularjs源码的bindJQuery方法中看到，不然angular.element就是angularjs内置的jQLite了（jQuery子集，有jq的基本功能）

// bind to jQuery if present;
jQuery = window.jQuery;
// Use jQuery if it exists with proper functionality, otherwise default to us.

由于项目按需加载views下的页面，get请求会被浏览器缓存，所以需要加一个query参数防止，使用了DefinePlugin做变量替换。

new webpack.DefinePlugin({
  __auto_html_version: (new Date()).valueOf() + '',
}),

多页面配置

由于项目是多页面的，所以需要借助html-webpack-plugin配置多页面。

new HtmlWebpackPlugin({
  template: path.join(__dirname, '../app/index.html'),
  minify: true,
  inject: true,
  filename: 'index.html',
  chunks:['other', 'access']
}),
new HtmlWebpackPlugin({
  template: path.join(__dirname, '../app/main.html'),
  minify: true,
  inject: true,
  filename: 'main.html',
  chunks:['other', 'app', 'services']
}),

去除html处理

使用一段时间发现，热更新和打包都比较有点慢。而views目录下的html仅有部分需要处理图片，所以将图片使用import方式引入，挂载到$scope下。整个views文件夹用copy-webpack-plugin拷贝，节省差不多30s左右的打包时间。当然这会导致用户加载html时间略微变长。

其他修改

dev

webpack的特殊配置基本OK了，其他都是一些常规的，如dev下配置一些webpack-dev-server的配置，mini-css-extract-plugin插件等等。

可以使用hard-source-webpack-plugin插件加快热更新和以后的打包速度，热更新可以从十几秒优化到1s内。

prod

build情况下，可能还需要加些optimization的配置，对node_modules下的第三方依赖做个拆分。

第三方依赖

将所有第三方插件用npm的方式安装，并且在主js文件(第一个执行的js文件)以import的方式引入。注意对应的版本号，尽量使用相同的版本号，后期等稳定后再升级。

第三方依赖的样式文件也同样需要引入。项目是机遇Angularjs的，大致如下：

import angular from 'angular';
import ngAnimate from 'angular-animate';
import ngAria from 'angular-aria';
import ngCookies from 'angular-cookies';
import ngMessages from 'angular-messages';
import ngResource from 'angular-resource';
import ngRoute from 'angular-route';
import ngSanitize from 'angular-sanitize';
import angularLoadingBar from 'angular-loading-bar';
import uibs from 'angular-ui-bootstrap';
import toastr from 'angular-toastr';
import uiSelect from 'ui-select';
import JSZip from 'jszip';
import Clipboard from 'clipboard';
import _ from 'lodash';
// import ngEcharts from 'angular-echarts';
import 'angular-translate';
import 'angular-translate-loader-static-files';
import moment from 'moment';
import * as echarts from 'echarts';

有些如翻译的只要直接impot就行了。接下来是替换angular的module初始化中的配置，原先是字符串，现在需要使用对象。大致如下：

var app =
  angular
  .module('adminApp', [
    ngAnimate,
    ngAria,
    ngCookies,
    ngMessages,
    ngResource,
    ngRoute,
    ngSanitize,
    'pascalprecht.translate',
    uibs,
    uiSelect,
    // 'ui.bootstrap',
    toastr,
    angularLoadingBar,
    // 'TreeView',
    'angular-echarts',
    'ng.shims.placeholder'
  ])

部分依赖需要绑定到window下，如echarts，mmoment这种需要import来，挂到window下。因为老项目中，都是直接使用的这些变量。

window.moment = moment;
window.echarts = echarts;
window.Clipboard = Clipboard;
window.JSZip = JSZip;
window._ = _;

最后，angular.module中返回值也需要绑定到window下，其他老模块会使用到。

window.app = app; // 老文件用

这样就可以了。

webpack打包处理img中的srcset属性

Fri, 17 Sep 2021 23:11:41 GMT

使用html-loader插件，解析html中的图片链接时，只能处理img标签src属性上的地址。但对于srcset上的资源就无能为力了。

解决方法

可以使用html-srcsets-loader插件来配合html-webpack-plugin使用。

在loader配置中，修改配置

{
  test: /\.html$/i,
  use: [{
    loader: 'html-srcsets-loader',
    options: {
      attrs: ['img:src', ':srcset'],
      minimize: true,
      removeComments: true
    }
  }]
}

如此一来，处理img标签上的src属性的同时，也能处理srcset上的图片地址了。

img标签的srcset属性

Mon, 06 Sep 2021 22:57:48 GMT

在代码中看到了

img的srcset属性可以根据浏览器的宽高和像素密度使用不同的图片。比如我遇到的，

<img src="/images/qiye_logo.png" srcset="/images/qiye_logo@2x.png 2x" alt="..." />

表示在实际像素密度两倍的时候使用 2x.png，chrome下放大网页就可以看到效果。

获取Object对象下属性问题

Thu, 02 Sep 2021 22:03:42 GMT

从一个对象中解析出不同的属性，我们可以使用.可以使用['key']的方式，假如我们需要取多个key值的话，该如何取值呢？

已知需要哪几个属性

let obj = {
  a: 1,
  b: 2,
  c: 3,
  d: 4
}

JSON.parse(JSON.stringify(obj, ['a', 'b']));

这样剩余的值就剩下key为a和b的属性了。

当然，obj得是正确的json格式，不能含有undefined，function等影响stringify的数据。

已知需要剔除的属性

let obj = {
  a: 1,
  b: 2,
  c: 3,
  d: 4
}

const { a, b, ...rest } = obj;

利用新的结构属性就可以完成对剩余属性的获取。

T与分红，两者可兼得

Sun, 15 Aug 2021 17:28:12 GMT

最近半年多一直在做T高分红的股票，高的有近10个点的神华，低有3个多点的长江电力。可是分红与做T是相背的，因为癌股持有股票不满一个月卖出是要交20个点的分红税的，超过一年才不需要分红税，但是做T又是先进先出的，所以只要分红后，你有交易，就会有存在交税的问题，不是网上说的只要股数相同就没事了。

分自己的钱还要交税

说到底，分红都是分的自己的钱，我做个T还要扣税实在不舒服，遇到5个点以上的分红，20%可是1个点的钱，是在是太冤了。

如何避免

由于先进先出的条件，使得分红后交易的股必须要是满一年以上持有的，才不扣税。所以在一个账号中操作肯定是逃不掉的，因为我这资金量做T，不超过一个月，手里股都是新的了。

两个账号

是的，将手上的股票分开就行了，双账号买入，但做T只用A账户交易，到下次分红后，A账户的停止交易，改用B账号做T。待下次分红后，再启A停B。不过这边有一个时间差的问题。

比如，某股票在08-15号分红了，那A账号中最晚交易的很可能有08-14号交易的，假如到了明年分红提前到了7月份，再次账号互换，很有可能A账号中后面交易的股票就不满一年要交税了。

如此一来，似乎只能开三个账号了。

那假如遇到潍柴这种一年分两次红的咋整，难道要开五个号？还得借亲人的。。。。

两融账号

多个账号在管理上也有问题，天然的普通和信用账号互通就派上用场了。

结合本人使用习惯说明下。本人目前是底仓+网格仓的法子，底仓位了吃大肉，网格仓只为分散自己的注意力和加厚收益，稍微弥补底仓亏损。

底仓我都放置于两融内（因为底仓多，我有时会融资打野玩。。。），为了能够即时做T（癌股是T0，当天要T得留底仓），我在普通账号中保留了5手用于做T（非卖品）。平时的高买低卖就在普通账号上进行，如此一来，信用账号上的持股都是老的，而普通账号的都是即时更新的。

当股权登记日那天，将这五手从普通移动到信用账号，并从信用账号中转5手到普通账号中去。因为我底仓远大于5手，所以可以经受n/5次的分红，这样每次就可以逃过分红税。

不过这存在一个问题，就是得提前长时间持股，因为信用账号中第一次转出的5手交分红税可能是逃不过的（具体看分红日和买入时间差），后期才能享受免分红税。

问题待验证

普通和信用账号之间的互转不清楚是否是先进先出的原则。
一年多持内有期间有两次分红，卖出后这两次的分红是否能都免。

结论实践了再完善。

IE8下SCRIPT1010报错

Wed, 04 Aug 2021 23:34:11 GMT

IE8下遇到了个报错，提示SCRIPT1010，缺少标识符。

实际看压缩代码并没有问题，报错显示在 a.var&&a.var.length这边。

怀疑是var是关键字，最后使用如a['var']&&a['var'].length解决。

intro.js观后感

Wed, 26 May 2021 20:06:29 GMT

当新上线功能时，配合直接的新手操作教程会让用户更容易、更高效的使用新功能。

planA

刚拿到这个需求时，一个反应就是复杂的是计算多，难的是要在蒙层上扣个洞。。。

高亮操作区

高亮操作区块无非就是，通过dom的方式去获取对应的元素，计算其所在的位置，并留下空位，无非是一些getComputedStyle、clientWidth等等dom方面的属性。而侧边popover则可借助第三方实现或者手动根据空位的位置再用fixed实现。

蒙层

对于蒙层上空出个无蒙层的可点击的区域，实在没有头绪。自己是这么想的，由于空出区域有规则，将空出区域的之外分成上部，下部，左右两边，即四个蒙层块，来达到遮罩效果。

intro.js

四个区块的方式感觉繁琐和土，然后就找到了intro.js库。用起来很舒服，所需要的功能都有，减少了开发工作，效果也不错。

开发过程中，突发对他遮罩实现有点好奇。于是查看了，代码，发现了新大陆。

不一样的遮罩

遮罩分为两层，一层用于禁止用户的操作，一层实现梦层效果。

IE下SEC7111报错问题

Mon, 12 Apr 2021 19:23:53 GMT

实现老项目需求时，在IE下遇到了报错，提示SEC7111。

问题

在https环境下，动态 create一个 https的iframe，并通过appendChild的方式添加到document中。

而在测试过程中，在IE下出现了SEC7111的报错，

如图：

点击该链接出现的文章也都是说明是因为在https链接中调用了http这种非安全性的链接。

解决方式

最终定位为 iframe 的src中带了中文，导致了这个报错，可以使用encodeURIComponent或者encodeURI处理下中文即可。

PS：动态创建的过程中，没有加入到文档流中的iframe依然会对页面加载有影响。

create-react-app应用如何增加webpack环境常量

Mon, 29 Mar 2021 19:42:05 GMT

我们经常使用create-react-app脚手架来快速生成React的项目。通过使用npm run eject来暴露webpack的配置，并手动的编辑这些配置。

问题

由于在测试环境和生产环境需要做区分，而webpack自带的mode属性已经不能达到目的了，所以我们要扩展下常量。

解决方法

我们通过webpack.DefinePlugin插件去设置这些变量，首先去config/webpack.config.js下搜索该插件，发现有使用，代码中是：

new webpack.DefinePlugin(env.stringified)

断点查看，env.stringified是什么，如图：

这些个是process.env下常见的一些常量。我们的目标是向他追加常量。根据变量层级依次拆开，如下，我们向process.env下增加了GROUP变量。

注：JSON.stringify不能丢，不然会出问题。

new webpack.DefinePlugin({
  'process.env': {
    ...(env.stringified['process.env']),
    GROUP: JSON.stringify(process.env.GROUP)
  }
})

接下来，只要在命令行或者scripts中增加GROUP值就可以了。

"build:test": "GROUP=test node scripts/build.js",
"build": "GROUP=online node scripts/build.js",

这样，test环境和线上环境就可以区分了。

if (process.env.GROUP === 'test') {
  // ...
}

老韭菜股票随想录

Sat, 16 Jan 2021 15:56:32 GMT

自从踏入股市已经快有9年了，还记得当时在高考完后，在小区后面的东海证券开了自己人生的第一个证券账号。那时的我，激动无比，错以为股场是个可以轻易捞金的场所，是个提款机。可这么多时间过去了，有亏有盈，有大赚过，也有大亏过，到头来成了1赚2平7亏中的20%，却一直没有认认真真的反思过。

初入股市

依旧记得，当时我问老爸要了当时的一部分压岁钱入市，差不多一万五的样子，买入了山东钢铁和？？？？（居然忘了，前一阵子还关注过）。两者一亏一盈，差不多不亏的情况下，换了其他股，记得的有什么启明信息、星美联合、苏宁云商等等。在大学的四年里，我也是省吃俭用，将每个月生活费的余额做为资金的备用金。

大学这四年里，真的很迷，感觉自己是追崇的是超短或者短线收益，也就是痴心妄想靠赌。股票行业没有规划，资金量也不看，完全靠猜，结果就是买入的不涨我就割肉或者小盈就卖出。最终导致亏损总是大于盈利。

还有个习惯就是总喜欢空仓，总会去猜测明天的涨跌，最终结果就是跌的时候跌掉了自己的信心，涨的时候错误的空仓，所以也完美的错过了15年的大涨，当然大跌后想着抄底进场，损失也比较大。

总结下就是，肉没吃到，被锤时总少不了。

工作后的四年

大约记得，毕业时，账户里还有三万多的资金，当时应该是亏损了四千五还是四千七的。在好友老袁的建议下，来到了雪球平台，也开了万三的平安证券。在雪球上也是慢慢开始接触价值投资，不过对于当时没有大彻大悟的我来说，也没当回事。

刚毕业后，来到了当时看着美好的杭州，第一份工作是在大华股份，所以当时主要的标是大华和海康，期间也开始尝试四大行，不过被银行套的痛不欲生。

大学遗留下来的坏习惯依旧没改，尝试到盈利后，又开始了自以为是，总以为自己能预测未来，开始高抛等低吸。可是机会总是不等人的，错误的操作又让我失去了大赚的机会，毕竟价格不低于我的卖出，我肯定不会去买的。在这种痛失机会的情况下，我又不能及时反思，导致后期空仓以年为单位了，18年的大涨我也是在看戏。

不过结果还算好，介入蓝筹股后，把前面的窟窿给堵上了。截至去年疫情前夕，平安账号里除了填窟窿，最终盈利了一千零点。实际算算，收益率都不如银行定期，实在是太失败了。

也许是转折

去年疫情期间，由于长时间在家，股票又成了关注点。在知道可以免五万一的情况下，又开始更换证券账号了。这期间发生了很不愉快的事情，长话短说，我的老子居然拿买房的抵押贷钱去追涨杀跌，导致损失了一部分本金。本金在他账号里的时候，我夜夜睡的不好，每每看到资金下挫就和他大吵。

手续费的降低，老爸的直线亏钱（后来我强行要了他的账号密码，能直观感受到资金的减少）雪球上接触大佬们的投资观点，让我萌生出了很多想法。

放弃垃圾股，拥抱蓝筹股对我而言可能是最好的了，毕竟我缺少对消息的挖掘能力和对操作的坚决性。

长期持有蓝筹

好友老袁一直是在做蓝筹的，平安、伊利、美的等让他获利颇多。若是我当时只买蓝筹，少说50%，实际是翻倍。这让我随机挑股的观点逐渐向蓝筹，低市盈率上靠拢。

T

长期持有基本是以年为单位的，他很有可能一两年不涨，涨就那几个月，所以做T可以降低我们的成本，让我们持有下跌时不慌张，让我们享受流动性的收益。

由于是长期持有，所以我瞄准了有国资背景且价格便宜的四大行，中行和农行是我这阶段主要的操作标的。我做了个简单计算，当时农行是3.3的，假如我们做0.01价格差的全仓T，(3.3 - 3.29 * (1 + 0.00135)) / 3.3 * 240 = 40.4%。万一免五的账号要好好利用，这样一算，年化40%，实在太有诱惑力。假如开了两融，融资做T，理论上可以达到全仓40%的收益，那可是比巴老头还厉害的水平。

可惜的是，实际操作并不令人满意。首先农行单子比较多，十几万单纯是正常，二三十万的都有，导致成交很慢，而且需要观察涨跌，不然操作方向反了很有可能卖飞或者买入太多。当时也考虑了这个问题，想借助于开盘集合竞价出掉筹码，正式买卖只要做另一边的操作就行了，但是实际猜涨跌实在太难了，最终卖飞了农行。

网格T

随后的一段时间里，开始接触网格T。

看到网格，眼前一亮。即使股票下跌，拉长时间做网格最后还是可以持平或者盈利的。股票上涨，也能赚取其中的部分利润，可以说是将风险和利润进行了平均，可以说是个中庸之策。

人为干预

人为根据技术线，均线，市盈率，以及股票的特性做出买入卖出的动作，此阶段用于波段做T，以防止坐过山车的情况。

未来

未来我依旧会留在股场上，不会再有离场的情况。并且自己按照形成的交易策略严格执行。对于资金和杠杆的话，杠杆能不上尽量不上，资金的话，我会严格控制，这些资金必须是长时间不会用到的资金，以便我不会割在黎明钱。

2021年的收益率是多少？定个小目标，6%，我希望我可以跑过银行定期。

加油！

网页防拷贝方案

Sat, 09 Jan 2021 21:52:27 GMT

？？？？？？？

禁止ctrl + c、禁止右键

关键要实现复制，页面上的复制无非是通过鼠标右键复制，或者快捷键ctrl+c。

禁止右键

我们通过监听contextmenu事件，并屏蔽掉他的默认事件即可。

// 禁止右键事件
window.oncontextmenu = () => {
  return false;
}

禁止ctrl + c

右键禁止了，接下来快捷键也要禁止掉，不过由于ctrl+c是多个键组合，所以这稍微需要处理下。

let keys = []; // 容器，存储键值

// 剔除键值
function removeKey(key) {
  let index = keys.indexOf(key);

  if (index > -1) {
    keys.splice(index, 1);
  }
}

// 增加键值
function addKey(key) {
  if (!keys.includes(key)) {
    keys.push(key);
  }
}

window.onkeydown = (e) => {
  addKey(e.keyCode);
  if (keys.includes(67) && keys.includes(17)) {
    // 按了ctrl + c

    return false;
  }
}

window.onkeyup = (e) => {
  removeKey(e.keyCode);
}

通过keydown和keyup的组合，down表示按住，up表示取消，当用户同时按住ctrl+c后，屏蔽掉他的默认事件即可。

缺点

控制台可以重置这些事件，这样默认的事件就恢复了。
控制台选中元素，拷贝内容。

禁用文本选中

页面上的防复制除了阻断复制功能，也可以通过阻断文本的选中，毕竟要复制内容，首先得选中嘛。

js禁止选中

window.onselectstart = () => {
  return false;
}

同样的，只要禁止选中开始的默认事件即可。

css禁止选中

body {
  user-select: none;
}

设置user-select属性也可以达到，而且该属性是可以继承的。

缺点

和禁止复制一样，js可以被重置，css可以被取消。
控制台照样可以复制。

禁止F12、禁止打开控制台

稍微懂点技术的人，可能就会使用控制台的方式去复制内容。

禁止F12

let keys = []; // 容器，存储键值

// 剔除键值
function removeKey(key) {
  let index = keys.indexOf(key);

  if (index > -1) {
    keys.splice(index, 1);
  }
}

// 增加键值
function addKey(key) {
  if (!keys.includes(key)) {
    keys.push(key);
  }
}

window.onkeydown = (e) => {
  addKey(e.keyCode);
  if (keys.includes(16) && keys.includes(17) && keys.includes(73) || keys.includes(123)) {

    return false;
  }
}

window.onkeyup = (e) => {
  removeKey(e.keyCode);
}

依旧是对按键事件的监听，并屏蔽掉默认的事件。不过有由于控制台特殊，我们可以通过右键或者浏览器的任务栏打开，虽然右键可以屏蔽掉，但是浏览器任务栏提供的快捷键却无法屏蔽。

这儿有个devtools-detect库，可以实现对控制台的开关做监控。我们只要监听到用户打开控制台后，可以触发关闭控制台的关闭，实现屏蔽。

postMessage方案

其他方案

其他也有些方案，比如需要用户登录，甚至在代码区域用图片去替代。我们甚至可以通过对文本区域增加透明框阻断用户的选中等等。

这些方案都是只是针对普通网页用户拷贝数据的方案。当然，有技术的用户甚至可以借助爬虫技术，又或者无头浏览器pupeteer这种工具。

LeetCode[20]有效的括号

Tue, 26 May 2020 20:03:39 GMT

一天一道算法题系列，趁还刷的动，速度走起。

题目

给定一个只包括 '('，')'，'{'，'}'，'['，']' 的字符串，判断字符串是否有效。

有效字符串需满足：

左括号必须用相同类型的右括号闭合。

左括号必须以正确的顺序闭合。

注意空字符串可被认为是有效字符串。

示例 1:

输入: "()"

输出: true

示例 2:

输入: "()[]{}"

输出: true

示例 3:

输入: "(]"

输出: false

示例 4:

输入: "([)]"

输出: false

示例 5:

输入: "{[]}"

输出: true

思路

由于对若干个符号进行匹配，所以用数组存放会比较好些，当我们遇到右侧类型的括号时，需要与前一个比较，此时，该数组最好是个栈类型的(js数组完美支持)。

由于比较时，利用 === 这种方式双比较太复杂，所以使用正反括号为正负数值的方式方便判断。

实现

/**
 * @param {string} 
 * @return {boolean}
 */
var isValid = function(s) {
    const len = s.length
    const map = {
        '(': -1,
        ')': 1,
        '{': -2,
        '}': 2,
        '[': -3,
        ']': 3,
        '': 0
    }
    const list = []
    let res = true

    for (let ind = 0; ind < len; ++ind) {
        if (['(', '{', '['].indexOf(s[ind]) > -1) {
            list.push(s[ind])
        } else {
            let prev = list.pop() || ''

            if (map[prev]+ map[s[ind]]) {
                // 匹配不上
                res = false
                break
            }
        }
    }

    if (list.length) {
        res = false
    }

    return res
};

React组件中的全局变量

Thu, 16 Apr 2020 22:04:14 GMT

在React中，我们推荐一些与UI无关的数据不要存到state上，全局的变量就是个不错的地方。当然这么处理的话，是否会引起一些不必要的问题呢？

文件中的全局变量

假如在项目中，有A页面，A.js如下：

import React from 'react'

let num = 0
const temp = []

export default class A extends React.PureComponent {
  componentDidMount() {
    temp.push(num++)
    console.log(num, temp) // ???
  }

  render() {
    return (
      <div>A</div>
    )
  }
}

此时，A页面与其他页面来回切换时，num和temp分别输出什么呢？他们会保留前面的值么？最后结果是这样的：

实际这两个变量是一直未被释放的，所以每次didmount后操作的都是最先初始化的数据。

不销毁的原因

大家可能很好奇，为啥在页面切离后，这些变量没有被销毁，毕竟他们没有挂载在window上，且使用他们的地方(A组件)已经被销毁了。

那我们从代码层面上看看这是为什么吧，执行run build，在dist下找到文件，将压缩的代码格式化下，如下：

(window.webpackJsonp = window.webpackJsonp || []).push([
    [0], {
        114: function (t, e, n) {}, 115: function (t, e, n) {
            "use strict";
            n.r(e);
            var o, r = n(46),
                u = n.n(r),
                c = (n(226), u()());
            o = n(227), c.router(o.default || o), c.use({
                onHmr: function (t) {}
            }), c.start("#root")
        }, 164: function (t, e) {}, 226: function (t, e, n) {}, 227: function (t, e, n) {
            "use strict";
            n.r(e);
            var o = n(1),
                r = n.n(o),
                u = n(25),
                c = n(46),
                i = n(36),
                a = n(114),
                f = n.n(a);

            function l() {
                return r.a.createElement("div", {
                    className: f.a.normal
                }, r.a.createElement(i.a, {
                    to: "/a"
                }, "A"), r.a.createElement(i.a, {
                    to: "/b"
                }, "B"))
            }
            l.propTypes = {};
            var p = Object(c.connect)()(l);

            function y(t) {
                return (y = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (t) {
                    return typeof t
                } : function (t) {
                    return t && "function" == typeof Symbol && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t
                })(t)
            }

            function s(t, e) {
                if (!(t instanceof e)) throw new TypeError("Cannot call a class as a function")
            }

            function b(t, e) {
                for (var n = 0; n < e.length; n++) {
                    var o = e[n];
                    o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(t, o.key, o)
                }
            }

            function m(t, e) {
                return !e || "object" !== y(e) && "function" != typeof e ? function (t) {
                    if (void 0 === t) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
                    return t
                }(t) : e
            }

            function h(t) {
                return (h = Object.setPrototypeOf ? Object.getPrototypeOf : function (t) {
                    return t.__proto__ || Object.getPrototypeOf(t)
                })(t)
            }

            function v(t, e) {
                return (v = Object.setPrototypeOf || function (t, e) {
                    return t.__proto__ = e, t
                })(t, e)
            }
            var w = 0,
                O = [],
                d = function (t) {
                    function e() {
                        return s(this, e), m(this, h(e).apply(this, arguments))
                    }
                    var n, o, u;
                    return function (t, e) {
                        if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function");
                        t.prototype = Object.create(e && e.prototype, {
                            constructor: {
                                value: t,
                                writable: !0,
                                configurable: !0
                            }
                        }), e && v(t, e)
                    }(e, t), n = e, (o = [{
                        key: "componentDidMount",
                        value: function () {
                            O.push(w++)
                        }
                    }, {
                        key: "render",
                        value: function () {
                            return r.a.createElement("div", null, "A")
                        }
                    }]) && b(n.prototype, o), u && b(n, u), e
                }(r.a.PureComponent);

            function E(t) {
                return (E = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (t) {
                    return typeof t
                } : function (t) {
                    return t && "function" == typeof Symbol && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t
                })(t)
            }

            function _(t, e) {
                if (!(t instanceof e)) throw new TypeError("Cannot call a class as a function")
            }

            function j(t, e) {
                for (var n = 0; n < e.length; n++) {
                    var o = e[n];
                    o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(t, o.key, o)
                }
            }

            function S(t, e) {
                return !e || "object" !== E(e) && "function" != typeof e ? function (t) {
                    if (void 0 === t) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
                    return t
                }(t) : e
            }

            function P(t) {
                return (P = Object.setPrototypeOf ? Object.getPrototypeOf : function (t) {
                    return t.__proto__ || Object.getPrototypeOf(t)
                })(t)
            }

            function g(t, e) {
                return (g = Object.setPrototypeOf || function (t, e) {
                    return t.__proto__ = e, t
                })(t, e)
            }
            var k = function (t) {
                function e() {
                    return _(this, e), S(this, P(e).apply(this, arguments))
                }
                var n, o, u;
                return function (t, e) {
                    if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function");
                    t.prototype = Object.create(e && e.prototype, {
                        constructor: {
                            value: t,
                            writable: !0,
                            configurable: !0
                        }
                    }), e && g(t, e)
                }(e, t), n = e, (o = [{
                    key: "render",
                    value: function () {
                        return r.a.createElement("div", null, "B")
                    }
                }]) && j(n.prototype, o), u && j(n, u), e
            }(r.a.PureComponent);
            e.default = function (t) {
                var e = t.history;
                return r.a.createElement(u.Router, {
                    history: e
                }, r.a.createElement(u.Switch, null, r.a.createElement(u.Route, {
                    path: "/",
                    exact: !0,
                    component: p
                }), r.a.createElement(u.Route, {
                    path: "/a",
                    exact: !0,
                    component: d
                }), r.a.createElement(u.Route, {
                    path: "/b",
                    exact: !0,
                    component: k
                })))
            }
        }
    },
    [
        [115, 1, 2]
    ]
]);

转化后的js有点多，直接搜索didmount函数，找到num和temp变量，当然为了减小js文件体积，两变量名已被压缩了。

此时的calss组件已经被转化成function了，被命名为d，在d上方定义了w和O两个变量，这就是num和temp。再往外层看，他们都处于227这个函数中，也就是说原先定义与A.js文件中的全局变量已经被转化到函数内部的局部变量了。

再搜索下d函数是哪边被用到的，在文件最底部，d被以component传入到React的createElement方法中。

到这的话，应该差不多了。

原因就是class组件被挂到React大实例中，而class组件中有使用两变量，导致两变量以闭包的方式被访问，所以一直未被释放。

解决方法

为了避免老数据对页面造成的影响，我们可以这么修改，

与组件共存

我们可以将这几个全局变量直接挂到组件上，这样变量与组件的生命周期就同步了。如：

export default class A extends React.PureComponent {
  num = 0
  temp = []
}

使用前初始化

在组件mount或第一次使用数据前，对原有数据进行初始化，如，

export default class A extends React.PureComponent {
  componentDidMount() {
    num = 0
    temp = []
    // ... ...
  }
}

记一次 render process gone 问题定位

Tue, 17 Mar 2020 22:15:03 GMT

在获取数据并渲染table时，chrome浏览器出现了崩溃(必现)，提示render process gone，于是便研究了下很少遇到的前端页面崩溃。

问题描述

整个过程比较简单，就是通过一个接口获取后端的数据，再交给antd中Table组件渲染。window下出现了崩溃，mac下正常，这样正好可以从mac的chrome里看下渲染的情况。

没有加载该表格之前，该tab页的内存占用情况是这样的：

本以为后端发送的数据比较大，导致前端崩溃的，但实际并不是，后端发送的数据只有3.6M，

但数据渲染后，tab页占用的内存暴涨，到达了800多M（window下的已经崩溃了）。

所以该问题应该是内存溢出导致的崩溃了。

问题定位

就算这个3.6M的数据深拷贝了，内存也不至于涨到这种程度。后端也只发送了100条数据(默认展示100条)，table也只有100行，为啥会出现这种情况？

在查看table dom的时候，发现了一个问题，就是table中内容的高度(此处通过scroll设置了超出滚动高度，所以视觉上不明显)，

高度居然有265万多像素。。。这也就是说UI渲染也是要占用内存的，而window下就是渲染占用内存过大引起的崩溃，也与render挂上了钩。

注：为什么高度会这么大，应为数据中有个字段有大量的字符串，且列较多，以至于宽度比较小，内容就只能竖向的撑开，最后导致了如此高的高度。

解决方法

问题定位好了后，处理方法就有很多选择了，主要目的都是减少渲染的数据量，毕竟渲染这么多既不可能，也没有实际意义，哪个用户会去看呢？

前面也提到了，可以增加前端分页，适当增加对应列的宽度。

不过，这样仍有极小的概率遇见单条数据极大，导致的问题(单条数据撑的很高)。

后端限制字符数。

前端也可以限制，不过既然要前端限制，那干嘛走网络再传输一边，浪费带宽。

总结

显示后端发送的数据时，上限一定是需要考虑的。话说，搞崩浏览器也是挺容易的嘛。

从原理上看antd中getPopupContainer'失效'的问题

Mon, 02 Mar 2020 21:03:34 GMT

在antd中，一般用到Select、Popover等组件时，getPopupContainer属性都会用到，他是用来表示浮层渲染的位置。

问题

在实际项目中使用时，发现在有竖直滚动条的时候，依旧会导致选择内容框与选择输入框“脱节”。因为增加了getPopupContainer树形，新生成的内容选择框应该在dom内，且做了相对的定位，应该是跟着滚动条走才对，但实际并不是这样。

查了下也没找到好的处理方式，只能看下他是怎么实现的了。

原理

getPopupContainer表示渲染的挂载点，默认为body。

他的最终实现在rc-trigger中，打开其index.js文件，在this.getContainer方法中，创建了一个div，设置其position为absolute，left和top为0，并将宽度设置为100%。最后根据渲染元素是谁，再appendChild。

var props = _this4.props;

var popupContainer = document.createElement('div');
popupContainer.style.position = 'absolute';
popupContainer.style.top = '0';
popupContainer.style.left = '0';
popupContainer.style.width = '100%';
var mountNode = props.getPopupContainer ? props.getPopupContainer((0, _reactDom.findDOMNode)(_this4)) : props.getDocument().body;
mountNode.appendChild(popupContainer);
return popupContainer;

所以实际上getPopupContainer原理就是将内容放在一个absolute的元素中，插入到getPopupContainer元素中。

处理方法

所以，为了getPopupContainer后的元素能够跟着滚动内容滚动，我们需要在scroll元素内层的元素设置相对层就行了。

Safari下，AudioNode节点disconnect后，再次connect无效的问题

Wed, 19 Feb 2020 19:55:16 GMT

在修复项目issue时，在手机端的safari下发现了个录音暂停后，再次录音无效的问题。

问题

去除掉冗余代码，直接看代码：

<body>
    <button id="start">开始</button>
    <button id="pause">暂停</button>
    <button id="resume">恢复</button>
    <button id="stop">结束</button>
</body>
<script>
let context = null;
let createScript = null;
let recorder = null;
let audioInput = null;
let stream = null;

document.getElementById('start').addEventListener('click', start)
document.getElementById('pause').addEventListener('click', pause)
document.getElementById('resume').addEventListener('click', resume)
document.getElementById('stop').addEventListener('click', stop)

function start() {
    context = new (window.AudioContext || window.webkitAudioContext)();
    createScript = context.createScriptProcessor || context.createJavaScriptNode;
    recorder = createScript.apply(context, [4096, 1, 1]);

    navigator.mediaDevices.getUserMedia({
        audio: true
    }).then(stream => {
        audioInput = context.createMediaStreamSource(stream);
        stream = stream;
    }).then(() => {
        audioInput.connect(recorder);
        recorder.connect(context.destination);
    });
    
    recorder.onaudioprocess = e => {
        let lData = e.inputBuffer.getChannelData(0);
        console.log('回调获取数据', lData);
    }
}

function pause() {
    audioInput.disconnect();
    recorder.disconnect();
}

function resume() {
    audioInput.connect(recorder);
    recorder.connect(context.destination);
}

function stop() {
    context.close();
    if (stream && stream.getTracks) {
        stream.getTracks().forEach(track => track.stop());
        stream = null;
    }
}
</script>

开启录音后，先暂停录音，再恢复录音，在safari下，回调中获取的都是0，

而在chrome或firefox都可以获取到正常的音频数据。

注：如果safari也能获取到数据，可以暂停久一点。

解决方案

在stackoverflow上也找到了类似的问题：AudioNode.disconnect() followed by .connect() not working in Safari。

也就确认了这是safari下的bug。

所以我们此处就需要抛弃disconnect，毕竟他会导致最后数据搜集错误的问题。

let isPause = false;

function start() {
    // ....
    recorder.onaudioprocess = e => {
        if (isPause) {
            return;
        }
        let lData = e.inputBuffer.getChannelData(0);
        console.log('回调获取数据', lData);
    }
    // ...
}

function pause() {
    isPause = true;
}

function resume() {
    isPause = false;
}

代码其他地方不变，新增isPause表示是否暂停，而onaudioprocess回调仅对不暂停时的数据进行处理，这样就可以达到兼容了。

详细代码见：github。

mini-css-extract-plugin使用中遇到的问题

Thu, 06 Feb 2020 20:40:38 GMT

webpack打包时，通常会将css和js文件打包到一起，此时我们会使用mini-css-extract-plugin插件分离并打包css到单独文件。

Conflicting order

常遇到如下警告，Conflicting order. Following module has been added:...。

此警告意思为在不同的js中引用相同的css时，先后顺序不一致。也就是说，在1.js中先后引入a.css和b.css，而在2.js中引入的却是b.css和a.css，此时会有这个warning。

处理方法

直接修改顺序可以避免这个警告，但是后期所有的文件顺序都得按照这个来，有些繁琐。
增加ignoreOrder: true配置，如：

new MiniCssExtractPlugin({
    // ......
    ignoreOrder: true
}),

修改样式，热更新失效

hmr下，热更新失效，需要手动刷新才能正确加载修改后的样式。

处理方式

以css为例，在webpack配置中需要增加如下的options：

test: /\.css$/i,
use: [{
    loader: MiniCssExtractPlugin.loader,
    options: {
        hmr: process.env.NODE_ENV === 'development',
        reloadAll: true
    }
}, {
    loader: 'css-loader'
}]

此时热更新就能生效了。

VSCode下.editorconfig文件无效问题

Mon, 27 Jan 2020 20:48:36 GMT

.editorconfig文件可以使开发者在不同的编辑器或IDE中保持一致的编码格式，比如最简单的一个tab表示几个空格，通过编辑.editorconfig文件可以保存代码风格。

比如公司项目内规定2个空格，而我自己的业余代码则是4个空格，我只需要在不同的项目中保存不一致的.editorconfig，就可以避免每次切换项目再更改编辑器的配置。

.editorconfig失效

在vscode下，修改完文件保存后，实际没有生效。

处理方法，下载插件 EditorConfig for VS Code，即可。

typescript中import报错问题

Sun, 26 Jan 2020 22:34:02 GMT

在将js文件改ts过程中，在import上遇到了点问题。

alias配置不识别

我们常常在webpack的alias下配置@的绝对路径，这样在import中写路径时就不需要../../的写多层了。但是在ts中，光在webpack中配置了，vscode中仍提示找不到模块。

处理方法

在目录下的tsconfig.json文件中加入配置：

{
    "compilerOptions": {
        // ...
        "baseUrl": ".",
        "paths": {
            "@/*": ["./src/*"]
        },
        // ...
    }
}

通过配置告诉@所对应的目录。

import图片报错

配置好以上的paths后，发现图片的import仍是报错：

处理方法

最后在github上找到了处理方法：images.d.ts。

但实际这么加上去后，出现了一个新的问题：

最后解决方案是：

declare module '*.svg' { /* empty */ }
declare module '*.png' { /* empty */ }
declare module '*.jpg' { /* empty */ }
declare module '*.jpeg' { /* empty */ }
declare module '*.gif' { /* empty */ }
declare module '*.bmp' { /* empty */ }
declare module '*.tiff' { /* empty */ }

dva配合webpack4实现热更新

Thu, 23 Jan 2020 00:08:00 GMT

由于roadhog依旧使用webpack3(速度慢，打包文件大)且没人维护，所以就想折腾去掉roadhog，直接使用webpack4进行打包。不过在dev模式下，热更新遇到了些问题。

问题

配置了webpack-dev-server的热更新功能后，修改js，保存，刷新页面后，会报：

KnowExplore.js:81 Uncaught TypeError: Cannot read property 'xxxx' of undefined

实际上这个xxxx是存在redux中的数据。很显然，是由于model的问题，导致props中没有这个数据，才出现了报错。

处理方案

找了好久，要不是没有方案，要么就是不行。github上的issue也看了，没有解决方法，作者也不更新，不过好在最后摸索出了折中方案。

dva有个用于热更新的插件babel-plugin-dva-hmr，安装上，

npm install babel-plugin-dva-hmr redbox-react --save-dev

打开.babelrc文件，配置：

{
    // ...
    "plugins": [
        "dva-hmr",
        // ...
    ]
}

注：webpack-dev-server也需要配置热更新模式。

启动server后，有一个小问题，就是必须在server完全启动后，再在浏览器中打开或者清缓存重新刷新才能保证热更新。沿用先前的窗口或者简单刷新依旧会报错。

页面资源预加载(preload)和预获取(prefetch)

Mon, 06 Jan 2020 22:23:51 GMT

用了Gatsby也有一段时间了，静态化博客速度也是让我很是满意。这几天在检查seo属性配置时，发现了几个奇怪的标签属性，见是见过，但没这么用过，link标签配了rel="preload"和rel="prefetch"，我们常用的link不是用来加载css的么？rel属性不也是stylesheet么？

preload是直接显示在head中的，

而prefetch则是根据滚动条滚动后append的。

preload

预加载，即提前加载页面中需要的资源。他的机制是在页面加载的早期阶段就开始获取，在浏览器的主渲染机制介入前就进行预加载。这样使得资源可以更早的得到加载并可用，且更不易阻塞页面的初步渲染，进而提升性能。

除了机制优势外，对于隐藏在css或js中的资源(css背景图,js操作样式,html中视频资源等等)，提前获取，可以避免资源加载造成对页面渲染的延迟。

<link rel="preload" href="./js/1.js" as="script" />

和普通加载css方式类似，不过rel为preload，href则是资源的地址。

as属性

相对于常用的link方式多了个as属性。as属性是用来指定将要预加载的内容的类型，这样可以让浏览器：

更精确地优化资源加载优先级。
匹配未来的加载需求，在适当的情况下，重复利用同一资源。
为资源应用正确的内容安全策略。
为资源设置正确的 Accept 请求头。

常用的as属性如下：

audio: 音频文件。
document: 一个将要被嵌入到<frame>或<iframe>内部的HTML文档。
embed: 一个将要被嵌入到元素内部的资源。
fetch: 那些将要通过fetch和XHR请求来获取的资源，比如一个ArrayBuffer或JSON文件。
font: 字体文件。
image: 图片文件。
object: 一个将会被嵌入到元素内的文件。
script: JavaScript文件。
style: 样式表。
track: WebVTT文件。
worker: 一个JavaScript的web worker或shared worker。
video: 视频文件。

注：在chrome79下测试，as属性必须有，否则该link会被忽略。

type属性

type属性表示预加载资源的MIME类型，浏览器将根据type属性来判断它是否支持这一资源，若支持，则会下载，否则便忽略。

as属性只是用来表示资源优先级的，而type才是标记资源类型的，所以当为了更高优先级，我们可以这么写：

<link rel="preload" href="./js/1.js" as="style" />

js文件设置了style类型，提升了优先级。（至于资源优先级，请看这篇文章: Chrome中的资源优先级）

crossorigin属性

当提前预加载的是字体时，就需要该属性（即使不是跨域时）。

<link rel="preload" href="./font/iconfont.ttf" as="font" type="font/ttf" crossorigin="anonymous" />

增加了type后，不同浏览器将仅会对自己支持的字体进行下载。crossorigin则去处理CORS的问题。

更多信息可以查看Font fetching requirements。

media属性

link元素还支持media属性，他能够支持媒体查询。

<link rel="preload" href="./css/bg-1.css" as="style" media="(min-width: 1000px)">
<link rel="preload" href="./css/bg-2.css" as="style" media="(max-width: 1001px)">

他根据当前浏览器窗口的分辨率，预加载不同的css文件。（与media query不一样的是，resize窗口，并不会再去加载另一个样式文件）

兼容性

新特性虽是好用，但是兼容性查看都是绕不过去的，通过caniuse：

图上显示57以上是不支持的，实际是浏览器默认关闭了。实测chrome79是支持的，不过as属性不能省。

关于检测浏览器是否支持preload：

// 是否支持preload
const preloadSupported = () => {
    const link = document.createElement('link');
    const relList = link.relList;

    if (!relList || !relList.supports) {
        return false;
    }
    return relList.supports('preload');
}

脚本化

借助js操作dom，我们可以更灵活的实现资源的预加载和执行：

// 手动预加载
var preloadLink = document.createElement("link");
preloadLink.href = "myscript.js";
preloadLink.rel = "preload";
preloadLink.as = "script";
document.head.appendChild(preloadLink);

这样的话，浏览器仅仅只是加载了该脚本，并没有执行。

当需要执行时，只要执行：

// 执行预加载的资源
var preloadedScript = document.createElement("script");
preloadedScript.src = "myscript.js";
document.body.appendChild(preloadedScript);

preload会阻碍load事件么

实际测试当preload的文件在文档中有直接使用时，是会有影响的。

<head>
  <link rel="preload" href="./js/2.js" as="script" />
</head>
<script src="./js/2.js"></script>

这样是会有影响的，当底部没有script使用时，则不会有影响。

prefetch

prefetch是用来告诉浏览器下载稍后用户会用到的资源，所以他的优先级很低，而且下载过程也是在浏览器空闲时。当然，这也意味着prefetch的资源可能是没有用的，因为用户并不会按照你的期望去进入某些页面。

<link rel="prefetch" href="page-data.json" />

prefetch提前加载的资源不是当前页面的，利用http缓存，当用户进入到既定页面时，请求资源通过http强缓存被命中后，达到加快显示的目的。

混用

1. prefetch的资源同时在当前页面被使用

<head>
    <link rel="prefetch" href="./js/1.js">
</head>
<body></body>
<script src="./js/1.js"></script>

如此操作只会多次请求，得不偿失（脚本只会执行一次）：

2. 与preload混用

<link rel="prefetch" href="./js/1.js">
<link rel="preload" href="./js/1.js" as="script">

同样的，该js文件会被获取两次，浪费了带宽。

兼容性

prefetch的兼容性相对于preload要好些。

总结

preload针对当前页面即将要使用的资源进行提前加载，prefetch对潜在页面的资源进行低优先级的加载。即，preload针对当前页面，prefetch是针对其他页面，两者完全不同，不可替代。

当资源被preload或者prefetch后，会根据其HTTP状态确定是否被缓存(cache-control 和 max-age)，若可以，它将存储在HTTP缓存中，可用于当前和未来的会话。如果资源不可缓存，则不会将其存储在HTTP缓存中。相反，它会被缓存到内存缓存中并保持不变直到它被使用。

简单demo见：Github。

flex与calc同时使用的兼容性问题

Sat, 04 Jan 2020 21:06:29 GMT

flex布局一直是在自己的demo中用的比较多，在项目中或较复杂的情况下基本不太会选择flex。不过在项目中尝试了下flex，也是遇到了一些小问题。

上下布局

一行固定，二行自适应的两行布局是比较常见的，用绝对定位的方式也是可以实现的。现在我们使用flex布局来实现下。

<style>
* {
    margin: 0;
    padding: 0;
}
html, body {
    height: 100%;
}
p {
    height: 22px;
}
</style>
<body>
    <div style="display: flex;flex-direction:column; height: 100%;">
        <div style="height: 70px; background-color: olive; flex-shrink:0;">123</div>
        <div style="flex: 1; overflow-y:auto;">
            <div>
                <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
                <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
                <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
                <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
                <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
                <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
            </div>
        </div>
    </div>
</body>

flex很简单的就实现了该布局方式。

问题复现

当在flex布局中，使用calc时会有兼容性的问题。其他内容不修改，仅修改html部分，

<body>
    <div style="display: flex;flex-direction:column; height: 100%;" id="container">
        <div style="height: 70px; background-color: olive; flex-shrink:0;" id="header">123</div>
        <div style="height: 100%; flex: 1;" id="content">
            <div style="height: 10px" id="content1"></div>
            <div style="width: 100%; height: calc(100% - 10px); overflow-y:auto;" id="content2">
                <div>
                    <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
                    <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
                    <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
                    <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
                    <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
                    <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
                </div>
            </div>
        </div>
    </div>
</body>

chrome 79

先看下chrome79下的效果，container高度：

content高度：

container和content高度是一致的，右侧也是双滚动条的，

chrome 78

看下78下的效果(75也是如此)，container高度：

content高度：

实际并不是100%的，在chrome78以下相当于是calc(100% - 70px)。

FireFox

FF下的效果更不一致了，

container：

content：

处理

兼容的话，只需要通过calc设置id是content的div高度就行了，这儿的主要问题就是各浏览器下的contetn的高度计算不相同。

总结

老的属性能兼容了，新的属性似乎又需要hack了，哈哈，又得折腾了。

简单的demo可以查看：github。

React中requestIdleCallback的polyfill实现

Wed, 25 Dec 2019 21:35:00 GMT

最近发现了requestIdleCallback函数，也听说React源码中也适用了requestIdleCallback函数，夜来看看他在此中的作用。

实际在React源码(16.12.0)中，并没有查到该方法，查到的也只是test中用setTimeout模拟了requestIdleCallback方法。

requestIdleCallback

首先来看下这个函数，该方法会在DOM渲染空闲时期执行任务，所以是一个执行抵优先级任务的方法。

requestIdleCallback(function(deadline) {
    console.log(`剩余空闲时间:${ deadline.timeRemaining() }`);
    console.log(`是否是超时执行:${ deadline.didTimeout }`);
});

deadline.timeRemaining()输出了每帧剩余的渲染时间，如果没有剩余时间，此回调不会在当前帧中执行，留到下次执行，此时就超时了，didTimeout即为true。但是为啥在React中没有直接使用，而是polyfill了呢？

在chrome文档上，可以看到原生提供的requestIdleCallback方法的timeRemaining()最大返回是50ms，也就是20fps，达不到页面流畅度的要求，并且该API兼容性也比较差。

SchedulerHostConfig.default.js

该文件位于react/packages/scheduler/src/forks下，他实现了对requestIdleCallback的polyfill。

他针对DOM下和非DOM环境下实现了两套方案，我们先来看下该文件暴露出去的方法。

export let requestHostCallback; // requestIdleCallback的polyfill方法
export let cancelHostCallback;  // 用于取消requestHostCallback
export let requestHostTimeout;
export let cancelHostTimeout;   // 用于取消requestHostTimeout
export let shouldYieldToHost;
export let requestPaint;
export let getCurrentTime;      // 获取当前触发事件
export let forceFrameRate;      // 设置渲染的fps

非DOM环境

getCurrentTime

initialTime记录了一开始的触发时间戳，getCurrentTime函数则返回当前时间戳减去初始时间戳。

const initialTime = Date.now();
getCurrentTime = function() {
    return Date.now() - initialTime;
};

requestHostCallback

const _flushCallback = function() {
    if (_callback !== null) {
        // 无函数时不执行
        try {
            const currentTime = getCurrentTime();
            const hasRemainingTime = true;
            _callback(hasRemainingTime, currentTime);
            _callback = null;
        } catch (e) {
            setTimeout(_flushCallback, 0);
            throw e;
        }
    }
};
requestHostCallback = function(cb) {
    if (_callback !== null) {
        // 利用setTimeout的第三个参数
        setTimeout(requestHostCallback, 0, cb);
    } else {
        _callback = cb;
        setTimeout(_flushCallback, 0);
    }
};

requestHostCallback是基于setTimeout实现的，主要调用位于_flushCallback函数体内，当存在_callback时，便会触发_callback，传入true表示未超时，仍有空闲时间，currentTime则表示当前触发的时间戳。

requestHostCallback中，若存在_callback时，表示先前还有任务未完成，便利用setTimeout的第三个参数延后执行任务。

注：有关setTimeout的第三个参数可以见：setTimeout第三个参数。

cancelHostCallback

cancelHostCallback函数是用来取消requestHostCallback定时的。将函数设置置空，即可。

cancelHostCallback = function() {
    _callback = null;   // 置空，不执行
};

requestHostTimeout和cancelHostTimeout

requestHostTimeout = function(cb, ms) {
    _timeoutID = setTimeout(cb, ms);
};
cancelHostTimeout = function() {
    clearTimeout(_timeoutID);
};

shouldYieldToHost

表示触发是否超时，即当前帧是否过期。非DOM环境下一直都是false。

requestPaint 和 forceFrameRate

非DOM下无实质用处，为空函数。

DOM环境下

if (typeof console !== 'undefined') {
    const requestAnimationFrame = window.requestAnimationFrame;
    const cancelAnimationFrame = window.cancelAnimationFrame;
    // ....
}

首先是对requestAnimationFrame和cancelAnimationFrame两方法做了是否有的判断，并做了error的提示，实际上，在本文件下是没有使用这两个方法的，注释是说以防未来可能有使用。（看了先前版本的代码，是有基于requestAnimationFrame实现的。）

getCurrentTime

在DOM环境下，优先使用performance下的now方法，不支持的情况下，使用Date方式。

if (
    typeof performance === 'object' &&
    typeof performance.now === 'function'
) {
    getCurrentTime = () => performance.now();
} else {
    const initialTime = Date.now();
    getCurrentTime = () => Date.now() - initialTime;
}

forceFrameRate

该方法用于设置渲染的fps。

forceFrameRate = function(fps) {
    if (fps < 0 || fps > 125) {
        console.error(
            'forceFrameRate takes a positive int between 0 and 125, ' +
            'forcing framerates higher than 125 fps is not unsupported',
        );
        return;
    }
    if (fps > 0) {
        yieldInterval = Math.floor(1000 / fps);
    } else {
        yieldInterval = 5;
    }
};

fps仅支持0-125fps的，超出的做error提示。yieldInterval就是每帧时间。

requestHostCallback

在非DOM下，requestHostCallback使用的是基于setTimeout实现的，而在DOM下是基于postMessage和onmessage(MessageChannel)这个发布订阅模式做的。

postMessage

先看下requestHostCallback函数主体，

requestHostCallback = function(callback) {
    scheduledHostCallback = callback;
    if (!isMessageLoopRunning) {
        isMessageLoopRunning = true;
        port.postMessage(null);
    }
};

将回调函数存储起来，触发postMessage发送消息。isMessageLoopRunning表示是否在postMessage处理中，即是否在时间处理中。

onmessage

postMessage后，触发performWorkUntilDeadline函数，

channel.port1.onmessage = performWorkUntilDeadline;

const performWorkUntilDeadline = () => {
    if (scheduledHostCallback !== null) {
        // 有回调任务
        const currentTime = getCurrentTime();
        deadline = currentTime + yieldInterval; // 设置deadline
        const hasTimeRemaining = true;  // 任务有剩余时间
        try {
            const hasMoreWork = scheduledHostCallback(
                hasTimeRemaining,
                currentTime,
            );
            if (!hasMoreWork) {
                isMessageLoopRunning = false;
                scheduledHostCallback = null;
            } else {
                port.postMessage(null);
            }
        } catch (error) {
            port.postMessage(null);
            throw error;
        }
    } else {
        isMessageLoopRunning = false;
    }

    needsPaint = false;
};

yieldInterval是根据fps算出的每帧时间，超过这个时间就会影响帧数，到达不了想要的结果，所以设置了个deadline，即最终期限时间。

hasTimeRemaining表示是否有剩余处理时间，即未到达deadline。

当执行完scheduledHostCallback后，还有任务时，继续触发postMessage。没有的话，清空掉回调函数。

cancelHostCallback

置空回调，这样在performWorkUntilDeadline中就不会执行对应的函数了，相当于取消了requestHostCallback。

requestHostTimeout

requestHostTimeout = function(callback, ms) {
    taskTimeoutID = setTimeout(() => {
        callback(getCurrentTime());
    }, ms);
};

基于setTimeout，向回调传入当前时间作为参数。

cancelHostTimeout

requestHostTimeout的取消方法，即clearTimeout。

shouldYieldToHost和requestPaint

isInputPending的内容，可以看下这篇文章(is-input-pending)[https://wicg.github.io/is-input-pending/]，目前这只是个提议，还没有DOM是支持的。

而在SchedulerFeatureFlags.js中enableIsInputPending也是被定义为false，故函数定义位于else中。

shouldYieldToHost = function() {
    return getCurrentTime() >= deadline;
};
requestPaint = function() {};

shouldYieldToHost根据当前时间是否大于最后的预期时间。requestPaint和在非DOM下一样，都是未实现的空函数。

React中createElement和ReactElement

Sat, 21 Dec 2019 19:01:56 GMT

库或框架用多了，如果只是熟记一些API或一些坑的话，也就太没意思了，不如来了解下API背后的原理。首先来看下JSX转义成了什么以及他做了啥。

JSX

首先从我们常用的JSX来看吧。来看段React官网上的很简单的demo吧，

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
    element,
    document.getElementById('root')
);

在JSX中，创建了一个h1标签。我们都知道这JSX语法在浏览器中是识别不了的，借助babel，将这段代码转化下:

可以看到JSX部分<h1>Hello, {name}</h1>已经被转换成React.createElement("h1", null, "Hello, ", name)了，而该函数方法浏览器是可以识别的。

注：这也就是为什么明明只写了个很简单的JSX，在顶部依然需要写import React from 'react'。

我们将DOM稍微复杂些，并增加些属性：

return (
    <div className='123' id='what'>
        <div><span>123</span></div>
        <span>456</span>
    </div>
)
// 转换
return React.createElement("div", {
        className: "123",
        id: "what"
    }, 
    React.createElement("div", null, React.createElement("span", null, "123")),
    React.createElement("span", null, "456")
);

有层级关系的会在第三个之后的参数叠起来。

React.createElement

带着React.createElement方法是啥的疑问，看React的源码。首先先来到packages/react/src/React.js文件，该文件最终导出了React对象，找到他的createElement方法，可以见到：

createElement: __DEV__ ? createElementWithValidation : createElement

_DEV_ 表示是否是开发环境下，当在开发环境下时，使用了createElementWithValidation函数，它位于packages/react/src/ReactElementValidator.js文件中，createElement函数在packages/react/src/ReactElement.js。

createElementWithValidation

我们来看下createElementWithValidation方法，

const validType = isValidElementType(type);

if (!validType) {
    // ......
}

isValidElementType方法主要用来检测传入参数是否是个有效的React元素类型。如果不是的话，会执行if中的内容，附加一些检测和warning提示。

const element = createElement.apply(this, arguments);

if (element == null) {
    return element;
}

随后利用createElement创建ReactElement，这部分到createElement.js再叙述。

if (validType) {
    for (let i = 2; i < arguments.length; i++) {
        validateChildKeys(arguments[i], type);
    }
}

刚才在第一部分中，尝试了增加多个子元素，都是依次从第三个元素开始，此处循环从2开始就是为了拿到所有的子元素。


if (type === REACT_FRAGMENT_TYPE) {
    validateFragmentProps(element);
} else {
    validatePropTypes(element);
}

return element;

如果ReactElement是Fragment类型的，需要特殊处理下。

在validateFragmentProps函数下，针对在开发模式下，对Fragment元素做属性检测，提示只能有children和key属性，并且如果定义了ref属性，也会作出警告。

而validatePropTypes函数则是用于检查propTypes的，该方法仅在开发模式下执行，他检测类组件或者函数组件设置默认prop只能用defaultProps，getDefaultProps只能用于React.createClass中。最后返回这个ReactElement。

createElement

该方法返回一个制定type类型的ReactElement。

if (config != null) {
    if (hasValidRef(config)) {
        ref = config.ref;
    }
    if (hasValidKey(config)) {
        key = '' + config.key;
    }

    self = config.__self === undefined ? null : config.__self;
    source = config.__source === undefined ? null : config.__source;
    // Remaining properties are added to a new props object
    for (propName in config) {
        if (
            hasOwnProperty.call(config, propName) &&
            !RESERVED_PROPS.hasOwnProperty(propName)
        ) {
            props[propName] = config[propName];
        }
    }
}

config就是JSX元素上的一些属性，hasValidRef方法判断ref属性是否正确，方法hasValidKey则是去判断key属性是否合法，并将key转成字符串保存。

for循环则将元素上的非RESERVED_PROPS中的属性都保存到props上。

const childrenLength = arguments.length - 2;
if (childrenLength === 1) {
    props.children = children;
} else if (childrenLength > 1) {
    const childArray = Array(childrenLength);
    for (let i = 0; i < childrenLength; i++) {
        childArray[i] = arguments[i + 2];
    }
    if (__DEV__) {
        if (Object.freeze) {
            Object.freeze(childArray);
        }
    }
    props.children = childArray;
}

childrenLength获取child元素的长度，当长度为1时，则直接赋值到props的children下。当长度大于1时，将子元素存到数组中，再赋值到children属性下。

if (type && type.defaultProps) {
    const defaultProps = type.defaultProps;
    for (propName in defaultProps) {
        if (props[propName] === undefined) {
            props[propName] = defaultProps[propName];
        }
    }
}

这块是对组件设置默认的props值，比如某些非必传的参数，此时他为undefined，而defaultProps中的值就赋值过去了。

if (__DEV__) {
    // ....
}

开发模式下，将key和ref通过defineProperty绑定到props下，并设置他的getter函数，如果直接获取该key和ref值时，则会作出相应的警告提示。

最后，返回了ReactElement函数。

React.ReactElement

ReactElement方法返回react元素，所以$$typeof被设置成了REACT_ELEMENT_TYPE，当react元素渲染到DOM上时，也需要判断$$typeof===REACT_ELEMENT_TYPE。

const element = {
    $$typeof: REACT_ELEMENT_TYPE,
    type: type,
    key: key,
    ref: ref,
    props: props,
    _owner: owner,
};

type，是createElement方法中的第一个参数，通常是原生的DOM字符串或组件元素。
key，是元素上的key属性值。
ref，是元素上的ref属性值。
props，是在createElement中提取的props。
_owner，记录该元素的创建者。

if (__DEV__) {
    element._store = {};
    Object.defineProperty(element._store, 'validated', {
        configurable: false,
        enumerable: false,
        writable: true,
        value: false,
    });
    Object.defineProperty(element, '_self', {
        configurable: false,
        enumerable: false,
        writable: false,
        value: self,
    });
    Object.defineProperty(element, '_source', {
        configurable: false,
        enumerable: false,
        writable: false,
        value: source,
    });
    if (Object.freeze) {
        Object.freeze(element.props);
        Object.freeze(element);
    }
}

开发模式下，会对_store增加validated、_self、_source属性，不过目前不知道这些有啥用。

return element;

最后返回了该element对象。

Blob的arrayBuffer方法

Mon, 16 Dec 2019 21:24:42 GMT

在控制台中使用Blob实例时，偶然发现有个arrayBuffer的方法，联想到以前利用FileReader将blob转arrayBuffer的方式，来看看这个方法到底是做啥的。

Blob.arrayBuffer()

立刻查看MDN文档Blob.arrayBuffer()，arrayBuffer方法会返回一个promise，并将blob解析为arrayBuffer传入回调参数之中。

blob.arrayBuffer().then(buffer => /* process the ArrayBuffer */);

不过，该方法的兼容性还是有待提高，

兼容

结合 readAsArrayBuffer 方法，我们来做下兼容：

function toArrayBuffer(blob) {
    if (blob.arrayBuffer) {
        return blob.arrayBuffer();
    } else {
        return new Promise((resolve) => {
            let reader = new FileReader();

            reader.onload = function (e) {
                let data = e.target.result;

                resolve(data);
            }
            reader.readAsArrayBuffer(blob);
        })
    }
}

这下就可以啦。

React中的key值

Fri, 06 Dec 2019 23:11:39 GMT

在React中，jsx的循环是很常见的，但加入在循环中不加入唯一的key值，则会有以下的警告：Warning: Each child in a list should have a unique "key" prop。那不加key和加key，对于React又有什么区别呢？而且，我们经常也被告知不推荐用与数据无直接关联的index(序号)来做key值。

不带key值

我们先map生成一些没有key的值，再通过事件修改其值。最后以DOMNodeRemoved事件是否触发来判断diff结果。

class IndexPage extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      arr: ['a', 'b', 'c', 'd']
    }
  }

  componentDidMount() {
    // 第一个元素
    document.getElementById('a0').addEventListener('DOMNodeRemoved', function() {
      alert()
    })
    // 第四个元素
    document.getElementById('a3').addEventListener('DOMNodeRemoved', function() {
      alert()
    })
  }

  change = () => {
    const a = this.state.arr
    // 新增一个数据
    a.push('e')
    // 修改老的数据
    a[3] = 'D'

    this.setState({
      arr: a
    })
  }

  render() {
    return (
      <div>
        {
          // 不带key的循环
          this.state.arr.map((item, ind) => {
            return <span id={ `a${ind}` }>{ item }</span>
          })
        }
        <div>
          <button onClick={ this.change }>change</button>
        </div>
      </div>
    )
  }
}

页面上显示由 abcd 变成了 abcDe ，但是DOM移除事件并没有触发，diff起效果了。也就是说尽管没有key值，但是React仍对这些数据做了diff，将需要更新的节点的内容替换。

带key值

略微修改以上代码，增加key值，每次以数组的index为key值，并在按钮事件触发之后给index加了前置量temp。

class IndexPage extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      arr: ['a', 'b', 'c', 'd'],
      temp: 0
    }
  }

  componentDidMount() {
    // 第一个元素，此元素在第二次时会更换id值
    document.getElementById('a0').addEventListener('DOMNodeRemoved', function() {
      alert('a0')
    })
    // 第一个元素，此元素在第二次时不会更换id值
    document.getElementById('a3').addEventListener('DOMNodeRemoved', function() {
      alert('a3')
    })
  }

  change = () => {
    this.setState({
      temp: 2
    })
  }

  render() {
    return (
      <div>
        {
          this.state.arr.map((item, ind) => {
            return <span id={ `a${ind}` } key={ ind + this.state.temp }>{ item }</span>
          })
        }
        <div>
          <button onClick={ this.change }>change</button>
        </div>
      </div>
    )
  }
}

按钮点击后，只弹出了a0。可是在实际过程中，数组中的值并没有改变，却销毁了key值改变了DOM。这也是不推荐使用index做key值的一大原因，而是建议与数据有较大关联性的值。

key值的作用

是不是渐渐的理解key的作用了呢？简单的概括如下图：

文字概括如下：

当存在key值，若key值改变，则直接销毁DOM，重新创建，若key没有改变，则检查属性是否需要更新。
当不存在key值，直接diff处理。

href属性使用js代码段在React下warning问题

Wed, 04 Dec 2019 21:33:47 GMT

我们在使用a标签的时候，若不想用a标签的href跳转，而要使用自己绑定的click或其他事件时，往往会通过插入js代码段的方式设置href为javascript:;或javascript:void(0);等达到href无跳转的结果。但是这么设置在React中会提示warning：A future version of React will block javascript: URLs as a security precaution. Use event handlers instead if you can. If you need to generate unsafe HTML try using dangerouslySetInnerHTML instead. React was passed "javascript:;"，这样的话，我们该如何处理。

处理方法

在href中插入代码段的方式是不可行的，转而可以使用以下方式：

<a href="#" onClick={ (e) => { e.preventDefault() } }></a>

这样就解决了warning问题。

【专题】工厂模式

Mon, 02 Dec 2019 22:25:52 GMT

工厂模式，可能时我们学习时第一个接触到的设计模式吧。当然他也是最常用的设计模式之一。

111

【专题】单例模式

Mon, 02 Dec 2019 22:25:52 GMT

单例模式在JS中比较的常见。

111

【专题】设计模式设计原则

Mon, 02 Dec 2019 22:25:52 GMT

工厂模式，可能时我们学习时第一个接触到的设计模式吧。当然他也是最常用的设计模式之一。

111

dva项目中eslint不生效问题

Mon, 18 Nov 2019 21:42:37 GMT

用dva脚手架生成的项目，自己配置了.eslintrc.js，但是在run start后，只能显示某些异常，而且并不符合自己定义的校验规则。

问题

前面已经描述过了，主要就是，在run start后，报的异常和错并不是.eslintrc.js中所配，或者根本就没提示。

处理方案

dva项目中已经自带了tslint-loader插件，到node_modules/af-webpack/src路径下打开getConfig.js文件，看到

const userEslintRulePath = resolve(opts.cwd, '.eslintrc');

这么一段，于是，修改.eslintrc.js文件名为.eslintrc，再启动项目就可以了。

【专题】装饰者模式

Sat, 16 Nov 2019 22:25:52 GMT

在传统的面向对象语言中，经常使用继承的方式给对象添加方法。但是继承的方式往往会引起一些问题。一是父类与子类之间强耦合，二是破坏原有的封装性。而装饰者模式能够在不改变对象自身的基础上，动态地给对象添加属性。

简单实现js中的装饰者

动态的修改对象的属性很简单，这样就可以做到了，

let obj = {
    name: 'hello',
    age: 123,
};

obj.name = obj.name + ' world';

当然装饰者模式不会改变原对象的，我们在此基础之上做修改，

let first = {
    print: function() {
        console.log('first');
    }
};

let secondPrint = function() {
    console.log('second');
};

let thirdPrint = function() {
    console.log('third');
};

let print1 = first.print;

first.print = function() {
    print1();
    secondPrint();
}

let print2 = first.print;

first.print = function() {
    print2();
    thirdPrint();
}

first.print();      // 以此按行输出：first，second，third

我们通过保存原先函数引用的方式就可以重写之前的某个函数。其实这种方式很常见，像DOM0级事件绑定时，假如我们要给window对象绑定load回调事件，

// 假如某个js里有定义
window.onload = function() {
    console.log(1);
}

// 正在开发的js文件
let _onload = window.onload || function() {};

window.onload = function() {
    _onload();
    console.log(2);
}

由于我们不能确定window.onload是否在其他页面被定义，为了防止他被覆盖，于是先保存原先的onload事件，再将其放入新定义的onload中执行。

虽然达到了效果，但是这种方式有几个问题：

中间变量 _onload 要维护，如果要装饰的函数变多，要维护的中间变量也会变多。
this丢失问题，当然这儿没有，因为执行环境指向的window。

考虑下以下代码：

let _document = document.getElementById;

document.getElementById = function(id) {
    console.log(1);

    return _document(id);
};

document.getElementById('btn');

由于调用全局的 _document 方法时，this是指向window的，而该方法需要指向document才能作用，所以出错了。

所以调用时需要改变下this指向，借助apply或call，

// ...
    return _document.apply(document, [id]);
// ...

AOP修饰函数

首先给出before和after两个方法，

Function.prototype.before = function(beforFn) {
    let _self = this;           // 原函数引用

    return function() {
        beforFn.apply(this, arguments);

        return _self.apply(this, arguments);
    };
}

Function.prototype.after = function(afterFn) {
    let _self = this;           // 原函数引用

    return function() {
        let res = _self.apply(this, arguments);

        afterFn.apply(this, arguments);

        return res;
    };
}

两函数都接收一个新功能函数，唯一区别则是该新功能是前置执行，还是后置执行。而apply的使用保证this指向不会被丢失。

当然直接给原型增加新方法会污染原型，将这两方法稍作修改：

const before = function(fn, beforeFn) {
    return function() {
        beforeFn.apply(this, arguments);
        
        return fn.apply(this, arguments);
    }
};

const after = function(fn, afterFn) {
    return function() {
        let res = afterFn.apply(this, arguments);
        
        fn.apply(this, arguments);

        return res;
    }
};

let a = before(function() {
    console.log(111);
}, function() {
    console.log(222);
});

a = before(a, function() {
    console.log(333);
});

a();        // 333 222 111

应用实例

动态修改参数

假如我们现在实现了一个简单的ajax请求，

let ajax = function(type, url, params) {
    // ... ajax处理
    console.log(params);
};

现在由于安全问题，现在需要在params增加个token参数，利用前面的Function.prototype.before装饰到ajax函数中的params参数上，

let getToken = function() {
    return 'token';
};

ajax = ajax.before(function(type, url, params) {
    params.token = getToken();
});

ajax('get', 'http://xx.com', { name: 'hello' });   // {name: "hello", token: "token"}

利用AOP方式给ajax函数动态地增加了参数，也保证了ajax的独立性，提高了ajax函数的复用性。

插件式表单验证

表单是web上必不可少的一部分，那么他的验证也是必不可少的。比如登录模块，至少需要检验用户名和密码是非空，

<body>
    <input type="text" id="username" />
    <input type="password" id="password" />
    <input type="button" id="btn" value="提交" />
</body>
<script>
    let oUser = document.getElementById('username'),
        oPass = document.getElementById('password'),
        oBtn = document.getElementById('btn');

    let submit = function() {
        if (oUser.value === '') {
            return console.log('用户名不能为空');
        }
        if (oPass.value === '') {
            return console.log('密码不能为空');
        }
        
        const params = {
            username: oUser.value,
            password: oPass.value,
        }

        ajax('...', params);        // 简略
    };
    oBtn.onclick = function() {
        submit();
    };
</script>

submit函数此处需要负责数据合法校验和提交ajax，造成函数臃肿，职责混乱，没有复用性。首先将校验部分代码分离，

const validate = function() {
    if (oUser.value === '') {
        console.log('用户名不能为空');
        return false;
    }
    if (oPass.value === '') {
        console.log('密码不能为空');
        return false;
    }
};

let submit = function() {
    if (validate() === false) {
        return;
    }
    
    // ....
};

代码已经有了改进，虽然校已经独立到validate函数中了，但是submit函数仍要计算validate函数的返回值，因为返回值表明了是否通过校验。

理好先后顺序，是优先validata后，再到submit，略微修改before函数：

Function.prototype.before = function(beforFn) {
    let _self = this;           // 原函数引用

    return function() {
        if (!beforFn.apply(this, arguments)) {
            // 验证失败，不通过
            return;
        }

        return _self.apply(this, arguments);
    };
}

const validate = function() {
    if (oUser.value === '') {
        console.log('用户名不能为空');
        return false;
    }
    if (oPass.value === '') {
        console.log('密码不能为空');
        return false;
    }
};

let submit = function() {
    const params = {
        username: oUser.value,
        password: oPass.value,
    };

    ajax('...', params);        // 简略
}

submit = submit.before(validate);

oBtn.onclick = function() {
    submit();
};

现在将校验和提交ajax完全拆分开了，不存在耦合关系，这样要增加其他校验规则，只需要动validate就行了。

当然，由于function也是对象，但装饰返回的是一个新函数，所以原函数上的属性就会丢失。

总结

装饰者模式在平时的开发过程中用的非常多，当然我们要注意下装饰太多的话，性能还是会有影响的。

参考《JavaScript设计模式与开发实践》

http2.0初体验

Thu, 14 Nov 2019 21:09:59 GMT

站点搬回国了，曾经上了https后无奈访问出问题，又退回http，如今终于可以大胆的使用https了。而且，用chrome访问自己的站点时，终于有那把表示安全的锁了。

毕竟https会多一层校验的过程，肯定会比http更耗些性能，便瞄上了http2.0，都说2.0性能有提升，并且2.0需要在https之上，那不正好么？于是上了2.0的船。

对比http1.1，开启了http2的旅程。

配置

现在，nginx已经安装好了，接下来对nginx做配置。

http1.1

在/usr/local/etc/nginx/servers下创建http.conf文件。增加以下配置：

server {
    listen 8081;
    server_name  localhost;

    location / {
        root /usr/local/var/www/http1/;
        index  index.html index.htm;
    }
}

http1.1的部署在了本地的8081端口上，他的根目录位于/usr/local/var/www/http1/路径下。

http2.0

关于https的证书，可以自行搜索，利用openssl弄个凑合的证书，反正只是用于测试。接在先前的http.conf文件，继续增加：

server {
    listen 443 ssl http2;
    server_name  localhost;

    ssl_certificate /usr/local/var/www/cert/nginx.crt;
    ssl_certificate_key /usr/local/var/www/cert/nginx.key;

    location / {
        root /usr/local/var/www/http2/;
        index  index.html index.htm;
    }
}

http2借助了https，需要443端口，不过在nginx下开启2.0只需要增加个http2就行了，很简单，文件的根目录位于/usr/local/var/www/http2/路径下。

重启nginx，在两个文件夹下创建index.html并增加些内容，打开http://127.0.0.1:8081/和https://127.0.0.1/能看到页面，那么我们的配置就OK了。

注：浏览器提示证书有问题，可以点击直接访问。

http2.0优点

对比 http1.1，我们先来了解下http2.0的优点，

采用二进制格式传输数据，而非http1.1文本格式（二进制分帧）。
对消息头采用Hpack进行压缩传输，能够节省消息头占用的网络流量（头部压缩）。
多路复用
服务端推送

接下来，我们从浏览器控制台入手，简单的来看看这些优点，

优势体验

二进制分帧

这个控制台看不出来，后面抓包或者其他方式再看下，采用二进制的话比原先文本的方式要快。

头部压缩

这个控制台也看不出来，不过在response发现了几个带有冒号(:)的响应头，

这些带冒号响应头表示是在http2.0中新增的。

再看下请求的index.html的传输大小(两文件夹下的index.html都是260字节的)，量文件先看1.1下的，

接下来是2.0下的，

很明显2.0要小些，减小了20%左右的传输，对首屏无缓存时加载有很大的优势。

注：chrome的控制台的Protool可以直接分辨出两种不同的协议，如果没有这列，可以在头部行上右键打开

多路复用

由于每个浏览器都会对同站点进行并行加载资源，所以，我从两方面来测试：1.单纯加载单个文件，2.加载多个文件。并且强缓存和协商缓存也要排除掉。

单个文件

单个文件可以避免了并行加载的影响，资源文件我用的时echart.js，2.5M大小。

序号	http1.1(ms)	http2.0(ms)
1	45	37
2	41	32
3	44	39
4	44	36
5	47	35
6	41	70
7	49	39
8	42	46
9	50	37
10	43	42
总计	446	413
平均	44.6	41.3

http2.0胜出了，如果这差距在多文件和真实网络环境中能被放大，2.0的优势也是蛮大的。

多个文件

多个大文件

采用给src增加query参数的方式，每个页面请求12次echarts文件，选了5次中最好的一次贴上图片，1.1的如下：

2.0的：

其实误差并不是特别明显。

接下来，我们设置个下载上限，在chrome中新增个网络延迟，给个2M的上下行带宽，0ms延迟，

http1.1的效果：

从控制台也可以看出chrome对同源的并行上限是6个文件，对比http2.0的效果：

依旧是差不多，毕竟限制了带宽，但下载的资源大小有差不多。emmmm....我也尝试增加了延迟，两次的load时间都变成了2.2min，并没有体现出http2的优势。

接着我又用jQuery3.4.1.min版(86kb)的测试了下，在有网络限速和无限速下下载30个文件，记录下load时间，结果如下：

序号	http1.1(ms)	http2.0(ms)
1	473	541
2	513	512
3	453	496
4	484	491
5	474	476
总计	2397	2516
平均	479.4	503.2

好了，https2.0翻车了，实际测试速度比http1.1都慢。

服务端推送

这个没有接触，准备后期再研究下。

总结

第一次用上了http2.0，也在控制台下与http1.1做了些简单的比较。从多路复用方面细看了下http2.0的资源加载，不过很意外的是，实际测试与1.1差不多。

本文用到的demo请见：github。

dva项目配置transform-runtime

Mon, 11 Nov 2019 22:25:52 GMT

按照官方给的说法，transform-runtime插件dva是默认支持的，只需要在.webpackrc.js中配置完就行了，实际测试配置了出现了this.setDynamic is not a function的报错。

问题

前面描述了，.webpackrc.js中的配置如下：

"extraBabelPlugins": [
  "transform-runtime"
]

不安装插件试了，安装插件也试了，babel-plugin-transform-runtime,transform-runtime等等插件都是了，依旧是各种报错。

处理方法

最后在github上的issue查到答案，地址：https://github.com/babel/babel-loader/issues/560。

原因是由于项目中的babel大于7，所以使用的该插件也要是对应的版本。

首先，安装插件：npm i @babel/plugin-transform-runtime --save-dev，然后修改配置，如下（dva中配置需要将名称中的plugin去掉）：

extraBabelPlugins: ['@babel/transform-runtime']

这样就可以了。

npm包增加忽略提交配置

Sat, 09 Nov 2019 10:54:37 GMT

使用git做版本管理时，我们经常会用到.gitignore这个文件来控制某些文件的提交，比如node_modules等。但是在发布npm包时，有些文件比如example等我并不想提交到npm官网上，但是需要提交到git上。那么，我们就来看下npm下有没有类似于gitignore这种功能。

在实际的publish，npm会将.gitignore中的文件排除，提交其他的文件。

.npmignore

和.gitignore类似，npm官方提供了.npmignore文件来控制哪些文件不被提交到npm官网。但是当没有该文件时，便会根据.gitignore文件中的忽略条件。这也就解释了实际操作中为何根据.gitignore配置来控制提交了。

.npmignore文件中的抒写规则和.gitignore规则类似：

以空行或开头为#的那行将被忽略。
用/指定对应文件夹目录。
...

默认情况下，以下路径和文件将被忽略，因此不需要添加.npmignore中，

.*.swp
._*
.DS_Store
.git
.hg
.npmrc
.lock-wscript
.svn
.wafpickle-*
config.gypi
CVS
npm-debug.log
node_modules

以下文件是永远都不会被忽略的，即使你加到.npmignore中：

package.json
README
CHANGELOG
LICENSE

如果觉得再增加个文件是个麻烦事，我们还有其他方式。

files属性

ignore方式是利用黑名单的方式控制文件的提交，package.json中的files属性则是利用白名单的方式去控制。他可以是字符串或数组，写入的是需要提交到npm官网的文件或文件夹。

例如：

{
    "files": [
        "dist"
    ]
}

这样就会提交dist文件夹以及默认的npm永不会忽略的那几个文件。

优先级

既然有这么多种选择，那总有优先级顺序吧。实际优先级顺序如下：

files属性 > .npmignore > .gitignore

总结

这下可以给包增加上npm的忽略提交了，毕竟用户在使用你的包时，可以免去无用文件的下载，提升下载速度。

附上npm官方对npmignore的介绍；https://docs.npmjs.com/misc/developers。

dva项目中增加静态资源hash值及问题

Thu, 07 Nov 2019 22:26:41 GMT

在每次修改完bug，打完包给测试回归时，总有因为没有清除缓存造成bug再次被打开这种情况。此时，我们就需要静态资源增加hash值来避免缓存。

其实，dva已经内置了HTMLWebpackPlugin插件，只要配置下就可以打开该插件。

开启hash

打开配置

在.webpackrc.js或.webpackrc中增加以下配置：

{
    // .... 其他配置
    hash: true,
    html: {
        template: "./public/index.ejs"
    },
}

修改文件

一定要设置template才可以开启HTMLWebpackPlugin插件。index.ejs文件内容如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>demo</title>
</head>
<body>
  <div id="root"></div>

</body>
</html>

或者你可以重命名public文件夹下的index.html。

注：重命名完后，记得一定要删除里面的script和link标签。 前者的存在会造成js报错等问题，后者会多个404 error的请求。（我偷懒直接copy了，报错的bug看了好久....）比如当时我遇到的报错：

Uncaught Error: Iframe has not been created yet.
Uncaught (in promise) Error: Iframe has not been created yet.

改好后，等重启项目，就可以使用了。

React事件绑定以及参数传递

Tue, 29 Oct 2019 21:59:33 GMT

事件是JS中重要的组成部分，在React中，内置了他自己的一套绑定和处理事件的逻辑，我们来看下这几种模式下的参数设置与获取以及他们的优缺点。

由于自定义的类方法没有绑定this，所以需要我们手动去绑定，才可以正确的去调用。

React事件绑定方式

1. constructor中bind绑定

class IndexPage extends React.Component{
  constructor(props) {
    super(props)

    this.event1 = this.event1.bind(this)
  }

  event1() {
    console.log('event1');
  }

  render() {
    return (
      <button onClick={ this.event1 }>event1</button>
    );
  }
}

该方式提前在构造函数中绑定this，不需要在使用再次改变this。当然该方式在没有state的情况下，需要额外写constructor函数。

2. 调用时箭头函数绑定

class IndexPage extends React.Component{
  event2() {
    console.log('event2');
  }

  render() {
    return (
      <button onClick={ () => { this.event2() } }>event2</button>
    );
  }
}

利用ES6中的箭头函数this的特性，仅在使用时进行this绑定。

3. 调用时bind绑定

class IndexPage extends React.Component{
  event3() {
    console.log('event3');
  }

  render() {
    return (
      <button onClick={ this.event3.bind(this) }>event3</button>
    );
  }
}

和前一种方式一样，在使用时绑定，但是和前者一样，在每次调用时，会新生成一个方式实例，如果接受参数的是组件的话，会引起额外的渲染，造成对性能的影响。

4. ES6箭头函数初始化

class IndexPage extends React.Component{
  event4 = () => {
    console.log('event4');
  }

  render() {
    return (
      <button onClick={ this.event4 }>event4</button>
    );
  }
}

利用箭头函数在创建时绑定了this，当然该方式需要babel转义。

函数传参

函数事件的使用中，参数也是个重要的角色。我们来看下这几种方式下如何进行参数的传递。

首先，将这几个函数整合到一个页面中：

class IndexPage extends React.Component{
  constructor(props) {
    super(props)

    this.event1 = this.event1.bind(this, 1);
  }

  event1(a, e) {
    console.log('event1', a, e);    // 1 {}
  }
  event2(a, e) {
    console.log('event2', a, e);    // 2 {}
  }
  event3(a, e) {
    console.log('event3', a, e);    // 3 {}
  }
  event4 = (e) => {
    console.log('event4', e);       // {}
  }

  render() {
    return (
      <div>
        <button onClick={ this.event1 }>event1</button>
        <button onClick={ (e) => { this.event2(2, e) } }>event2</button>
        <button onClick={ this.event3.bind(this, 3) }>event3</button>
        <button onClick={ this.event4 }>event4</button>
      </div>
    );
  }
}

event1方式可以在bind时传入自定义的参数，在最后会补上event参数。
event2方式由于显示的传参，所以他需要显示的传入event参数。
event3方式同event1一致，但是可以传入在render中获取或计算后的参数。
event4方式没法传入自定义参数，但是event参数是可以拿到的。

event参数丢失

直接使用event参数时没有太大的问题，但是在setTimeout中使用时，获取到了null，并有一个warning在控制台上显示。

The SyntheticEvent is pooled. This means that the SyntheticEvent object will be reused and all properties will be nullified after the event callback has been invoked. This is for performance reasons. As such, you cannot access the event in an asynchronous way.

所以，我们可以提前先保存event上的一些简单数据，比如：

let val = event.target.value

这样就可以了。

总结

由于event2和event3方式是在使用时返回event实例，对性能有影响，所以在没有参数要传时不建议使用，又由于event1需要额外写代码，所以推荐使用event4这种方式。

当需要传如参数时，固定的参数区分不同函数时可以使用event1，其他方式event2或event3都可以。

详细的demo可见：github。

npx命令学习

Fri, 18 Oct 2019 22:35:02 GMT

npm从5.2版本开始，就内置了npx命令。当然如果低于这个版本，你也可以通过npm install -g npx全局安装他。

优点

为什么要用 npx 呢？我们来看下他的优势。

避免全局安装

我们都知道，在用一些如vue-cli、create-react-app等脚手架时，我们首先要做的便是全局安装这些东西。而全局安装时会在默认的目录下的node_modules里下载这些包，这不仅占用了大量的空间，而且很久之后使用时，对应的版本都会落后很多，又得手动升级再使用。

使用 npx 命令时，就没有这么多的麻烦了（对于使用频率不是特别高的来说很不错）。例如使用create-react-app新建项目时，我们就可以：

npx create-react-app react-test

npx会将create-react-app下载到临时目录，初始化好项目后再删除。而当你再次执行时，仍会去重新下载，再初始化项目。

调用局部模块

比如在 gatsby 项目中，如果我们需要打包build时，就需要在package.json中的scripts下添加个命令。若不添加则只能使用 ./node_modules/gatsby（省略）这种方式去执行。

npx提供了另外的便利，直接执行npx gatsby build就可以完成了。他会自动完成对项目中局部安装包的使用。

其他

--no-install

--no-install会让npx强制使用本地的包，如果本地没有，则会报错。

npx --no-install 包名

--ignore-existing

--ignore-existing参数会忽略本地同名的包，强制下载最新的包。

npx --ignore-existing 包名

webpack中globalObject配置

Tue, 15 Oct 2019 10:36:17 GMT

自己写了个npm的包，并且配置了webpack中的libraryTarget配置，使其能够用umd的方式去生成js文件，这样使得包既可以npm的方式引入又可以script标签的方式去引入。但是当包在SSR渲染的应用中import时，就会出现报错。

问题

直接import包后，会提示window is not defined的提示。

因为SSR的应用中，服务端会提前执行掉这些全局的代码，并且组件的创建dom以及之前的生命周期也会被执行，然而在node中是没有window顶层对象的，所以报错了。

原以为是代码中的window直接调用导致，后做了if检测，但实际仍报错，后在development模式下看了下代码，发现有个传入的参数居然是window对象，

对比看了下umd书写的规范，此参数应该传入的是指向当前环境的this。

处理方案

在webpack的文档上看到globalObject配置：

To make UMD build available on both browsers and Node.js, set output.globalObject option to 'this'.

由于他默认是window，所以我们需要修改成this，在webpack中修改output中的配置，加入globalObject配置：

//....
output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
    libraryExport: 'default',
    library: '[name]',
    globalObject: 'this',   // here
    libraryTarget: 'umd'
}
//....

注：

npm内部还有对window或document等只有浏览器下才有的对象使用时，依旧会报错，可以在代码内部做if判断处理。
没有做if处理的话，只在对应的生命周期中使用该npm包中的api，避免报错。

这样的话打包后的文件就可以直接在SSR项目中直接import了。

使用eslint遇到问题合集

Sun, 13 Oct 2019 19:12:29 GMT

组里推了eslint，我手头的新项目当前也得遵守这规范，于是在项目刚起步一小撮时间后，想着把eslint给安装了，至少能防止后期大规模的因规范导致的修改。不过，在安装过程中，遇到了几个小问题，记录下。

Unexpected top-level property "react/jsx-uses-react"

运行 eslint 检测后，报错如下：Unexpected top-level property "react/jsx-uses-react"。

降低 eslint 版本，直接安装的是默认最新的 4.19.1 版本，可以降低安装版本：

npm install eslint@3.19 --save-dev

Cannot find module 'eslint-scope'

具体报错如下：

error  Parsing error: Cannot find module 'eslint-scope' from '/Users/..../Documents/work/aiLab/node_modules/eslint/lib/api.js'

可以在 .eslintrc.js 文件里增加 parserOptions 配置：

"parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
        "modules": true
    }
},

The keyword 'import' is reserved

具体报错如下：

error  Parsing error: The keyword 'import' is reserved

可以在 .eslintrc.js 中增加 parser 配置：

"parser": "babel-eslint",

再见WordPress，拥抱Gatsby

Mon, 30 Sep 2019 22:25:52 GMT

用WordPress已有三年之多了，见识到了WP的功能强大和庞大生态，无数强大的插件让WP如虎添翼。不过，在使用的时候也看到了WP的短处。当然没有什么东西是没有缺点的，只是你在乎这些缺点不。

WordPress

结合自己的使用，来谈谈这个老朋友吧。

优势

1. 简单安装，开箱即用

只要有php、mysql、apache的环境(docker更容易)，几步就可以搭建个WP博客了。

搭建好后，可以登录后台，即可开启写文章模式，对于不是特别东技术的人来说是很容易的。可视化的操作界面很贴心（5.0升级后界面很不错，可惜我一直停留在4.9.8，只在宣传中见到。。。），后台的设置功能也基本够用（配合主题更好食用）。

2. 生态强大

WP的问题在百度上基本能搜索到答案。
各种款式的主题。
强大的插件。
稳定的团队维护。
大量的使用者。
......

3. PHP

我总想着在主题之上增加些自己的想法或者干脆重新写个主题，但是这些基本前提是得掌握一些PHP方面的技能，如果要是大学时代，我还是愿意去研究的。毕竟都工作这么多年了，现在学PHP是不是有点晚了？

缺点

1. 慢、笨重

php作为后端本身就慢些。

由于本人的站点一直在国外，所以网速和延迟一直是个大问题，在插件装的较多且网延迟较大时，经常出现500之类的错误。登录后丢响应导致无法跳转首页的问题也是经常性的。

WP需要配数据库，当然也是性能损失的一点，但动态博客数据库肯定得有。

CDN、静态数据缓存、数据库缓存依旧不能让WP轻盈起来。

2. 备份问题

WP下有好些个备份插件，免费版的基本功能都有。但是由于本人想异地备份，另一台虚机优势不可少的。

3. 官方不支持markdown

WP5.0了依旧不支持markdown（插件支持，但多多少少用的不自在）。

其他系统

其实很早就在物色其他系统了，不过没有一款能让我下定决定转移，因为怕又是一个坑，无限折腾。

typecho

这款国人开发的博客系统在轻盈性方面比笨重的WP表现得更好，他也支持markdown。但是没找到看得上的主题和插件，相对WP还是不足的。。。况且作者有一年多未更新了（最近有更新）。还有就是PHP写的啊，难搞。。

ghost

这个号称要干倒WP的系统，后端基于nodejs（大拇指），对于我这个像深入学学node的人来说是相当不粗的，这种情况下，写主题也不成问题。可惜的是页面是 Handlebars 模板，作为一个前端人员，怎么能还停留在这玩意上呢？好歹也得三大框架的把。

自建

那就用node搭建个博客呗？

起初好好的，后期陷入，vue和react来回切换的问题中（受个人技术栈选择问题影响），以及UI框架的来回切换，并且本人艺术方面有问题，只能欣赏好坏，不能自己设计个美的界面，后放弃。

折腾完动态博客，逐渐向慢慢兴起的静态博客靠齐。

hexo

依旧是字符串模板的原因，再加上很奇怪的文章放置规则，虽然自己也写了个简单的主题，但是没兴趣继续完善下去了。

vuePress

比较像是记录文档的，界面风格固定，不太容易修改。不过支持vue组件的展示这点很不错。

gitbook

风格更像是记录文档的，而且顶部没有menu切换页面，只能通过左侧tree来切换，或者说更像一本书而已。

Gatsby

在简单的尝试到搭建完成本系统，我来说说自己的看法。

1. 基于React

数据管理没必要用，router已经集成，不过能占到三大框架的边就用把。。。

当然，react中的一些插件基本都可以使用。

2. 高度自定义

有相当一部分主题和插件。如果你不愿意用，那么就可以用react来写一套自己喜欢的主题了。

你想用哪个UI库看你喜欢，若是想加一些奇怪的组件也可以。

Gatsby是利用 gatsby-source-filesystem 插件去读取md文件的，你可以随便瞎组合文件，甚至嵌套多层文件夹，当然文章目录位置也由你定。

若md文件渲染出的页面不满意，那就自己用react写个吧，在 src/page 下就可以写独立的页面（多页面风格不一致也没问题）。

3. 简单的后端

后端是基于Graphql的，开发起来也算是便捷吧，对于我这种不想大规模折腾后端的也是挺满意的。

4. 静态化

run build时，会将这些页面都转化成html，性能不打折扣。

5. md + github + jenkins

markdown的记录方式很舒服，配上github后，备份的问题也解决了。在套上Jenkins的自动化编译，发布也解决了，完美。

总结

对于我这种特别想折腾前端页面，但又愿意多关注后端的人来说，Gatsby是相当不错的。

就目前的使用来说，没有不满意的地方，nice。

Github+Jenkins实现自动化编译

Mon, 23 Sep 2019 19:47:23 GMT

基于Gatsby的个人博客总算要完成基本功能了，想想就有点小激动，毕竟这是个人自己搭建的博客系统(虽然基本没后端啥事)。不过，剩下一个大问题就出现了。我每次写完md后，需要手动run build下，而且我是挂在自己的vps上的，可能需要重新打包上传，即使在服务器上build的话，我仍得建立次ssh连接。

Jenkins

一想到自动化编译的平台，首先就想到了Jenkins，在简单百度了下Jenkins的使用功能上，就觉得他已经是符合的了。

下面我们看下如何在ubuntu下安装Jenkins，我的是ubuntu 16.04，

安装JDK

sudo apt-get install openjdk-8-jdk

安装Jenkins

wget -q -O - https://pkg.jenkins.io/debian/jenkins-ci.org.key | sudo apt-key add -
echo deb http://pkg.jenkins.io/debian-stable binary/ | sudo tee /etc/apt/sources.list.d/jenkins.list
sudo apt-get update
sudo apt-get install jenkins

这些步骤仅为了获取最新的Jenkins。

启动Jenkins

sudo systemctl start jenkins

我们可以通过这个命令来看下Jenkins的状态，

sudo systemctl status jenkins

防火墙/安全组

不同的产品vps此处的操作不同，比如阿里云的ECS可能需要配置8080开发，像我用的vultr直接就可以访问了。当然，如果安装了防火墙的话，是需要对应打开8080端口的。

配置Jenkins

在浏览器中访问 http://vps的ip:8080 ，出现以下图片，

sudo vi /var/lib/jenkins/secrets/initialAdminPassword

输入正确的pass就可以进行下一步了，

选择第一个默认安装就行了，

当然，主机在国外的话，安装会快很多。等安装后，会让你输入用户名和密码，并配置url（可以跳过后期配置），这儿就不贴图了。

我安装的是 2.176.3 版本，由于起初安装没有截图，图片均来自于参考地址，其实安装配置的界面相差不大。

此部分参考了：https://www.jianshu.com/p/845f267aec52

Github

配置好了Jenkins，下面就需要配置github了。

首先，登录github，右上角进入 setting，

在左下角找到 Developer setting，

再选中 Personal access tokens，

点击 Generate new token 按钮，

点击后应该会让你输入github的密码，照常输入后即可，

输入Note，用来区分这个tokens即可，选中repo和admin:repo_hook，创建即可。

这样，tokens就生成了。

Jenkins与GitHub关联

点击左上角的Manage Jenkins，

点击 Configure System ，找到 Github 这一项，点击添加Github服务器-Github Server，

在新显示的页面上，选择添加Jenkins，

在弹出框中，类型是 Username with password 的，用户名是github账号的用户名，密码是github账号的密码，ID和描述就随便给个啦，（此是用来登录GitHub的）

点击添加，此时账号是添加OK了，虽然此处见不到，一会就会有用的，再次点击添加-Jenkins，类型选择Secret text，

此处secret输入的是刚才在GitHub上生成的token，ID和描述也没有特殊的要求。(此secret是用来获取github push动作的)

确定添加之后，选择刚才添加的那个ID，勾中管理hooks，点击连接测试，出现如图试样，即为成功(limit后的数字不一定是4996)

git配置

点击左上角的Manage Jenkins，

再点击 Global Tool Configuration ，找到Git这栏，

回到SSH工具上，由于Linux上都默认安装了Git，输入 which git，查找git的安装路径，并在前面的 Path to Git executable 中输入，

点击保存即可。

配置构建项目

登录刚才搭建好的Jenkins，点击左上角的新建Item，

在新页面中，输入任务名称，选中第一个 Freestyle project，最后点击确定，

接下来就是该item的配置了，首先选中Github项目，输入对应项目的url(branch的也是输入master分支的url)。

此处可以先配置下丢弃旧的构建，以防硬盘不够的问题。

在源码配置里选择Git， URL配的是clone的git地址，credentials选择刚才你输入的用户名和密码，如果无法连接Github，此处会提示你，

Branches to build 选择你需要构建的分支，

源码库浏览器选择githubweb，URL输入的是项目(master分支)的url地址。

构建触发器选择GitHub hook tigger for GITScm polling，构建环境选择 Use secret text(s) or file(s)。

最后输入实行shell就行了，我这是前端项目仅仅是ci和run build，最后还可以增加移动文件到nginx的路径下，后面能干啥就发挥你的小脑筋吧。

到此基本就OK了，我们可以手动点击工程里的立即构建或这首页table行最后的按钮。

注：搜索时看到说要在github上配置其他信息才能获取到github的push操作，实际操作这样就OK了。当在GitHub上对应的分支项目push代码后，Jenkins会自动进行构建。

其他问题

Jenkins崩溃问题/error spawn ENOMEM

在构建项目的过程中，突然访问不了8080端口了，后通过重启解决。

service jenkins restart

构建失败，提示 error spawn ENOMEM

处理方法

内存不足的原因，可以增加内存，如果是vps加配置太贵，可以考虑使用虚拟内存缓解下。

Jenkins日志爆满问题

几天跑了十几二十次左右的博客编译，登录Jenkins告诉我空间不足了，ssh上去看了下，df -h，果真没有空间了，最后定位到在 /var/log/jenkins 居然占了19个G....

处理方式

在系统管理 - 系统日志 - 左侧日志级别下输入 javax.jmdns ，选择off。

多次构建后，到 /var/log 下，并没有找到Jenkins的log文件夹，所以OK。

总结

有了jenkins自动化的编译，加上github的版本控制，可以愉快的玩耍了。我的基于Wordpress的博客也可以迁移了，当然这玩意还是不能与WP比的，毕竟人家的生态那么好。不过对于我这种，用后台闲麻烦，又喜欢折腾前端的人来说，这是很不错的选择。

JS Array中的empty

Sun, 22 Sep 2019 15:28:10 GMT

起因是这样的，我需要循环n次，利用new Array配合forEach，结果发现一次循环都没触发。

问题

代码大致是这样的：

(new Array(10)).forEach(function(val, ind) {
    console.log(ind);
});

可以在浏览器下试下，发现循环根本就不会进入。那换for循环试下呢？

let arr = new Array(10);

for (let i = 0, len = arr.length; i < len; ++i) {
    console.log(arr[i]);        // undefined * 10
    console.log(i);
}
console.log(arr[0]);            // undefined

结果发现for循环没有问题，而每项值也是undefined。那new Array 出来的实例是什么呢？

new Array(10);      // [empty × 10]

let arr = [];
arr.length = 10;    // [empty × 10]

let arr2 = [1, 2, 3, 4];
delete arr2[1];
arr2;               // [1, empty, 3, 4]

所以在数组中，没有值的情况下，他就是用empty去表现的，而当我们使用的时候，他表现为undefined。

而先前for循环可以是因为我们取了数组的length，forEach是针对数组中存在值的做遍历的。

数组方法

接下来，我们来测下什么时候empty会生效，什么时候表现为undefined：

// 表现为undefined，不会被过滤掉：
arr[0] === undefined;                   // true
typeof arr[0];                          // "undefined"
arr.includes(undefined)                 // true
arr.includes()                          // true
arr.find                                // 
arr.join()                              // ",,,,,,,,,"
arr.sort()                              // empty被排到最后

// 表现为empty，会被过滤掉：
arr.indexOf(undefined);                 // -1
arr.some((item) => item === undefined)  // empty会被过滤掉
arr.every((item) => item === undefined) // empty会被过滤掉
arr.filter                              // empty会被过滤掉
arr.forEach                             // empty会被过滤掉,刚测试过
arr.map                                 // empty会被过滤掉,但返回的数组长度和arr一致
arr.reduce                              // Reduce of empty array with no initial value

absolute定位的子元素是参照定位父元素的哪部分定位的

Sun, 15 Sep 2019 18:20:55 GMT

我们都知道absolute的子元素是按照非static的父元素定位的，那具体的左上角的位置是从那边开始的呢？margin?border?padding?content? 让我们来看下吧。

absolute定位

最常见的情况莫过于这种了，

.parent {
    width: 100px;
    height: 100px;
    position: relative;
    border: 1px solid #ccc;
}
.son {
    width: 50px;
    height: 50px;
    position: relative;
    background-color: olive;
}

<div class="parent">
    <div class="son"></div>
</div>

浏览器效果如下：

可能我们一般都是这么理解的，那如果父子div都有边距或边框呢？

参照点

不设置子元素的left或top值

接下来，我们来找下左上角的参照点。

先都给父子元素增加上10px的margin、border、padding。

.parent {
    width: 100px;
    height: 100px;
    position: relative;
    border: 10px solid #ccc;
    margin: 10px;
    padding: 10px;
}
.son {
    width: 50px;
    height: 50px;
    position: relative;
    background-color: olive;
    border: 10px solid blue;
    margin: 10px;
    padding: 10px;
}

html结构不变，首先看下父级的效果，

我们选中了父级的content内容，发现子元素与父级的content有距离，再看下子元素的情况：

发现这部分是子元素的margin内容。

设置子元素的left或top值

假如我们给子元素中增加了left或者top值，

仅给son增加样式

.son {
    /** ... */
    left: 0px;
    top: 0px;
    /** ... */
}

实际参考位置发生了变化，

此时是按照父级的padding内容定位的。

总结

绝对定位时，子元素的左上角从margin开始。

而参考定位的父元素的左上角为：

当子元素不设置top、left、right或bottom这种值时，以父元素的content开始。
当设置top、left、right或bottom这种值时，以父元素的padding开始。

详细的demo见：github。

js函数节流(非setTimeout方案)

Sat, 31 Aug 2019 14:24:10 GMT

只记得js函数节流可以使用setTimeout的方案，那么有没有其他的方案呢？

时间戳

思路：每次触发的时候与前一次触发时刻作比较，超过时间则触发，没有则等待下一次触发。

function throttle(fn, delay) {
    let prev = 0;

    return function() {
        let now = +new Date(),
            context = this;

        if (now-prev >= delay) {
            fn.apply(context, arguments);
            previous = now;
        }
    }
}

首先，一开始会触发下，接下的过程中，每次对比触发时间。

定时器版

setTimeout方案可以查看函数去抖动和节流。

大致如下：

function throttle(fn, delay) {
    let timer = null;

    return function() {
        let context = this,
            args = arguments;
        if(!timer) {
            timer = setTimeout(function() {
                fn.apply(context, args);
                timer = null;
            }, delay);
        }
    }
}

两者区别

时间戳的方式，会提前先执行一遍，等后期有连续调用时再检测时间做触发判断。

定时器的方式，调用后等待相应时间后再触发，也就是说，当调用停止后，也会触发最后一次。

两者结合

underscore中提供了throttle方法，是将两者结合的方式，删掉些无关紧要的东西，如下：

function throttle(func, wait) {
    var timeout, context, args, result;
    var previous = 0;
    // 延时函数
    var later = function() {
        previous = +new Date();
        timeout = null;
        result = func.apply(context, args);
        if (!timeout) context = args = null;
    };
    var throttled = function() {
        var now = +new Date();
        var remaining = wait - (now - previous); // 剩余时间
            context = this;
            args = arguments;
        if (remaining <= 0 || remaining > wait) {
            // 超出时间，直接触发，清除原先的定时器
            // 这块属于纠正，当出现修改pc时间这种问题也能处理掉，
            if (timeout) {
                clearTimeout(timeout);
                timeout = null;
            }
            // 记录时间戳
            previous = now;
            // 触发处理
            result = func.apply(context, args);
            if (!timeout) context = args = null;
        } else if (!timeout) {
            // 正常的延时触发
            timeout = setTimeout(later, remaining);
        }
        return result;
    };
    // 节流取消
    throttled.cancel = function() {
        clearTimeout(timeout);
        previous = 0;
        timeout = context = args = null;
    };
    return throttled;
};

我们可以只关注throttled函数，其中remaining的方式较好的处理了多种异常情况，例如，

setTimeout需要前一次时间循环的宏任务执行完后才会运行的偏差，此时表现为remaining值小于0。
修改pc时间这种问题，会提前执行方法，表现为remaining值大于wait。

underscore中的原方法还支持设置options为{leading: false}，可以关掉首次函数调用触发的问题。

地址：underscore.js，左侧也提供了简单的代码说明。

setTimeout第三个参数

Thu, 15 Aug 2019 20:56:20 GMT

一直没发现setTimeout居然可以传三个以上的参数，原谅我菜了。。。特地上MDN看了下用法。

用法

setTimeout，用于延迟触发函数。

setTimeout(fn, delay);

fn表示触发函数，delay表示延迟多少毫秒。

等等，其他就不说了。。。

传参方式

从setTimeout第三个开始的参数会传递给function当作其参数。

setTimeout(function() {
    console.log(arguments); // Arguments(3) ["a", "b", "c", callee: ƒ, Symbol(Symbol.iterator): ƒ]
}, 0, 'a', 'b', 'c');

参数顺利传入。

注：IE10及以上支持。

其他用法

还记得这道题么，

for (var i = 0; i < 5; ++i) {
    setTimeout(function() {
        console.log(i);
    });
}

由于闭包照成了最后结果5个5，此时就可以使用setTimeout传参的方式来解决了：

for (var i = 0; i < 5; ++i) {
    setTimeout(function(i) {
        console.log(i);
    }, 0, i);
}

其他处理方式：1. let。2. IIEF。

font-family字体与字体族

Fri, 26 Jul 2019 22:37:13 GMT

字体有成千上万中，但在一张网页中，我们往往只会取选择一种或几种字体。有时为了能够显示开发者想要的类似字体，常会用到字体族。

字体来源

网页中显示的字体来自哪呢？主要有以下两个来源。

操作系统的字体库

以window为例，在C盘中Windows/Fonts文件夹下，存放着系统中的字体。网页中若设置了对应的字体，则会用对应的字体库显示。

font-face

css3中允许开发者加载自己的字体库。

font-family

font-family用于给网页设置字体，他允许多个字体名称，不支持第一个字体就尝试下一个的方式。然后一般在font-family的后面常常见到以下几个字体，serif、sans-serif等，这几个就是这节的主题，字体族。

serif

serif，衬线体，意为有衬线的字体，衬线的意思是在字符笔画末端有叫做衬线的小细节的额外装饰。常用字体属于衬线体有：

宋体、仿宋
Times New Roman

sans-serif

sans-serif，无衬线体，与衬线字体相反，该类字体通常是机械的和统一线条的，具有笔画清晰的末端，没有向外展开的，或者其它装饰。常用字体属于无衬线体有：

黑体、楷体
Helvetica

cursive

cursive，草体，手写体。常用字体属于草体的有：

华文行草

fantasy

fantasy，梦幻体，主要用于艺术字。

monospace

monospace，等宽字体，字母字体宽度相同的字体，码农写代码常用的字体，看着贼舒服。个人比较喜欢用的是Monaco字体。

demo

来看下淘宝页面的font-family设置，

12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif

忽略前面的字体大小和line-height。

第一个字体是tahoma，在Fonts文件夹下也能搜到。

\5b8b\4f53是宋体的unicode 编码，最后，则以sans-serif字体族结束，兼容低版本浏览器。

总结

中文字体名

刚也看到了，为了防止字符编码解析成乱码的问题，需要用unicode 编码表示。

字体顺序

字体设置要兼顾中英文，由于大部分中文字体也是带有英文部分的，但是英文部分又不怎么好看，同时英文字体中大多不包含中文，所以最优先设置英文字体，其后是中文字体。最后为了保证整体字体的兼容性，需要设置如serif 和sans-serif这些字体族。

字体名引号

当字体名字中间有空格，中文或 Unicode 字符编码表示的中文字体时，为了保证兼容性，带上引号。

vuepress使用中遇到的问题

Tue, 23 Jul 2019 19:44:37 GMT

一直想找个可以简单写写文档，知识点内容的静态博客，对比gitbook和vuepressh后，觉得gitbook太偏向文档，vuepress的灵活性更大，所以选择了vuepress(还可以直接使用vue component)。在使用较为强大的vue组件功能的时候，遇到了一些小坑。

热更新

使用 vuepress dev docs 命令，修改config.js不能热更新，修改其他md文件可以实现热更新。

组件使用

组件均位于docs/.vuepress/components下，启动服务后，vuepress会默认将这些组件进行注册。

假如现在有一个test组件，我们需要在md文件中引用他，可以使用标签的方式引用，

需要注意的是标签前的空格不能大于等于4个，否则标签会失效(包在clientonly标签中也算)。

config.js中配置README文件

config.js是vuepress的整体配置界面，当配置侧边栏时，我们需要写下对应的文件的路径，当展示的md文件中有README文件时，不能将README文件名写出（留空就行），否则会报错：

[vuepress] No matching page found for sidebar item "/README.md"
Rendering page: /demo1/[vuepress] No matching page found for sidebar item "/demo1/README.md"

比如：docs文件夹下有一个README和demo1文件夹，demo1文件夹下有个README.md。sidebar中配置要写出如下：

sidebar: {
    "/": [
        ""   // not "README.md"
    ],
    "/demo1/": [
        ["/demo1/", "demo1"],     // not ["/demo1/README.md", "demo1"]
    ],
}

组件打包error

在md文件中加入组件的使用后，例如，

<test />

表现为以下两种情况：

build会出现报错，render function or template not defined in component: 某某组件名称。
dev或build后的文件启服务后，正常点击访问可以，但是F5刷新就会出现404。

处理方法

在组件引用外层增加clientOnly标签即可。

<ClientOnly>
  <test />
</ClientOnly>

注：需要时请配合ctrl+F5清缓存使用（每次启服务，不知道那来那么多缓存的）。

详细代码：github。

video自动播放问题

Sun, 14 Jul 2019 20:11:21 GMT

在使用Media Recorder实现js调用摄像头录像功能后，需要测试下录像的文件是否能正常播放，遇到了chrome下video不能自动播放的问题。

问题

在使用autoplay属性后，video并不能自动播放。

<video src="./1.mp4" autoplay></video>

解决方案

静音播放

chrome下允许静音情况下，自动播放。muted属性就可以达到此效果。在原先的autoplay上增加muted属性，

<video src="./1.mp4" autoplay muted></video>

此时video就可以自动播放了，不过音量为0。

调用api播放

video提供了play播放方法，我们可以直接调用进行播放。

oVideo.play();

手动播放

使用control属性显示操作条，用户手动点击播放。

<video src="./1.mp4" controls></video>

详细代码地址：github。

基于Media Recorder实现js获取摄像头录像数据

Mon, 08 Jul 2019 22:43:53 GMT

通过js截取摄像头图片的功能已经实现了，那么如果我要实时获取录像流或者录像的功能呢？此篇是基于MediaRecorder API去获取录音数据的，紧接着js实现网页摄像头截图功能。

MediaRecorder

用法

var mediaRecorder = new MediaRecorder(stream [，options ]);

参数

stream

getUserMedia()回调参数或audio，video，canvas元素。

options

可选参数，包括以下几个字段，

mimeType，表示MediaRecorder的MIME类型。（MediaRecorder.isTypeSupported()可以检测浏览器是否支持该类型）
audioBitsPerSecond，媒体音频的比特率。
videoBitsPerSecond，媒体视频的比特率。
bitsPerSecond，媒体音频和视频的比特率，权重比前两个属性低，仅在未设置音频或视频时有用。

方法

MediaRecorder.start()

开始录制媒体，参数timeslice(单位毫秒)表示持续该时间段内捕获数据(触发dataavailable事件)。

MediaRecorder.stop()

停止录制，此时会触发dataavailable事件。

MediaRecorder.requestData()

保存到目前位为止（或自前一次requestData以来）的数据。

事件

MediaRecorder.ondataavailable

用于处理收集的媒体数据，触发条件：

调用stop()方法。
调用了requestData()方法。
start设置的timeslice后触发。

数据在回调参数的data中，我们可以将其转成blob，发送给后端或者直接前端下载。

mediaRecorder.ondataavailable = function (e) {
    var blob = newBlob([e.data], {'type': 'video/mp4'}),
        a = document.createElement('a');

    a.href = URL.createObjectURL(blob);
    a.download = '录像.mp4';
    a.click();
}

目前的话，demo中仅用到这些个方法和事件，其他的可以查看MDN文档。

录像下载

新建MediaRecorder

mediaRecorder = new MediaRecorder(stream, {
    audioBitsPerSecond: 128000,
    videoBitsPerSecond: 100000,
    mimeType: 'video/webm;codecs=h264'
});

stream为getUserMedia返回的MediaStream对象。我们通过按钮事件操作mediaRecorder对象。

事件绑定和方法调用

<button id="start">start</button>
<button id="stop">stop</button>

start.onclick = function () {
    console.log('start');
    mediaRecorder.start();
}
stop.onclick = function () {
    console.log('stop');
    mediaRecorder.stop();
}

start开始录像，stop结束录像，而录像的数据在dataavailable的回调之中，继续设置该回调事件：

mediaRecorder.ondataavailable = function (e) {
    // 下载视频
    var blob = new Blob(\[e.data\], {'type':'video/mp4'}),
        a = document.createElement('a');
    
    a.href = URL.createObjectURL(blob);
    a.download = '录像.mp4';
    a.click();
}

将data转成blob，再通过a标签下载了。

兼容性

不过，Media Recorder的兼容性比较差，相比webRTC差了好些。

详细代码地址：github。

浏览器标签页聚焦和失焦事件-visibilitychange

Sat, 06 Jul 2019 12:41:58 GMT

同学自己搞了个小博客系统，在浏览功能的时候，发现了好玩的东西：

当当前的菜单标签页(tab页)获取到焦点时，title显示正常的，当失焦时则显示等你回来哦。看到这个，顿时觉得有趣，于是便来琢磨一番。首先，该事件是visibilitychange事件，他可以用来判断页面的可见性。也就是说，当标签也聚焦或失焦时，会触发该事件。

用法

直接绑定到document上，

document.onvisibilitychange = function() {
    console.log(document.visibilityState);
}

document.visibilityState

该属性是只读属性。

visible，浏览器的焦点在该页面上，并且没有最小化。
hidden，文档处于背景标签页(无浏览器焦点)或者窗口处于最小化状态。
prerender，页面渲染中，文档只能从此状态开始，永远不能从其他值变为此状态。
unloaded，页面卸载。

注：除了visible和hidden，其他两种情况，浏览器不一定支持，所以我们仅需关注前两种状态。

document.onvisibilitychange = function() {
    if ('hidden' === document.visibilityState) {
        document.title = '你走了'
    } else {
        document.title = '你又回来啦';
    }
}

配和document.title，这就实现啦。

document.hidden

还有个属性也得介绍下，document.hidden只读属性，返回布尔值，表示该页面是否隐藏了。

document.addEventListener('visibilitychange', function() {
    console.log(document.hidden);
});

为了防止事件覆盖，我是用了addEventListener方式绑定。实际测试和visibilityState中的visible、hidden效果一致的。

用处

非当前也背景音乐不需要播放。
非当前页轮播或其他动画不需要进行。
非当前页面一些请求或更新不需要触发。
等等

兼容性

document.visibilityState

document.hidden hidden的在caniuse上没有找到，不过在MDN上有。

加上浏览器私有前缀的话，两者的兼容性还是很不错的。

详细代码见：github。

js实现网页摄像头截图功能

Fri, 05 Jul 2019 20:49:19 GMT

WebRTC的出现赋予了js操作录音设备和摄像头的能力，假如我们使用网页监控，考虑到实时传递摄像头的数据量比较大的问题，我们可以采用定时抓取摄像头抓拍的照片的方式，那么如何使用js获取摄像头拍摄照片（截取图片）的功能呢？

视频流

主角仍是webRTC中的getUserMedia方法(demo使用的是推荐使用的navigator.mediaDevices.getUserMedia方法，navigator.getUserMedia也差不多)。首先，先获取到摄像头中的视频流。

<video></video>

var video = document.querySelector('video');
var constraints = {
    audio: true,
    video: {
        width: 1280,
        height: 720
    }
};
navigator.mediaDevices.getUserMedia(constraints).then(function(mediaStream) {
    video.srcObject = mediaStream;
    video.onloadedmetadata = function(e) {
        video.play();  // 等摄像头数据加载完成后，开始播放
    };
});

分辨率不设置的话也没事，会使用默认的分辨率，如果设置了超过了硬件的分辨率，则会使用默认的上限值。

canvas绘制

为了实现图片的下载，我们需要借助canvas。首先需要将当前的数据绘制到canvas上，再利用canvas的toDataURL方法将图片转换成base64格式的图片。

分辨率

我们都知道，视频分辨率的大小，影响着canvas的大小(或canvas的裁剪大小)。我这是让canvas铺满图片，全屏裁剪的。

为了获取对应的分辨率，需要用到ImageCapture对象，传入的参数是一个MediaStreamTrack，而该类型需要调用MediaStream类型的getVideoTracks()方法。

var track = mediaStream.getVideoTracks()[0],
    imageCapture = new ImageCapture(track);
// 从流中获取拍摄到的静止图片的信息
imageCapture.getPhotoSettings();

根据分辨率，设置canvas大小：

oCanvas.width = photoSettings.imageWidth;
oCanvas.height = photoSettings.imageHeight;

绘制

绘制的话，直接使用2d上下文对象的drawImage方法就行了，该方法支持传入的是一个HTMLVideoElement元素的，直接调用就可以绘制成功了。

ctx.drawImage(video, 0, 0);

下载

接下来就是利用a标签下载base64格式的图片了，在我的这篇文章canvas保存图片到本地中有详细的说明。

给下载按钮绑定个事件，

document.getElementById('btn').onclick = function() {
    ctx.drawImage(video, 0, 0);
    var base64Img = canvas.toDataURL();
    var oA = document.createElement('a');
    oA.href = base64Img;
    oA.download = '截图.png'; // 下载的文件名可以此处修改
    oA.click();
};

因为只有要下载的时候才会去绘制canvas，所以将绘制过程移到了事件之中。

到这，网页端的摄像头截图就完成了，下面将canvas和video元素隐藏就完工了。

完整的源码见：github。

关于package.json的scripts命令中使用单双引号的问题

Thu, 04 Jul 2019 22:44:20 GMT

为了给自己的react项目mock假数据，需要启动一个node服务器，为了方便，使用concurrently同时启动并监听前端server和mock server，但在启动的时候出现了问题。

问题

直接看我的scripts，

"start": "concurrently 'react-scripts start' 'json-server --watch ./mock/db.json -p 3001'",

为了防止双引号冲突，我是直接使用的单引号(非必要的时候，本人不喜欢使用转义)，但是运行时出现了报错：

解决方法

其实原因就是单引号的问题，这种方式在scripts中不能生效。修改为转义双引号的方式：

"start": "concurrently \"react-scripts start\\" \"json-server --watch ./mock/db.json -p 3001\""

此时concurrently就可以正常工作了。

总结

官方demo也是用转义写的，所以初次尝试的时候还是得多看看说明文档，当然也算踩了个坑。

最后附上链接：github。

关于we != we && we == we问题联想

Wed, 03 Jul 2019 21:51:43 GMT

起因是这样的，在群里见到同学发了张图，如下：

于是便联想到了a==1&&a==2&&a==3这道题中的defineProperty方法，便来实现下（仅针对这道题目。。）。

we != we && we == we

看到这道题，输出false肯定是很容易的，那他是否可以为true呢？ we != we，1不就不等于0么，。we==we，1不就等于1么。那这样就好办了，在每次获取we的值对比时，我们可以利用defineProperty方法修改掉他的get方法，

只要保证前两次的值不等（123!=456），后两次值相等（undefined==undefined）就行了。当然重写toString和valueOf也是可以的。所以，这题答案想要true或false都可以嘛。

前面讲到了a==1&&a==2&&a==3这题，正好也来看一波。

a==1&&a==2&&a==3

toString或valueOf

在进行等号比较的时候，值会先调用他的valueOf方法，而当valueOf返回的不是基本类型的时候，就会去调用toString方法。

所以我们可以对valueOf和toString重写，达到目的。

defineProperty

前面提到的defineProperty同样可以做到这一点。

数组

数组调用toString方法时会隐含调用join方法，我们可以重写掉他的join方法，

有一次达到了目的。

symbol

原理与toString和valueOf差不多。

总结

这些方式看似没有章法，很神奇，其实只要掌握了==时，js实际做了哪些事，这些方法就不成问题了。

涉及代码的详细地址：github。

webpack-dev-server开启https访问

Sun, 23 Jun 2019 22:48:37 GMT

由于需要在手机端web调试几个仅在https下生效的接口，无法使用localhost或127.0.0.1访问(本地访问无需开启)，故需要使用webpack-dev-server开启https。

开启https

查看官方文档，webpack-dev-server已经支持了https方式，devserverhttps。设置https为true即可。

当然，访问时会出现不安全的提示，你可以无视他，毕竟这只是本地的调试环境。

如果需要使用证书，官网上也提供了使用证书的方式，证书么，也可以通过openssl生成，这儿就不多说了。

访问限制

使用localhost或127.0.0.1访问时没有访问的异常，但是用pc的ip地址时，出现了无法访问此网站的提示。

解决方式就是在cli命令后加入 --host 参数就行了，如果你需要直接启动对应的地址，再加上ip即可，如--host xxx.xxx.xxx.xxx。

详细代码地址：github。

h5原生拖拽不能触发drop事件问题

Fri, 14 Jun 2019 20:17:33 GMT

一直使用拖拽组件去实现web上的拖拽问题，没有机会接触原生的拖拽事件。趁着空余时间了解了原生拖拽，实践中发现了，拖拽中的drop一直无法触发的问题。

问题

用简单的demo来表示下，

当直接绑定事件的时候，并不能触发对应的drop事件。

解决方案

为了能触发drop事件，需要在dragover事件中阻止默认事件才可生效，紧接以上代码，设置preventDefault：

此时，查看控制台，就可以生效了。

其他

既然讲到了drag事件，也就顺带着写些对应的其他事件吧。

设置可拖拽

首先要增加元素draggable="true"的属性表示该元素可拖拽。

事件

还有一些其他的方法，按照绑定的元素分为被拖拽元素和目标元素(放置被拖拽元素的区域)。

被拖拽元素

dragstart，开始拖拽时触发。
drag，拖拽中连续触发。
dragend，拖拽结束触发。

目标元素

dragenter，被拖拽元素拖入目标元素内触发。
dragover，被拖拽元素在目标元素上方时连续触发。
dragleave，被拖拽元素离开目标元素内触发。
drop，被拖拽元素放置到目标元素上时触发(先于dragend)。

代码地址：github。

background-size为100%-100%时背景图填充不完整

Wed, 05 Jun 2019 21:10:49 GMT

老项目中使用了绝对定位的背景图，拼接显示一张大图，由于绝对定位时使用了百分比，在全屏显示时，两图之间出现了条空白的线。

问题

原以为是百分比计算有问题，实际发现，并不是计算的问题，只是图形的宽高都是有小数的。简化实际项目，如下：

.outer {
    position: relative;
    width: 100px;
    height: 200px;
}
.head {
    position: absolute;
    width: 100px;
    height: 99.5px;
    top: 0;
    background-image: url('./111.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.body {
    position: absolute;
    width: 100px;
    height: 100.5px;
    top: 99.5px;
    background-image: url('./111.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

<div class="outer">
    <div class="head"></div>
    <div class="body"></div>
</div>

实际浏览器中的效果：

很明显，两个div之间有间隙，照成了以为是定位偏差的错觉。

解决方法

高度整数

实践发现，当高度是整数的时候，设置100% 100%时不会出现间隙的问题。但是非固定高度布局的时候还是会有这个问题。

repeat

y轴方向上设置背景图repeat也能解决这个问题。

background-size其他值

100%

当设置background-size为100%时，间隙也是不会出现的，那他与100% 100%又有啥区别呢？

background-size有两个值，分别表示x轴方向和y轴方向，当我们设置为100%时，y轴的默认时auto。而100% 100%会拉伸图片，使得图片变形并完全覆盖(小数值不会)，100% auto则是表示x轴百分百占用，y轴方向保持原先图片的宽高比，即以比例拉伸。

cover

cover同样也能完成任务，他的意思是将背景图按比例放大，使得能够完全覆盖背景区域，所以他的背景图是被截断的(纯色无所谓)。

其他属性

既然都讲到了background-size了，把他剩余的几个属性值也看一遍把。

contain

他表示将背景图放大，直到x或y轴一边达到最大，简单来说，就是100% auto或auto 100%，当背景元素与背景图比例不一致时就会出现空白。

px

同样支持数值，即背景图的大小。

详细代码见：github。

chrome下rem单位与12px问题

Tue, 28 May 2019 20:50:48 GMT

rem在适配多屏的时候还是非常有用的，当与chrome下的最小12px字体相遇时，会发生什么问题呢？

rem

简单介绍下rem单位的使用，rem只支持ie9及以上的浏览器。r指的是root，即根节点，em则是指的常见的em单位，连起来就是，rem是相对于根节点font-size倍数的大小。例如：

html {
    font-size: 10px;
}
span {
    font-size: 1.6rem;
}

给根节点设置了10px，span设置了1.6rem，则span大小为1.6 * 10 = 16px。

样式计算的结果也是如此。

正是因为这样的一个原因，在适配不同分辨率屏时，我们只需设置根节点的font-size就可以改变页面上元素的大小。比如1080p兼容4k时，只需要将root的font-size变成两倍，这用media query很容易就能实现，但是却完成了对页面的兼容。

注：非倍数关系的分辨率兼容直接改可能会存在一些问题。

12px

当我们使用小于12px的字体时，chrome只会渲染12px大小的字（当然有法子处理这个问题，但不是这的重点）。既然rem最终都是转化成px的，那么使用它去设置宽高也是同样可以的。

div {
    font-size: 1rem;
    width: 10rem;
    height: 10rem;
}

<div>宽高渲染则时以最小12px为准</div>

但实际效果并不是我们想象的100*100，实际显示div为120*120，至于原因则是，其他元素的font-size中的rem是基于root中设置的font-size计算的，而宽高的rem是按照root中字体最小限制去计算的（12px）,所以出现了此问题。

小插曲

demo是在公司电脑上测试的，回家后使用时，发现了与公司内完全相反的效果，显示了100*100的宽度（chrome版本一致）。从控制台可以看出，

html上的字体实际是10px，那么10rem就是10*10=100px，也就不奇怪了。还有一点能证明的是，该div的font-size是1rem，chrome渲染了10px的字体，本人以为是win7和win10的问题，尝试多台测试，结果如下：

win7测试三台，两台是120*120，一台100*100。
win10测试三台，两台是100*100，一台是120*120。

这似乎与系统没有太大的关系，可能是浏览器的设置问题，最终发现最新的chrome支持最小字体的设置了，在设置-自定义字体里就有：

通用解决方案

前面的问题出在了，root节点的font-size是否是遵循最小12px。故我们将font-size设置的足够大的话，就能避免这个问题。同时为了方便计算，则选择100px为root的font-size。

html {
    font-size: 100px;
}
span {
    font-size: 0.16rem;
}
div {
    font-size: 0.16rem;
    width: 1rem;
    height: 1rem;
}

<body>
    <span>字体能够渲染正确</span>
    <div>宽高渲染则时以最小12px为准</div>
</body>

这样的话，一不会有兼容性的问题，二不会遇到最小12px的问题。

详细demo见：github。

ES6中的尾递归优化

Sun, 26 May 2019 14:52:53 GMT

递归是我们经常会用到的，然而没有限制的递归，往往会引起爆栈的问题，于是尾递归的优势便体现了出来。

递归

假如我们需要实现1+2+3+4+....+n的一个小程序，用递归实现的话，如下：

function sum(x) {
    if (x === 1) {
        return 1;
    }
    return x + sum(--x);
}

递归正常值是没有问题的，

console.log( sum(10) );       // 55
console.log( sum(55555) );    // Uncaught RangeError: Maximum call stack size exceeded

当递归层数到达一定值后，就会出现爆栈了，当然不同浏览器的最大递归层数是不一样的。

尾递归

函数调用自身的过程，称为递归，如果最后调用的是自身，就称为尾递归。在ES6中，有了尾递归优化这个概念。我们将刚才的递归改写成尾递归：

function sum1(x, total) {
    if (x === 1) {
        return x + total;
    }
    return sum1(x - 1, x + total);
}

在普通递归时，最后return了x + sum(--x)，即每次调用下一个sum函数时，都需要保存当前作用域下的其他变量（比如x），所以很容易出现栈溢出的问题。

而尾递归中，由于最后返回的是函数，往往不需要保留先前的东西，仅仅记录下一次调用的函数即可，所以可以节省大量的内存。在chrome下尝试：

console.log( sum1(10, 0) ); // 55
console.log( sum1(55555, 0) ); // Uncaught RangeError: Maximum call stack size exceeded

依旧是爆栈了。查阅了资料发现，v8中尾递归优化是默认关闭的，尝试了以下方法均以失败告终：

严格模式下运行（chrome74.0.3729.157 64位版本）。
chrome下开启Experimental JavaScript（版本同上）。
node环境下（v8.11.1）。
mac safari浏览器（12.0.3版本）。

至于为何没有默认开启呢？可以查看下这篇文章：尾递归的后续探究。

其他方式

如果想实现递归但又怕爆栈这种情况呢？我们可以使用while循环。

function sum2(n) {
    var sum = 0;
    while (n > 0) {
        sum += n;
        n--;
    }
    return sum;
}

console.log( sum2(10) ); // 55
console.log( sum2(55555, 0) ); // 1543206790

以循环的方式也是可以完成的。

整个demo地址：github。

typescript版node环境搭建

Sun, 19 May 2019 22:37:43 GMT

尝试下在node端搭建typescript的环境，以koa2为demo尝试。

项目搭建

koa2项目初始化

demo建立在koa2之上，首先先初始化下项目：

koa2 项目名称
cd 项目名称
npm install

到这，koa2的一个项目就初始化完成了，下面就开始ts化了。

增加typescript

首先时依赖的安装：

npm i typescript ts-node --save

ts-node可以直接运行ts版的node程序，而不用先将ts转成js再启动服务。

为了demo的简单，我是删除了routes中的user.js文件(app.js中也要删除对该文件的引用)，再将所有js后缀改成了ts后缀，此时会报onerror错误，只需将onerror换个名字即可，比如onError。如果使用vscode的话，他会提示在ts中使用require有问题，需要安装个依赖，（加引号是在powershell有中安装带@的问题，cmd可以无视）

npm i "@types/node"

统计请求时间的中间件函数，因为类型问题，也需要微调下，

app.use(async (ctx, next) => {
    const start: any = newDate()
    await next()
    const end: any = newDate()
    const ms = end - start
    console.log(`${ctx.method}${ctx.url} - ${ms}ms`)
});

到这，最简单的环境已经ok了，下面配置下启动命令就可以看效果了。

配置命令

在package.json中script加入：

"watch": "ts-node bin/www",

npm run watch，访问http://127.0.0.1:3000/就可以了。

当然，为了开发便捷，热更新也是需要的，增加以下命令：

"watch-server": "nodemon --watch routes/**/* -e ts,tsx --exec ts-node bin/www"

代码的热更新，实时编译，服务器重启等问题就解决了，下面就可以开始愉快地编码了。

总结

纯node或者其他node库中使用也是类似的，本篇详细demo请查看：github。

typeof 未定义变量

Thu, 09 May 2019 23:35:20 GMT

在看代码的时候发现了一个bug，细细一看，又发现了个小知识点，在使用typeof value时，实际value并未定义，运行却未出现报错。

问题

大致的如下，当然这儿是有问题的，并未使用该参数，先不管这些，

function fun(val) {
    //...
    typeof value ? 'a' : 'b';
    //...
}

虽然value未定义，但是运行时并未报错。

总结

typeof用来粗略的检查变量类型，他也支持对未定义变量的检测，简单demo地址：github。

node连接oracle数据库，更新数据后，数据库中不生效问题

Mon, 29 Apr 2019 22:34:30 GMT

线上数据更新oracle中表数据时，一切都是正常的，但是本地断点测试的时候，实际数据库中未发生改变。

问题

大概如下，更新一张表中的内容，大致如下：

connection.execute( 'UPDATE table1 SET key = 123 WHERE id = 11')

并且他返回了一个对象，显示rowsaffected是1，也就是一行受影响。但是此时取数据库看时，并未生效。

处理方法

查了很久，还以为原先的是正常的，咋突然就不行了呢？后询问后端人员，更改数据库时，可能需要commit下。而我最后会在循环之后调用一个存储过程，该存储过程中有commit，故正常跑没有问题。而断点或没有执行存储过程时，都无法在数据库中生效。

所以得出结论，更新表时需要commit下，当然node-oracledb也提供了方法：

const oracledb = require('oracledb');
oracledb.autoCommit = true;

设置自动提交后，问题就可以解决了。

puppeteer抓取网站时报Navigation Timeout Exceeded 30000ms exceeded问题

Mon, 29 Apr 2019 22:31:37 GMT

今天看了下数据库中的内容，发现数据对应不上，特查了下爬虫日志，发现了Navigation Timeout Exceeded: 30000ms exceeded这个问题，原本跑着好好的程序又出现问题了。

问题

自己pc上爬去没有问题。
服务器上爬取有问题，但是chrome是可以访问被爬网站的（服务器是window server 2008）。
npm包也重装过。

公司内所有出外网的口都是统一的，而且本地和服务器上都可以正常并快速的访问外网，另外服务器的防火墙是关了的。但是服务器上仍是有这个问题，我尝试用增加延迟，120s，240s，都是timeout。

处理方法

后来尝试其他网址，使用百度这种简单页面，发现居然也得好几十秒才能爬取到。当然这也证明了puppteer是可以正常工作的，但是出于某种原因爬去特别慢。故修改延时到无限大：

await page.goto(url, {
    timeout: 0
});

打印爬取前后时间，发现居然需要将近497秒。。。所以异常还是出现在爬取上，但是线上程序不舍定超时，这是不太现实的，毕竟有那么多内容需要爬。所以，到底应该不是puppeteer的问题，故缩短每次执行的时间，网络问题总不会一直存在的，其他方法还没想到。

关于js中setTimeout和setInterval的定时上限值

Sat, 27 Apr 2019 10:53:04 GMT

在使用node爬虫的时候接触到了node-schedule，觉得node-schedule蛮是不错，于是便悄咪咪的查看起了源码，看着看着就跟到了一个叫long-timeout的库中，也了解到了个小知识点。

node-schedule

node-schedule是node中的一个定时器模块，他支持多种方式的定时方式，用起来很是顺手。便抽空看了下他的源码。源文件位于node_module中的node-schedule文件夹，在lib下有个schedule.js文件。

当阅读到runOnDate这个方法时，发现他计算当前和触发时间点的差值，再使用lt.setTimeout方法延迟到对应时间点再触发。于是便纳闷，直接setTimeout不就完事了么？干嘛还得再调个库，于是定位到long-timeout这个依赖文件中。

long-timeout

该依赖比较简单，直接打开目录下的index.js，第一行代码便是：

var TIMEOUT_MAX = 2147483647; // 2^31-1

难道定时的最大值时2的31次方减1？接下去看，整个代码分为setTimout和setInterval两部分。外部调用该文件的setTimout方法时，new个实例，并调用了原型上的start方法：

Timeout.prototype.start = function() {
    if (this.after <= TIMEOUT_MAX) {
        this.timeout = setTimeout(this.listener, this.after)
    } else {
        var self =this
        this.timeout = setTimeout(function() {
            self.after -= TIMEOUT_MAX
            self.start()
        }, TIMEOUT_MAX)
    }
    if (this.unreffed) {
        this.timeout.unref()
    }
}

after表示多久后触发，当该值小于等于timeout的最大值时，就直接使用window下的setTimeout方法。如果after值大于了timeout的最大值，修改after值，减去了延迟时间，并以timeout最大值做延迟时间，调用window下的setTimeout方法，并在触发后继续调用start方法去检测时间。

到这的话，大概就明白了，当延迟小于等于2^31-1，直接用window的setTimeout没有问题。但时间大于这个值时，就有问题了，需要每次定时2^31-1时间，再做一次时间检测，若小则使用window的setTimout方法，否则继续延迟2~31-1时间。

测试

现在我们有了最大值了，来做个简单的测试setInterval一样，只显示setTimeout了：

var time = Math.pow(2, 31);

setTimeout(function() {
    console.log(1);
}, time);

给极限值加1，我们试下会有啥结果，打开控制台，已经有1这个打印了，证明当超过定时上限时，会直接输出。再次修改代码：

var time = Math.pow(2, 31);

setTimeout(() => console.log(4), 0);
setTimeout(() => console.log(5));
setTimeout(() => console.log(1), time);
setTimeout(() => console.log(3), 0);
console.log(2);

控制台上输出的是2, 4, 5, 1, 3，所以当超过极限值时，该定时和设置0一样，会立即执行。

总结

js中setTimout和setInterval是有定时极大值的，他是2^31-1，即2147483647。当超过这个值时，与不给他设置定时值效果一致，即会立即触发（执行栈空了时）。

好了，又一个知识点get了。详细的demo请查看：github。

webpack打包typescript多文件，提示没有该文件

Wed, 24 Apr 2019 20:34:51 GMT

在项目recorder中，由于recorder中的class类过于庞大，于是便采用了typescript官方的mixin方式，但是在import其他文件时，居然提示Cannot find module找不到对应的文件，可是明明我是正确的路径。

问题

目录是这样的：

a.ts文件内容很简单，仅导出了一个对象：

export default {
    yourName: 'haha'
}

在test.ts中，使用import引入a.ts:

import A from './a';

正确的相对路径，可以run dev之后，提示找不到module，

ERROR in ./src/test.ts
Module not found: Error: Can't resolve './a' in 'D:\github\demo\view\2019\04\webpack打包typescript多文件，提示没有该文件\src'
@ ./src/test.ts 3:10-24

处理方法

需要在webpack中配置resolve字段，告诉webpack所需要的文件。即在webpack.config.js中增加：

resolve: {
    extensions: ['.js', '.ts', '.json'],
},

如此就ok啦。

详细demo见：github。

web Audio 音频可视化

Mon, 22 Apr 2019 21:52:12 GMT

简单的录音功能已经实现了，在此基础上，实现下录音音频可视化。

createAnalyser

创建

可视化主要用到的是这个方法，他返回的是一个录音分析节点。在录音时，只需要将节点connect上，我们就能拿到频率数据。

this.analyser = this.context.createAnalyser(); // 录音分析节点
this.analyser.fftSize = 2048; // 表示存储频域的大小

连接音频源

开始录音时，需要connect，

// audioInput 为声音源，连接到处理节点 recorder
this.audioInput.connect(this.analyser);
this.analyser.connect(this.recorder);
// 处理节点 recorder 连接到扬声器
this.recorder.connect(this.context.destination);

这样的话，音频源（声音源）输入到analyse节点，我们再根据频率绘制波形图。

获取频率数据

api提供了接口用来获取频率数据，我这使用的是getByteTimeDomainData()方法，他会将波形或时域数据复制并传入到方法的第一个参数中(Uint8Array类型，和方法有关)，还有其他方法，也可以使用。

let dataArray = new Uint8Array(this.analyser.frequencyBinCount);
// 将数据拷贝到dataArray中。
this.analyser.getByteTimeDomainData(dataArray);

frequencyBinCount，FFT大小的一半，表示dataArray可使用的数据值的数量。

可视化

requestAnimationFrame

用requestAnimationFrame取代setTimeout或setInterval，稳定60fps的输出。

canvas

此处可视化借助canvas绘图，将波形绘制出来。

ctx.beginPath();

var sliceWidth = canvas.width * 1.0 / bufferLength, // 一个点占多少位置，共有bufferLength个点要绘制
    x = 0; // 绘制点的x轴位置

for (var i = 0; i < bufferLength; i++) {
    var v = dataArray\[i\] / 128.0;
    var y = v * canvas.height / 2;

    if (i === 0) {
        // 第一个点
        ctx.moveTo(x, y);
    } else {
        // 剩余的点
        ctx.lineTo(x, y);
    }

    // 依次平移，绘制所有点
    x += sliceWidth;
}

ctx.lineTo(canvas.width, canvas.height / 2);
ctx.stroke();

思路就是将canvas的宽度分割成对应数量的，再计算y轴方向的位置，并绘制成线。

详细的代码可以参考：github。

webpack支持启动dev服务和热更新，并支持打包时增加文件注释

Sun, 21 Apr 2019 16:46:35 GMT

自己琢磨的一个项目，由于需要频繁的build，且需要http-server启动服务，故折腾弄了webpack的热更新服务。同时，修改配置，使支持打包时加入文件(头)注释。

准备

由于项目是基于typescript的，那我就直接按ts的来，其实差别不是很大的都是前端项目，只不过ts的解析的是ts-loader，而js则是babel-loader。

假设我们的目标文件在src目录中，新建一个index.ts，tsconfig也配置好（tsconfig配置不在本章讨论范围）。index.ts如下：

class A {
    private name: string;

    constructor(name: string) {
        this.name = name;
    }
    showName() {
        console.log(this.name);
    }
}

export default A;

实现了一个很简单的A类并导出。 webpack.config.js内用ts-loader处理ts文件，并在dist目录下生成index.js。

const path = require('path');

module.exports = {
    // 入口
    entry: path.resolve(__dirname, 'src/index.ts'),
    output: {
        // 输出文件名
        filename:'index.js',
        // 输出路径
        path: path.resolve(__dirname, 'dist'),
        libraryExport: 'default',  // 不写的话，使用时要.default
        libraryTarget: 'window',
        library: 'A'
    },
    module: {
        rules: [{
            test: /\.tsx?$/,
            use: 'ts-loader',
            exclude: /node_modules/
        }]
    }
};

package.json中配置：

"start": "webpack --mode=development",

直接npm run start，我们就可以看到在dist下生成了对应的js文件了，再在根目录下创建个index.html，利用http-server就可以访问了，但是开发阶段时，我们往往会多次编译开发文件，可能会比较麻烦，所以webpack-dev-server就有他的用处了。

webpack-dev-server热更新

html-webpack-plugin

启动页面访问，最基础的就是html页面了，所以引入html打包插件。如果看webpack官方教程，这个应该是第一个接触到的插件吧。

const HtmlWebpackPlugin = require('html-webpack-plugin');
// ...
plugins: [
    new HtmlWebpackPlugin({
        template: path.resolve(__dirname, 'src/index.html'),
        filename: 'index.html'
    })
]
// ...

先写好配置，根据配置，发现html的模板是src下的index.html页面，新增并加入基本的head，body等标签。package.json中的scripts下增加：

"dev1": "webpack-dev-server --open"

--open表示新打开浏览器，输入npm run dev1后，就可以正常出现页面了，但是遗憾的是，直接修改index.ts，不能实时更新，还得重新run dev1下。

热更新

webpack.config.js下增加contentBase表示监听的文件夹位置。

devServer: {
    contentBase: './src'
}

script下增加

"dev2": "webpack-dev-server --open --watch --inline"

watch的命令来动态监听文件的改变并实时打包，实现文件修改的监听。

注：好多文章都说仅--watch只是文件的监听，不会去刷新页面，但实际测试，浏览器页面会刷新，我用的是4.29.6的webpack。 inline参数是webpack不同的刷新模式，但此处已经没有啥大用处了，所以不添加了。

到这，webpack热更新的server就搭建完成了。

注释插件

script中增加个

"build": "webpack --mode=production"

命令，npm run build后，我们得到的是一堆啥注释都没有的压缩代码。如果我们在写一些库或插件的时候，需要增加个文件注释，至少得加上版本，地址吧。此时，webpack自带的BannerPlugin插件就派上用场了。

const package = require('./package.json');

new webpack.BannerPlugin(`
${ package.name } - ${ package.description }
@version v${ package.version }
@homepage ${ package.homepage }
@author ${ package.author } <echoweb@126.com> (http://www.zhuyuntao.cn)
@license ${ package.license }
`)

我们的版本等信息往往都会存在package.json中，打包的时候就只要读取该文件就可以获取正常的信息，故我们只要该package.json里就能一遍更新了。此时在run build，注释就可以显示了。

注：

待打包文件头有注释的化，是不会删掉的，还会出现在打包后的文件中。
其他插件有可能会删除本插件生成的注释。

区分dev与prd

如果我们只用一个wepack.config.js时，如何来区分dev下与prd下不同的插件呢？比如开发模式下，需要用到html去调试，发布时，我们只需要编译下文件就行了，这种情况下如何处理。

module.exports = (env, argv) => {
    // ....
}

利用exports函数，argv.mode会返回输入命令时的mode状态，因此可以用来判断不同的模式，并返回不同的配置。

demo地址：github。

ts文件之间相互引用找不到文件的话，可以看这篇：webpack打包typescript多文件，提示没有该文件。

webpack打包文件同时支持script引入和npm安装

Thu, 18 Apr 2019 20:16:21 GMT

前面写了个recorder的录音插件，在基本功能开发完成之后，希望能在script标签的方式引入项目，也希望能用npm install的方式添加到项目中，毕竟spa项目才是主流嘛，于是尝试这用wepack来打包，同时支持script标签方式引用和npm install方式使用。

前提

我的插件是基于es6+开发的，所以环境下会有些bable插件用于转译。假设我们现在已经完成了一个很简单的功能，他位于src文件夹下，是test.js，以简单的demo为例，此处是个Test类，如下：

class Test {
    constructor() {
        this.name = 'my name';
        this.age = 123;
    }

    showName() {
        console.log(this.name);
    }

    showAge() {
        console.log(this.age);
    }
}

最后导出Test类，

export default Test;

打开当前目录下的index.html，可以看到输出的name，当然，这是以script标签引入的，这是我们默认支持的。下面我们要修改，使得打包出的代码技能兼容script，也能支持npm方式。

引入UMD

在前面的js模块化发展历程中，我也提到过umd方式，他支持浏览器端和node端(require方式)，webpack同样也是支持该打包方式的。首先修改webpack打包脚本，在webpack.config.js中，增加output下的参数：

libraryExport: "default",
library: "Test",
libraryTarget: "umd"

告诉webpack导出的方式和导出库名，详细见官方文档output和library。

设置index.js

我们在一个项目中import一个包或依赖时，默认访问的是该文件夹下的index.js文件，所以此处增加index.js，并设置返回打包生成的库文件，

module.exports = require("./dist/test.js");

这样就好啦。

测试

script方式

script方式的测试比较简单了，直接双击执行index.html就行了。

npm方式

我们可以将整个文件夹拷贝到一个spa项目的node_modules中，并在项目中引用该库，可以看到和在script中一致的使用效果，那么就ok了。

npm提交

在这篇发布自己的npm包中有详细提示。等npm发布后，我们可以install下，再次作下测试。详细的demo见：webpack打包文件同时支持script引入和npm安装。

到这就ok了，快去发布自己的插件和库吧。

js中arraybuffer与blob的区别

Wed, 17 Apr 2019 19:52:09 GMT

当接触过前端中二进制后，arraybuffer和blob是经常会遇到的，而且经常会搞混，那么这两者之间有啥区别，又有啥联系呢？

ArrayBuffer

ArrayBuffer对象用来表示通用的、固定长度的原始二进制数据缓冲区。ArrayBuffer是不可以直接操作的，而是要通过类型数组对象或 DataView 对象来操作，它们会将缓冲区中的数据表示为特定的格式，并通过这些格式来读写缓冲区的内容，详细的可以查看这篇文章：前端二进制学习（三）。

var buffer = new ArrayBuffer(8);
console.log(buffer.byteLength);   // 输出字节

new ArrayBuffer时，传入的参数表示要创建的字节数。

blob

blob(binary large object)，他表示一个不可变、原始数据的类文件对象，在我的这篇前端二进制学习（一）文章中有详细的介绍。

blob和arraybuffer一样，是二进制的容器，直接new Blob就可以创建了：

new Blob([123]);

blob类型只有slice方法，用于返回一个新的 Blob对象，包含了源 Blob对象中指定范围内的数据。对比发现，ArrayBuffer的数据，是可以按照字节去操作的，而Blob的只能作为一个整的对象去处理。所以说，ArrayBuffer相比Blob更接近真实的二进制，更底层。

ArrayBuffer与Blob互转

ArrayBuffer转Blob

arraybuffer转blob很方便，作为参数传入就行了。

var buffer = new ArrayBuffer(16);
var blob = new Blob([buffer]);

Blob转ArrayBuffer

此处需要借助fileReader对象了，

var blob = new Blob([1,2,3,4,5]);
var reader = new FileReader();

reader.onload = function() {
    console.log(this.result);
}
reader.readAsArrayBuffer(blob);

控制台输出的则是ArrayBuffer的数据了。

ajax获取

很多时候，往往需要前端向后端请求二进制数据，我们来对比下这两者在ajax获取中会有区别么？

先弄张图片作为二进制来源，使用node的fs模块就行了，

let file = fs.readFileSync('test.jpg');

获取arraybuffer的发送/arraybuffer请求，获取blob的发送/blob请求，

if ('/arraybuffer' === req.url || '/blob' === req.url) {
    res.write(file);
    res.end();
}

前端方面，利用原生的XMLHttpRequest发送请求，并设置responseType就行了，

xhr.responseType = 'arraybuffer';
xhr.responseType = 'blob';

详细的demo见：js中arraybuffer与blob的区别。

后端都是返回的二进制信息，而到了前端由于设置了type，浏览器自动转化了类型，打印除了不同的结果。

总结

ArrayBuffer和Blob一样，都是二进制数据的容器，而ArrayBuffer相比更为底层，他可以去操作去修改这些二进制值，这两者之间也是可以互转的。

js模块化发展历程

Mon, 15 Apr 2019 22:29:40 GMT

js作为一个非主流语言发展到现在如此热门的语言，一定经历了很多的变迁，我们从模块化方面来了解下js的发展。

直接定义

这时候的前端也没有模块化的概念，当然js文件之间也没有太多的束缚，只是简单的堆砌script标签，没有全局变量与局部变量的概念，定义的变量都是全局的。因此很容易出现，b文件改了a文件中的变量内容，却不知道，照成后期开发难，维护难的问题，甚至加个变量名都得全局搜索下。

渐有模块

也许是意识到模块化的问题后，开始逐渐减少全局变量，并增加单个js的内聚性。

减少全局变量

开始减少全局暴露的js变量，

var glo = {
    name: '',
    age: 123
};

增加局部变量

jquery的源码就非常典型，利用自执行函数，减少变量的暴露，

(function() {
    // ....
    window.what = what;
})();

私有变量模拟

我们都知道js是没有私有变量的概念的，但是可以模拟出来：

var A = function() {
    var _a = 0;
    
    this.add = function() {
        _a++;
    }
    this.getA = function() {
        return _a;
    }
}
var aaa = new A();
aaa.getA();
aaa.add();
aaa.add();
aaa.getA();

利用function的作用域，完美的模拟了私有变量。我们开始意识到前端模块化的重要性，当然这是好事。

蓬勃发展

依赖注入

用过angular的都知道，借鉴java的概念，angular中模块化很重要的一块。

commonjs

随着nodejs的出现，js走向了服务端，可是作为服务端的语言没有模块化的设计，那一定是非常混乱的。于是commonjs规范就脱颖而出了。

// a.js
module.export = {};

在入口文件app.js中，

// app.js
var a = require('./a.js');

那么前端是否能照搬这一套呢？其实是不行的，因为require是同步加载的，正常清空下后端要加载的文件都是在服务器上的，访问都是非常快的。而前端的资源都是通过网络加载的，不确定性和延迟都比较高，所以，这套规范不适用于前端。

requirejs

RequireJS 是一个JavaScript模块加载器，是AMD规范最好的实现者之一。

require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
    // ...
});

requireJS会异步加载这三个模块，等都加载完成后，触发对应的回调事件。

seajs

SeaJS是一个遵循CMD规范的JavaScript模块加载框架，可以实现JavaScript的模块化开发及加载机制。

amd与cmd和commonjs详细内容可以查看这篇文章，AMD、CMD和CommonJS规范。

UMD

兼容了 CommonJS 与 Amd，其核心思想是，如果在 commonjs 环境（存在 module.exports，不存在 define），将函数执行结果交给 module.exports 实现 Commonjs，否则用 Amd 环境的 define，实现 Amd。结构如下：

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['b'], factory);
    } else if (typeof module === 'object' && module.exports) {
        // Node. Does not work with strict CommonJS, but
        // only CommonJS-like environments that support module.exports,
        // like Node.
        module.exports = factory(require('b'));
    } else {
        // Browser globals (root is window)
        root.returnExports = factory(root.b);
    }
}(this, function (b) {
    //use b in some fashion.

    // Just return a value to define the module export.
    // This example returns an object, but the module
    // can return a function as the exported value.
    return {};
}));

标准化

模块化终于在es6中形成了标准，export和import方式也逐步被我们使用。

工具

在我们常用的打包工具webpack中，是可以选择默认的打包方式的，支持commonjs和requirejs，umd方式也是支持的。

js实现pcm音频转wav与播放

Sun, 14 Apr 2019 13:18:07 GMT

前面我们已经实现了js录制pcm编码的功能了，但是很遗憾，浏览器并不能播放pcm音频，但可以支持与他比较相近的wav格式的文件，来琢磨下这两者的转化吧。

wav

Waveform Audio File Format，是微软与IBM公司所开发在个人计算机存储音频流的编码格式。

wav可以使用多种音频编码来压缩其音频流，不过我们常见的都是音频流被pcm编码处理的wav。但这不表示wav只能使用pcm编码，mp3编码同样也可以运用在wav中。简单来说，pcm是无损wav文件中音频数据的一种编码方式，但wav还可以用其它方式编码。

wav是一种无损的音频文件格式，由于此音频格式未经过压缩，所以在音质方面不会出现失真的情况，但文件的体积因而在众多音频格式中较为大。

一般情况下，wav数据实际上就是裸数据pcm外面包了一层文件头。在前面的文章中，我们已经拿到了pcm数据了，只要在其前部增加44个字节的wav头就行了。

wav头

先上这张图吧，

ChunkID

偏移量0，占用了4字节，大端字节序，表示资源交换文件标识符，一般固定是"RIFF"。

ChunkSize

偏移量4，占用4字节，小端字节序，下个地址开始到文件尾总字节数，即文件大小-8。

Format

偏移量8，占用4字节，大端字节序，表示wav文件标志，一般固定为"WAVE"。

Subchunk1 ID

偏移量12，占用4字节，大端字节序，表示波形格式标志，一般固定为"fmt "，注意最后有空格。

Subchunk1 Size

偏移量16，占用4字节，小端字节序，表示过滤字节，一般为 0x10 = 16。

AudioFormat

偏移量20，占用2字节，小端字节序，表示格式类别，1是PCM形式采样数据，故此处填1。

Num Channels

偏移量22，占用2字节，小端字节序，表示声道数。

SampleRate

偏移量24，占用4字节，小端字节序，表示采样率。

ByteRate

偏移量28，占用4字节，小端字节序，表示波特率，即声道数 × 采样频率 × 采样位数 / 8。

BlockAlign

偏移量32，占用2字节，小端字节序，声道数 × 采样位数 / 8。

Bits Per Sample

偏移量34，占用2字节，小端字节序，采样位数.

Subchunk2 Id

偏移量36，占用4字节，大端字节序，数据标识符，一般固定为"data"。

Subchunk2 Size

偏移量40，占用4字节，小端字节序，表示采样数据总数，即数据总大小-44。

data

偏移量44，小端字节序，pcm数据。

js拼装

给pcm的数据加上wav头就可以播放了，简单的处理如下：

// 资源交换文件标识符
writeString(data, offset, 'RIFF'); offset += 4;
// 下个地址开始到文件尾总字节数,即文件大小-8
data.setUint32(offset, 36 + bytes.byteLength, true); offset += 4;
// WAV文件标志
writeString(data, offset, 'WAVE'); offset += 4;
// 波形格式标志
writeString(data, offset, 'fmt '); offset += 4;
// 过滤字节,一般为 0x10 = 16
data.setUint32(offset, 16, true); offset += 4;
// 格式类别 (PCM形式采样数据)
data.setUint16(offset, 1, true); offset += 2;
// 声道数
data.setUint16(offset, channelCount, true); offset += 2;
// 采样率,每秒样本数,表示每个通道的播放速度
data.setUint32(offset, sampleRate, true); offset += 4;
// 波形数据传输率 (每秒平均字节数) 声道数 × 采样频率 × 采样位数 / 8
data.setUint32(offset, channelCount * sampleRate * (sampleBits / 8), true); offset += 4;
// 快数据调整数 采样一次占用字节数 声道数 × 采样位数 / 8
data.setUint16(offset, channelCount * (sampleBits / 8), true); offset += 2;
// 采样位数
data.setUint16(offset, sampleBits, true); offset += 2;
// 数据标识符
writeString(data, offset, 'data'); offset += 4;
// 采样数据总数,即数据总大小-44
data.setUint32(offset, bytes.byteLength, true); offset += 4;

// 给wav头增加pcm体
for (let i = 0; i < bytes.byteLength; ++i) {
    data.setUint8(offset, bytes.getUint8(i, true), true);
    offset++;
}

给pcm嵌入上wav头，那么浏览器就可以播放了。

播放

createBufferSource方式

该方法在web Audio学习与音频播放中就有了，将二进制传入就会被转成audioBuffer，这儿不多说了。

audio方式

可以创建audio标签，外加window.createObjectURL方法返回资源路径给audio标签，再通过audio的播放就ok了。

总结

到这，录音功能也算差不多完成了，当然还有很多细节待完善的，以及一些小功能可以开发。

本篇对应的demo请查看：js转化pcm到wav格式与播放。完整的录音插件请查看：recorder。

js实现pcm数据编码

Thu, 11 Apr 2019 21:51:45 GMT

前篇文章也讲了如何通过webrtc中的getUserMedia()方法和audioprocess事件获取音频的pcm数据了，接下来，我们就将这些数据做简单处理。虽然浏览器已经帮我们处理了模拟信号转数字信号的过程，但是我们还是有必要略微了解下的。

模拟信号

什么是模拟信号呢？非通信专业的我，引用来自维基百科的一段话：模拟信号（英语：Analog Signal），是指在时域上数学形式为连续函数的信号。（时域是描述数学函数或物理信号对时间的关系。例如一个信号的时域波形可以表达信号随著时间的变化。）而我们先前录制的音频信号是带有音效的有规律的声波的频率、幅度变化信息载体。

类似于：

不过，这儿应该是很多很密的类似于正弦函数的曲线。

pcm编码

PCM(Pulse Code Modulation)，脉冲编码调制，是一种模拟信号的数字化方法。

模拟信号数字化需要经过三个过程，即抽样、量化和编码，这儿就不详细介绍了。我们来看下pcm编码中几个比较重要的概念。

采样率

又可以称为采样频率，我们可以通过sampleRate得到输入的采样率：

var context = new (window.AudioContext || window.webkitAudioContext)();
console.log(context.sampleRate);  // 输入音频采样率(HZ)  48000

即横向坐标(可以理解为x轴)在单位时间内采集了48000(我的chrome输出这么多)次样本。从维基百科上偷张图来，加深下理解（先不管y轴）。因为采集的样本多，所以未处理的pcm编码占的空间都比较大，但是他未经过任何编码和压缩处理，是种无损压缩的格式，也能得到相当好的音质效果。

采样频率一般共分为22.05KHz、44.1KHz、48KHz三个等级，采样频率越高，音质越精确。正常人听觉的频率范围大约在20Hz~20kHz之间，根据奈奎斯特采样理论（只有采样频率高于声音信号最高频率的两倍时，才能把数字信号表示的声音还原成为原来的声音），为了保证声音不失真，采样频率应该在40kHz左右。所以对于高于48KHz的采样频率人耳已无法辨别出来了，所以并没有什么实用价值。

采样位数

采样位数可以用来描述连续变化的幅度值。依旧是前面盗来的图，我们来关注下y轴上的信息，y轴共分为了16份，也就是2的4次方，即使用4bit就可以存储这些信息了，这儿的采样位数是4。将这些点连起来，是不是并不能完全（较好）地恢复原有的曲线？如果16份恢复地不够完美，那么32，64更多份数是不是就能恢复这波形图了呢？

一般情况下，采样位数是8或16，8位的可以划分为2^8=256份，范围是0-255。16位的可以划分位2^16=65536份，范围是-32768到32767。到这就是量化了，采样位数这个数值越大，解析度就越高，录制和回放的声音就越真实。

可以打印看下先前我们搜集到的pcm数据，这些数据都是在[-1, 1]之间的，要转成8位的形式，负数*128，正数*127，然后整体向上平移128(+128)，即可得到[0,255]范围的数据。16位的数据，只需要对负数*32768,对正数*32767即可。注：实际存储都是二进制形式的。

声道

声道有单声道和双声道的区别，当然也有8位和16位之分，

每个采样占用8bit，也就是一个字节。

16位的就是double了。

双声道的话，在audioprocess事件种就要特殊处理下，可以用e.inputBuffer.getChannelData(1)取第二个声道的数据，当然，createScriptProcessor方法中的声道数也要设置成2。

注：双声道取得的数据不能直接使用，需要拼接成LRLRLR这种格式。

js实现转化

前面讲的差不多了，紧接着前一篇获取到[-1, 1]的pcm的代码。首先，在audioprocess事件中，是用inputData数组收集的，即是二维数组，为了后边处理方便，现处理成一位数组。

收集数据简单处理

function decompress() {
    // 合并
    var data = new Float32Array(size);
    var offset = 0; // 偏移量计算
    // 将二维数据，转成一维数据
    for (var i = 0; i < inputData.length; i++) {
        data.set(inputData[i], offset);
        offset += inputData[i].length;
    }
    return data;
};

size和inputData都是全局变量，当然这样写不好，这只是demo。因为audioprocess返回的也是Float32Array类型的数据，故此处接收容器也是Float32Array类型，关于该类型的详细介绍可以查看这篇文章：前端二进制学习（三）。

注：比如阿里云的语音识别，要求是16000采样率的pcm音频，所以，此处会有压缩的过程，由于48k与16k是三倍关系，即三个样本中要删除一个样本，利用循环过滤就可以了，不理解的可以查看recorder中的compress函数，我这没有做压缩采样样本。

编码

接下来就是编码了，我们这默认设置采样位数为16位。

var oututSampleBits = 16; // 输出采样数位

由于8位刚好一字节，此处若是16位的采样位数，需要两倍的大小。所以，在取arraybuffer时，需要处理下，

let bytes = decompress(),
    sampleBits = oututSampleBits,
    dataLength = bytes.length * (sampleBits / 8),
    buffer = new ArrayBuffer(dataLength),
    data = new DataView(buffer);

依据前面提及的算法，当采样位数是8位的，只要将负数*128，正数*127，然后整体向上平移128(+128)就可以了。

if (sampleBits === 8) {
    for (var i = 0; i < bytes.length; i++, offset++) {
        // 范围\[-1, 1\]
        var s = Math.max(-1, Math.min(1, bytes\[i\]));
        // 对于8位的话，负数\*128，正数\*127，然后整体向上平移128(+128)，即可得到\[0,255\]范围的数据。
        var val = s < 0 ? s * 128 : s * 127;
        val = parseInt(val + 128);
        data.setInt8(offset, val, true);
    }
}

当时16位的，只需要对负数*32768,对正数*32767就行了，记得offset取2，并使用setInt16，第三个参数要置为true，牵扯到大端和小端字节序。

for (var i = 0; i < bytes.length; i++, offset += 2) {
    var s = Math.max(-1, Math.min(1, bytes\[i\]));
    // 16位直接乘就行了
    data.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);
}

此时，data的数据就是处理后的pcm流数据了。

代码地址见：js实现pcm数据编码。

想要看js录音的可以看这篇文章：纯js实现录音与播放。

总结

到这，拿到手的pcm数据已经存储了对应的数据，可以使用了，比如阿里云语音识别就可以使用了。可惜，浏览器并不能播放pcm的音频数据，在下一篇中，将讲述下如何把pcm转成wav格式的音频文件，并在浏览器中播放。

web Audio实现pcm音频数据收集

Tue, 09 Apr 2019 21:13:02 GMT

前面利用web audio api播放了本地音乐，并且利用createOscillator生成音频并播放。既然如此，我们能否接着用js去实现简单的录音呢？

音频源

getUserMedia

录音的音频源当然是设备的话筒（音频输入设备），所以需要用到navigator.mediaDevices.getUserMedia()这个方法。

该方法有一个参数，

constraints，指定请求的媒体类型，这儿只牵扯都音频，所以仅需audio:true即可。

该方法返回一个promise，成功回调的参数是一个 MediaStream对象。

注：不推荐使用navigator.getUserMedia()方法，因为该方法已经从web标准中删除了。

createMediaStreamSource

此时createMediaStreamSource()方法就有用啦，引用MDN上的一段话：AudioContext接口的createMediaStreamSource()方法用于创建一个新的MediaStreamAudioSourceNode 对象，需要传入一个媒体流对象(MediaStream对象)，然后来自MediaStream的音频就可以被播放和操作。

他返回的是MediaStreamAudioSourceNode类型的，也就是音频源节点，到此处，音频源已经有了，下面看下保存音频的节点（音频处理节点）。

navigator.mediaDevices.getUserMedia({
    audio: true
}).then((stream) => {
    audioInput = context.createMediaStreamSource(stream);
}).catch((err) => {
    console.log('error');
});

此时，audioInput就是音频源节点。

音频处理节点

createScriptProcessor

createScriptProcessor()，该方法创建一个ScriptProcessorNode用于通过JavaScript直接处理音频，有三个参数：

bufferSize，缓冲区大小，以样本帧为单位。一般有以下值 256, 512, 1024, 2048, 4096, 8192, 16384。当传0时，系统会取当前环境最合适的缓冲区大小。每当缓冲区满时，则会触发audioprocess事件，即bufferSize控制着回调事件的频率。注：mdn提示 chrome 31版本的不支持传0的方式。
numberOfInputChannels，值为整数，用于指定输入node的声道的数量，默认值是2，最高能为32，且不能为0。
numberOfOutputChannels，值为整数，用于指定输出node的声道的数量，默认值是2，最高能取32，不能为0。

保证numberOfInputChannels和numberOfOutputChannels相等就行了，通过监听audioprocess后，就可以处理对应的音频流了。

recorder = context.createScriptProcessor(4096, 1, 1);
recorder.onaudioprocess = function(e) {
    // getChannelData返回Float32Array类型的pcm数据
    var data = e.inputBuffer.getChannelData(0);
    
    inputData.push(newFloat32Array(data));
    size += data.length;
}

我这默认是一通道的，所以只对0进行了数据收集。MDN上说，audioporcess缓冲区的数据是，非交错的32位线性PCM，标称范围介于-1和之间+1，即32位浮点缓冲区，每个样本介于-1.0和1.0之间。所以等录音结束后，inputData中就是存放的pcm格式的录音数据了（还需处理下）。

总结

现在我们手上已经有了简单的pcm数据了，为了能够正常的播放，还得略微处理下，下篇将将探讨如何转数字信号。

代码地址：web Audio实现pcm音频数据收集，想要看js录音的可以看这篇文章：纯js实现录音与播放。

Web Audio学习与音频播放

Mon, 08 Apr 2019 22:25:17 GMT

随着浏览器的越发强大，用原生js操作音频已经不是难事了。我们来使用web audio api简单地处理下音频资源。

简介

在学习web audio api之前，先了解三个概念：

音频源，也就是音频输入，可以是直接从设备输入的音频，也可以是远程获取的音频文件。

处理节点，分析器和处理器，比如音调节点，音量节点，声音处理节点。

输出源，指音频渲染设备，一般情况下是用户设备的扬声器，即context.destination。

当然，实际使用中，可能会有n个处理节点，都可以使用connect依次关联起来。

音频文件播放

假如现在要用web audio api播放本地的一个音乐文件，按照前面的流程，我们来试下。

文件上传

既然音频文件来自本地，那么得支持文件上传：

<input type="file" id="file" accept="audio/x-wav,audio/mpeg" />

我这儿限制先显示wav和mp3两种格式。

文件读取

给input增加change事件，处理选中的文件：

var context = new (window.AudioContext || window.webkitAudioContext)();

document.getElementById('file').addEventListener('change', function(e) {
    var read = new FileReader();

    read.onload = function() {
        // 将arrayBuffer转成audioBuffer
        context.decodeAudioData(this.result, function(buffer) {
            playSound(buffer);
        }, function() {
            console.log('error');
        });
    };
    // 利用filereader将file转成arraybuffer格式
    read.readAsArrayBuffer(this.files[0]);
});

丢了一段代码，我们来看下，new AudioContext()，创建audio的上下文环境，至于webkitAudioContext是兼容较低版本的chrome的。

fileReader大伙应该见到的比较多了吧，这儿用他读取对应file对象中的文件数据，readAsArrayBuffer表示读取结果用arrayBuffer对象显示，由于此方法是异步读取的，所以只能放在onload回调中处理。

而我们拿到的arrayBuffer不能直接给web audio播放，需要使用decodeAudioData()方法将arrayBuffer转成audioBuffer，那么此时转化后的audioBuffer就是音频源啦。decodeAudioData更多介绍可以查看MDN：https://developer.mozilla.org/zh-CN/docs/Web/API/AudioContext/decodeAudioData。

注：w3c文档上说明decodeAudioData支持audio标签支持的所有音频格式。MDN提示ArrayBuffer类型的对象旨在保存小型音频片段，通常小于45秒，对于较长的声音，实现它的对象MediaElementAudioSourceNode（audio元件）更合适。

音频播放

音频数据到手，接下来就是播放啦。

文件上传后，我们拿到了音频audioBuffer形式的数据，接下来使用createBufferSource()方法播放音频数据，再connect到destination就可以播放了。

// 播放音频
function playSound(buffer) {
    var source = context.createBufferSource();

    // 设置数据
    source.buffer = buffer;
    // connect到扬声器
    source.connect(context.destination);
    source.start();
}

一个简单的音频文件播放器就完成了，如果是从服务器上获取文件也是类似的，只不过是多了个ajax处理。

代码地址：webAudio播放本地音乐。

音频的话，可以去一些音乐网站下载，如果懒得下的话，我这直接提供音频下载：[download id="1075"]

小bug

当连续选择多个文件时，你会发现，多个音频文件一起播放了，因此，多音频输入时，都一起connect到context.destination上就可以实现一起播放了。对于此处，这应该算是个bug，查看AudioBufferSourceNode文档，可以利用stop()方法去处理，大伙自个想下，处理下咯。

前面的例子里只出现了音频源和音频输出，并未出现处理节点。接下来，我们尝试自己创建音频，并使用音量处理节点。

自制音频并播放

创建音频源

此处我们不使用外部的音频文件，而是使用createOscillator()方法创建音频源。

该方法返回OscillatorNode，可以通过frequency属性设置他的振荡频率，type属性则可以用来指定要播放的波形。更多属性和方法参考OscillatorNode文档。

var context = new (window.AudioContext || window.webkitAudioContext)();
var oscillator = context.createOscillator();
// oscillator.type = 'sine';
// oscillator.frequency.value = 800;  // 频率800Hz，默认440

创建音量处理节点

使用createGain()方法，修改返回值中的value，既可以改变音量大小。

var gainNode = context.createGain();
gainNode.gain.value = 0.8; // 音量 0 ~ 1

节点关联与播放

将这些"节点"connect起来就可以播放了。

oscillator.connect(gainNode); // 音频源关联到音量
gainNode.connect(context.destination); // 音量关联到扬声器

// chrome 73 需要用户点击才可播放
document.getElementById('start').addEventListener('click', function() {
    oscillator.start();
});

虽然播放后是一片噪音，不过简单的web audio api我们已经会使用啦。

代码地址：webAudio制造噪音并播放。

其他

自己尝试过程中，在控制台下遇到这个警告： The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page.

大概意思就说AudioContext需要用户手动触发，所以只需要将new AudioContext()移动到事件内部就行了。

总结

我们已经能够使用web audio播放本地音乐和制造噪音了，接下来，可以尝试下其他的api了。

想要看js录音的可以看这篇文章：纯js实现录音与播放。

package.json版本控制

Sat, 06 Apr 2019 11:57:09 GMT

npm作为node的重要的包管理工具，package.json的存在可谓是很有作用的。

大小版本控制安装

观察package.json文件，我们常会看到^或者～这种特殊符号。

先介绍下版本中三段数字的含义：

大版本号.小版本号.补丁版本号

带^符号表示控制大版本号，即安装相同大版本号中，最新的版本。

带～符号表示控制小版本号，即安装相同大小版本号，补丁是最新的版本。

纯数字的无符号的版本号，则安装对应的版本。

最后，npm i安装就行了。

固定版本安装

命令模式下，可以只用包名@版本号的方式安装对应的版本。

npm install 包名@1.11.0

node(koa2) web应用模块推荐

Thu, 28 Mar 2019 21:15:33 GMT

在自己的koa2 web项目中，用到了很多模块，感觉都是不错的，特地来分享下这些模块。

一、前言

我们都知道可以通过koa2 工程名的方式来初始化koa2项目，官方为我们增加了koa-bodyparser、koa-josn、koa-router等非常不错的模块，但是，仍不够，所以我将搜集到的有用的包介绍下，当然，有好的包仍然会添加到其中。整个项目在koa2-web-engine ，为了方便查看，使用了原生的方式，欢迎查看。

二、新的模块

将代码克隆到本地并安装依赖后，启动服务器，在3000端口可以看到所有demo。

验证码

svg-captcha是一个验证码的库，他创建了svg格式的验证码，可以在登录时，验证是否是正常的用户登录。

使用十分的简单：

const svgCaptcha = require('svg-captcha');
captcha = svgCaptcha.create();

captcha对象中包含了svg数据和svg上显示的内容，至于是否要大小写强制验证就可以通过配置的方式来增加了。

处理代码位于routes/verificationCode.js中。

密码加密登录

后端主要是利用node-rsa生成公钥和私钥，再将公钥发送给前端，前端利用jsencrypt进行加密后发送给node，node再用私钥解密。

为了性能，我只在服务器启动的时候生成公钥和私钥，以后的请求都是用这队公私钥，他位于utils/RSA.js文件中，解密在routes/login.js中。

更详细的可以查看我的这篇博客：基于node简单实现RSA加解密。

参数类型检测

为了服务器的安全性，服务器对前端发送来的数据肯定是要做校验的，我这使用的joi库。

校验主要靠Joi.validate()方法，第一个参数是要校验的对象数据，第二个参数是数据内每个键对应的数据类型，第三个则是可选的option，返回值是一个对象，该对象下的error字段用于判断此次校验是否成功。

在utils/checkParams.js中，paramsFormat定义了检测类型，当然每个类型都得用joi内置的类型，checkParams()函数就是做检测的地方，将最后的检测结果return出去。

回到routes/joi.js中，利用checkParams()方法检测数据类型，这儿的检测是针对单个的请求，如果要针对所有的请求，可以写成中间件的形式，如utils/middleware.js中，并在app.js中加入以下的就行了：

const middleware = require('./utils/middleware');
middleware.use(app);

防xss

这儿用到的是xss模块，将每次请求到的数据经过xss处理，输出到后端。为此我自己搞了koa2-xss中间件模块，顺带学习了如何发布npm包，感兴趣的可以看下。

日志记录

我是用的是log4js模块，该模块既可以记录到数据库，也可以记录到log文件中，此处我是写到文件中的。

utils/logs.js文件中是log4js的配置，并封装了对外的调用接口，routes/log4js.js中是根据用户发送的请求记录到日志文件中。

定时任务

利用了node-schedule模块，一个系统总会用到定时任务的，node-schedule提供了较为简单的api，使用比较方便。

路由合并

koa2初始化的项目中是将每个路由文件require到app.js中的，当路由文件变多时，管理这些路由就是件麻烦的事，于是引入了koa-compose来管理这些路由文件，只对外暴露一个接口。详细的可以查看routes/index.js文件。

webSocket

websocket在实时性要求比较高的场景下也是会用到的，我们可以利用ws模块实现。更为详细的可以查看我的这篇文章：基于node实现websocket通信。

三、总结

后期用到一些有意思，有用的模块也将加入到koa2-web-engine 中。

发布自己的npm包

Wed, 27 Mar 2019 21:10:40 GMT

在前端工程化中，npm也是越来越作用了，一直用着他人的npm包，我也想着为开源社区贡献自己的力量（。。。），便来看下如何写个npm包。

起步

账号注册

首先需要先到npm官网注册个账号，https://www.npmjs.com 。注意，邮箱需要认证，否则上传包的时候就会报错。

关联

接下来打开powershell(cmd等皆可)，关联npm账号，

npm login

按照提示依次输入注册的信息，

检测包名

在创建项目名时，可以先去npm官网中搜索下有没有相同包的名，如果有的话，要修改，否者上传肯定是会报错的。

创建代码文件

接下来新建文件夹，并完成npm初始化：

mkdir koa2-xss
cd koa2-xss
npm init

新建index.js，因为这是包的默认入口文件。

然后就开始码代码的任务了，这块就跳过了。好的，我们现在已经写好代码并测试完成了，下面就开始上传了。

上传

在koa2-xss目录下，输入

npm publish

我遇到了上传失败的情况，确认后发现是邮箱没有确认，去官网认证后就行了。

再次publish，

当我们看到以上的图时，就证明已经上传成功啦。

直接去npm官网，个人的packages下，就可以看到对应上传的包了。

下载确认

和往常一样，使用install安装，

npm i koa2-xss

到这，简单的包发布就结束了。

修改再提交

实际测试的时候，发现代码少了await，导致请求的时候，没有等到赋值ctx.body，出现了错误。故修改一下。

版本控制

不修改版本直接publish，也会出错的，是因为每次提交地版本号必须不一样。

如果每次手动去修改版本，那是比较麻烦的，npm也提供了自动增加版本号的方式：

用法：npm version

patch，小变动，比如修复bug等，版本号变动 v1.0.0->v1.0.1。
minor，增加新功能，不影响现有功能,版本号变动 v1.0.0->v1.1.0。
major，破坏模块对向后的兼容性，版本号变动 v1.0.0->v2.0.0。

npm version patch
npm publish

这样就好了。

再次更新

非大版本更新直接npm install koa2-xss就行了，当然如果是大版本更新(major)了，可以在install时加上版本号：npm install koa2-xss@0.0.2。

版本删除

有些时候，我们发现上传的代码有严重问题时，为了防止问题影响到其他人，可以选择先删除前一个版本。

删除指定的版本

npm unpublish带上包名和版本号就行了。

npm unpublish koa2-xss@0.0.1

删除整个包

npm unpublish 包名

如果有权限问题，撤销不了，可以添加--force。发布撤消的话也是有诸多限制的:

只有在发包的24小时内才允许撤销发布的包。
即使你撤销了发布的包，再次发包的时候也不能使用刚才相同的版本号了。

其他

package.json

我们用npm init生成的package.json并不完善，比如需要在npm中显示的代码托管地址，issues地址等，完整的可以看下官网地址：https://docs.npmjs.com/creating-a-package-json-file 。

keywords

关键字，会在npm包内容页面最底部。

repository

右侧显示的项目托管的地址。

bugs

右侧显示的提bug的地址。

README.MD

readme也是需要的，这样可以让使用者简单地了解下这个组件。怎么写可以看下：https://docs.npmjs.com/about-package-readme-files。

好了，是时候给开源社区贡献自己地一份力量了。

再推荐下自己的另一个用于前端纯js录音的npm包：js-audio-recorder。参考：

koa-unless增加method限制

Sun, 24 Mar 2019 16:35:10 GMT

没事自己撸了个web项目，后端用的是koa2，并使用了koa-jwt进行鉴权，在使用的时候遇到了些小问题。

一、问题

用koa-jwt鉴权的时候，可以通过设置unless路径，使得某些api不用经过鉴权，比如登录接口：

app.use(jwtKoa({secret}).unless({
    path: [/^/api\/login/]
}));

当然还有些比如获取文章内容接口，我需要在未登录时显示文章，修改和删除是需要鉴权，但由于使用了restful api设计，获取文章和删除文章的api路径是一样的，使用前面的这种方式无法区分get与delete请求，导致鉴权没有任何意义了。

看了下koa-jwt文档上，并没有我需要的，只能看下代码咯，毕竟，比文档更全面的就只有代码了。

二、处理问题

查看koa-jwt代码，发现unless匹配与验证这块是使用的koa-unless，在package.json中也可以看到：

既然这样，我们就去查看koa-unless的文档，只能找到单一的url匹配和method匹配，并没有两者结合的判断方式。没办法，只能去看koa-unless的源码了。

koa-unless

koa-unless目录比较简单，源码就一个index.js，细看代码，

if (matchesCustom(ctx, opts) || matchesPath(requestedUrl, opts) ||
    matchesExtension(requestedUrl, opts) ||matchesMethod(ctx.method, opts)) {
    return next();
}

焦点到这个if判断上，此处就是在处理http请求的数据与unless函数是否匹配的地方，当能够匹配上时，则可以继续执行后面的函数。

function matchesPath(requestedUrl, opts) {
    // ...
}

matchesPath，该方法用于判断当前请求的url是否符合unless中的路径。

function matchesMethod(method, opts) {
    // ...
}

该方法用于判断当前请求方式是否在unless的允许范围内。

我们发现，这几个match匹配函数之间都是或运算符，因此只要任何一者满足，if就可以通过，所以，url与method之间并没有关系，因此，并没有我想要的功能。

小改以下

既然用||没有关联，改成&&是不是就可以了呢？依旧不行，因为解析规则并没有改变，我没法给每个url增加独立的method。所以得大改一下了。

三、修改组件

我想要的功能是这样的，

app.use(jwtKoa({secret}).unless({
    method: ['POST'],
    path: [/^\/api\/login/,
        {url: /^\/api\/publicKey/, method: ['GET']}]
}));

path中可以像原先一样直接些路径的正则或者字符串，如果这么写了，他的method就由外侧与path同级的method控制（不写这个method，默认所有方法）。当然也可以在path中设置对象的方式规定url和method，这种方式中的method优先级更高。

考虑到路由多的情况下，在初始化的时候，将unless中的url与method解析到一个空对象之中，并以method为key值，而允许的路由则放在key对应的value数组中。这样，当请求的时候就不用整个unless遍历了。

// 请求方式
var methods = ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS', 'HEAD', 'TRACE', 'CONNECT'];
// 存储 method: [url1, url2 ...]
var map = {};

在初始化的时候，解析unless配置：

/**
 * 将用户写的unless配置转到map数据中
 * @param {Object} map 需要存储到的空对象
 * @param {Object} opts 填写的unless配置
 */
function filterUnless(map, opts) {
    // 处理不写外层method时，默认支持所有请求方式
    var mes = opts.method ? opts.method : methods;
    if (Array.isArray(opts.path)) {
        opts.path.forEach((item) => {
            var method = [],
                url='';
            if (Object.prototype.toString.call(item) === '[object Object]') {
                // path中的是对象的，则查找他的path和method
                url = item.url;
                method = item.method || mes;
            } else {
                // 单个字符串或正则
                url = item;
                method = mes;
            }
            // 记录
            record(map, method, url);
        });
    } else if (Array.isArray(opts.method)) {
        // 没有path，检测下是否有method
        opts.method.forEach((met) => {
            // 当方法后的value为空数组时，表示所有url均会符合
            map[ met.toLowerCase() ] = [];
        });
    }
}
// 将 key: ulr1记录到map中
function record(map, method, url) {
    method.forEach((met) => {
        if (!map[ met.toLowerCase() ]) {
            // 无值时，需要先创建空数组
            map[ met.toLowerCase() ] = [];
        }
        map[ met.toLowerCase() ].push(url);
    });
}

既然想要url和method能够相互关联，那么彼此之间肯定要有制约，那么将这两者的判断放到同个方法中。删掉if判断中的matchesPath()与matchesMethod()方法，增加matchesPathAndMethod()方法，参数是当前请求的url和请求方式method。

因为前面已经用map缓存了数据，所以后面的处理就会简单多了。

/**
 * 处理当前请求url和method是否符合unless中的配置
 * @param {Object} requestedUrl 请求url相关信息
 * @param {String} method 请求方式
 */
function matchesPathAndMethod(requestedUrl, method) {
    var path = requestedUrl.pathname,
        mets = map[ method.toLowerCase() ];
    if (!mets) {
        // 没这个方法
        return false;
    }
    if (!mets.length) {
        // 长度是0，证明所有请求都可以
        return true;
    }
    return mets.some(function (p) {
        return (typeof p === 'string' && p === path) ||
            (p instanceof RegExp && !!p.exec(path));
    });
}

对应method中没有url，则直接false，当对应method下是空数组，则是所有url都ok。其他情况下，则需要依次遍历method下的url是否匹配。

文件下载地址：koa-unless。

wordpress简单插件开发

Thu, 21 Mar 2019 20:35:52 GMT

这几天弄了微信的个人公众号，想着在每篇文章的最后加上个关注公众号的提示，可是有这么多文章，每篇改来改去也是要费很大的劲的，于是想通过自己弄个插件的方式去解决。

一、插件系统

作为最受欢迎的博客系统，有相当一部分的功劳是归功于wp的插件的，小到评论插件，大到seo、安全防御插件，几乎每方面都有wp插件的身影。举几个我正在使用的插件：

Akismet Anti-Spam，抵御垃圾评论的插件。
Autoptimize，优化网站性能，压缩css，js，html的插件。
Slimstat Analytics，访问统计的插件。
等等。

那么，我们来看看如何开发一个（简单）插件。

二、插件原理

插件位置

手动安装过或者细看过wp目录结构的都应该知道，插件都是安装在/wp-content/plugins 目录或子目录下的。

插件名

起插件名的时候最好可以在插件商店里搜下，避免重名，并加入些能体现功能的词。我这功能是用来文章末尾做提示的，所以起个名叫bottom-prompt（。。。不会起）。

hooks

至少作为前端的我，这个词应该是不陌生的吧。

简单来说hooks（钩子）其实就是预埋在代码中的一系列方法，当wp执行到此处时，就会去查看该钩子下有无事件。而插件主要就是向这些钩子中加入处理函数，以达到功能性的改变。

而hooks又分为Action Hook与Filter Hook，这两种钩子实现原理基本一样，最主要的区别在于filter有返回值，而action没有。wp提供的hooks是相当多的，具体的可以查看官方文档。

三、开始写插件

终于开始写代码了，新建bottom-prompt文件夹，新建bottom-prompt-plugin.php。

增加以下格式：

<?php
/*
 * Plugin Name: Bottom-Prompt plugin
 * Plugin URI: http://www.zhuyuntao.cn
 * Description: 底部消息提示插件
 * Version: 1.0.0
 * Author: 2fps
 * Author URI: http://www.zhuyuntao.cn
 * License: GPL
 */
?>

这段注释是干嘛用的呢？我们直接到已安装插件页面，发现多了个未启动的bottom-prompt插件，

注释上的内容都显示出来了吧。

增加注册函数

增加两个注册函数，一个是当插件被注册激活，另一个是当插件被停用时触发的。

/* 注册激活插件时调用的函数 */
register_activation_hook( __FILE__, 'display_prompt_install');
/* 注册停用插件时调用的函数 */
register_deactivation_hook( __FILE__, 'display_prompt_remove');

function display_prompt_install() {
    /* 在数据库的 wp_options 表中添加一条记录，第二个参数为默认值 */
    add_option("display_prompt_text", "<p>欢迎关注微信公众号[ 我不会前端 ]或扫描右侧悬浮二维码。</p>", '', 'yes');
}
function display_prompt_remove() {
    /* 删除 wp_options 表中的对应记录 */
    delete_option('display_prompt_text');
}

当插件被启用时，便向wp_options表中插入一条数据，当停用时，就会删除该条数据。因为我这数据简单，所以直接使用了wp_options表了，若有必要，可以新建一个表独自使用。

增加钩子

这儿用的是the_content过滤钩子，他可以在文章内容显示出来之前对其做些修改。

add_filter('the_content', 'display_prompt');

function display_prompt($content) {
    if (is_single()) {  // 文章页面
        $content = $content.get_option('display_prompt_text');
    }
    return $content;
}

当用户查看的是文章页面时，就会去wp_options表获取对应需要显示的值。触发点和显示的地方都有处理了，那如果我们要改这个内容，总不能直接改源码吧，那也太不方便了。

增加侧边栏显示

将menu显示在左侧侧边栏，供管理员修改提示内容。

if(is_admin()) {
    /*  利用 admin_menu 钩子，添加菜单 */
    add_action('admin_menu', 'ddisplay_prompt_menu');
}
function ddisplay_prompt_menu() {
    /* add_options_page( $page_title, $menu_title, $capability, $menu_slug, $function);  */
    /* 页名称，菜单名称，访问级别，菜单别名，点击该菜单时的回调函数（用以显示设置页面） */
    add_options_page('set Prompt', 'Menu', 'administrator','display_prompt', 'display_prompt_html_page');
}

利用admin_menu钩子，添加左侧栏，并设置侧边菜单的名称。而具体页面的显示内容则在display_prompt_html_page()方法中。看下侧边栏的效果。

增加联动显示页面

随便找个后台的界面，复用他的html结构和css样式。

function display_prompt_html_page() {
    ?>
    <divclass="wrap">
        <h1>Set Prompt</h1>
        <form method="post" action="options.php">
            <?php/* 下面这行代码用来保存表单中内容到数据库 */?>
            <?php wp_nonce_field('update-options'); ?>
            <table class="form-table">
                <tr>
                    <th>提示</th>
                    <td>
                        <p>
                            <label>在此输入文章尾部的提示信息（支持html解析）。</label>
                        </p>
                        <p>
                            <textarea
                                name="display_prompt_text"
                                id="display_prompt_text"
                                cols="50"
                                class="large-text code"
                                rows="10"><?phpechoget_option('display_prompt_text'); ?></textarea>
                        </p>
                    </td>
                </tr>
            </table>
            <p>
                <input type="hidden" name="action" value="update"/>
                <input type="hidden" name="page_options" value="display_prompt_text"/>
                <input type="submit" value="保存更改" class="button button-primary" class="button-primary"/>
            </p>
        </form>
    </div>
<?php
}

这样界面就ok了，去试下效果吧。

demo地址：wordpress简单插件开发。

react全家桶兼容ie8

Mon, 18 Mar 2019 22:08:04 GMT

去年做了个基于react的项目，并且要求兼容ie8，现分享下该webpack脚手架。

一、原脚手架

由于当时项目要求能快速定技术，于是就直接找脚手架了。对比了多个可用（还有几个不可用的），最终选定了react-base-ie8，其中有点是其他脚手架都没的，那就是不需要等到build后才能在ie8下跑，可以直接在ie8下热更新开发代码。

该脚手架只使用了react和react-router，http请求则直接使用了fetch库。

二、更新

按路由打包

考虑首屏加载的性能问题，增加了按路由打包的功能（其实react-router是支持的，我这只是使用下）。

增加redux状态管理

加入redux，增加demo，并兼容到ie8。

我的脚手架地址：react-base-ie8。

material-ui中初探css in js

Sat, 16 Mar 2019 21:34:51 GMT

前期整了个个人博客系统，ui库也是变换了好几个，最后还是用上了material-ui。发现该ui库时居然没有像其他库一样引入css文件就可以显示，觉得很是神奇（选他只是觉得ui看的特别爽），后来才发现他样式是基于css in js的。

一、简介

发现material-ui的样式是基于css in js时，我很是想再换个ui库，毕竟用less、sass也是很不错的？况且，web发展这么久，好不容易把三大基本元素给拆分开了，现在又要合并起来，很是反感。不过，细细看了下，发现感觉还不错。

如其表面意思一样，即是在js中写css样式，先不谈这么写的好处与坏处。想想我们平时写css的难处：

命名难，起名很是怕冲突。
样式覆盖问题（作用域）。
比less，sass更灵活的编程语法。

当然，这些问题在其他的像css module等方案中也是可以解决的。个人觉得，最后一点用的很是不错，将css逐步能推向编程语言的范畴。

二、简单使用

material-ui中使用的是jss库，我们尝试在react项目中使用他。react项目中要使用react-jss库，在create-react-app脚手架生成的代码中，修改App.js，

import React, { Component } from 'react';
import withStyles from 'react-jss';

// 样式，使用colorBlue就对应后面的样式
const styles = {
    colorBlue: {
        color:'blue'
    }
};

const Test = ({ classes }) => {
    return (
        <span className={classes.colorBlue}>test</span>
    );
};

const StyledTest = withStyles(styles)(Test);

class App extends Component {
    render() {
        return (
            <div>
                <StyledTest></StyledTest>
            </div>
        );
    }
}

export default App;

3000端口的页面可以看到字体已经是蓝色的了，将所有的样式以样式名: 样式内容的方式写在styles对象之中，再用withStyles注入到组件之中（也可以使用injectSheet代替withStyles），其实使用上去还是不算太变扭。

看下在浏览器中渲染的class名，

命名很有规律，更多其他规律可以自己尝试下。

那么在class方式定义的组件中怎么使用呢？忽略相同的import和styles的定义，看下组件的定义，

@withStyles(styles)
class App extends Component {
    render() {
        const {classes} =this.props;
        return (
            <span className={classes.colorBlue}>text</span>
        );
    }
}

export default App;

不过很可惜，在create-react-app项目中，es7的修饰器是不支持的，提示Support for the experimental syntax 'decorators-legacy' isn't currently enabled。

我也找了好多中处理方法，都还是在报错，所以只能换种写法了，

// @withStyles(styles)
class App extends Component {
    render() {
        const {classes} =this.props;
        return (
            <span className={classes.colorBlue}>text</span>
        );
    }
}
export default withStyles(styles)(App);

这下页面正常了。更多的用法可以查看他的官方文档。

三、总结

使用的时候又发现了个优点，

生成的样式只适用于对应的页面，可以惰性加载，且没有冗余的样式代码。

缺点肯定也是有的，

又增加了学习成本。
当在大型项目中使用时，不知道会不会乱起来。
样式权重没了，覆盖成了问题，难道只能用important?
没法和postcss一起使用。

理念了解后，可以尝试下其他的css in js库，比如styled-component等等。

留下项目地址：https://github.com/2fps/blooog 。

node-oracledb下遇到ORA-01704 string literal too long报错

Fri, 15 Mar 2019 22:20:44 GMT

公司内部的一个自用的小爬虫，由于爬取网站的数据主要是用js拼装生成的，而且js填充的规律并未找到，所以后面使用puppeteer处理。既然要处理，那么连数据库就是最基本的了，没想到的是，还要去连oracle。。

由于只做了简单的查询与插入，所以遇到的问题也就在这狭小的范围之内了。

一、问题

爬取完页面，需要将页面上的数据插入到数据库，由于页面内容比较多，并且利用execute拼接字符串做处理的，在执行的时候遇到了此报错。

尽管此处用的是clob类型，可以存下，但是sql语句的语法解析却有长度限制，所以提示过长了。

二、处理方法

由于字符过长，于是采用了存储过程，创建是由后端人员写的，执行的话不能参照后端的写法，后端java中使用了 call去调用存储过程，但是在node中使用并没有啥用。

于是便开始翻阅文档，话说是不是用上oracle，都不采用node对接呐，网上搜索问题也搜不到。

最后在文档上找到了如何调存储过程，看来，文档还是最有效的。

await与foreach

Fri, 15 Mar 2019 21:41:26 GMT

在使用puppeteer爬取数据时，遇到了个报错问题，才发现了这个forEach与await的问题。

问题

利用搜集到的url，再去爬去对应数据时，我采用了forEach循环爬取，去遇到提示如下：UnhandledPromiseRejectionWarning: Error: Navigation failed because browser has disconnected!，换句话说就是，还没爬，浏览器就关闭了，大概就是异步问题了。

简化下问题的过程，先创建个简单的sleep函数假装处理业务逻辑，

async function sleep(time = 1000) {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve();
        }, time);
    });
}

主体函数：

(async () => {
    await sleep();
    console.log('start');

    [0, 1, 2].forEach(async () => {
        await sleep();
        console.log(1111);
    });
    console.log('finish');
})();

用node运行下，实际，forEach中的await并没有阻挡 finish 字符的输出，并且forEach创造出来的函数之间也并没有先后关联，三个1111几乎同时输出。

原因

为什么会造成这种原因呢？再看下async与await的关系，只有在同一个async函数中，await才会按照对应的执行顺序依次执行，我们都知道forEach创造了独立的async函数（闭包问题），他内部的await已经与最外层的自执行async函数没有关联了（因为forEach并不是async函数），因此，循环出的三个方法也没有关联，都是各自等待1s就输出。

解决方法

使用for循环

既然这样，我们就是用不新建函数的循环，

for (let i = 0; i < 3; ++i) {
    await sleep();
    console.log(1111);
}

改造forEach

修改原型上的forEach方法，不推荐，你可以新写个each方法，

Array.prototype.forEach = async function(fn) {
    let len = this.length;
    for (let i = 0; i < len; ++i) {
        await fn.call(this\[i\], i);
    }
};

这样就可以了，最后，使用await写异步真是太爽了。

附上demo：await与foreach。

WordPress REST API 开发

Tue, 12 Mar 2019 22:28:59 GMT

虽然wordpress是用php混合开发的，但是他也提供了rest api供调用，因此在这强大的后端基础上，又可以开发很多新式的客户端，比如基于React或Vue的前后端分离的项目，当然，微信小程序也可以的。

由于本站点已经从wordpress切换成Gatsby了，以下链接已经失效了。你可以尝试对其他wordpress站点进行API访问或本地搭建个wordpress。

一、测试

该功能在4.7以上的版本已经是完全支持了，在使用前，其实可以用来测试下。直接载url中输入http://www.zhuyuntao.cn/wp-json/wp/v2，记得换上自己的域名，如果能访问到数据(装个格式化插件，看起来更舒服)，那么restful api功能就是已经打开了，就可以直接使用了。

二、api

对照格式化后的json，看下wp提供的接口。比如以下：

key值是对应的url地址，整个连起来就是http://www.zhuyuntao.cn/wp-json/wp/v2/posts， methods是接口获取方式，args是一些参数，对应的key值则是参数名称。required则是是否必须，default就是默认值了，如果不明白这参数啥含义，可以看description字段，type则是类型，enum则是值的可选范围。按照这种方式去整理接口。

获取文章

http://www.zhuyuntao.cn/wp-json/wp/v2/posts?page=1&per_page=10

page，第几页，从1开始。
per_page，每页几篇文章。
status，表示文章状态的，一般设置publish就好了，毕竟那些未完成的草稿可不想给他人看到。

个人觉得这几个参数就够用了。

获取页面

http://www.zhuyuntao.cn/wp-json/wp/v2/pages?page=1&per_page=10

参数同上。

获取媒体

http://www.zhuyuntao.cn/wp-json/wp/v2/media?page=1&per_page=20

参数同上。

获取文章分类目录

http://www.zhuyuntao.cn/wp-json/wp/v2/categories?page=1&per_page=20

参数同上。

获取文章标签

http://www.zhuyuntao.cn/wp-json/wp/v2/tags?page=1&per_page=20

参数同上。差不多了。。感觉这些接口够用了。

wordpress官网有提供了api的详细内容，地址：https://developer.wordpress.org/rest-api/ 。

基于Node实现WebSocket通信

Mon, 11 Mar 2019 21:10:37 GMT

小程序中需要用到webSocket通信，为了方便自己调试，于是弄了个node环境来做测试。

一、客户端

webSocket客户端的使用还是蛮简单的，

var ws = new WebSocket('ws://127.0.0.1:3000');
ws.onopen = function() {
    console.log('open');
}
ws.onmessage = function(data) {
    console.log(data);
}

实例化WebSocket后，为实例绑定事件就可以了，当然还有其他的事件，我这就不列举了，只用open和message了。下面看下node的代码。

二、socket.io

socket.io听过得比较早，但一直没有机会使用，于是第一个便想到他，npm install下。增加后端代码，在不妨碍理解的基础上进行了代码删减：

const io = require('socket.io')();

io.on('connection', function(client) {
    console.log('connected');
});
io.listen(3000);

powershell下用node启动该服务，同样的，用http-server工具启动，打开 http://127.0.0.1:8080/ws.html。

发现控制台下报错了，提示Connection closed before receiving a handshake response。

好吧，这儿被卡了好久，后来发现原因是websocket版本的问题，我们看下控制台的network，

发现websocket对应的是13版本，而socket.io支持的版本是4版本，故存在问题。而websocket版本详细可以查看：websocket版本。

有问题，怎么处理呢？继续看下一个ws库。

三、ws

ws是一个node的webSocket库，在readme中说明了他是支持13版本的websocket协议的。直接上代码，启服务，

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 3000 });
wss.on('connection', function(ws) {
    console.log('connected');
    ws.on('message', function(message) {
        console.log('received: %s', message);
    });
    ws.send('something');
});

刷新下ws.html，控制台上有打印了，这下可以使用了。

四、总结

讲完了，发现微信下没讲？不，微信下是一样的，微信的websocket也是13版本的，问题和处理方法都是一样的，没用微信的例子是因为想看下普通pc下的效果，发现一致的，就直接拿来当例子了。

demo下载地址：基于node实现websocket通信。

es6中export和export default区别

Sun, 10 Mar 2019 22:35:31 GMT

用了这么就的export和import，看多了export和export default，总结下这两者的区别。

一、两者区别

export不能直接导出除了对象外的其他数据（function可以，但是得非匿名函数）。

// ok
export function aa() {
    console.log(111);
};
// ok
let aaa = 123;
export {
    aaa
};
// error
export '123';

export可以多次导出，但是export default只能导出一个。

export function getA() {
    // ...
};
export function getB() {
    // ...
};

导入export方式的需要用{}，并且变量名称必须要一致，而导入export default方式的不需要，并且可以随便重命名。

export function getA() {
    // ...
};

对应于

import { getA } from ...

export default function() {
    console.log(11);
};

对应于

import getA from...

使用export 方式导出时，导入时可以import * as name from..这种方式

如果想给方法加个顶层的全局变量的话，可以这么使用。

import * as name from ....;
name.getA();
name.getB();

二、总结

其实两者最大的区别是在于import的时候，也就是前面第三点。

其中第三点是基于第四点的，第三点行的通还是依赖了es6的另外一个解构的特性：

import * as name from ....;
let { getA, getB } = name;

所以看个人喜好，使用了。

前端路由原理

Sat, 09 Mar 2019 16:54:45 GMT

angular，vue，react都用过的吧，即使没用过也听过的吧，这些框架中都用到了路由这玩意，那么就来了解下他的原理吧。前端路由的话，分为两类，一个是hash路由，另一个是HTML5的history路由。

一、hash路由

hash路由是我们经常用到的一种路由方式，因为他的兼容性相当的好，可以兼容到ie8。

hash路由的原理是监听url中#后部的变化，配合锚点的点击，触发hashchange事件，根据window.location.hash来做相应的处理。详细的可以查看：MDN。

直接上代码，看下Hash原型，

var Hash = function() {
    this.hashFn = {};    // 存放路由与事件
    window.onhashchange = (e) => {
        var newUrl = e.newURL,
            newHash = newUrl.match(/#(w*)$/),
            env = this.hashFn[ newHash[1] ];
        
        env.fn.apply(env.ctx);
    };
}
Hash.prototype.bind = function(hash, fn, ctx = window) {
    this.hashFn[ hash ] = {
        fn,
        ctx
    }
}

hashFn用来存储对应hash值与其处理函数，随后通过监听hashchange事件，根据即将进入的hash值触发对应的处理函数。bind函数用于向hashFn中添加以hash为key值的处理函数和他的处理上下文，以供触发时使用。

var router = new Hash();
router.bind('a', function() {
    console.log('aaa');
});
router.bind('b', function() {
    console.log('bbb');
});
router.bind('c', function() {
    console.log('ccc');
});

利用new创建实例，并绑定好数据，此时点击页面上的链接就有反应了。demo可以查看：前端路由原理-hash。

二、h5 history

使用h5 history api创建路由时，相比hash没有了#号，美观了很多。但是history的兼容性并不是太好，需要ie10+以上才支持。

h5 histroy api常用的有以下几个：

history.go(n)，n为正数表示向前移动n个页面，负数亦然，n为0或为空时表示刷新当前页面。
history.forward()，相当于go(1)。
history.back()，相当于go(-1)。

h5中新增的：

history.pushState(data, title [, url])，向历史纪录中添加一条记录。
history.replaceState(data, title [, url])，更改当前的路由历史记录。
popstate事件，当历史记录发生改变时，就会触发该事件，即浏览器上的前进后退按钮事件和go()、forward()、back()事件，pushState和replaceState并不会触发该事件。

定义一个对象负责绑定事件和监听并触发事件，

var His = function() {
    this.eventFn = {};
    window.onpopstate = (e) => {
        this.eventTrigger(e.state)
    };
}
His.prototype.eventTrigger = function(state) {
    var name = state.name,
        env = this.eventFn[ name ];		
    env.fn.apply(env.ctx);
};
His.prototype.bind = function(name, fn, ctx = window) {
    this.eventFn[ name ] = {
        fn,
        ctx
    }
};

bind方法用于绑定要监听的事件和处理函数，eventTrigger用于触发bind绑定的函数。当浏览器获取到popstate事件时，就会根据触发对应的事件。创建个实例，绑定下事件，

var his = new His();
his.bind('a', function() {
    console.log('a');
});
his.bind('b', function() {
    console.log('b');
});
his.bind('c', function() {
    console.log('c');
});

增加html，增加触发的条件，

<button onclick="a()">a</button>
<button onclick="b()">b</button>
<button onclick="c()">b</button>
<p id="box">^!^</p>

function a() {
    history.pushState({
        name: 'a'
    }, 'a', location.href.split('?')[0] + '?name=a');
    his.eventTrigger({name: 'a'});
}

function b() {
    history.pushState({
        name: 'b'
    }, 'b', location.href.split('?')[0] + '?name=b');
    his.eventTrigger({name: 'b'});
}

function c() {
    history.pushState({
        name: 'c'
    }, 'c', location.href.split('?')[0] + '?name=c');
    his.eventTrigger({name: 'c'});
}

为啥要在最后加个his.eventTrigger()函数呢？因为前面也说了，pushState并不会触发popstate事件。

这样history路由就已经完成了。demo：前端路由原理-history。

powershell下安装带@的npm包报错问题

Wed, 06 Mar 2019 22:51:47 GMT

在自个win10的powershell下安装@material-ui/core时，一切都正常。但是在公司的win7电脑下用npm i安装时出现了报错，提示无法识别的标记。。。

一、问题

在powershell下，使用npm install安装带@的包都会提示出错，vs code下报错如下：

二、处理方法

使用cmd安装

powershell的@有其他的用法，所以改用cmd安装。

可以正常安装。

增加引号

如果执意要用powershell的话，可以给包名增加引号即可。

这样也是可以安装的。

React组件生命周期整理

Wed, 27 Feb 2019 20:16:32 GMT

React已经在新版本中引入了新的生命周期函数，还没有来得及去了解。前期项目中为了兼容ie8，也只是用了0.14版本的React。先来看下原先的生命周期函数。

一、生命周期

简单的流程图如下：

React 生命周期分为三种状态，初始化，更新和销毁。

初始化

getDefaultProps()

该方法用来设置组件默认的props，只适合React.createClass创建的组件，整个生命周期只会调用一次。ES6的class方法创建的需要使用以下方式：

class Component extends React.Component{
    static defaultProps = {};
}

getInitialState()

用于设置state的初始值，同样的用ES6方式创建的组件需要这样调用，

class Component extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            name: 'name1'
        }
    }
}

componentWillMount()

在组件首次渲染之前调用，整个生命周期只调用一次，此时可以修改state。

render()

创建虚拟dom，渲染页面。此时不能更改state了。

componentDidMount()

组件渲染之后调用，只调用一次，此时已经可以访问到真是的DOM。

更新状态

初始化后，当props或者state发生变化时，会触发以下方法，

componentWillReceiveProps(nextProps)

该方法只有在props改变时，才会触发。

shouldComponentUpdate(nextProps, nextState)

用于判断组件是否应该去更新，默认返回true。当返回false时，后面函数就不会调用，组件不会在次渲染。

当组件接受新的state或者props时调用，我们可以设置在此对比前后两个props和state是否相同，如果相同则返回false阻止更新，这样可以优化性能。

componentWillUpdata(nextProps, nextState)

组件更新前触发，表面组件即将更新。

render()

组件渲染。

componentDidUpdate(prevProps, prevState)

组件更新完成后触发，此时可以访问到更新后的DOM节点。

销毁

当组件销毁时，也会触发对应的函数。

componentWillUnmount()

组件被销毁是，此时该方法就会触发。如果组件中使用了非react提供的方法绑定，或则定时器等，需要在该方法内释放，以防止内存泄漏。

可以使用setState方法的函数

以下函数中，可以使用setState方法componentWillMount()、componentDidMount()、componentWillReceiveProps()和componentDidUpdate()。

二、新函数

在16.3版本中，新引入的两个生命周期函数 getDerivedStateFromProps()和getSnapshotBeforeUpdate()函数，并在将在未来版本中移除的三个生命周期函数 componentWillMount()，componentWillReceiveProps()和componentWillUpdate()，并在这些预淘汰的函数前增加了前缀UNSAFE，即UNSAFE_componentWillMount()，UNSAFE_componentWillReceiveProps()和UNSAFE_componentWillUpdate()方法。

为啥要改

原因是在后期的17版本中，将会推出新的Async Rendering渲染方式。在将来的17版本中，在dom真正render之前，React中的调度机制可能会不定期的去查看有没有更高优先级的任务，如果有，就打断当前的周期执行函数，直到高优先级任务完成，再回来重新执行之前被打断的周期函数。而可以被打断的阶段正是实际dom挂载之前的虚拟dom构建阶段，也就是要被去掉的三个生命周期。

新函数

getDerivedStateFromProps(nextProps, prevState)

触发时间：在组件构建之后(虚拟dom之后，实际dom挂载之前) ，以及每次获取新的props之后，该函数是static的。 16.4后有略微不同

getSnapshotBeforeUpdate(prevProps, prevState)

触发时间：update发生的时候，在render之后，在组件dom渲染之前。

关于这两者的触发时间，可以查看官网给的图：http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

npm ci命令

Mon, 25 Feb 2019 19:53:51 GMT

偶尔发现npm ci命令，使用下感觉比npm i快了许多，于是也来了解下该命令。

一、用途

npm ci和npm install命令一样，是用来安装依赖的命令，但他可以比常规的 npm 安装快得多，也比常规安装更严格，他可以npm依赖安装的一致和稳定 (锁版本)。

在package.json中，每次install后，对应的版本前都有个 ^ 符号。在这种情况下，你再次install时安装的包的版本可能与前次不一样，具体的，你可以到package-lock.json中查看实际的包版本。

^的匹配规则是：>= 当前版本，且保持从左至右的第一个非零版本。举例说明：

"^1.2.3": 大于等于 1.2.3 且小于 2.0.0版本
"^0.3.4": 大于等于 0.3.4 且小于 0.4.0版本
"^0.0.6": 大于等于 0.0.6 且小于 0.0.7版本

若我们一直使用install命令时，便会遇到开发和测试、发布时包版本不同的问题，这种细微的差别往往会导致严重的结局。

二、用法

在npm i(install)的地方改用npm ci，当然项目中必须有一个package-lock.json或npm-shrinkwrap.json。

注：npm版本要>=5.7。

三、区别

npm ci与npm i主要有以下的区别。

npm i依赖package.json，而npm ci依赖package-lock.json。
当package-lock.json中的依赖于package.json不一致时，npm ci退出但不会修改package-lock.json。
npm ci只可以一次性的安装整个项目依赖，但无法添加单个依赖项。
npm ci安装包之前，会删除掉node_modules文件夹，因此他不需要去校验已下载文件版本与控制版本的关系，也不用校验是否存在最新版本的库，所以下载的速度更快。
npm安装时，不会修改package.json与package-lock.json。

该命令在去年2月份就出了，居然现在才了解到，实在是忏愧。

基于node简单实现RSA加解密

Thu, 21 Feb 2019 22:00:57 GMT

因项目登录密码字段没有加密引起安全问题，琢磨了下如何基于RSA加密，进行前后端通信（Java项目）。空余时间，看了下在node下的实现。

一、准备

前端是利用jsencrypt.js去加密，后端利用node-rsa去生成公私钥并解密。

二、实现

我是使用koa2初始化的项目。首先，需要前端页面显示和处理加密数据，所以直接在views中新建了index.html，用html为了不在学习模板上花时间。修改index中的路由，

router.get('/', async (ctx, next) => {
    await ctx.render('index.html');
});

在html中引入jsencrypt.js，界面内容仅为一个输入框和发送命令的按钮：

<body>
    <input type="text" id="content"/>
    <button id="start">gogogog</button>
</body>
<script src="/javascripts/jsencrypt.js"></script>
<script>
document.getElementById('start').onclick = function() {
    // 获取公钥
    fetch('/publicKey').then(function(res){
        return res.text();
    }).then(function(publicKey) {
        // 设置公钥并加密
        var encrypt = new JSEncrypt();
        encrypt.setPublicKey(publicKey);
        var encrypted = encrypt.encrypt(document.getElementById('content').value);
        // 发送私钥去解密
        fetch('/decryption', {
            method: 'POST',
            body: JSON.stringify({value:encrypted})
        }).then(function(data) {
            return data.text();
        }).then(function(value) {
            console.log(value);
        });
    });
};
</script>

点击按钮，将输入框中的值先加密，再发送给服务器解密并打印该值。

前端用到了，publicKey和decryption接口，来看下服务端的实现。首先引入node-rsa包，并创建实例，再输出公私钥，其中，setOptions必须得加上，否者会有报错问题。

const NodeRSA = require('node-rsa');
const key = new NodeRSA({b: 1024});
// 查看 https://github.com/rzcoder/node-rsa/issues/91
key.setOptions({encryptionScheme: 'pkcs1'}); // 必须加上，加密方式问题。

publicKey(GET)，用于获取公钥，只需要调用下内置的方法就行了，

router.get('/publicKey', async (ctx, next) => {
    var publicDer = key.exportKey('public');
    var privateDer = key.exportKey('private');
    console.log('公钥:', publicDer);
    console.log('私钥:', privateDer);
    ctx.body = publicDer;
});

公钥传出给前端加密用，后端使用私钥解密，

router.post('/decryption', async (ctx, next) => {
    var keyValue = JSON.parse(ctx.request.body).value;
    const decrypted = key.decrypt(keyValue, 'utf8');
    console.log('decrypted: ', decrypted);
    ctx.body = decrypted;
});

解密时调用decrypt进行解密，前端控制台就能输出对应的值了。

三、demo详细代码

说这么多，直接查看代码最直观啦，详细代码查看：node实现rsa。

README有详细的介绍。

四、实际项目

在使用npm安装方式（vue或react）的项目中，可以这么使用：

npm i jsencrypt
// 实际使用
import { JSEncrypt } from 'jsencrypt';

项目地址可以查看：https://github.com/2fps/blooog。

js中的async与await

Sun, 17 Feb 2019 16:11:18 GMT

前期项目中用到了es7中的async和await，也来总结下自己的理解吧。

一、是什么

async表示异步，而await可以看作async wait。个人对async与await的简单理解就是，我们可以用同步的方式去书写异步代码。当然，这也都是基于promise的。

二、比对

提到异步，不得不提到promise，因此，我们来对比下两者写法的区别。

promise

一个很简单的例子，

new Promise(function(resolve, reject) {
    resolve(11);
}).then(function(data) {
    console.log(data);
}).then(function() {
    console.log('hiiii');
});

如果用await或者async该如何写呢？

await/async

function getA() {
    return new Promise(function(resolve) {
        resolve(11);
    });
}
function getB() {
    return new Promise(function(resolve) {
        resolve('hiiii');
    });
}
(async function () {
    let data = await getA(),
        dataB = await getB();
    console.log(data, dataB);
})();

乍一看，用async的改写后，代码量还上升了，但在实际调用的函数内部时，关系很明显，不像promise嵌套，不太容易看清。

三、简单使用

首先，async只能用于函数上，表明这是一个async函数，而await只能在被声明为async的函数内部使用。

还是刚才那个例子，当执行到 await getA()时，会先等待getA执行完成后，才会向下执行，而执行到await getB()时也是如此。

其他详细的可以查看：http://www.ruanyifeng.com/blog/2015/05/async.html。

基于material-ui + react + koa2 + mongoose的个人博客系统

Wed, 13 Feb 2019 22:45:00 GMT

最近一直想搞个自己写的博客系统，所以博客也没有时间去更新。

一、技术选型

想深入了解下React，所以先用React全家桶进行练手。UI库的话选择了个人比较喜欢的material-ui库，由于他没有全局提示组件，所以额外加了torstr。

后端方面，选择了node(koa2)与mongodb(mongoose)，这样不用花太多的时间去学习，重要的是本人对这些技术栈也有兴趣。

即，React、Redux、React-Router、material-ui、koa2和mongoose。

二、项目地址

项目github地址：https://github.com/2fps/blooog。

项目gitee地址：https://gitee.com/2fps/blooog。

具体的内容，可以在README中查看。

react中onFocus事件

Mon, 11 Feb 2019 20:31:25 GMT

飞快且简单的了解下react中的focus事件。

一、原生focus事件

在一些表单元素，甚至是div上，focus事件都是比较常用的。我们都知道focus事件是不会冒泡的，和他一堆的blur事件也是。

正是因为如此，新的一队聚焦和失焦事件就出现了，focusin和focusout，他和前者的唯一区别就是这两事件会冒泡，也就是他们能捕获子孙元素的聚焦和失焦事件。

二、react中的focus事件

用create-react-app脚手架生成项目，修改App.js中的代码，

class App extends Component {
    focusFn = (e) => {
        console.log(e.target.className);
    }
    render() {
        return (
            <div className="outer" tabIndex="-1" onFocus={this.focusFn}>
                <div className="middle" tabIndex="-1">
                    <div className="inner" tabIndex="-1"></div>
                </div>
            </div>
        );
    }
}

三个连环的div，用于方便的查看点击事件。至于如何让div上可以被聚焦(tabindex)，可以查看我的这篇文章：tabindex属性及特殊用法

为了清楚地看到各个div，增加些样式：

.outer {
    width: 150px;
    height: 150px;
    border: 1px solid #ccc;
}
.middle {
    width: 100px;
    height: 100px;
    border: 1px solid blue;
}
.inner {
    width: 50px;
    height: 50px;
    border: 1px solid red;
}

运行后点击不同的div框，focus事件都会生效，也就达到了focusin的冒泡效果。

三、总结

所以说，当要使用focusin时，我们无需用dom的方式去绑定，直接使用react原生的onFocus事件就行了，因为这个原生事件实际就是focusin。

详细的demo可以查看这：react中onFocus事件。

基于阿里云实现简单的语音识别功能

Fri, 18 Jan 2019 20:39:03 GMT

前面了解过纯js实现了录音功能，并也自学了一些关于前端二进制的内容，现在终于可以利用阿里云来实现下智能语音识别的功能了。

一、准备

首先，先登录阿里云官网查看下官方文档（一句话识别），提供了java，c++，ios等，可惜我只会些node啊，所以直接看下restful api，毕竟node也是可以发送http请求的嘛。

功能介绍中阐明了产品的功能，也说明了使用的一些条件，比如POST方式、不超过一分钟，当然重要的还是音频编码格式和音频采样率的限制。这儿我使用PCM格式，和16k的音频采样率。

回看我前面用js实现的录音文件，我们只需要使用他的encodePCM()接口就行了。

二、直接传递二进制

前端部分

html与js

简单的用两个按钮实现开始录音和结束录音，第三个按钮实现上传到服务器翻译的功能，最后页面上设置个div存放翻译的内容。

<input type="button" value="开启" onClick="startRecord()" />
<input type="button" value="停止" onClick="endRecord()" />
<input type="button" value="上传翻译" onClick="transRecord()" />
<div id="box"></div>

js部分的话，引入recorder.js文件（在纯js实现录音与播放里有）。全局定义了两个变量，一个是对div的引用和录音对象的引用。

var oDiv = document.getElementById('box'),
    recoder = null;

首先看下开始录音的函数，

function startRecord() {
    if (!recorder) {
        recorder = new Recorder({
            sampleRate: 16000       // 阿里云要求16000的采样率
        });
    }
    recorder.start();
}

停止比较简单，只需要调用对应的stop()接口就行了，

function endRecord (e) {
    recorder && recoder.stop();
}

将得到的blob数据放在formdata中，以post的方式发送给后端，content-type得设置成multipart/form-data。

function transRecord (e) {
    let pcm = recorder.getPCMBlob(),
        formdata = new FormData();
    formdata.append('file', pcm);

    fetch('/speech', {
        method: 'POST',
        credentials: 'include',
        headers: {
            'Content-Type': 'multipart/form-data'
        },
        body: formdata
    }).then(function(response) {
        console.log(response);
    });
}

后端node部分

简单模拟下后端的处理，此处用到了@alicloud/pop-core和request依赖。先引入需要使用的全局变量，

var http = require('http'),
    fs = require('fs'),
    ROAClient = require('@alicloud/pop-core').ROAClient,
    request = require('request');
http.createServer(function(req, res) {
    // .... do something
}).listen(8080);

监听好8080端口后，我们开始后台的逻辑吧，首先先处理下默认的index页面和recorder.js的加载问题，首先是处理index.html的请求：

if (req.url == '/' && req.method.toLowerCase() == 'get') {
    res.writeHead(200, {'content-type': 'text/html'});
    fs.readFile('index.html', function(err, data){
        if (err) {
            console.log('error');
        } else {
            res.end(data);
        }
    });
}

然后是recorder.js文件的处理，和html相同，

if (req.url == '/recorder.js' && req.method.toLowerCase() ==' get') {
    res.writeHead(200, {'content-type':'text/html'});
    fs.readFile('recorder.js',function(err,data){
        if (err) {
            console.log('error');
        } else {
            res.end(data);
        }
    });
}

静态页面都处理好了，下面要去处理语音请求了，

if (req.url == '/speech' && req.method.toLowerCase() == 'post') {
    // 缓存二进制数据
    var data = \[\];

    req.on('data', function(chunk) {
        data.push(chunk);
    }).on('end', function() {
        var buffer = Buffer.concat(data);

        // .... 继续去处理二进制数据
    });
}

此时，data中就保存了前端传来的二进制数据，只要将这个数据发送到阿里服务器上识别就行了。

token获取

由于官方文档上说到http请求头中的X-NLS-Token值是要额外去获取的，所以，先请求实现获取token令牌。

获取访问令牌中，直接看下node版的demo，是需要安装个@alicloud/pop-core依赖的，所以先用npm装好。再将其demo拷贝出来，由于请求需要access-key-id和access-key-secret，所以我们再去创建下应用。创建应用的话，官方操作手册可以查看：管理项目。将创建好的access-key-id和access-key-secret填入到对应的字段内。这个token是带超时的，应该有更好的保管方式而不是每次都是去请求。

var client = new ROAClient({
    accessKeyId:'LTAIeUTLr12sCAgM',
    accessKeySecret:'bHgMr4oLJjegKswB8Usy72zh87HHJI',
    endpoint:'http://nls-meta.cn-shanghai.aliyuncs.com',
    apiVersion:'2018-05-18'
});
client.request('POST', '/pop/2018-05-18/tokens').then((result) => {
    console.log('tokenId', result.Token.Id);
    // 获取到token后再去发送录音数据
    // ....
});

录音数据识别

还差最后一步发送录音文件到阿里就可以识别录音文件啦。查看官方文档，文档非常详细，我们需要设置3个（appkey、format、sample_rate）必选参数，并且http头中也要设置4个必填的参数。

组装好options等待赋值token值，

const options = {
    url: 'http://nls-gateway.cn-shanghai.aliyuncs.com/stream/v1/asr?appkey=UL9Xm7wmBiTa2YmW&sample_rate=16000&format=pcm',
    method: 'POST',
    headers: {
        'X-NLS-Token':'',
        'Content-Type': 'application/octet-stream',
        'Content-Length': dataBuffer.byteLength,
        'Host': 'nls-gateway.cn-shanghai.aliyuncs.com'
    },
    body: dataBuffer
};

修改刚才获取token的地方，将输入token的语句替换为：

options.headers\['X-NLS-Token'\] = result.Token.Id;

request(options, function(error, response, body) {
    if (error) {
        return console.error('upload failed:', error);
    }
    console.log('Upload successful!  Server responded with:', body);
    // 将检测的结果发送给客户端
    res.writeHead(200, {'Content-Type': 'application/json;charset=utf-8'});
    res.end(body);
});

这下就可以开始愉快地玩耍语音啦，后面有详细代码的地址。

三、转base64后发送

查询到二进制数据可以转成base64后，放在json中发送给后端。于是便尝试了一把。

前端部分

修改下transRecord函数，将blob转成base64格式，

function transRecord (e) {
    let pcm = recoder.encodePCM();
    
    blobToDataURL(pcm, function(base) {
        fetch("/speech", {
            method: "POST", 
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                data: base
            })
        }).then(function(response) {
            return response.json();
        }).then(function(data) {
            oDiv.innerText = data.data.result;
        });
    });
}
// blob转base64
function blobToDataURL(blob, callback) {
    let a = new FileReader();
    a.onload = function (e) {
        callback(e.target.result);
    }
    a.readAsDataURL(blob);
}

node部分

唯一不同地是接收数据，只需要将接受流文件地地方修改成取对象值地方式就行了，

var data = req.body,
    dataBuffer = newBuffer(data.data, 'base64');

当然这么做还会遇到一个问题，当录音时间稍微长些时，就会出现413错误。

网上也是有处理的方式，当然并不推荐这么处理，毕竟好好的数据可以直接发送给后端，还得编码一次，再让后端解码一次，实在时浪费性能。这么处理下，只是为了证明二进制可以编码成base64的字符串，并以json的格式发送给后端。

整个实例的话，可以查看基于阿里云实现简单的语音识别功能(node)。

在线demo地址：Recorder

四、总结

了解了前端如何向后端传递二进制数据。
二进制数据也可以被编码成base64格式放在json中传递。

png文件结构解析

Mon, 14 Jan 2019 22:05:09 GMT

一直在了解前端二进制，想找个简单的入手，于是就先从前面canvas生成的png开始吧，先开始了解png的结构吧。

一、准备

我用的时VS Code，提前下了hexdump for VSCode，该插件可以查看文件的二进制信息。

二、png结构解析

数据块结构

PNG图像格式文件由一个8字节的PNG文件署名域和按照特定结构组织的3个以上的数据块（chunk）组成。

数据块又分为两种类型，关键数据块和辅助数据块。关键数据块定义了4个标准数据块，每个PNG文件都必须包含它们。

数据块的4个域组成如下：

在同一张表下显示关键和辅助数据，其中带前下划线的是关键数据块，其他的是辅助数据块：

关键数据块的组成如下：

IHDR，文件头数据块，他描述了图像数据的基本信息，一个PNG数据流中只能有一个文件头数据块。

他的格式如下：

PLTE，调色板数据块，该数据块是定义图像的调色板信息，PLTE可以包含1~256个调色板信息，每一个调色板信息由3个字节组成。

IDAT，图像数据块，他存放着图像真正的数据信息，在数据流中可包含多个连续顺序的图像数据块。
IEND，图像结束数据，他描述了PNG文件或者数据流已经结束，并且必须要放在文件的尾部。

PNG格式有8位、24位、32位三种形式，其中8位PNG支持两种不同的透明形式（索引透明和alpha透明），24位PNG不支持透明，32位PNG在24位基础上增加了8位透明通道，因此可展现256级透明程度。

PNG8和PNG24后面的数字则是代表这种PNG格式最多可以索引和存储的颜色值。”8″代表2的8次方也就是256色，而24则代表2的24次方大概有1600多万色。

实例解析

看例子会比较更容易理解，在vs code中使用插件打开一张png图片，先看下头部区域，

89 50 4E 47 0D 0A 1A 0A，是png文件署名域，表示这是一个png图片。

00 00 00 0D，描述了IHDR的大小，十六进制的0D转成十进制就是13，所以在IHDR后13个字节是描述存储图像的基本信息的。对着前面的表格，我们就知道这是张60*60（3C*3C）的图，除了onload图片获取宽高，是不是又多了种方法了？紧接着后面的4个字节是对IHDR的CRC校验码，即B5 9E 4E 25。后面就是辅助数据块pHys数据块了。

在末尾的IEND关键数据块，最后的AE 42 60 82是他的CRC校验码。因为IEND数据块的长度总是0（00 00 00 00），数据标识总是IEND（49 45 4E 44），因此，CRC码也总是AE 42 60 82，除非我们自己添加了数据。

IDAT

60*60图太大了，简单起见，改用3*3的一张图。

按照块的定义，第一部分的4个字节是描述该块内容大小的，1f转成十进制是31，跳过4个字节的数据块名，被蓝色框选中的就是该png的数据内容，最后30 69 E4 17则是CRC校验码。由于这块数据采用了LZ77派生算法，所以不能直接看出对应的数据，后面也将研究下这块算法。

参考：

https://www.jianshu.com/p/4d8cace82028

https://blog.csdn.net/kk1751413376/article/details/50764653

https://blog.csdn.net/u012611878/article/details/52215985

https://www.cnblogs.com/en-heng/p/4992916.html

react-redux中使用connect方式，修改reducer中的数据，页面不会重新渲染

Sun, 13 Jan 2019 22:49:13 GMT

项目中用到了react0.14.8，用到了react-redux，也遇到了在reducer中修改值，页面补充下渲染的问题。

一、问题描述

用简单的数据来描述下问题现象，先来看下页面上props和state绑定的数据：

const mapStateToProps = (state) => {
    return {
        searchData: state.search.data
    }
};

reducer中，原来是这么修改数据的，

case searchActionType.GETSEARCHLIST:
    let oData = action.data;
    // ...
    // 直接对oData进行操作
    return Object.assign({}, state, {
        data: oData
    });

实际redux中的数据也是被改变了，但是页面上使用到data的地方并没有重新渲染。

二、问题处理

因为修改前后，state没有改变（数组引用），所以导致react-redux认为state没有改变，所以没有去渲染页面，所以我们可以将return这么修改：

return Object.assign({}, state, {
    data: [...oData]
});

这样就可以了。

在canvas中使用二进制

Thu, 10 Jan 2019 20:07:48 GMT

二进制在canvas画布中又有哪些应用呢？

一、准备工作

首先，我们需要在canvas上做个图，先简单的来。首先，我们先来创建个100*100，背景是黑色的canvas，

<canvas width="100" height="100" id="canvas"></canvas>

var oCanvas = document.getElementById('canvas');
var ctx = oCanvas.getContext('2d');
ctx.fillRect(0, 0, 100, 100);

二、获取某块的颜色值

canvas已经提供了一个可以获取图像的像素数据的接口，getImageData()方法，该方法返回一个ImageData 对象，该对象拷贝了画布指定矩形的像素数据。

比如我们获取左上角10px*10px的像素数据，

ctx.getImageData(0, 0, 10, 10);

data属性存放的是图像的像素信息，他从图像的左上角依次向右并换行的方式，列出了rgba的十进制值，所以10 * 10 * 4(个)=400，此data长度才是400，当然这儿的a与css中的rgba中的a不同，此处颜色值都是从0-255的。

height和width则是图像的宽高像素值。

三、整张转化blob

此处使用到了canvas的toBolb()方法和fileReader。

语法

canvas.toBlob(callback, type, encoderOptions);

callback，回调函数，可获得一个单独的Blob对象参数。
type，可选参数，指定图片格式，默认格式为image/png。
encoderOptions，可选参数，值在0与1之间，当请求图片格式为image/jpeg或者image/webp时用来指定图片展示质量。如果这个参数的值不在指定类型与范围之内，则使用默认值，其余参数将被忽略。
无返回值

我们将整张图片转化下，

canvas.toBlob(function(blob) {
    var reader = new FileReader();
    // blob转Uint8Array
    reader.onload = function (e) {
        var buf = new Uint8Array(this.result);
        console.info(buf);  // 转化后的数据
    }
    reader.readAsArrayBuffer(blob);
});

此时就得到整个图片的二进制数据了，如果后端需要前端传二进制数据，那么可以直接发送数据了。

四、直接保存成图片

这个以前也写过了，再来一次。此功能主要是用到了canvas的toDataURL方法，具体用法可以查看http://www.zhuyuntao.cn/2017/03/10/canvas保存图片到本地/或者MDN的toDataURL。

fetch学习与使用

Wed, 09 Jan 2019 21:32:42 GMT

现今前后端分离的开发，前后端的数据交互是十分重要的，我们常会用XMLHttpRequest方式或者其他基于该方式的库与服务器进行数据交互，但有没有想过使用fetch方式去与服务端进行交互呢？公司新项目使用了前后端分离，在选择前后端交互时选择了fetch，所以也用了fetch一小撮时间了，来简单说下fetch。

一、基本用法和参数

fetch是基于 Promise 设计的，使用起来会比传统的xhr方式更舒畅，并且可以和比如es7中的async/await友好使用。

用法

fetch的使用十分的简洁，

fetch('url').then((response) => response.json())
.then(data => console.log(data))
.catch(e => console.log("Oops, error", e))

参数

fetch的第二个参数是个options对象，存放了fetch请求的一些配置，比如

method

请求方式，可以是get，post，put等，默认是get，所以get请求时，可以考虑不设置此参数。

headers

请求头，默认为{}，表单请求时，就需要设置'Content-Type': 'application/x-www-form-urlencoded'，当然他的body数据就得是"a=1&b=2&c=3"这种方式的数据了。

较常用的还有"Content-Type": "application/json"这种格式，他的body则是JSON.stringify({a:1,b:{c:2,d:3}})这种json串了。

body

请求时，要带的数据。

credentials

是否带cookie，默认为omit，也就是不带cookie。还有两个参数，same-origin，意思就是同源请求带cookie，include，表示无论跨域还是同源请求都会带cookie。

二、遇到的问题

内置方法较少

虽然fetch算是底层方法，但是还是缺少一些常用xhr有的方法，比如能够取消请求（abort）方法，而且我们常常会对fetch做些封装。

错误处理

fetch在服务器返回4xx、5xx时是不会抛出错误的，这里通过response中的ok字段和status字段来判断，并触发对应的操作。比如：

function checkStatus(response) {
    if (response.status >= 200 && response.status < 300) {
        return response;
    }
    // http状态下如400、500等不会reject
    const error = new Error(response.statusText);
    error.response = response;

    throw error;
}

数据类型处理

对于不同的数据需要调用不同的方法，比如我们获取的是json数据，调用json()方法就行了，

function parseJSON(response) {
    if (response.status === 204 || response.status === 205) {
        return null;
    }
    return response.json(); //fetch
}

但对于blob数据的话，就得调用blob()方法。还有text()，arrayBuffer()，formData()等方法。

三、兼容性

在使用新技术的时候，兼容性是不得不关注的一个点。我们首先来看下他的兼容性：

兼容性很不好，特别是ie。为了兼容ie，我们需要使用到这些库或依赖， Promise 的 polyfill: es6-promise，fetch 探测库：fetch-detector，fetch 的 polyfill: fetch-ie8，如果你还使用了 jsonp，需要引入 fetch-jsonp。

兼容好ie后，还有个问题就是在ie8,9上不能跨域，需要启动个http代理。

参考：

https://www.cnblogs.com/libin-1/p/6853677.html https://segmentfault.com/a/1190000003810652

react14.8 dom泄漏问题

Mon, 07 Jan 2019 20:47:48 GMT

dom泄漏的问题也是遇到很多了，所以在写代码时也会特别注意下，特别是写组件的时候，不过在项目中实际测试了下，发现居然有dom泄漏。。。

一、问题

需要实现如下的一个悬浮提示(popover)的插件，至于为啥手动实现，很多理由，先不说了。。

简单的逻辑讲下，鼠标悬浮到附件图标上时，创建Popover组件，移开后，remove掉这个组件。

用chrome的控制台内存对比查看了下分离的dom节点：

发现了好多未释放的dom节点。

二、处理方法

我们是用ReactDOM.render渲染的，需要用到ReactDOM.unmountComponentAtNode(DOM)方法，该方法会销毁指定容器内的所有React节点。当然，该方法只能销毁ReactDOM.render(...) 产生的React节点。

destoryPopover = () => {
    if (oDiv) {
        // 删除该节点
        document.body.removeChild(oDiv);
        oDiv = null;
        // 卸载组件
        ReactDOM.unmountComponentAtNode(oDiv);
    }
}

这样，就没有泄漏啦。

测试还发现，用了ReactDOM.unmountComponentAtNode()方法后，removeChild()都不需要了。

webpack上遇到的问题总结

Tue, 01 Jan 2019 22:45:16 GMT

最近一直用webpack打包react工程，总结下目前这段时间使用webpack遇到的问题。

一、sass公共文件

webpack下使用了sass预编译，并且设置了一个存放公共变量的文件，比如common.sass，然后其他组件下的sass文件需要引用他，加入我们直接在组件下的sass文件使用公共文件中的变量，则会有报错出现，比如：

这是因为sass-loader的编译环境的问题，我们需要安装个sass-resources-loader依赖，

npm install sass-resources-loader --save-dev

并在webpack配置中增加对该依赖的使用，需要将sass-resources-loader放在第一步，

test: /\.(scss|sass)$/,
use: [
    //...... 其他插件
    {
        loader: 'sass-resources-loader',
        options: {
            resources: path.resolve(__dirname, '../src/scss/common.scss')
        }
    }
]

其中resources指定了公共的sass文件，这样其他文件就可以使用公共的变量了。

二、控制台下出现很多warning

新写组件run start后，浏览器控制台下出现了很多warning，大概报错如下：

./node_modules/React/lib/AutoFocusUtils.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.

实际发现是在import react时，写成了大写，

import React, { Component } from 'React';

将React改成react就行了。

electron实现最小化到托盘

Thu, 27 Dec 2018 22:26:11 GMT

当我们在无边框下使用关闭按钮时，我们可能并不是想关闭应用，而只想他最小化在托盘中，随时等待唤醒，还好，electron依旧给我们提供了这个功能。

一、主进程

主进程中监听窗口关闭事件，在这，我们需要使用到electron的menu模块来创建菜单以及tray托盘模块。

const electron = require('electron');
const Menu = electron.Menu;
const Tray = electron.Tray;

当托盘最小化后，右击时是有个菜单显示的，此处仅创建一个含有退出的菜单，

let trayMenuTemplate = [{//系统托盘图标目录
    label:'退出',
    click: function () {
        app.quit();
    }
}];

下面我们创建托盘实例，并且给实例增加上一些属性和菜单，

let iconPath = path.join(__dirname, 'app.png');
appTray = new Tray(iconPath);
const contextMenu = Menu.buildFromTemplate(trayMenuTemplate);
// 设置托盘悬浮提示
appTray.setToolTip('never forget');
// 设置托盘菜单
appTray.setContextMenu(contextMenu);

当我们左键托盘时，是需要显示应用的，所以再增加个点击事件就完工啦。

appTray.on('click', function(){
    // 显示主程序
    mainWindow.show();
    // 关闭托盘显示
    appTray.destroy();
});

附上托盘的整个代码。

const electron = require('electron');
let appTray = null;   // 引用放外部，防止被当垃圾回收

// 隐藏主窗口，并创建托盘，绑定关闭事件
function setTray () {
    // 用一个 Tray 来表示一个图标,这个图标处于正在运行的系统的通知区
    //  ，通常被添加到一个 context menu 上.
    const Menu = electron.Menu;
    const Tray = electron.Tray;
    // 系统托盘右键菜单
    let trayMenuTemplate = [{     // 系统托盘图标目录
        label: '退出',
        click: function () {
            app.quit();
        }
    }];
    // 当前目录下的app.ico图标
    let iconPath = path.join(__dirname, 'app.png');
    appTray = newTray(iconPath);
    // 图标的上下文菜单
    const contextMenu = Menu.buildFromTemplate(trayMenuTemplate);
    // 隐藏主窗口
    mainWindow.hide();
    // 设置托盘悬浮提示
    appTray.setToolTip('never forget');
    // 设置托盘菜单
    appTray.setContextMenu(contextMenu);
    // 单击托盘小图标显示应用
    appTray.on('click', function(){
        // 显示主程序
        mainWindow.show();
        // 关闭托盘显示
        appTray.destroy();
    });
};

electron无边框窗口实现最大最小化与关闭

Sat, 22 Dec 2018 13:55:43 GMT

自己玩electron有一会了，慢慢开始整理些看上去有些用的小知识点吧。electron的无边框应该是经常用到的，那么在无边框下最大化最小化与关闭就应该是比较常用的了。该功能electron已经为我们提供了，只需要增加方式去调用就行了。

一、render进程

该功能主要是通过ipcRenderer模块来实现的，render进程中：

const ipc = require('electron').ipcRenderer;
// 关闭app
closeApp() {
    ipc.send('close-app');
}
// 最小化app
minApp() {
    ipc.send('min-app');
}
// 最大化app
maxApp() {
    ipc.send('max-app');
}

三个函数分别绑定右上角的三个按钮，最小化的，最大化和窗口关闭的按钮。

二、主进程

主进程中，则添加好监听就行了，

const electron = require('electron');
const ipc = electron.ipcMain;

ipc.on('close-app', () => {
    // 通知关闭
    mainWindow.close();
});
ipc.on('max-app', () => {
    if (mainWindow.isMaximized()) {
        // 若已经是最大化了，则还原
        mainWindow.unmaximize()
    } else {
        // 最大化窗口
        mainWindow.maximize()
    }
});
ipc.on('min-app', () => {
    // 最小化
    mainWindow.minimize();
});

通过事件与事件监听的方式实现了该功能。

前端二进制学习（三）

Thu, 20 Dec 2018 23:02:31 GMT

继续学习前端上有关二进制的知识，这篇我们了解学习下ArrayBuffer对象，TypedArray和DataView视图。

一、ArrayBuffer

ArrayBuffer表示二进制数据的原始缓冲区，用于存储不同类型化数组的数据。我们无法直接读取或写入 ArrayBuffers，但是可以根据需要将其传递到类型化数组（TypedArray）或 DataView视图来操作二进制数据。

用法

arrayBuffer = new ArrayBuffer(length);

参数

length，缓冲区的长度，每个字节的值默认都是0。如果无法分配请求数目的字节，则将引发异常。

属性与方法

ArrayBuffer.prototype.byteLength

该属性是只读属性，用于获取到ArrayBuffer实例的长度（以字节为单位）。

如果分配的内存较大，可能会分配失败，所以可以通过校验长度来判断是否分配成功，

if (arrayBuffer.byteLength === length) {
    // 分配成功
} else {
    // 分配失败
}

ArrayBuffer.prototype.slice()

将内存区域的一部分，拷贝生成一个新的ArrayBuffer对象，与blob的slice方式类似。

var buffer = new ArrayBuffer(4);
var newBuffer = buffer.slice(0, 2);

拷贝buffer对象的前2个字节（从0开始，到第2个字节前结束），生成一个新的ArrayBuffer实例。slice方法包含了两步，第一步是先分配一段新的内存，第二步是将原来那个ArrayBuffer对象拷贝过去。

与字符串的slice类似，第二个参数不填，默认到buffer对象的尾部。

除了slice方法，ArrayBuffer对象不提供任何直接读写内存的方法，只允许在其上方建立视图，然后通过视图进行读写。

ArrayBuffer.isView()

ArrayBuffer的静态方法，返回一个布尔值。表示参数是否为ArrayBuffer的视图实例，即是否为TypedArray或DataView实例。

var buffer = new ArrayBuffer(8);
ArrayBuffer.isView(buffer) // false

var i32 = new Int32Array(buffer);
ArrayBuffer.isView(i32) // true

兼容性

其中，ie10下是不支持Uint8ClampedArray类型的。

二、TypedArray

ArrayBuffer对象作为内存区域，可以存放多种类型的数据。同一段内存，不同数据有不同的解读方式，这就叫做“视图”（view）。ArrayBuffer有两种视图，一种是 TypedArray视图，另一种是DataView视图。前者的数组成员都是同一种数据类型，后者的数组成员可以是不同种的数据类型。

TypedArray视图共有9种类型，每一种视图都是一种构造函数。

Int8Array，8位有符号整型，长度1个字节。
Uint8Array，8位无符号整型，长度1个字节。
Uint8ClampedArray，8位无符号整型，长度1个字节，溢出取极值。
Int16Array，16位有符号整型，长度2个字节。
Uint16Array，16位无符号整型，长度2个字节。
Int32Array，32位有符号整型，长度4个字节。
Uint32Array，32位无符号整型，长度4个字节。
Float32Array，32位浮点型，长度4个字节。
Float64Array，64位浮点型，长度8个字节。

这几个构造函数生成的实例，类似于数组，也都是有length属性（注意与byteLength区分），都能用取下标的方式（[]）获取单个数据，所有数组的方法（无contact方法），都能使用。普通数组与TypedArray数组的差异主要在以下方面。

TypedArray数组中所有成员，都是同一种类型的。
TypedArray数组的成员是连续的，不会有空位。
TypedArray数组成员的默认值为0。比如，new Array(10)返回一个普通数组，里面没有任何成员，只是10个空位；new Uint8Array(10)返回一个TypedArray数组，里面10个成员都是0。
TypedArray数组只是一层视图，本身不储存数据，它的数据都储存在底层的ArrayBuffer对象之中，要获取底层对象必须使用buffer属性（prototype）。

TypedArray构造函数

这九种构造函数，可以生产不同类型的数据实例。

TypedArray(buffer, byteOffset, length)

三个参数是：

第一个参数（必需）：视图对应的底层ArrayBuffer对象。
第二个参数（可选）：视图开始的字节序号，默认从0开始。
第三个参数（可选）：视图包含的数据个数，默认直到本段内存区域结束。

注：byteOffset必须与所要建立的数据类型一致，否则会报错。同一个TypedArray中，可以建立多个不同的数据视图。

// 创建一个8字节的ArrayBuffer
var b = new ArrayBuffer(8);
// 创建一个指向b的Int32视图，开始于字节0，直到缓冲区的末尾 
var v1 = new Int32Array(b); 
// 创建一个指向b的Uint8视图，开始于字节2，直到缓冲区的末尾 
var v2 = new Uint8Array(b, 2); 
// 创建一个指向b的Int16视图，开始于字节2，长度为2 
var v3 = new Int16Array(b, 2, 2);

TypedArray(length)

还可以通过直接new 构造函数的方式直接使用，

var fa64 = new Float64Array(8);
fa64[0] = 10;
fa64[1] = 20;
fa64[2] = fa64[0] + fa64[1];

TypedArray(typedArray)

参数也可以是其他typedArray，

var typedArray = new Int8Array(new Uint8Array(4));

注意，此时生成的新数组，只是复制了参数数组的值，对应的底层内存是不一样的。新数组会开辟一段新的内存储存数据，不会在原数组的内存之上建立视图。

var x = new Int8Array([1, 1]);
var y = new Int8Array(x);
x[0] // 1
y[0] // 1

x[0] = 2;
y[0] // 1

如果想基于同一段内存，构造不同的视图，可以采用下面的写法。

var x = new Int8Array([1, 1]);
var y = new Int8Array(x.buffer);
x[0] // 1
y[0] // 1

x[0] = 2;
y[0] // 2

TypedArray(arrayLikeObject)

构造函数的参数也可以是一个普通数组，

var typedArray = new Uint8Array([1, 2, 3, 4]);

TypedArray数组也可以转换回普通数组。

var normalArray = Array.prototype.slice.call(typedArray);

BYTES_PER_ELEMENT属性

每一种视图的构造函数，都有一个BYTES_PER_ELEMENT属性，表示这种数据类型占据的字节数。

Int8Array.BYTES_PER_ELEMENT // 1 
Uint8Array.BYTES_PER_ELEMENT // 1 
Int16Array.BYTES_PER_ELEMENT // 2 
Uint16Array.BYTES_PER_ELEMENT // 2 
Int32Array.BYTES_PER_ELEMENT // 4 
Uint32Array.BYTES_PER_ELEMENT // 4 
Float32Array.BYTES_PER_ELEMENT // 4 
Float64Array.BYTES_PER_ELEMENT // 8

这个属性在TypedArray实例上也能获取，即有TypedArray.prototype.BYTES_PER_ELEMENT。

TypedArray原型属性

TypedArray.prototype.buffer

前面我们也用到了，返回整段内存区域对应的ArrayBuffer对象。该属性为只读属性。

var a = new Float32Array(64);
var b = new Uint8Array(a.buffer);

a视图对象和b视图对象，对应同一个ArrayBuffer对象，即同一段内存。

TypedArray.prototype.length

length属性表示TypedArray数组含有多少个成员。注意将byteLength属性和length属性区分，前者是字节长度，后者是成员长度。

var a = new Int16Array(8);

a.length // 8
a.byteLength // 16

TypedArray.prototype.byteLength，TypedArray.prototype.byteOffset

byteLength属性返回TypedArray数组占据的内存长度，单位为字节。byteOffset属性返回TypedArray数组从底层ArrayBuffer对象的哪个字节开始。这两个属性都是只读属性。

var b = new ArrayBuffer(8);

var v1 = new Int32Array(b);
var v2 = new Uint8Array(b, 2);
var v3 = new Int16Array(b, 2, 2);

v1.byteLength // 8
v2.byteLength // 6
v3.byteLength // 4

v1.byteOffset // 0
v2.byteOffset // 2
v3.byteOffset // 2

TypedArray.prototype.set()

TypedArray数组的set方法用于复制数组（普通数组或TypedArray数组），也就是将一段内容完全复制到另一段内存。set方法还可以接受第二个参数，表示从b对象的哪一个成员开始复制a对象。

var a = new Uint16Array(8);
var b = new Uint16Array(10);

b.set(a, 2)

它是整段内存的复制，比一个个拷贝成员的那种复制快得多。

TypedArray.prototype.subarray()

subarray方法是对于TypedArray数组的一部分，再建立一个新的视图。

var a = new Uint16Array(8);
var b = a.subarray(2,3);

a.byteLength // 16
b.byteLength // 2

TypedArray.prototype.slice()

类似于数组的slice方法，可以返回一个指定位置的新的TypedArray实例。

let ui8 = Uint8Array.of(0, 1, 2);
ui8.slice(-1)
// Uint8Array [ 2 ]

slice方法可以从当前视图之中，返回一个新的视图实例。

TypedArray.of()

该方法用于将参数转为一个TypedArray实例。

TypedArray.from()

静态方法from接受一个可遍历的数据结构（比如数组）作为参数，返回一个基于这个结构的TypedArray实例。

溢出问题

9中类型中有一种特殊的Uint8ClampedArray类型，凡是发生正向溢出，该值一律等于当前数据类型的最大值，即255；如果发生负向溢出，该值一律等于当前数据类型的最小值，即0。

var uint8c = new Uint8ClampedArray(1);

uint8c[0] = 256;
uint8c[0] // 255

uint8c[0] = -1;
uint8c[0] // 0

而另外的其他类型，都会出现溢出情况，

var int8 = new Int8Array(1);

int8[0] = 128;
int8[0] // -128

int8[0] = -129;
int8[0] // 127

ArrayBuffer与字符串的互相转换

// ArrayBuffer转为字符串，参数为ArrayBuffer对象 
function ab2str(buf) { 
    return String.fromCharCode.apply(null, new Uint16Array(buf)); 
} 
// 字符串转为ArrayBuffer对象，参数为字符串 
function str2ab(str) { 
    var buf = new ArrayBuffer(str.length * 2); // 每个字符占用2个字节 
    var bufView = new Uint16Array(buf); 
    for (var i = 0, strLen = str.length; i < strLen; i++) { 
        bufView[i] = str.charCodeAt(i); 
    } 
    return buf; 
}

三、复合视图

由于视图的构造函数可以指定起始位置和长度，所以在同一段内存之中，可以依次存放不同类型的数据，这叫做“复合视图”。

var buffer = new ArrayBuffer(24); 
var idView = new Uint32Array(buffer, 0, 1); 
var usernameView = new Uint8Array(buffer, 4, 16); 
var amountDueView = new Float32Array(buffer, 20, 1);

上面代码将一个24字节长度的ArrayBuffer对象，分成三个部分，字节0到字节3是1个32位无符号整数，字节4到字节19是16个8位整数，字节20到字节23是1个32位浮点数。

DataView视图

如果一段数据包括多种类型（比如服务器传来的HTTP数据），这时除了建立ArrayBuffer对象的复合视图以外，还可以通过DataView视图进行操作。 DataView视图本身也是构造函数，接受一个ArrayBuffer对象作为参数，生成视图。

DataView(ArrayBuffer buffer [, 字节起始位置 [, 长度]]);

var buffer = new ArrayBuffer(24);
var dv = new DataView(buffer);

DataView实例有以下属性，含义与TypedArray实例的同名方法相同。

DataView.prototype.buffer：返回对应的ArrayBuffer对象
DataView.prototype.byteLength：返回占据的内存字节长度
DataView.prototype.byteOffset：返回当前视图从对应的ArrayBuffer对象的哪个字节开始

DataView实例提供8个方法读取内存。

getInt8：读取1个字节，返回一个8位整数。
getUint8：读取1个字节，返回一个无符号的8位整数。
getInt16：读取2个字节，返回一个16位整数。
getUint16：读取2个字节，返回一个无符号的16位整数。
getInt32：读取4个字节，返回一个32位整数。
getUint32：读取4个字节，返回一个无符号的32位整数。
getFloat32：读取4个字节，返回一个32位浮点数。
getFloat64：读取8个字节，返回一个64位浮点数。

这一系列get方法的参数都是一个字节序号（不能是负数，否则会报错），表示从哪个字节开始读取。

var buffer = new ArrayBuffer(24); 

var dv = new DataView(buffer); 
// 从第1个字节读取一个8位无符号整数 
var v1 = dv.getUint8(0); 
// 从第2个字节读取一个16位无符号整数 
var v2 = dv.getUint16(1); 
// 从第4个字节读取一个16位无符号整数 
var v3 = dv.getUint16(3);

如果一次读取两个或两个以上字节，就必须明确数据的存储方式，到底是小端字节序还是大端字节序。默认情况下，DataView的get方法使用大端字节序解读数据，如果需要使用小端字节序解读，必须在get方法的第二个参数指定true。

// 小端字节序
var v1 = dv.getUint16(1, true);

// 大端字节序
var v2 = dv.getUint16(3, false);

// 大端字节序
var v3 = dv.getUint16(3);

DataView视图提供8个方法写入内存。

setInt8：写入1个字节的8位整数。
setUint8：写入1个字节的8位无符号整数。
setInt16：写入2个字节的16位整数。
setUint16：写入2个字节的16位无符号整数。
setInt32：写入4个字节的32位整数。
setUint32：写入4个字节的32位无符号整数。
setFloat32：写入4个字节的32位浮点数。
setFloat64：写入8个字节的64位浮点数。

这一系列set方法，接受两个参数，第一个参数是字节序号，表示从哪个字节开始写入，第二个参数为写入的数据。对于那些写入两个或两个以上字节的方法，需要指定第三个参数，false或者undefined表示使用大端字节序写入，true表示使用小端字节序写入。

// 在第1个字节，以大端字节序写入值为25的32位整数 
dv.setInt32(0, 25, false); 

// 在第5个字节，以大端字节序写入值为25的32位整数 
dv.setInt32(4, 25); 

// 在第9个字节，以小端字节序写入值为2.5的32位浮点数 
dv.setFloat32(8, 2.5, true);

如果不确定正在使用的计算机的字节序，可以采用下面的判断方式。

var littleEndian = (function() { 
    var buffer = new ArrayBuffer(2); 
    new DataView(buffer).setInt16(0, 256, true); 
        return new Int16Array(buffer)[0] === 256; 
})();

如果返回true，就是小端字节序；如果返回false，就是大端字节序。

webpack打包图片以及异常处理

Sat, 15 Dec 2018 22:11:59 GMT

看完了打包css，看下如何打包图片文件呢。常用到图片的地方有元素背景图和img标签，先看下背景图片。

一、打包图片

打包图片时，需要用到url-loader，先使用npm安装下，

npm install url-loader --save-dev

在配置中增加以下规则，

test: /\.(jpg|png|gif|svg)$/,
exclude: /node_modules/,
use: [{
    loader:'url-loader'
}]

打包完成后，并没有生成对应的图片，在css文件中，见到了base64格式的图片，那也就是打包时，将图片打成了base64格式。其实有个limit参数可以控制多大的文件就不打包成base64，毕竟图片转成base64后，大小是比原来大的。修改loader,

loader: 'url-loader?limit=8192'

当图片小于8192字节时，就用base64，否则直接打包成图片，此时又需要用到另外一个loader，

npm install file-loader --save-dev

再次打包大文件时，就有对应的图片生成了。

二、img打包后图片丢失

背景图打包ok了，再来尝试用img标签引入图片，发现出问题了，图片丢失了，页面上也显示了加载图片失败的图标。

丢失的原因是，webpack无法识别这些路径，导致没有处理这些文件。所以我们使用require让webpack识别这些图片资源，修改src引用图片的写法：

<img src="${require('./public/image/111.png')}" />

当然，在有es6语法支持的情况下，我们可以借助模板字符串，

let img = require('./public/image/111.png');
let imgHtml = `<img src="${img}"/>`

这样也是可行的。

webpack打包样式成独立文件

Sat, 15 Dec 2018 20:37:33 GMT

用惯了脚手架，想自己学习下webpack方面的知识，于是便动手了。

一、打包css文件

首先安装依赖，css-loader是用来加载css文件，style-loader是用<style></style>标签将样式引入页面的，要注意顺序，必须先css-loader再style-loader。

npm install css-loader style-loader --save-dev

安装完成后，在webpack.config.js中的rules下增加规则：

test: /\.css$/,
exclude: /node_modules/, // 排除node\_modules文件夹
use: [{
    loader:"style-loader"
}, {
    loader:"css-loader"
}]

运行下npm run build（webpack --mode production），可以发现样式在浏览器中生效了。

二、打包less

打包less的话，要比打包css多一个less转css的过程，依旧先安装依赖，less-loader是加载less文件的，而less是编译less到css的工具，loader的调用顺序也是要注意的啊。

npm install less-loader less --save-dev

再配置下webpack，

test: /\.less$/,
exclude: /node_modules/,
use: [{
    loader:"style-loader"
}, {
    loader:"css-loader"
}, {
    loader:"less-loader"
}]

三、打包sass

打包sass需要两个依赖，分别是node-sass与sass-loader，前者是编译sass到css的工具，后者是加载sass的loader。

npm install node-sass sass-loader --save-dev

增加配置：

test: /\.sass|scss$/,
exclude: /node_modules/,
use: [{
    loader:"style-loader"
}, {
    loader:"css-loader"
}, {
    loader:"sass-loader"
}]

四、单独成文件

webpack打包后并没有生成对应的css文件，而是将css文件打包在了js中，假如我们需要单独生成对应的css文件该怎么办？

我们需要用到mini-css-extract-plugin这个插件，

npm install mini-css-extract-plugin --save-dev

在loader中增加该loader，以css为例，

test: /\.css$/,
exclude: /node_modules/,
use: [{
    loader:MiniCssExtractPlugin.loader
}, {
    loader:"style-loader"
}, {
    loader:"css-loader"
}]

不过run build后，会有报错，报错大概是ERROR in ./src/css/red.css Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ReferenceError: window is not defined，

不过细想，mini-css-extract-plugin是将css打包成独立的文件，而style-loader是将css以<style>标签的方式插入样式，是不是彼此存在冲突。

于是删除style-loader，发现可以正常打包，而且能生成单独的css文件了。

即：

test: /\.css$/,
exclude: /node_modules/,
use: [{
    loader:MiniCssExtractPlugin.loader
}, {
    loader: "css-loader"
}]

当然mini-css-extract-plugin插件的功能可不止这个，详细的可以查看mini-css-extract-plugin插件。

git常用命令整理

Tue, 11 Dec 2018 21:23:11 GMT

用了git这么多了，把常用的一些命令做些记录。

代码提交

提交到暂存区

git add fileName

提交到本地仓库

git commit -m '此处填写提交日志'

提交到远程仓库

以提交到master仓库为例，

git push origin master

撤销提交

仅修改，未add

git checkout -- fileName

如果想要放弃所有的文件修改，可以使用 git checkout . 命令。

此命令用来放弃掉所有还没有加入到缓存区（ git add 命令）的修改。但是此命令不会删除掉刚新建的文件。因为新建的文件还没有加入到 git 的管理系统中，对于git来说是未知的，所以无法删除。

已add，未commit

git reset HEAD fileName

放弃所以的add文件，可以使用 git reset HEAD . 命令。

此命令是用来清除 git对于文件修改的缓存。相当于撤销 git add 命令所添加的文件。在使用此命令后，本地的修改并不会消失，只是清除了缓存区的状态，需要继续用git checkout -- fileName来放弃本地的修改。

已commit

git reset --hard HEAD^ 该命令用来回退到上一次commit的状态。当要回退到任意版本时，可以使用git reset --hard commitid 命令。commitid的话，可以通过git log命令来查看。commitid的话，不需要输入全部的值，输个差不多前四五位就行了。

分支管理

创建分支

git branch branchName

git branch 查看所有本地的分支，带*表示当前工作区位于哪个分支。

切换分支

git checkout branchName

创建并切换到新建的分支

git checkout -b branchName

把dev分支的修改内容合并到当前分支

git merge dev

查看远程仓库的分支情况

git branch -r

将新分支发布到远程分支上

git push origin newBranchName

如果省略远程分支名，则表示将本地分支推送到与之存在"追踪关系"的远程分支（通常同名），如果该远程分支不存在，则会被新建。当然也可像下面这种方式一样写明本地与远程的分支名。

git push origin <本地分支名>:<远程分支名>

拉取远程分支并创建本地分支

checkout方式

git checkout -b 本地分支名 origin/远程分支名

这种方式新建的本地分支会和远程分支建立起映射关系。

fetch方式

git fetch origin 远程分支名:本地分支名

采用此种方法建立的本地分支不会和远程分支建立映射关系。

删除一个远程分支

git push origin :branchName (分支名前的冒号代表删除)

重命名本地分支

git branch -m | -M oldBranchName newBranchName

如果newbranch名字分支已经存在，则需要使用-M强制重命名，否则，使用-m进行重命名。

删除本地分支

git branch -d | -D branchName

-D用来强制删除本地仓库中的分支。

删除远程分支

git branch -d -r branchName

代码更新

pull方式更新代码

git pull origin <远程分支名>:<本地分支名>

比如更新master分支的代码，只要这样就行了，git pull origin master 如果远程分支(next)要与某个分支合并，可以再冒号后面加上该分支名：

git pull origin next:master

若是合并到当前分支，可以省略冒号后的本地分支名，

git pull origin next

fetch与merge方式

git fetch origin master
查看fetch后的代码的区别：git diff origin/master
git merge origin/master

先用fetch拉取远程仓库中的代码，然后可用diff查看异同，最后用merge合并。

两者区别

git pull相当于git fetch加git merge.

冲突处理

当多个人同时修改同一个文件时，很容易出现冲突问题：

首先，先将服务器代码拉下来，然后手动修改冲突的地方，再add并commit，最后push到远程仓库去。命令的话就是这样，

git pull origin master
手动修改重提的部分
git add fileName
git commit -m '内容'
git push origin master

总结

常用的先整理到这，最后，给个不错的学习git的网址：https://learngitbranching.js.org/。

innerText值多空格的问题

Sun, 09 Dec 2018 00:37:06 GMT

在获取元素中的innerText值时，某些时候会多出个空格。

一、现象

问题是这样的，我要获取一个td元素中的值（我使用的是innerText），如下，

<td>
    123
</td>

在IE下获取到的是‘123 ’，在最新的Edge下也是这个结果。

同样的，其他标签元素这么写也是多出空格的，如：

<span>11 </span>

##二、解决方法

解决方法很多的了，比如，

不留空，不换行。

像这样就行了，

<span>11</span>

获取后，调用trim。

使用的时候，我们只要去下前后空格就行了。

不过为何前部没有多出空格这就不清楚了。。。

详细demo查看：github。

前端二进制学习（二）

Wed, 05 Dec 2018 22:56:20 GMT

紧接着前端二进制学习（一），继续学习前端中有关二进制的接口。

一、base64编解码接口

当用到base64编解码时，通常我们会引入第三方的库，其实高版本的浏览器已经内置了这两个接口了。

window.atob()：base64解码，ASCII转base64编码。 window.btoa()：base64转码，base64转ASCII，参数是一个字符串, 其字符分别表示要编码为 ASCII 的二进制数据的单个字节。因为有限制，所以无法转化中文。

此时需要将中文转化掉，想到了浏览器提供的另外几个方法，是不是可以使用window.encodeURIComponent和window.decodeURIComponent配合使用呢？

了解下兼容性，IE9居然还不行。

二、FileReader

在前端二进制学习（一）中blob转base64时，就用到了FileReader这个函数，我们来了解下。

看下MDN文档的解释：FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

File和Blob前面我们已经讲过了，现在配合使用FileReader来操作数据。我们通过构造函数初始化一个FileReader对象：

var reader = new FileReader();

FileReader事件函数

在控制台中，我们看下这些事件：

onabort()，中断时触发。
onerror()，出错时触发。
onload()，文件读取成功完成时触发。
onloadend()，读取完成触发，无论成功或失败。
onloadstart()，读取开始时触发。
onprogress()，读取中触发。

那我们又是如何取读取文件呢？再看下FileReader上的构造函数，

这四个用于读取文件的，

readAsArrayBuffer()，将文件读取为ArrayBuffer。
readASBinaryString()，将文件读取为二进制编码。
readAsDataURL()，将文件读取为DataURL。
readAsText()，将文件读取为文本。

还有个用于中断文件读取的接口：

abort()，中断读取。

我们换一种方式读取图片并显示到网页上（前面我们使用createObjectURL方法）：

<input type="file" name="" id="file" />

<img src="" id="img"/>

document.getElementById('file').onchange = function(e) {
    if (!this.files.length) {
        return;
    }
    var oImage = document.getElementById('img');
    var reader = newFileReader();
    
    reader.readAsDataURL(this.files[0]);
    reader.onload = function (e) 
        oImage.src = e.target.result; // base64的数据结果
    }
}

这样同样可以将本地图片读到web上显示。和前面说到的blobToDataURL的方法相似。

FileReader的兼容性：

接下来去学习下arraybuffer等其他知识：二进制学习(三)。

element-ui dom.js和repeat-click.js文件源码学习

Mon, 03 Dec 2018 22:36:54 GMT

继续看element-ui中input-number组件，先看下该组件用到的repeat-click.js文件和dom.js文件。 repeat-click.js中引用了dom.js文件，先看下dom.js文件。

一、dom.js

看到这个文件名字，就应该能猜到该文件处理的是和dom有关的操作。

trim()方法

利用正则匹配掉字符串的前后空格，利用||的特性做了容错处理。

camelCase()方法

用于将css的属性名转成驼峰型的属性名，比如-webkit-box-sizing则转成了webkitBoxSizing，第一个replace的回调函数中的return就是做了这个处理的，正好通过数字0转成false，其他数字则是true的原理。第二个replace则是匹配第一个repalce的结果，当有出现moz开头的，转化成Moz，做特殊处理。

on()方法

是不是第一想到jQuery中的绑定方法的on方法，实际上这儿的用途也是这样。简化on方法，大体是这样：

const on = (return function() {})();

on方法整体是一个自执行函数的结果，这样on方法只要在第一次时去计算if和else中的内容，得到对应的处理函数，而以后调用on时，只需直接使用引用就行了。这是惰性函数的用法，有兴趣的可以自行去了解下。

看下对应的内容，

if (!isServer && document.addEventListener) {
// ...
} else {
}

刨去isServer，再加上个on+‘事件名’，就是典型的事件绑定的兼容方法了。

off()方法

与on方法是相对的，是用于解绑定的。结构与实现和on方法相反。

once()方法

功能类似于jQuery的one()事件绑定。

内部实际仍是用on()方法实现，不同的只是，当使用者传入的fn被调用后，会主动掉下off()解除绑定，所以该方法只会触发函数一次。

hasClass()方法

第一个if则是做参数的错误检测。

if (cls.indexOf(' ') !== -1) throw new Error('className should not contain space.');

第二个 if 特别判断了下空格字符串，因为后面要利用空格字符串与字符串的组合来查找，所以提前过滤了，当然这也说明，次方法只支持检测单个className了。

第三个if，当支持classList的，则直接获取一个集合，利用数组的contain方法，直接判断。若不支持，则直接取className并用indexof去判断。匹配方法是，给两匹配数据增加前后空格，这样防止要判断的cls字符串被包含在el.className中一个样式名中，比如cls是'aaa'，而className是'aaabb haha'这两个样式名，这种匹配上的情况就会避免了。

当然此处也可以将el.className split成数组通过indexOf来判断，即el.className.split(' ').indexOf(cls) 。

addClass()方法

给指定元素增加class样式。将要增加的样式以空格分隔成数组，循环处理其中的每一项，当支持classList时，则直接调用其增加样式的方法add()，不支持则判断原className中是否有要添加的属性名，无则先添加到临时存储的变量之中。

最后才将curClass赋值给className，因为className是字符串，是基本类型，一开始只是赋值，现在又重新赋值回去，个人猜这样的好处是，一次直接增加所有的样式，即使有重复的样式属性，也只用渲染一次，而如果在else if 中，则每次for循环都会有渲染。

removeClass()方法

用于删除el元素的指定样式，与addClass一样，支持批量多个className

结构和实现基本一致，只有在不支持classList时，利用正则replace了需要删除的属性，不得不说这也是种不错的方法，一般只会想到先split成数组，再用splice方法去删除。

最后trim后，再赋值给className。前面的方法是不是在jQuery中都有？后面的这两个方法其实也有，不过在jQuery中是css()这个方法。

getStyle()方法

首先是对ie版本判断与兼容，不过vue都是支持IE9+的，9以下的还用处理么？

当时IE9一下的版本时，首先是参数的兼容，并使用camelCase()方法转化属性名，并特殊处理下float这个属性名，需要转化成styleFloat，这块或getStyle的实现可以看我的这篇文章：原生js操作css样式。获取对应属性值时，对opacity属性做了兼容处理的，低版本的ie使用滤镜实现opacity的。

return (element.style[styleName] || element.currentStyle ? element.currentStyle[styleName] : null);

正常的属性都是通过currentStyle或取的，异常的则还是从style中获取。

w3c标准与低版本ie不同的则是，w3c是从getComputedStyle返回结果中获取的，只是w3c下float是cssFloat，需要小兼容下。

setStyle()方法

由于currentStyle和getComputedStyle都是只读结果，所以要修改属性还是得用style属性。该方法支持单个的属性设置，也支持批量的如对象键值对的方式修改，和jQuery中的css()方法设置一样。

当我们传入的是对象时，利用for in循环来批量设置，并用hasOwnProperty()方法保证是该对象的自有属性，知道遍历到非object时，用else去逐个设置属性，除了ie9一下对opacity做下特殊处理，其他都直接赋值给style就行了。

带注释的文件下载：dom.js。

二、repeat-click.js

该文件是用来处理长按鼠标时的函数触发的，他用到了dom.js文件中的on和once方法，返回的是一个bind函数。

看下bind函数中，用on()方法实现绑定的部分，

on(el, 'mousedown', (e) => {

他利用on()方法给el元素绑定mousedown事件，

if (e.button !== 0) return;

第一个if则是限制只允许鼠标左键才有效，并记录了点击的开始时间，又用once绑定了mouseup事件，并使用setInterval每0.1秒触发一次handler，也就是当用户mousedown后，一直有个定时器在不停的触发处理函数。

对应的mouseup的回调时怎么处理的呢？他并非只有简单的clearInterval，

if (new Date() - startTime < 100) {
    handler();
}

这个if则是处理当用户只是简单的点击时的问题，因为简单点击肯定不会超过0.1s的，所以需要特殊处理下。

有注释的文件下载：repeat-click.js。

node(express)实现文件的下载

Thu, 29 Nov 2018 20:15:59 GMT

每次都在使用a标签的download属性来下载文件，突然想，如果要借助服务端又如何主动请求文件的下载呢？

一、纯前端方式

只要给对了路径，就可以完全脱离后端，使用a标签的download属性下载。

二、服务端配合

这儿使用express来做服务端，用express不用node主要是因为省去路由配置的问题，只关注于下载方面。

app.get('/test', (req, res) => {
    res.set({
        "Content-Type":"application/octet-stream", //告诉浏览器这是一个二进制文件
        "Content-Disposition":"attachment; filename=1.txt"//告诉浏览器这是一个需要下载的文件
    });
    fs.createReadStream('./public/file/test.txt').pipe(res);
});

输入http://127.0.0.1:端口/test就可以下载了。

vue组件通信方式

Tue, 27 Nov 2018 21:38:15 GMT

模块化，组件化在前端框架中已经是很常见的玩意了，所以了解组件、模块之间的通信那就很重要了。组件通信方式的话，有父与子，兄弟之间，祖先与子等方式。这儿主要以父子关系取阐述这些通信机制。

一、props方式

父--->子

父组件传props给子组件

<son :what="name" :hello="world" :callback="thing"></son>

设置了传递的值的内容，name为一个对象，hello为字符串。

data() {
    return {
        name: {
            a: 1,
            b: 2
        },
        world: '123',
        thing: function() {
            console.log(arguments)
        }
    }
}

子组件中

props: {
    what: {
        type: Object,
        default: {}
    },
    hello: {
        type: String,
        default: '456'
    },
    callback: {
        type: Function,
        default: function() {}
    }
}

props类似于传参的方式传给子组件，子组件中就可直接使用this去访问和使用。

子--->父

直接修改引用类型的数据。

前面例子中，father组件传给了son组件一个对象，son组件内可以直接修改传入的对象，由于引用关系，father内的组件值也会改变，此时我们只需要在father设置一个监听就行了。

// 监听传给子组件的值
watch: {
    name: {
        handler(nV, oV) {
            console.log(nV);
        },
        deep: true
    }
}

father组件就能实时获取son组件对传入值操作的情况了

传入函数方式

前面的例子中，father组件向son组件传了thing这个方法，而在son组件中可以通过调用这个方法向father组件传递数据。

mounted() {
    // 定时模拟用户操作了啥后
    setTimeout(() => {
        this.callback(1, 2, 3);
    }, 2000);
}

而在father组件中定义callback的地方就可以拿到这几个参数啦。

注意：我们直接修改father传给son的非引用类型的值时，是不成功的，而且vue会提示错误。

二、$attrs与$listeners

假如有父、子、孙三层组件，父要向孙通过props的方式传递数据，按照第一种方式的话得父调子时写一层，子调孙时再写一层，很繁琐且读起来很不便捷。所以vue在2.4版本中增加了$attrs和$listeners来处理这个问题。$attrs使得属性能够穿过中间组件，而$listeners是处理绑定事件的。父组件中，在先前的例子上加了个函数，data的内容不去改变。

<son :what="name" :hello="world" :callback="thing" @show="showMe"></son>

methods: {
    showMe(a) {
        console.log('I am father', a);
    }
}

在son组件中，只使用hello这个变量值，其他的数据都要给grandchild组件。

<grandchild v-bind="$attrs" v-on="$listeners"></grandchild>

export default {
    components: {
        grandchild
    },
    props: ['hello']
};

son组件中只接收了hello，剩余的属性将通过$attrs传递给了grandchild组件。而$listeners也将绑定在son上的事件传了下去。在grandchild中，我们打印通过props传过来的属性的内容，并emit祖父级组件上的事件，

export default {
    created () {
        console.log(this.$attrs);
        this.$emit('show', 'yes');
    }
};

此时控制台的打印：

注：inheritAttrs配合使用，表示组件是否把未被注册的props呈现为普通的HTML属性。

三、$on与$emit

该方式，严格说只有子组件向父组件通信。父组件中：

<son @what="show"></son>

methods: {
    show() {
        console.log(arguments);
    }
}

子组件中通过$emit去调用父组件中的方法，

mounted() {
    // 定时模拟用户操作了啥后
    setTimeout(() => {
        this.$emit('what', 1, 2)
    }, 1000);
}

这种方式是不是比props方式中直接传函数更“和谐”些呢？

四、Bus方式

在外部定义一个总的js文件用于处理组件之间的通信，该方法不止是父子组件之间的通信，只要引用该文件，任何两个组件之间都是可以进行消息传递的（父子，兄弟等等）。

该种通信下，其实没有父子关系，只有监听与触发的关系，为了方便理解，还是使用父与子。新建一个bus.js文件，编辑该文件为：

import Vue from 'vue';
export default new Vue;

father和son组件中都增加对bus.js文件的引用

import Bus from './bus.js';

father组件在创建之后，使用$on增加事件的监听，

created() {
    Bus.$on('nice', (a, b) => {
        console.log(a, b);
    });
}

son组件在mount后触发对应的nice事件：

mounted() {
    Bus.$emit('nice', {
        name: 111
    }, 123);
}

此时父组件中就能获取到对应的参数了。当然反过来，子组件$on，父组件$emit，就成了父组件向子组件通信的方式了。

五、inject与provide

父组件中使用provide来提供变量，在子组件中通过inject来注入变量。不论子组件有多深，只要调用了inject那么就可以注入provide中的数据。该方式只要在父组件的生命周期内，子组件都可以注入。

父组件中

<son></son>

provide: {
    name: 'demo'
}

子组件中对应的inject该变量就行了，当然为了安全起见，可以给他设定默认值。

inject: {
    name: {
        default: '1234567890'
    }
}
// inject: ['name'] // 简写方式

在element-ui中的form等表单组件时，用的还是比较多的。为了简单，仍然用父子来代替多层级的关系。

六、$parent和$children

vue2中没有了broadcast和dispatch这种通信方式，但是通过对$parent和$children的处理，我们仍可以模拟这种方式，例如在element-ui库中，作为混入的emitter.js文件中，就用此实现了事件的触发机制。

详细的内容可以查看：element-ui emitter.js文件源码学习。

七、$ref

被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的$refs对象上。如果在普通的DOM元素上使用，那么指向的就是普通的DOM元素。

通过直接取到对应的组件来获取对应的值。比如在子组件中简单的变量，

data() {
    return {
        name: 'aaa'
    };
}

在父组件中，只要取到对应的ref就可以获得子组件下所有的属性，

<son ref="son"></son>

mounted() {
    console.log(this.$refs.son.name);
}

控制台上就可以获取到对应的属性了。

八、vuex

vue的状态管理工具，不详细说了，网上有很多的教程，而且我研究的也不深入。

九、本地存储

cookie，storage，indexedDB等一些用于前端本地存储的也是可以用来给组件之间交互的。

十、总结

我们来总结下，非vue的方式有使用本都存储的方式，而以上所有的方式都可以用于父子组件之间的通信。父到孙组件的话，有$attrs和$listeners，bus方式，inject和provide，vuex。

兄弟直接可以使用bus方式和vuex或者先传给父组件，再广播（利用$parent和$children查找也可以）。

bus方式可以在任何关系的组件中使用，不适用vuex的简单项目中可以选取，而项目复杂的可以上vuex进行管理。

element-ui input组件源码学习

Sun, 25 Nov 2018 16:57:14 GMT

学习了很多input组件的前置内容，下面就要开始学习下input组件了。

一、html部分

input部分

整个组件是在一个大的div之中的，看下这个div下的几个属性，

:class="[
type === 'textarea' ? 'el-textarea' : 'el-input',
inputSize ? 'el-input--' + inputSize : '',
{
'is-disabled': inputDisabled,
'el-input-group': $slots.prepend || $slots.append,
'el-input-group--append': $slots.append,
'el-input-group--prepend': $slots.prepend,
'el-input--prefix': $slots.prefix || prefixIcon,
'el-input--suffix': $slots.suffix || suffixIcon || clearable
}
]"
@mouseenter="hovering = true"
@mouseleave="hovering = false"

type表示当前是textarea或input，他们对应了不同的样式属性，inputSize则决定了当前组件的大小，对象那个之中，is-disabled决定了当前组件是否是disabled状态，剩下五个属性都是用于修改样式，配合显示头部与尾部组件的。

再加mouseenter和mouseleave事件，用于修改表示鼠标是否再input上方的变量。（这两个事件是不冒泡的）

往内部是一个template，用于当是input时，显示内部的元素。此处使用template可以减少一层元素嵌套，我们都知道template在渲染到dom中时，是没有这层元素的。

在往内层，有个样式是el-input-group__prepend的div，该元素表示了组件的前置内容，如

当然也可以和官网上一样，放select元素。

随后是input元素，直接能看懂的简单属性就不说了，看下几个特殊的属性吧。

v-bind="$attrs"

该属性是用于将父辈组件传入的未使用的参数继续传给子组件。而js中的inheritAttrs属性是配合一起使用的，表示是否不会把未被注册的props呈现为普通的HTML属性。

composition*事件

input上有关composition的事件可以查看我的另一篇文章：js复合事件。

接着是一个span元素，放置用于显示输入框内前部内容的元素。name="prefix"的槽元素是放置了显示文字，i元素则是防止prefix-icon为class的icon图标。该元素用绝对定位移动到输入框前防，而input则设置左padding，让文字和图标不重合。后面是用于显示再输入框中内部后方的元素块。先看下类是el-input__suffix-inner的span元素，name="suffix"的槽元素用于显示输入框内后部的文字，而i是icon的显示。如：

而包含el-input__clear的类名i元素与尾部的元素只能优先显示一种，当我们在输入内容的时候，就会显示这个清空输入框的查查按钮。而随后的i元素则是配合表单验证时，检测输入验证错误提示的。

input组件最后一个div元素，用于显示该组件的后置图标，如：

官网上也提供了增加button的方式。

textarea部分

与input部分基本一致，不多说了。

二、JS部分

emitter的可以看这篇：element-ui-emitter-js文件源码学习。

migrating的可以看这篇：element-ui focus.js和migrating.js文件源码学习。

calcTextareaHeight的可以看这篇：element-ui calcTextareaHeight.js文件源码学习。

merge和shared的可以看这篇：element-ui merge.js和shared.js文件源码学习。

直接看export的对象，

name

名称

componentName

组件名称

mixins

混入emite事件和migrating。

inheritAttrs

前面也讲到了，和$attrs一起使用，用来表示是否不会把未被注册的props呈现为普通的HTML属性，使得这些属性可以被子组件继承。

inject

注入elForm和elFormItem对象，配合form一起使用，防止对象为空，报错。

data()

currentValue

currentValue表示当前组件的value值，其中用三目运算符，用于处理一些异常值。内部的一个仅用于保存当前值的变量。

textareaCalcStyle

用于存放textarea计算style样式。

hovering

鼠标是否悬浮在组件上方。

focused

组件是否已经聚焦。

isOnComposition

是否正在修改中。

valueBeforeComposition

使用输入法时，记录修改前的值。

props

value

初始时传入的值。

size

输入框尺寸，非textarea时生效。

resize

控制是否能被用户缩放。

form

留着，没看出有啥用。。

disabled

组件是否禁用。

readonly

组件是否只读，原生属性。

type

input的类型（可能是textarea）。

autosize

自适应内容高度，当是 textarea 时，可传入对象，如{ minRows: 2, maxRows: 6 }，表示textarea可拖动的最大最小范围。

autocomplete

原生属性，自动补全。

autoComplete

原生属性，自动补全，但此属性要被替换，用 autocomplete 代替他。

validateEvent

输入时是否触发表单的校验。

suffixIcon

输入框头部图标。

prefixIcon

输入框尾部图标。

label

输入框关联的label文字。

clearable

是否可清空。

tabindex

输入框的tabindex，原生属性。

computed

_elFormItemSize()

fromitem大小。

validateState()

组件的当前状态，可以修改icon的样式。

needStatusIcon()

是否要显示状态的图标。

validateIcon()

输入验证，错误的图标样式。

textareaStyle()

合并textarea的style样式，并显示。

inputSize()

input组件的大小，优先级本生 > formitem。

inputDisabled()

input组件是否是disabled状态。

showClear()

是否显示清空输入框的叉叉按钮，判断条件比较多，首先要支持显示，不是只读和禁用状态，当前值不能是空的,并且当前已经聚焦或者处于鼠标悬浮状态。

watch

value(val, oldValue)

监听value变化，触发修改currentvalue。

methods

focus()

聚焦表单输入元素。

blur()

表单输入元素失焦。

getMigratingConfig()

提示迁移的属性。

handleBlur(event)

元素失焦处理函数，

// 重置状态
this.focused = false;
// 触发实例上的blur事件
this.$emit('blur', event);

select()

选中对应的输入元素，会触发元素上的focus事件。

(this.$refs.input || this.$refs.textarea).select();

利用ref选取元素，并选中该元素。

resizeTextarea()

重新刷新 textarea ，重新计算样式。

if (this.$isServer) return;
if (type !== 'textarea') return;

服务器渲染或非textarea时，不去计算。

当不设置autosize时，则直接使用calcTextareaHeight，否则传入minRows与maxRows计算。

handleFocus(event)

focus时的处理函数。

// 重置状态
this.focused = true;
// 触发实例上的focus事件
this.$emit('focus', event);

handleComposition(event)

当输入法结束后，进行变量的处理，并取触发input修改。

// 输入法结束，重装composition状态
this.isOnComposition = false;
// 保存currentValue
this.currentValue = this.valueBeforeComposition;
this.valueBeforeComposition = null;
// 触发input修改
this.handleInput(event);

其他状态时，获取最后一个字符，这儿对korean字体做了特别判断，korean的坑先留着。当时start时，先保留先前的变量。

if (this.isOnComposition && event.type === 'compositionstart') {
    // 刚开始输入时，提前保存输入法启动前的值
    this.valueBeforeComposition = text;
}

handleInput(event)

先看下该函数的调用时刻，修改value值，直接的键盘输入（非输入法），会直接触发 handleInput 函数，如果是输入法输入，将会在composition**之后才触发 handleInput 函数。

const value = event.target.value;
this.setCurrentValue(value);
// 正在修改输入法时，不去处理
if (this.isOnComposition) return;
// 修改组件的model值
this.$emit('input', value);

handleChange(event)

用于触发实例的change事件。

setCurrentValue(value)

首先，编辑中并且当前值与修改值没有变化（输入法输入后，没确认，又删除了），不做处理。随后将value赋值给currentValue，正在编辑中的也不做处理。此处使用了$nextTick做处理，

// 第一次由handleInput函数调入，此时value值（model）未修改，所以使用了nextTick处理
// 第二次进入是因为watch了value的变化，此时value与currentValue相同，会触发后面的dispatch
this.$nextTick(this.resizeTextarea);

calcIconOffset(place)

用于计算图标的偏移量。一上来使用slice方法，并用call将nodeList转成正常的数组。空数组不做处理。

// 过滤无效的，看了，似乎没啥用，因为elList选出的元素的parentNode都是组件本身
for (let i = 0; i < elList.length; i++) {
    if (elList[i].parentNode === this.$el) {
        el = elList[i];
        break;
    }
}

随后使用translate设置图标的位置，

if (this.$slots[pendant]) {
    // 当存在输入框外部的前后元素时，需要计算输入框内图标与文字的位置，并用translate动画加以移动开
    // 个人感觉在这是不是可以重新计算下输入框的右padding值，使得输入框内的文字不会与输入内容重合
    el.style.transform = `translateX(${place === 'suffix' ? '-' : ''}${this.$el.querySelector(`.el-input-group__${pendant}`).offsetWidth}px)`;
} else {
    // 删除增加过的style样式
    el.removeAttribute('style');
}

updateIconOffset()

更新图标偏移量，计算prefix和suffix图标。

clear()

点击输入框内的清空按钮触发。

// 设置组件value值为空
this.$emit('input', '');
// 触发实例上的change事件
this.$emit('change', '');
// 触发实例上的clear事件
this.$emit('clear');
// 清空输入框中的值，置为空字符串
this.setCurrentValue('');
this.focus();

created()

// 绑定inputSelect事件
this.$on('inputSelect', this.select);

mounted()

挂载成功后处理函数，resize了textarea和计算了icon的位置。

updated()

每次组件值有更新时，触发icon更新。代码地址：input.vue。

JS复合事件

Thu, 22 Nov 2018 21:02:07 GMT

看到了element-ui库中的input组件，发现了compositionstart、compositionupdate和compositionend三个事件。代码中并没有直接调用的入口，原来这是DOM3级中的复合事件（特地看了下红皮书，书上是有的......）。

一、简介

复合事件是DOM3级事件中新添加的一类事件，用于处理IME的输入序列。IME（Input Method Editor，输入法编辑器）可以让用户输入在物理键盘上找不到的字符。复合事件有三种：compositionstart、compositionupdate和compositionend。他比其他文本事件多了个data属性，可以得到输入值。

浏览器兼容方面，需要IE9+的支持。我们可以通过hasFeature准确的判断浏览器是否支持。

document.implementation.hasFeature("CompositionEvent", "3.0");

二、对比

我们将这三个事件和常用的三个输入事件keydown、keypress和keyup来做比较。

<input id="ipt" type="text" />

document.getElementById('ipt').onkeydown = function() {
    console.log('keydown');
}
document.getElementById('ipt').onkeypress = function() {
    console.log('keypress');
}
document.getElementById('ipt').onkeyup = function() {
    console.log('keyup');
}
document.getElementById('ipt').addEventListener('compositionstart', function(e) {
    console.log('compositionstart', e.data);
});
document.getElementById('ipt').addEventListener('compositionupdate', function(e) {
    console.log('compositionupdate', e.data);
});
document.getElementById('ipt').addEventListener('compositionend', function(e) {
    console.log('compositionend', e.data);
});

在切换到中文输入法后，输入'你'的拼音ni，控制台打印如下：

显示键盘的keydown事件，随即触发了compostionstart方法，表示输入法开启使用了。当有新的值输入时，会触发对应的update事件，但是没有触发keypress事件，连续输入时，值时keydown，compositionupdate，keyup的连续触发。

当我们用空格键确认时，控制台打印如下：

先触发了composition相关的方法才触发keydown。使用较快的速度打你好的拼音'nihao'，并用空格确定。控制台打印如下：

composition与key系列事件似乎并没有按序触发，但是拆分开来看。

单看composition，先由start，再到update，最后end以及值的状态，都是正确的。 key的事件则是keydown到keyup，分别对应，不过始终没有触发keypress。

js生成excel并导出

Wed, 21 Nov 2018 20:35:33 GMT

项目经理偶然和我说到是否能用纯js实现下载excel文件，特研究一下。

一、原生JS生成并下载excel

直接上代码：

// 要导出的数据
var testData = [{
    aa: '测试1',
    bb: '123456789'
}];
// 列标题
var str = '<tr><td>目的</td><td>啥玩意？</td></tr>';
// 循环遍历，每行加入tr标签，每个单元格加td标签
for (let i = 0, len = testData.length; i < len; ++i){
    str += '<tr>';
    for (let item in testData[i]){
        // 增加\t为了不让表格显示科学计数法或者其他格式
        str += `<td>${ testData[i][item] + '\t'}</td>`;
    }
    str += '</tr>';
}

解析json，将对应的数据解析到table中每行每列中去，很类似于表格dom的字符串拼接。如果是dom中加表格，我们直接append到对应的dom就行了。那excel的xml又是何种形式的呢？

// Worksheet名
var worksheet = 'Sheet1';
var uri = 'data:application/vnd.ms-excel;base64,';

// 下载的表格模板数据
var template = `<html xmlns:o="urn:schemas-microsoft-com:office:office"
    xmlns:x="urn:schemas-microsoft-com:office:excel"
    xmlns="http://www.w3.org/TR/REC-html40">
    <head><meta charset='utf-8' /><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
    <x:Name>${worksheet}</x:Name>
    <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
    </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
    </head><body><table>${str}</table></body></html>`;
// 转base64
var url = href = uri + window.btoa(unescape(encodeURIComponent(template)));
// 下载模板
downloadExcel(url, 'test.xls');

按照规则组合模板数据，将最后的数据转成base64格式的。最后一步，利用a标签下载对应的excel，

function downloadExcel(url, name) {
    // 利用a标签的download属性进行下载
    var link = document.createElement("a");

    // 设置a标签的属性
    link.href = url;
    link.download = name || 'work.xls';

    // 加入dom树中，模拟用户点击并下载
    document.body.appendChild(link);
    link.click();

    // 移除该元素，防泄漏
    document.body.removeChild(link);
}

我用2010打开对应的excel，提示以下错误，

直接点击是就行了。

注：实际不是真正的生成了excel文件，而是生成了符合excel规范的xml文本（类似于table），然后被下载保存为*.xls的。

如何生成真正的excel，暂且我还不知道怎么处理。

excel是二进制文件，或许可以使用blob相关的去处理，先留个坑，后面摸索下。

整个文件：excelxml.html。

二、原生JS导出CSV并下载

csv是一种纯文本的文件，用js写的话不成问题，而excel又是支持打开csv文件的。

var testData = [{
    aa: '测试1',
    bb: '123456789'
}];
//列标题，逗号隔开，每一个逗号就是隔开一个单元格
var str = `姓名,电话,邮箱\n`;
//增加\t为了不让表格显示科学计数法或者其他格式
for (var i = 0, len = testData.length; i < len; ++i) {
    for (var item in testData[i]) {
        str += `${testData[i][item] + '\t'},`;
    }
    str += '\n';
}

按照格式拼装好字符串，组好数据后，就可以下载了，

var url = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
// 下载模板
downloadCSV(url, 'test.csv');

下载的话与excel无两样，只有导出名称注意下。整个文件：csv.html。

三、其他组件库

js-xlsx库，详细地址：https://github.com/SheetJS/js-xlsx/。

对应也有详细的demo可以查看，该库可以导出很多中数据格式的文件。

参考： https://blog.csdn.net/hhzzcc_/article/details/80419396

http://demo.haoji.me/2017/02/08-js-xlsx/

ubuntu上搭建steam饥荒专用联机服务器

Tue, 20 Nov 2018 21:41:23 GMT

在南京，花了65块网费和小伙伴们玩了局域网的饥荒（可以吹一年了），甚是好玩。不过俺回杭州了，想用互联网继续玩耍，迫于每次玩都需主机在线的问题，特研究如何让我吃灰的，剩余不到两个月的主机发挥最后的余热。

硬件环境

我的ecs是1核1G内存1M带宽的。官网对于建立一个稳定的独立服务器必须又以下硬件要求：带宽8KB/玩家/秒，内存约65MB/玩家，cpu没有明确的要求。

环境准备

dpkg --add-architecture i386 # 添加i386的构建器
apt-get update # 更新 apt-get
apt-get install -y lib32gcc1 lib32stdc++6 libcurl4-gnutls-dev:i386 screen # 安装32位依赖库

安装 steamCMD 和 DST

下载 steamCMD

cd ~
mkdir steamcmd # 在 /root 下创建 steamcmd/ 文件夹
cd steamcmd # 进入 sreamcmd/ 文件夹
wget http://media.steampowered.com/installer/steamcmd_linux.tar.gz
tar -xvzf steamcmd_linux.tar.gz
rm steamcmd_linux.tar.gz

运行 steamcmd

./steamcmd.sh

运行 steamcmd 之后，命令提示符会变成 Steam>，这时进入了 steamcmd 的命令交互界面。现在使用 steamCMD 安装 DST

login anonymous # 以匿名身份登录
force_install_dir ../dstserver # 在下建立文件夹安装 DST 服务器
app_update 343050 validate # 安装 DST，成功后会出现 Success! App '343050' fully installed.
quit # 完成后退出

cd ~/dstserver/bin
./dontstarve_dedicated_server_nullrenderer # 这个命令会出现错误，但会帮助我们生成配置文件

服务器配置

cd ~/.klei/DoNotStarveTogether/Cluster_1/ # 进入生成配置文件的 Cluster_1/ 文件夹
touch cluster_token.txt cluster.ini # 创建几个需要的配置文件

必须拥有steam饥荒联机帐号才能架设线上独立服务器，所以我们需要通过自己的饥荒联机版客户端生成 Authentication Token。

打开饥荒，点进入游戏主菜单后，按~键（esc 下面那个键）打开控制台，输入 TheNet:GenerateServerToken()，这会在你的电脑上生成内容为 Authentication Token 的文件 cluster_token.txt，具体位置是在文档/klei/DoNotStarveTogether/steamid/下有个cluster_token.txt。你可以把cluster_token.txt 中的 token 复制到服务器上的 cluster_token.txt 中即可（直接rz -y到服务器上也可以）。

继续配置cluster.ini，

[GAMEPLAY]
game_mode = survival # 游戏模式
max_players = 6 # 最大玩家数
pvp = true # 是否开启 PVP
pause_when_empty = true # 没有人的时候暂停游戏

[NETWORK]
lan_only_cluster = false
cluster_intention = social
cluster_description = 
cluster_name = my server # 服务器名称
offline_cluster = false
cluster_password = password # 密码

[MISC]
console_enabled = true

[SHARD]
shard_enabled = false
bind_ip = 127.0.0.1
master_ip = 127.0.0.1
master_port = 10888
cluster_key = defaultPass

注：#及后面的中文需要删除，否则启动会有问题。如果是阿里云的云服务器，注意在安全组里开启10888端口的访问权限，这问题让我处理了近两小时。。。

启动脚本

cd ~
touch startdst.sh

再写入该脚本(vim修改)

#!/bin/sh
cd ~/dstserver/bin
screen -S "Don't Starve Together Server" ./dontstarve_dedicated_server_nullrenderer

然后给脚本运行权限

chmod +x startdst.sh

服务器运行

~/startdst.sh

在登录游戏后，搜索主机，输入对应的主机名称，就可以搜索到我们创建的服务器了。

在xshell界面上，Ctrl + C 可以关闭服务器，Ctrl + A 然后 Ctrl + D 可以后台运行，screen -r 可以恢复（screen不能恢复的，可以用screen -r -d来恢复）。

参考：https://xueli.li/2017/09/22/build-dst-server-on-ubuntu/

纯js实现录音与播放

Mon, 19 Nov 2018 19:51:57 GMT

最近在electron中想用录音实现对语音的翻译，想直接通过纯js实现录音与播放的功能。当然纯原生的话，代价就是要求浏览器的版本比较高了，具体可以查看readme，下面说下实现的原理和使用方法。

一、原理

主要分为三部分，

利用webrtc的getUserMedia方法获取设备音频输入，使用audioprocess得到音频流(pcm流，范围-1到1)。
转码，利用前端中的ArrayBuffer等二进制操作按采样位数处理流信息。
使用decodeAudioData转码arraybuffer到audioBuffer并播放（小文件，大文件使用audio）。

兼容性的话主要考虑的就是web audio api、getUserMedia和TypedArrays的这几个方面了。

二、使用方法

script标签

支持以script标签的方式引入recorderjs，可以在window下全局访问：

let recorder = new Recorder();

npm方式

首先安装js-audio-recorder包，

npm i js-audio-recorder

然后再引用：

import Recorder from 'js-audio-recorder';

let recorder = new Recorder();

通用方法

api较为简单，目前只有如下几个：

// 开始录音
recorder.start();
// 结束录音
recorder.stop();
// 录音播放
recorder.play();

默认是16采样位数，16000采样频率，单声道的录音方式，详细地使用方式可以查看README。

代码详细地址见：纯js实现录音与播放，欢迎提建议和star。

详细 API 地址：文档

在线demo地址：Recorder

三、其他资源

我的其他前端音频方面地学习文章，详细地址：

前端二进制学习（一）

Wed, 14 Nov 2018 22:24:39 GMT

由于常年兼容低版本ie，在h5中新出的数据格式上有了明显的落后，特弥补下知识。

一、blob

blob数据的话，在老东家处理图片时有接触过，但毕竟只是修改了几个bug，并没有完全的掌握。

看句来自MDN上的解释，Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。

Blob对象本质上是js中的一个对象，里面可以储存大量的二进制编码格式的数据，我们不可以直接操作他，具体操作看第二篇。

Blob(blobParts[, options])，

blobParts，数据序列，格式可以是ArrayBuffer，ArrayBufferView，Blob，DOMString 。
options，包含以下两个属性的对象，type：MIME的类型。endings：决定第一个参数的数据格式。默认值为"transparent"。

下面我们简单的去操作下二进制数据。blob的其他信息可以查看下MDN文档。

二、FileList与File

先在找张图片复制到桌面上，然后我们用type是file去取这个文件。

<body>
    <input type="file" id="rFile" />
</body>

let files = null;
document.getElementById('rFile').onchange = e => {
    files = e.target.files;
};
// 也可以使用，document.getElementById('rFile').files 获取当前选择的文件信息

此时的files就是FileList类型，他包含了刚才选中的图片的信息。

注：当给input增加multiple属性时，可以选择多个文件。

files instanceof FileList;    // true
files[0] instanceof File;     // true

而包含的file就是File类型的实例。所以files[0]的原型就是File，那么File的原型是谁呢？

files[0].__proto__.__proto__;   // Blob {...}

所以，File是继承了Blob的方法的，我们可以简单的使用slice将File转化成Blob。

Blob.slice([start,[ end ,[contentType]]])，返回一个新的 Blob对象，包含了源 Blob对象中指定范围内的数据。

files[0].slice(0);  // Blob

这个图片的数据，我们可以用来做什么呢？

三、数据处理

在页面上显示这张图片

语法：

objectURL = URL.createObjectURL(blob);

假如页面上有个img元素（js创建也行，这简单举例），我们可以将这个url赋值给img的src，这样图片就可以在页面上显示了。

<img src="" alt="" id="pImg" />

var source = URL.createObjectURL(files[0]);
document.getElementById('pImg').src = source;

此时，图片可以正常显示了，看下对应img的src路径，发现是以blob:开头的。

MDN文档上，该方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。

注：MDN提示，当不再需要这些 URL 对象时，每个对象必须通过调用 URL.revokeObjectURL() 方法来释放。

与base64互转

blob转base64格式

我们都直到图片是可以用base64来表示的，那么blob是否能转化成base64数据呢？

function blobToDataURL(blob) {
    var reader = new FileReader();
    reader.readAsDataURL(blob); // 读取文件
    reader.onload = function (e) {
        var data = e.target.result; // base64的数据结果
    }
}

FileReader又是啥？这个后面再讲。

base64转blob

正向能转，那么倒着同样可以转化，

function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);

    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], { type: mime });
}

Uint8Array又是啥？我们后面再学习。

四、总结

blob是js的一种对象类型，我们可以用他存储大量的二进制数据，他本身的属性有两个，分别是：size 和 type ，在原型中有个方法：slice()。我们可以通过file或fileList获得blob数据，那我们如何操作与处理这些二进制数据呢？请看前端二进制学习（二）。

element-ui calcTextareaHeight.js文件源码学习

Tue, 13 Nov 2018 21:20:33 GMT

input组件之前还有个calcTextareaHeight.js文件没有去看下，现在我们去学习下。

一、calcTextareaHeight.js

该文件是通过获取要计算的textarea上的style，并赋值给js生成的textarea元素，并计算他的高度进而推算可放大和缩小的范围。首先定义了HIDDEN_STYLE变量，给了一堆能隐藏元素的属性。

而CONTEXT_STYLE中定义了一些需要获取的属性，这些属性会影响到内容的高度。

接下来是calculateNodeStyling函数。首先用w3c标准的getComputedStyle方法获取目标元素的所有计算样式。boxSizing则保存了targetElement的box-sizing样式。paddingSize则保存了targetElement的上下padding和，borderSize保存targetElement的上下border和。contextStyle则是对CONTEXT_STYLE对象中key值遍历获取值，最后以;分隔，组成字符串。

本文件导出了calcTextareaHeight这个方法。

首先，用单例模式只创建一个textarea，用于后面赋值属性计算他的高度。

if (!hiddenTextarea) {
    // 创建textarea节点并插入dom树中
    hiddenTextarea = document.createElement('textarea');
    document.body.appendChild(hiddenTextarea);
}

将刚才获得的目标元素的属性，依次赋值给新建的textarea元素。他的value则是目标元素的内容或placeholder，这儿赋值value是因为这值会影响scrollHeight。

hiddenTextarea.setAttribute('style', `${contextStyle};${HIDDEN_STYLE}`);
hiddenTextarea.value = targetElement.value || targetElement.placeholder || '';

接下来，根据当前的box-sizing值，分情况处理了，

let height = hiddenTextarea.scrollHeight;
const result = {};
// 根据boxSizing做调整，拿到实际赋值的height值
if (boxSizing === 'border-box') {
    // 如果是border-box,原先height值是，height高度减上下border的大小
    height = height + borderSize;
} else if (boxSizing === 'content-box') {
    height = height - paddingSize;
}

这儿加减看得很迷惑，先看下例子，以textarea为例，

#box {
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 10px solid #ccc;
    box-sizing: border-box;
}

<textarea id="box"></textarea>

效果如下，而此处的height实际是content的高度加上下padding值，所以当是border-box时，所以加了borderSize。

下面看下content-box时的情况，需要减去上下padding，这样两种情况下height值就可以一致了。

当没有出现滚动条时，scrollHeight的值就是height，而出现滚动条时，加减也是可以通过height去理解的。

无论是哪种box-sizing，scrollHeight都包含了上下padding值，所以在计算singleRowHeight时，将scrollHeight减去了paddingSize，此时得到的都是实际内容的高度。

当有设置autoSize中的minRows时，以singleRowHeight为基数，minRows为倍数，并且当时border-sizing时，需要加上上下padding和border，因为前面也讲了，singleRowHeight已经时实际的存内容的高度了。并为之设置minHeight。

if (minRows !== null) {
    let minHeight = singleRowHeight * minRows;
    if (boxSizing === 'border-box') {
        minHeight = minHeight + paddingSize + borderSize;
    }
    height = Math.max(minHeight, height);
    result.minHeight = `${ minHeight }px`;
}

而当设置maxRows时，原理也是相同的，不再述说。最后移除hideenTextarea元素。

hiddenTextarea.parentNode && hiddenTextarea.parentNode.removeChild(hiddenTextarea);
hiddenTextarea = null;

如果一个节点没有parentNode节点，那么他就不是在dom树上的，而是在内存中，随时可以被回收。讲hiddenTextarea的指向改为null后，原先节点所占用的资源就被回收了。

带注释的源码文件下载：calcTextareaHeight.js。

element-ui merge.js和shared.js文件源码学习

Mon, 12 Nov 2018 21:14:58 GMT

在看input组件之前，先看下他提前引入的模块，migrating.js和emitter.js前面都讲解过了，这儿看下两个utils中的两个js文件。

一、merge.js

文件直接export出一个function，这个fun中，嵌套了两层循环。

先看下第一层循环，显然从形参target之后开始遍历，并对这些参数做了检测。第二层循环这些引用类型的属性，并用hasOwnProperty保证这些属性是自有属性。如果该值不是undefined，就赋值到target的同名属性下。

所以这merge.js就是用于对象合并的，并且是浅拷贝。

// merge拷贝函数，将target之后的属性按键值赋值到target下
// 若该参数在target中，则会被覆盖
// 是浅拷贝，注意引用关系
export default function(target) {
    // 从target之后开始遍历参数
    for (let i = 1, j = arguments.length; i < j; i++) {
        // 检测参数，排除false类（undefined等）的参数
        let source = arguments\[i\] || {};
        // 遍历循环参数
        for (let prop in source) {
            // in会遍历原型上的属性，用hasOwnProperty确定是source自己的属性
            if (source.hasOwnProperty(prop)) {
                let value = source\[prop\];
                // 若是source自己属性，且不是undefined，则添加到target的prop的属性下
                if (value !== undefined) { // 仅判断自身，注意被覆盖的问题
                    target\[prop\] = value; // 没有继续遍历value的层级，当对象时，会有引用关系
                }
            }
        }
    }
    return target;
};

二、shared.js

该文件下有两个方法，都比较的简单：

isDef

export function isDef(val) {
    // 不能为undefined且不能等于null
    return val !== undefined && val !== null;
}

判断参数不是undefined且不是null，判断值是不是已经定义了（表面可以这么理解）。

isKorean

export function isKorean(text) {
    const reg = /([(\uAC00-\uD7AF)|(\u3130-\u318F)])+/gi;
    return reg.test(text);
}

该方法则是取判断对应字符是不是含有南北朝鲜字符（朝鲜和韩国）。

带注释的文件下载：merge.js和shared.js

wordpress性能优化日志

Sun, 11 Nov 2018 23:06:04 GMT

用上CDN后，对速度仍然不太满意，继续研究如何优化wordpress。

一、现状

先看下目前的状况，主机在境外，使用了阿里云的CDN，命中率在25%-30%，比较的低。

http请求数量比较多，且有几个文件未压缩，而且链接的建立和等待时间比较长。图片占下载量的比重比较大。

二、开始优化

压缩与合并文件

首先安装了Autoptimize插件，用于处理js、css和html文件的压缩与合并，用于减少htpp请求的数量和大小。此插件也可以用于删除谷歌字体，因为如果是境内服务器可能会连不上google，导致pending过长。

配置的话，只需要勾上优化HTML代码，JavaScript代码，CSS代码就行了。重新请求，会发现请求数明显减少，并且文件大小明显变小。

页面静态化

每次访问页面，都经过php加数据库查询势必会消耗更多的性能与时间，所以文章和首页的静态化也是可以提升速度的。安装wp super cache插件，开启缓存功能。注：提前预缓存，会导致首页出不来，所以于预缓存是用不上了。

下面看下我的配置：

其中，当有新文章或页面的发布或更新时清除之前的缓存文件，这个配置还是不要勾上了，没有修改的文章缓存还是要留着的，没必要修改。使用完这两个插件后，CDN的命中率达到了70%以上。

数据库优化

数据库优化的话也是可以提升速度的，不过这块不太熟，也不知道啥原理。安装WP-Optimize插件，该插件可以优化数据库表，删除数据库中的无用信息。

图片压缩

无损图片压缩有利于资源下载速度的提升，安装EWWW Image Optimizer插件。

在wp-content文件夹下新建ewww文件夹，设置权限777（会有提示的，无法安装tool）。在媒体库选择Bulk Optimize:

然后开始扫描，

最后开始优化，

就可以看到优化的进度了：

如果没有详细的优化进度或者提示什么miss，看下对应文件夹下的权限，如上传文件的文件夹，我们可以修改文件夹权限到777。

chmod -R 777 uploads

进入媒体库，查看图片的详细信息（也可切换成列表模式）的右下角。

可以看到对应的优化信息。

三、其他

CDN配置

阿里云的CDN还可以配置一些文件的有效时间，请求头等等信息。

数据库备份

安装UpdraftPlus插件，在设置中开启配置，我选择了FTP方式，毕竟虚拟共享主机的时间还没到，仍可以使用。

设置中也可设置数据库备份频率和文件的备份频率。如果要定时到某个时刻，就不能使用免费版的了。

四、总结

速度的提升还是有明显的感觉的，不过当网不太好的时候，http的建立还是要消耗很长时间的，而后台操作界面由于需要数据库的支持，导致仍会有卡顿的时候。

所以，优化之路漫漫，将上下而求索。

element-ui checkbox-button和checkbox-group组件源码学习

Thu, 08 Nov 2018 20:55:21 GMT

看完了checkbox组件的，接下来当然看下checkbox-button和checkbox-group组件的源码。

首先，checkbox-button是和checkbox-group配合使用的。

一、checkbox-button html

html上与checkbox组件比较相像，没有了checkbox前的勾选框，html层级减少了一层。另外就是checkbox的内容显示增加了style为checked的样式，其他方面区别并不大。

二、checkbox-button JS

大部分的方法与checkbox中类似，这儿只列下不同的属性和方法。

activeStyle()

仅有该函数大不相同，作用是给了当checkbox-button被选中时的样式。

三、checkbox-group html

仅仅给checkbox-button增加了个div，控制了样式状态。

四、checkbox-button js部分

name

名称

componentName

组件名称

mixins

混入组件之间通讯组件。

inject

注入elFormItem对象，防止单独组件使用时，报错。

props

value，当前model值
disabled，是否禁用
min，勾选的checkbox的最小数量
max，勾选的checkbox的最大数量
size，checkbox-group整体大小
fill，按钮形式的 Checkbox 激活时的填充色和边框色
textColor，按钮形式的 Checkbox 激活时的文本颜色

computed

_elFormItemSize()，formitem大小。
checkboxGroupSize()，group大小。

watch

value(value)，监听value值，当value变化时，向父级ElFormItem组件触发el.form.change事件。

带注释的源码下载：checkbox-button.vue和checkbox-group.vue。

近几天博客换主机遇到的问题总结

Tue, 06 Nov 2018 20:57:49 GMT

最近在将虚拟主机上的博客往云服务器上移，遇到了些问题，做些记录。

共享虚拟主机实在是比较卡，想往云服务器上迁，但是阿里云ecs快到期了，续费的费用实在头疼。于是在vultr上弄了个5美刀每月的服务器，下面开始迁移。

一、迁移到docker上

迁移前了解了些docker的东西，觉得直接使用镜像和容器的方式比较容易管理。用nginx代理了wordpress，在http下没有问题。但是由于在虚拟主机上开启过https，百度收录的大都是https，如果不升级到https，那仅仅一丢丢的访问量也没了。于是考虑升级https，下面描述下在迁移中遇到的问题：

配置完https后，样式加载不上，且登录后台会一直循环重定向。

处理方法：在根目录的wp-config.php文件最后加入以下代码：

$_SERVER['HTTPS'] = 'on';
define('FORCE_SSL_LOGIN', true);
define('FORCE_SSL_ADMIN', true);

接着样式正常了，但是后台还是登录不了。

处理方法：修改数据库中的配置，在ssh中连接数据库。

use wordpress;

update wp_options set option_value='https://www.zhuyuntao.com' where option_name='siteurl';
update wp_options set option_value='https://www.zhuyuntao.com' where option_name='home';

update wp_posts set post_content = replace(post_content, 'http://www.zhuyuntao.com','https://www.zhuyuntao.com');

用过wordpress的都知道，站点名等配置改了会导致无法登录。因为请求会发送到错误的域名下，所以用mysql命令修改数据库中的站点名等配置。

此时已经可以登录了，但是出现了403。

此问题未解决，尝试了能搜索到的各种方法。修改文件权限，修改nginx配置等，还出现过500的错误，但是都没有能让https正常。

结果

必须改成https，所以换中方式，采用直接安装的方式去处理。

二、直接安装wordpress

apt-get等等一串命令。我是按照这篇文章（https://www.jianshu.com/p/84c2dad49e42）操作的，很快一个http的wordpress就可以搭建完成了。

由于第一种方式是使用wordpress自带的插件进行迁移的，所以没有遇到数据方面的问题。而由于域名被我搞的混乱了，所以这边直接使用，从命令行导出和导入的方式来处理。

直接source *.sql导入数据后，首页白屏。

处理方式：

检查下wp_options这张表中的主题，看看是不是还是用的老主题。接着在apache配置中改成支持https的方式。

https一会能连上，一会连不上，延迟很大。

目前境外https大概率无法访问，或间歇性无法访问，特别是一些热门的服务器运行商和路线。。。但是不能放弃啊。突然想到，我还有每月20G的阿里云CDN流量呢。是不是可以用来给https加速呢？

三、解决方法

尝试给https加速无果，但是我发现了个强制https->http的选项。通往我服务器的必须是http才能保证访问正常，而百度收录的是https，那么中途转下不就行了？

目前本博客已经正常了，而且还能看到原先的那么一丢丢从百度上来的访问量了。最后，技术万岁，让我找到了折中方案。

element-ui checkbox组件源码学习

Sun, 28 Oct 2018 16:30:03 GMT

来看下比较常用的，且和radio比较类似的checkbox组件。

一、html部分

整个html部分与radio比较类似，简单的来看下。

最外层时label，且有配置控制着border、disabled、整个checkbox的大小。

往内部是两个span，一个是checkbox前的勾选框，后一个span是checkbox后显示的文字。第一个span中，class是el-checkbox__inner的span就是checkbox元素框的实现，而after伪元素则是配合实现选中状态的。后面两个input元素主要是为了当给定ture与false值时，需要给input加上true-value与false-value两个属性值。

后一个span则是放checkbox对应的勾选值的。默认是优先显示slot中的值的，如果没有，则显示当前checkbox的label值。

二、JS部分

按照属性看下，

name

名称

mixins

混入了事件的broadcast与dispatch事件传播机制。

inject

注入elForm与elFormItem对象，防止单用时取值出错。

componentName

组件名称。

data()

selfModel，该组件的model值。
focus，是否获取了焦点。
isLimitExceeded，判断是否超出设置的最大最小值。

computed

model，通过中转的方式代理当前值的获取与设置。

当我们获取model值时，

get() {
    // 如果有checkbox group父组件，则直接使用store的值，否则
    // 若本组件的value(model)值不为undefined，则返回，否则返回selfModel
    return this.isGroup
        ? this.store : this.value !== undefined
        ? this.value : this.selfModel;
}

设置model的话，会有如下操作：

set(val) {
    if (this.isGroup) {
        // 当有group父级时，需要对值的范围做判断
        this.isLimitExceeded = false;
        // 当group有min值，且要set的值小于min时，将标志变量置为true
        (this._checkboxGroup.min !== undefined &&
            val.length < this._checkboxGroup.min &&
            (this.isLimitExceeded = true));

        // 当group有max值，且要set的值大于max时，将标志变量置为true
        (this._checkboxGroup.max !== undefined &&
            val.length > this._checkboxGroup.max &&
            (this.isLimitExceeded = true));
        // 没有出现设置值超出时，触发修改checkboxgroup的model值
        this.isLimitExceeded === false &&
        this.dispatch('ElCheckboxGroup', 'input', \[val\]);
    } else {
        // 没group时，直接修改本组件的model值和selfModel值
        this.$emit('input', val);
        this.selfModel = val;
    }
}

isChecked()，判断该checkbox是否已经被选中了。由于model值的类型比较多，所以需要较多的判断。

isChecked() {
    if ({}.toString.call(this.model) === '\[object Boolean\]') {
        // 如果是boolean类型的（checkbox的基本用法），直接返回就行
        return this.model;
    } else if (Array.isArray(this.model)) {
        // model是数组时，判断下当前组件的label值是否在已选择值之中
        return this.model.indexOf(this.label) > -1;
    } else if (this.model !== null && this.model !== undefined) {
        // 当trueLabel有自己的值时，需要与trueLabel校验
        return this.model === this.trueLabel;
    }
}

isGroup()，是否是group，与radio的一样，向上逐层遍历。
store()，用于获取当前的value(model)值。
isDisabled()，判断当前组件是否时disabled状态。

disabled的优先级顺序，checkbox-group > 本身 > form。

_elFormItemSize()，获取formitem的大小。
checkboxSize()，checkbox大小。

props

value，当前checkbox选中的值。
label，该checkbox的值。
indeterminate，设置 indeterminate 状态，只负责样式控制。
disabled，组件是否禁用。
checked，组件是否已经被选中。
name，原生 name 属性,控制checkbox分组。
trueLabel，选中时的值。
falseLabel，没有选中时的值。
id，当indeterminate为真时，为controls提供相关连的checkbox的id，表明元素间的控制关系。
controls，当indeterminate为真时，为controls提供相关连的checkbox的id，表明元素间的控制关系。
border，是否显示边框。
size，大小，尺寸，控制图标，文字大小。

methods

addToStore()，用于初始化值，并保存到model中。

addToStore() {
    if (
        Array.isArray(this.model) &&
        this.model.indexOf(this.label) === -1
    ) {
        // model是数组，且不包含当前label值时，进行添加处理
        this.model.push(this.label);
    } else {
        // 直接修改
        this.model = this.trueLabel || true;
    }
}

handleChange(ev)，处理checkbox改变事件。

if (this.isLimitExceeded) return;

首先是对限制进行判断，不在范围内不操作。

if (ev.target.checked) {
    value = this.trueLabel === undefined ? true : this.trueLabel;
} else {
    value = this.falseLabel === undefined ? false : this.falseLabel;
}

当无trueLabel，falseLabel时，选中为true，否则false，有trueLabel或falseLabel值，则使用。

随后，处理一些change事件。

created()

当组件创建时，有被选中时，触发addToStore()方法。

mounted()

if (this.indeterminate) {
    this.$el.setAttribute('aria-controls', this.controls);
}

为indeterminate元素添加aria-controls 属性。

watch

value(value)

this.dispatch('ElFormItem', 'el.form.change', value);

当前checkbox选中改变时，触发向上广播到formitem，触发el.form.change事件。

带注释的源码下载：checkbox.vue。

element-ui switch组件源码学习

Thu, 25 Oct 2018 22:00:42 GMT

捞点时间，继续了解下element-ui下的switch组件。

一、html结构

最外层是个div元素，看下该元素的属性，一个基本的class，外加switchDisabled控制disabled样式，checked控制当前选中的状态。

role、aria-checked、aria-disabled是无障碍网页应用属性。还绑定了个click事件，用于用户点击时切换。

往内是一个type是checkbox的input，为其绑定了change和enter的keydown事件，还有原生的id和name属性。当然此input在dom树上存在，但是宽高都为0，所以用户是点击不到的。后面的三个span元素分别是显示switch关闭时的值、switch按钮和switch打开时的值。

关闭时的值和打开值的span是类似的，checked相反控制了他们的active状态。当然，如果不设置打开和关闭的内容（text或icon的class），这两个span是不会显示的。

switch按钮底部的话是由第二个span实现的，而上面的白色圆是由after伪类实现的。动画是由transition实现的。 html的部分就这么多了，下面看下js部分。

二、JS部分

import的Focus和Migrating两个文件的分析可以查看 element-ui-focus-js和migrating-js文件源码学习。

name

名称

mixins

混入两方法，focus则是对当前input元素进行聚焦。Migrating则被后面定义的给覆盖了。

inject

注入elForm对象，防止不和el-form使用时对象不存在的问题。

props

value，当前该组件的值。
disabled，是否禁用。
width，switch按钮的宽度。
activeIconClass，switch 打开时所显示图标的类名，设置此项会忽略 active-text。
inactiveIconClass，switch 关闭时所显示图标的类名，设置此项会忽略 inactive-text。
activeText，switch 打开时的文字描述。
inactiveText，switch 关闭时的文字描述。
activeColor，switch 打开时的背景色。
inactiveColor，switch 关闭时的背景色。
activeValue，switch 打开时的值。
inactiveValue，switch 关闭时的值。
name，原生input 对应的 name 属性。
id，原生的id。

data()

coreWidth，switch整体的宽度。

created

组件创建后，有对组件的默认值进行处理。

// ~x 相当于 x+1, 由于indexOf是-1时，表示没匹配上，即false
// 所以 if (~x) 表示匹配成功后，此处取反
if (!~\[this.activeValue, this.inactiveValue\].indexOf(this.value)) {
    // value不是两种值时，默认赋值关闭情况下的值
    this.$emit('input', this.inactiveValue);
}

computed

checked()，该方法用于判断当前是否是选中状态。
switchDisabled()，判断组件是否是disabled状态，判断优先级是本身 > form。

watch

checked()，对checked进行监听，也就是对this.value === this.activeValue，进行监听。当checked状态变化时，做处理。

// 先修改原生checkbox的checked值
this.$refs.input.checked = this.checked;
// 是否有开启和关闭对应的颜色
if (this.activeColor || this.inactiveColor) {
    // 设置背景色
    this.setBackgroundColor();
}

methods

handleChange(event)，用于处理switch值变化。

我们可以使用this.$emit('input')，修改当前的value值，由于组件的value值是前一次的值，所以需要取反处理。

而修改value值并不是立即生效，而且为了防止父组件未修改值，所以进行了重复赋值。

setBackgroundColor()，根据当前是否checked，设置背景颜色。
switchValue()，当用户点击swtich的click事件。
getMigratingConfig()，替换混入的同方法，用于提示迁移的属性和方法。

mounted

this.coreWidth = this.width || 40;

先对宽度做了兼容处理，默认是40px。

随后判断是否要设置背景色。最后修改了原生input的值，与当前的值相同。

带注释的源码下载：switch.vue。

element-ui focus.js和migrating.js文件源码学习

Wed, 24 Oct 2018 22:16:18 GMT

看switch组件时，看到了对这两个文件的引用，下面来看看这两个文件的内容。

一、focus.js文件

直接看下文件内容

export default function(ref) {
    return {
        methods: {
            focus() {
                this.$refs\[ref\].focus();
            }
        }
    };
};

传入了ref的参数，而focus方法则是在注册过的refs集合中获取ref对象，并聚焦。

二、Migrating.js文件

该文件主要是用于开发环境下提示一些迁移或者即将修改的属性和方法的。

mounted()

我们看下当组件挂载后，会执行啥。

if (process.env.NODE_ENV === 'production') return;
if (!this.$vnode) return;

首先是对当前环境的判断，假如是生产环境下时，就retuen，就不会在控制台下输出提示信息。如果不是vue的虚拟节点的话，也需要跳出，因为后面有对改属性的操作。

随后用结构从getMigratingConfig()方法下获取了哪些属性和方法是要提示的，从节点的配置中获取了他有哪些属性和方法。最后两个for循环各自处理属性和方法下，使用了且需要迁移的，并于控制台警告打印出来。用hasOwnProperty只是保证是这两个值得自有属性，防止in遍历到了父辈组件中。

methods

getMigratingConfig()：获取迁移属性或者方法。

由于整个文件是用于混入使用的，引用文件中会重新定义该方法，存入对应的属性和方法，来覆盖此文件中的该方法。

带注释的源码下载：focus.js、migrating.js。

阿里云虚拟主机开启https

Thu, 18 Oct 2018 21:34:12 GMT

这几天折腾好了ecs上的https，再看我这显示不安全的博客，便想着能把个人博客也更新到https。

一、问题

大学注册的共享虚拟主机，一直用来放这个博客，再加上https的趋势，是时候给换https了。

由于虚拟主机只开放了80端口，没法像设置ecs那样开启443端口。但是可以通过cdn的方式开启cdn，原因的话，后面再补上。

二、申请ssl证书

前一篇博客中有申请的方式，这儿就不细说了。

三、cdn配置

首先，cdn流量是要money的。可以先买个100G的流量包，限时1年，要20大洋。

在cdn的域名管理里，点击添加域名。

接下来，填下要加速的域名，业务类型选择图片小文件就行了。源站类型保持IP，在IP中输入你的虚拟主机的IP地址。

端口的话一定要选择80端口，因为443是不开放的。

提交后，到域名管理界面，点击配置按钮，出现了一大列东西，往下翻，翻到HTTPS配置，点击第一个修改配置，

状态修改为开启，证书的话已经先申请了，可以直接选择阿里云证书。没申请的话，你也可以选择免费证书。

最后的强制跳转，一定要选择http->https，点击确定。

再次回到域名管理界面，点击CNAME进行复制。

再点击进入云解析DNS，选择对应的域名进行解析设置。点击添加纪录，

记录类型选择CNAME，主机记录填上www，解析线路选择默认，记录值的话，粘贴上刚才复制的CNAME的值，最后点击确认就行了。如果有冲突的话，直接去修改对应的记录就行了。

注：修改记录的话，不是立刻生效的，得过十几分钟。

四、测试

打开powershell或cmd，ping自己的域名。

实际已经显示了对应的CNAME，且IP也发生了变化，这样就配置成功了。

然后，访问博客，发现chrome仍旧是提示不安全，进入页面后，发现网站的css都没有加载上，后台还居然登录不了。看了控制台，提示大概是我们在https的网站中还有http的请求吧。

五、修改wordpress配置

先修改wp-config.php文件，用ftp工具登录，查询到这个文件，代码中找到require_once(ABSPATH . 'wp-settings.php');这段代码，将下面这段复制到他的前面。

define('FORCE_SSL_ADMIN', true);
define('FORCE_SSL_LOGIN', true);
$_SERVER['HTTPS'] = 'ON';
define( 'CONCATENATE_SCRIPTS', false );

代码生效后，后台可以登录了，但是明显感觉变慢了。。。登录后台后，找到setting->常规选项，修改wordpress地址和网站地址到https。

然后再刷新测试，确保所有的请求都有http改到了https。这样https就ok了。

最后，希望这流量不要用上瘾了。。

nginx配置https服务

Thu, 18 Oct 2018 20:28:07 GMT

看了自问自答的图灵机器人，想在微信的小程序上搭个能自我聊天，或者查询的小机器人，可是，微信只支持https，而图灵机器人提供的接口只支持http接口，所以只能在中间搭个中转的服务器咯。

一、准备

服务器的话，拿出我那台吃灰的ecs。服务器端的话，还是用我比较了解的node，再配上nginx反向代理。既然要https，那么证书等这一步也是不能少的。阿里云上正好也有免费的证书提供下载。

首先到证书控制台，点击右上角的购买证书

品牌选择Symantec，保护类型选择一个证书，此时有出现了免费型DV SSL这个选项，选择并购买。

买完这个证书后，会回到证书控制台，对该证书进行补全处理。

等待十分钟左右，证书就好啦。

点击下载，进行证书，私钥公钥的下载。

选择nginx，点击下载。

下载解压后，我们得到两个文件，

文章后面的配置可以作为参考。这样我们就准备好啦，开始配置nginx。

二、nginx配置

先上传key，在nginx安装目录下（/etc/nginx）下新建了一个cert的文件夹，再使用rz命令将这两个文件读到服务器上去（上传再解压一样）。

我的nginx一开始装好了，这儿就不再演示了。首先到根目录，修改配置文件。

cd /etc/nginx/sites-available/
vi default

修改server中的内容，

server {
    listen 80;
    listen 443;
    ssl on;

    server_name www.zhuyuntao.com;
    ssl_certificate /etc/nginx/cert/215067043560468.pem;
    ssl_certificate_key /etc/nginx/cert/215067043560468.key;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_session_timeout 5m;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    ssl_prefer_server_ciphers on;

    location / {
        proxy_set_header Host $host;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "";
        proxy_cache_bypass $http_upgrade;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_set_header X-Nginx-Proxy true;
        proxy_pass http://127.0.0.1:3000;
    }
}

这样就好了，当然ssl_certificate和ssl_certificate_key不要填错反了，server_name记得改成自己的域名，proxy_pass改成自己node程序的地址。

注：如果有问题的化，记得检查下80和443端口是否被其他程序占用了。

三、测试与修改

测试下，打开https://www.zhuyuntao.com/地址，可以正常打开，https就生效了。倘若我们使用http登录，发现出现了400报错，如下：

The plain HTTP request was sent to HTTPS port，大概的意思就是http请求被发送到了https端口了。

http与https共存

我们继续修改配置，将刚才第二行listen 443和第三行ssl on合并成（listen 80别丢了）：

listen 443 ssl;

此时再测试时，http和https均可以访问。

强制https

我们只要将http请求跳转到https上就行了。继续在第一份的配置之上修改。首先删除第一行的listen 80。

在文件最前方新增一个新的server，

server {
    listen 80;
    server_name www.zhuyuntao.com
    return 301 https://$server_name$request_uri;
}

保存后，service nginx restart，重启下nginx，http就能跳转到https上啦。

好了，下面开始玩我的小机器人啦。

vue-cli搭建的项目引入字体后，run报错

Wed, 17 Oct 2018 22:07:09 GMT

想尝试下新的字体，于是便开弄啦。

一、现象

@font-face {
    font-family: 'HansHandItalic';
    src: url('../../static/font/fontawesome-webfont.eot');
    src: url('../../static/font/fontawesome-webfont?#iefix') format('embedded-opentype'),
        url('../../static/font/fontawesome-webfont.woff') format('woff'),
        url('../../static/font/fontawesome-webfont.ttf') format('truetype');
}
html, body {
    font-family: 'HansHandItalic';
}

大致的代码就是这样了，然后直接run dev后，出现了错误，错误的内容如下：

二、处理方法

一般出现这种问题，得看看webpack有没有对字体后缀的文件做处理或者对应的处理模块有没有下载。

vue-cli是对字体文件有处理的，

test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
use: {
    loader:'url-loader',
    query: {
        limit:10000,
        name:'fonts/\[name\]--\[folder\].\[ext\]'
   }
}

在这我们看到用的是urlLoader，所以在在使用的时候也修改下：

@font-face {
    font-family: 'HansHandItalic';
    src: url-loader('../../static/font/fontawesome-webfont.eot');
    src: url-loader('../../static/font/fontawesome-webfont?#iefix') format('embedded-opentype'),
        url-loader('../../static/font/fontawesome-webfont.woff') format('woff'),
        url-loader('../../static/font/fontawesome-webfont.ttf') format('truetype');
}

这样，就可以正常加载了。

参考：https://blog.csdn.net/Smile_Monica/article/details/79190480

element-ui button和button-group组件源码学习

Tue, 16 Oct 2018 22:03:51 GMT

继续看其他组件，接下来看下比较常用的button组件。

一、button组件html结构

整个button组件是基于原生的button元素实现的。我们来看下这个元素的属性值。

class="el-button"，el-button的样式。 @click="handleClick"，按钮的click事件。

:disabled="buttonDisabled || loading"，当按钮的使能或者loading时，disabled生效。

:autofocus="autofocus"，是否自动聚焦。

:type="nativeType"，原生的type属性，控制type的实际类型。

class则是一些样式的控制，不一一举例了，命名也大致可以看出了。

紧接着是一个loading时的icon图标。后面则是一个button图标。接下来的span元素则存放着按钮的显示文字。整个button的html就这么简单。

二、button组件JS部分

name

名称

inject

注入elForm和elFormItem，当没有配合表单使用时，当作默认值使用。

props

这些属性大多和样式的控制有关。

type：按钮样式类型，默认是default类型
size：按钮尺寸大小
icon：icon的class类
nativeType：原生 type 属性
loading：是否加载中状态
disabled：是否禁用状态
plain：是否朴素按钮
autofocus：是否默认聚焦
round：是否圆角按钮
circle：是否圆形按钮

computed

_elFormItemSize()，与formitem配合使用，计算formitem的size。
buttonSize()，用于计算button的大小。
buttonDisabled()，根据当前或者form的disabled状态确定button是否禁用。

methods

handleClick()，button按钮的click事件，用于触发实例上的方法。

handleClick(evt) {
    // 触发当前实例上的click事件
    // 比如我们外部使用时，可以直接增加click方法
    this.$emit('click', evt);
}

button部分的代码实际还好比较简单，下面看下他的group组件。

三、button-group组件

该组件与button组件配合使用，十分的简单，html部分的话，仅是在内嵌的button元素外嵌套了一层div元素。 JS的话，只是给组件增加了个name的名称属性。

带注释的源码下载路径：button组件和button-group组件。

element-ui radio-group组件源码学习

Thu, 11 Oct 2018 22:35:18 GMT

继续看有关radio的，还剩下个radio-group，继续看下。

一、html结构

首先，radio-group是配合radio与radio-button一起使用的。

<div
    class="el-radio-group"
    role="radiogroup"
    @keydown="handleKeydown"
>
    <!-- 显示内部的el-radio或el-radio-button -->
    <slot></slot>
</div>

html部分十分简单，只有个外层的div，内部的slot显示内嵌的元素等数据。

二、JS部分

首先是一个keyCode对象，这采用了Object.freeze方法冻结了方向键的keyCode值，使得改对象无法被改变。

const keyCode = Object.freeze({
    LEFT: 37,
    UP: 38,
    RIGHT: 39,
    DOWN: 40
});

接着看对应的数据：

name

名称

componentName

组件名

inject

注入form-item

mixins

混日组件通信的方法

props

value：当前组件的值（model）
size：radioGroupSize使用，也是配合radio-button组件使用
fill：背景色，配合radio-button组件使用
textColor：文本颜色，即前景色，给radio-button组件使用
disabled：是否禁用

computed

_elFormItemSize()：formitem大小
radioGroupSize()：radio组大小，配合给radio-button组件时使用

created

created() {
    // 绑定handleChange事件
    this.$on('handleChange', value => {
        // 触发实例上的change事件
        this.$emit('change', value);
    });
}

组件创建时，绑定handleChange事件，用于触发实例上的事件。

mounted

// 选取当前group中所有的radio
const radios = this.$el.querySelectorAll('[type=radio]');
// 选取第一个radio（组件）
const firstLabel = this.$el.querySelectorAll('[role=radio]')[0];
if (![].some.call(radios, radio => radio.checked) && firstLabel) {
   // 当radioGroup没有默认选项时，第一个可以被Tab键选中
   firstLabel.tabIndex = 0;
}

在radio-button和radio组件中的tabIndex函数中，我们都知道，只有当前被选中的那个组件才可以被tab键选中。而此处的mounted处理了，当没有值被选中时，我们可以通过tab键选第一个组件，这样也就避免了tab键跳过次组件的问题了。

methods

handleKeydown(e)：处理键盘按钮事件，处理上下左右事件。

switch之前是用来确定当前按钮在group中的顺序index。

keyCode.LEFT和keyCode.UP都是向左侧选择，并对边界值做了判断。 keyCode.RIGHT和keyCode.DOWN是向右侧选择，不过此处有个疑问，为啥阻止冒泡和阻止默认只在其中的一个if-else中。

watch

value

对group的model值进行了监听，当值改变时，便会向上查找ElFormItem父组件并触发el.form.change事件。到这有关radio的就看完了。

带注释的文件地址：radio-group.vue。

element-ui radio-button组件源码学习

Tue, 09 Oct 2018 21:32:09 GMT

前面看了radio组件的源码，接下来看下，与其类似的radio-group组件的源码。

一、html结构

最外层是一个label元素，使用了el-radio-button类。和radio类似，动态的class如下：

:class="[
    size ? 'el-radio-button--' + size : '',
    { 'is-active': value === label },
    { 'is-disabled': isDisabled },
    { 'is-focus': focus }
]"

size控制了radio-group的尺寸，剩下的还有active状态，disabled状态和focus状态的样式。

往内一层是一个原生的radio和span标签。和radio类似，此input元素设置了change、focus和blur事件，由于设置了-1的tabindex，所以他不能被tab键选中。radiobutton中的给了z-index为-1的属性，所以我们看不到此元素。

input元素之后是实际显示内容的，当组件标签在使用时有内容时，则显示，否则显示对应的label的值。

<!-- 组件标签之间的内容显示 -->
<slot></slot>
<!-- 组件标签没有内容则，直接显示该组件的label值 -->
<template v-if="!$slots.default">{ {label}}</template>

二、JS部分

name

名称

mixins

混入广播事件

inject

注入了elForm和elFormItem，当没有与form和formitem使用时，此处的默认值就有用了。

props

label：当前组件对应的值
disabled：是否禁用
name：原生radio的name值，用于radio关联

data()

focus：该组件是否有焦点。

computed

value：获取当前选中值和设置值

value: {
    get() {
    // 直接返回group的值
        return this._radioGroup.value;
    },
    set(value) {
        // 修改radio-group组件中的model值
        this._radioGroup.$emit('input', value);
    }
    // 也就是radio-button必须和radio-group组件配合使用，因为他没有对应的model值，
    // 他所使用的都是group的。
}

_radioGroup()：查找到对应父group组件

_radioGroup() {
    let parent = this.$parent;
    // 循环向父级查找
    while (parent) {
        if (parent.$options.componentName !== 'ElRadioGroup') {
            parent = parent.$parent;
        } else {
            // 返回对应的父组件引用
            return parent;
        }
    }
    return false;
}

activeStyle()：根据group的配置，来设置样式。
_elFormItemSize()：form item的大小。
size()：整体button大小，最后反馈到样式上。
isDisabled()：该组件是否禁用。
tabIndex()：设置tabindex的值。

methods

handleChange()

handleChange() {
    this.$nextTick(() => {
    // 由于是radiobutton要和group一起使用，所以没有判断是否有group组件。
        this.dispatch('ElRadioGroup', 'handleChange', this.value);
    });
}

附上带注释的源码：radio-button.vue 。

element-ui radio组件源码学习

Mon, 08 Oct 2018 13:44:46 GMT

看完最简单的alert组件，下面来看下radio组件。

一、html结构分析

el-radio双标签，使得radio中的内容也包含在组件之内，这样用户点击radio之后的内容，也可以选中属于他的radio了。

class下有多个变量控制不同情况的样式，通过命名就可以看出。后面三个是无障碍网页应用属性（最早在bootstrap上看到，当时知道role属性，现在了解了还有aria-*这一类的）：

role="radio"
:aria-checked="model===label"
:aria-disabled="isDisabled"

此处对label标签设置tabindex，是为了让使用者可以通过tab键选择不同的radio，space键的keydown事件则是用于选中radio标签，这样用户仅用键盘就可以选择radio了。

而接下来则是两个span，一个是用于显示左侧圆形的替代浏览器原生radio的，另一部分则是用于显示radio后的提示文字的。左侧radio框设置了disabled和checked来控制整体radio的样式。再内部则是，radio的主体显示元素，通过border-radius看上去变成了圆形，并设置了蓝色的背景色。此处看下浏览器下渲染的效果，

内部的白色小圆，是通过设置after伪元素，并利用transform和绝对定位使白底圆居中，使用scale实现动画。

<input
    class="el-radio__original"
    :value="label"
    type="radio"
    aria-hidden="true"
    v-model="model"
    @focus="focus=true"
    @blur="focus=false"
    @change="handleChange"
    :name="name"
    :disabled="isDisabled"
    tabindex="-1"
>

紧接着是一个原生的input标签。这样radio的唯一选中的特性，就可以直接使用了。我们发现这个radio设置了透明度为0，并且绝对定位到span实现的radio之上，这样使用者实际操作的仍旧是原生的radio，只不过操作结果会被反馈到界面的radio上。

input上增加了focus、blur、change事件的监听，focus和blur用于样式的改变，change则用于修改当前value的值，并触发绑定的change事件。 input的tabindex被设置成了-1，这样使用者就不会通过tab键选中这个界面上看不见的radio元素了。

紧接着是显示radio内容的span元素，并设置了@keydown.stop，阻止事件的冒泡。

<span class="el-radio__label" @keydown.stop>
    <!-- radio后内容显示区域 -->
    <slot></slot>
    <!-- 当使用el-radio组件时，没有实际的节点内容时，会默认显示该radio的value值 -->
    <template v-if="!$slots.default">{{ label }}</template>
</span>

这样，radio的html部分就结束了，看下对应的js部分。

二、JS部分

js部分的话，改下风格，按照导出对象的层次进行分析，这样看上去会比较清晰。按属性和名称来查看下，

name

名称

mixins

混入了broadcast和dispatch两个事件方法

inject

注入 elForm,elFormItem两个对象，用于disabled，size等值的判断。

componentName

存放了该组件的名称。

props

value：选中的radio的值(v-model的值)isGroup()
label：该radio选项的值
disabled：是否禁用该radio
name：原生name属性，用于控制哪几个radio有关联
border：radio是否带外边框，使用者可以设置radio带边框这种风格
size：整体控制radio大小

data()

focus：当前的 radio是否有获取了焦点。

computed

isGroup()：判断是否存在radio group。

直接查看下该函数的实现：

let parent = this.$parent;
// 遍历逐层查找父元素，当能找到父元素组件名是ElRadioGroup的，则返回true，否则false
while (parent) {
    if (parent.$options.componentName !== 'ElRadioGroup') {
        // 逐层向上
        parent = parent.$parent;
    } else {
        // 若是radio group，保存group组件的引用
        this._radioGroup = parent;
        return true;
    }
}
return false;

model：指本radio的值，此处用代理的方式表示当前radio的值，因为当前值得获取和设置并不是一个属性可以直接表示的。

get() {
    // model的获取值，radio group时，则取group中的value，否则取当前radio的值
    return this.isGroup ? this._radioGroup.value : this.value;
},
// 设置值
set(val) {
    if (this.isGroup) {
        // group则，向上传播，触发input事件，修改group中的值
        this.dispatch('ElRadioGroup', 'input', [val]);
    } else {
        // 非group时，只要改本组件的model值
        this.$emit('input', val);
    }
}

_elFormItemSize()：获取formitem的大小。
radioSize()：控制radio的大小
isDisabled()：该组件是否是禁用状态的。disabled的优先级是：group > 本radio > form。
tabIndex()：用于设置组件的tab-index值。

methods

handleChange()：当radio的值发生变化时触发

主要负责事件的通知与触发：

this.$nextTick(() => {
    // 触发实例上的change事件，并将当前radio值作为参数
    this.$emit('change', this.model);
    // group的情况下，触发名为ElRadioGroup的父组件下的handleChange事件，也将当前选中值作为参数
    this.isGroup && this.dispatch('ElRadioGroup', 'handleChange', this.model);
});

带注释的源码下载：radio组件。

electron-vue使用electron-packager打包很慢的问题

Sun, 30 Sep 2018 21:17:56 GMT

又想着做个桌面的小工具了，就上electron，又在搞vue，那么就和一起，顺便练练手咯。

一、问题

在输入完npm run build:win32之后，过了很久，应该有十几分钟了吧，没有build进度，没有任何提示，就只有资源管理器里内存使用量一直上升，node进程占用内存量一直上升，命令行是这样的：

前面打包react+electron的应用时也没有要这么久，应该是出了一些问题了吧。

二、总结

边搜索，边查看文档，可能是搜的姿势不对，找了好久。最后，新clone了下，安装依赖时，用npm install代替cnpm install，最后可以打包成功。

参考链接：https://segmentfault.com/q/1010000006197710

距今两年了，原来npm和cnpm还有这个区别。。。搜了下，npm也略微扁平化了些，但还是有node_module嵌套的时候。直接看了下两个文件夹下node_module中安装的包的结构，的确是不一样的，至少两者的区别还在。

还有个问题，就是多次打包时，会出现打包失败的情况出现：

但是重新打包，又可以打包成功，原因还不知道为啥。

element-ui emitter.js文件源码学习

Fri, 28 Sep 2018 20:44:04 GMT

紧接着看的radio组件，遇到了mixins: [Emitter]，发现这对象来自另外的js文件，于是便去了解了下。打开emitter.js，发现该js是提供方法给其他组件做混入使用的。他对外有dispatch和broadcast两个接口，从命名和参数等方面，这两个方法应该大致是用来处理一些各层级之间事件的，也就是通信。我们先来看下dispatch方法。

一、dispatch

dispatch方法有三个参数，

componentName，表示组件名称，用于匹配正确到正确的组件名。
eventName，事件名，需要触发的事件
params，参数，触发时带入的参数

前两行，用于查找到当前元素的父组件，如果没有就使用根节点，并取父组件的组件名用于后期匹配。

紧接着的是一个while循环，用于循环父组件，直到找到或者到达根元素，匹配不到。

while (parent && (!name || name !== componentName)) {
    parent = parent.$parent;

    if (parent) {
        name = parent.$options.componentName;
    }
}

循环过程中不断记录组件名，用于判断是否找到。

最后一部分是，当有匹配到的父组件时，就去触发父组件的对应的事件函数。

if (parent) {
    parent.$emit.apply(parent, [eventName].concat(params));
}

接下来看下broadcast函数。

二、broadcast

将emitter内部定义的一个broadcast函数利用call改变this指向。

broadcast内直接对子组件进行遍历，当匹配到对应的组件名时，则去触发对应子组件的对应事件。如果没有，则递归继续查找子组件。

注：我们会发现每条向下传播的线路只要触发了一次对应的事件，就不会再向下传递了。

带注释的源码：emitter.js。

element-ui中的事件传播就是这样的了，让我想到了angular中的$broadcast和$emit事件。

element-ui alert组件源码学习

Thu, 27 Sep 2018 12:57:37 GMT

我们不能仅仅只做代码的搬运工，需要去了解与学习自己所用的工具。现在开始学习element-ui库各个组件是如何实现的。对应的版本是2.4.6。首先从比较简单的alert组件开始。

一、html

先看html结构

<transition name="el-alert-fade">
  <div
    class="el-alert"
    :class="[typeClass, center ? 'is-center' : '']"
    v-show="visible"
    role="alert"
  >
    <i class="el-alert__icon" :class="[ iconClass, isBigIcon ]" v-if="showIcon"></i>
    <div class="el-alert__content">
      <span class="el-alert__title" :class="[ isBoldTitle ]" v-if="title">{ { title }}</span>
      <slot>
        <p class="el-alert__description" v-if="description">{ { description }}</p>
      </slot>
      <i class="el-alert__closebtn" :class="{ 'is-customed': closeText !== '', 'el-icon-close': closeText === '' }" v-show="closable" @click="close()">{ {closeText}}</i>
    </div>
  </div>
</transition>

整个alert都被放在了transition组件中，这是vue中的一个过渡效果组件，此处先跳过，后面在看。接下去是真正alert组件的外层框，自定义了两个样式，一个控制alert组件是什么类型的（颜色图标由类型控制），另一个控制alert内容是否居中。还有个visible控制组件的显示与隐藏。

往内部，第一个i元素是alert组件的图标，由showIcon控制显示与隐藏，样式由iconClass与isBigIcon控制，iconClass也是有type控制的，

iconClass() {
  return TYPE_CLASSES_MAP[this.type] || 'el-icon-info';
}

通过对TYPE_CLASSES_MAP遍历拿到icon的calss样式，无则使用默认的'el-icon-info'类型。这儿为啥不将'el-icon-info'这个class类型写进TYPE_CLASSES_MAP中，个人认为是与type为default对应吧，所以将其留在了对象之外。

而isBigIcon则对description和slots下是否有元素的判断决定是否是使用大标签。

标签之后，就是alert组件的实际显示的内容了，从class的命名上也看的出。isBoldTitle与isBigIcon的判断条件相同，当出现辅助内容时，就加粗显示。

接下来的slot标签，优先显示el-alert标签内的内容，如果没有，再看description是否有值，前两种任意一种情况都会使用大图标，都没有则不显示。

后面一个i标签用来默认显示右上角的X按钮，用于关闭alert组件的，你也可以通过修改closeText，将X替换成你想要的文字或者其他东西。绑定了click事件在关闭时会触发组件外绑定的close事件。

html的话就这些，主要是一些class的控制和元素及内容的显示，事件的话就是关闭alert的click事件。

二、JS部分

受使用者控制的参数有title、description、type、closable、closeText、showIcon、center这几个参数，看表面意思以及结合对应在html中的位置就知道他们的作用了，也可以看下代码的注释。

data中的话只有个visible数据，控制关闭时，将alert隐藏。

computed的属性中，有对应的4个参数，涉及风格等等。

alert组件代码增加注释可查看：alert组件。

Vue中使用scoped或css module

Wed, 26 Sep 2018 22:40:58 GMT

一直只是用scoped，发现既有好处，也有不爽的，对比css module，来看下各自的特点。

一、scoped

scoped是用于css模块化的，他是为了不让当前组件的样式修改其他地方的样式，防止样式覆盖、污染问题的。简单的实现：

<template>
    <div class="box">
    </div>
</template>
<style scoped>
.box {
    width: 10px
    p {
        color: red;
    }
}
</style>

实际编译后在浏览器中查看效果，html的：

calss为box的被增加了data-v-469af010这属性，元素和样式之间有了唯一的关联，scoped的作用就达到了。当然你会发现，内部的样式是没有增加额外属性的。

当然，使用scoped方法也是有弊端的，比如：

编译消耗性能，实际浏览器解析的时候也比较耗性能，因为属性选择器的性能是比较差的。
编译后的文件增加了大量的属性代码，增大了html和css文件。
如果有公有样式时，复用性不高，其他模块中使用时无法获得该样式。
当要特殊定制某组件时，由于css权重问题，需要增加额外的选择器来覆盖。
由于有唯一属性，所以当前页面上不存在的元素无法生效。
由于css权重问题，子组件样式可能被改掉的问题。

试下子组件样式被覆盖的问题，父组件如下：

<template>
    <div class="box">
        <aa class="color-yellow"></aa>
    </div>
</template>
<style scoped lang="less">
.box {
    .color-yellow {
        color: yellow;
    }
}

子组件如下，

<template>
    <span class="color-olive">hello</span>
</template>
<style scoped>
.color-olive {
    color: olive;
}
</style>

浏览器中显示的是黄色，查看该元素的样式情况：

于是子组件内部定义的样式被覆盖了。

注：不嵌套在box内的话是不会出现子组件样式被覆盖的情况，但是子组件也得带上scoped增加权重。

二、css module

css module是css模块化的一种方案，直接看实际效果，

<template>
    <div :class="$style['color-yellow']">
        11
        <p :class="$style.color">222</p>
    </div>
</template>
<style module lang="less">
.color {
    color: blue;
}
.color-yellow {
    color: yellow;
}
</style>

和scoped类似，但是引用该样式的元素需要修改下。

注：带-（横岗）的样式要特殊下，在class中时，以字符串取值的方式去获取。

浏览器中看下效果：

css module是完全将class名修改掉的方式去处理的，也能够唯一匹配。

当然还有其他的特性，可以自己去研究下。

vue-loader也有关于使用css module的文档：https://vue-loader-v14.vuejs.org/zh-cn/features/css-modules.html 也可以上github看下css module的文档：https://github.com/css-modules/css-modules

表单get提交，参数被重写

Tue, 25 Sep 2018 22:03:33 GMT

以前处理下载问题都是让浏览器插件去实现的，现在用纯前端方式去实现时，遇到了一个小坑。

一、问题描述

实现下载excel文件，js表单get提交，后端返回excel文件流给浏览器，实现excel的下载。现在由于要实现具体内容的下载，所以在url后增加参数控制下载的内容。

使用js动态生成form表单并提交，大概代码如下，

function downloadExcel(url) {
    var oForm = document.createElement('form');
    // 先添加到dom中
    document.body.appendChild(oForm);
    // 配置表单的数据
    oForm.method = 'GET';
    oForm.action = url;
    // 触发表单提交
    oForm.submit();
    // 移除该表单
    document.body.removeChild(oForm);
    oForm = null;
}

当url含有参数时，例如，aa.com?type=1这种时，控制台network里看submit时的url是aa.com?，问号之后的数据全部被“过滤”了。最后发现，表单get提交的时候，会把表单内的带name的input的数据加到url上，实际原先的参数是被浏览器给删除了，又由于新建的form元素内无input或其他元素，所以看上去?后的数据都被剔除了。

注：html中的元素直接写action的方式也是一样的。

二、总结

可以改用post请求、ajax或者在form内增加input等标签的方式去处理。

Mongoose设置表名自动加s

Sun, 16 Sep 2018 20:49:31 GMT

最近在搞自己的个人博客，又使用上了mongoose，发现原先好多方法有了替换方案等等

一、结论

直接说结果啦， mongoose会自动给集合名增加"s"，比如

mongoose.model('user', userSchema);

在mongodb中的集合名就是users。当然你也可以一开始就重命名了。

mongoose.model('User', userSchema, 'aauser')

第三个参数可以重命名这个集合（数据库中也就是这个了）。

git大小写敏感问题

Sat, 08 Sep 2018 00:07:23 GMT

在阿里云ecs上拉了个最新提交的代码，启动服务器，出现了Module不存在的报错，最后发现是import了首字母小写的文件了，而我实际写的是大写。

一、问题

我立刻修改了文件的首字母，然后git status准备提交，发现并没有这次修改，到文件夹里看了下，还是绿色的勾。。。

二、处理方法

那么肯定怀疑是不是git大小写不区分呐什么的，查询了下。果然有配置控制的。

git config --get core.ignorecase // 查看是否忽略大小写
git config core.ignorecase false // 设置不忽略大小写

在设置为false后，我们改了文件名，还是绿色的未修改的提示。接下来，我是这么操作的，

复制了份大写的文件。
git rm 了大写的文件。
粘贴了大写文件，并重命名为小写的。
git add新文件。

git status就可以看到这个修改的效果了，然后就可以push了。

接下来，我们在修改个文件名，将其改成大写，绿色未修改的勾还在，但是个git status试下，我们就发现已经有此次的修改了。

Electron和create-react-app构建应用的通信问题

Tue, 28 Aug 2018 14:46:58 GMT

这种环境下，使用官方的const {ipcRenderer} = require('electron')时，由于处于react的环境下，会出现Uncaught TypeError: fs.existsSync is not a function这个报错。那我们来看下在这种环境下应该如何通信。

一、问题

由于我们会先使用npm start一个react下的3000端口的服务器，所以使用require时已不是node的环境，出现了一个无方法的报错。

二、处理方法

到main.js中，在创建浏览器窗口时增加preload属性，让该js有能力在node环境下运行，并将数据绑定到window上，给其他地方的数据使用，如下：

mainWindow = newBrowserWindow({
    width: 1000,
    height: 600,
    frame: false,
    transparent: true,
    webPreferences: {
        javascript: true,
        plugins: true,
        nodeIntegration: false, // 不集成 Nodejs
        webSecurity: false,
        preload: path.join(__dirname, './public/renderer.js') // 但预加载的 js 文件内仍可以使用 Nodejs 的 API
    }
})

注：path需要额外require下。

根据preload中的路径，我们在public目录下新建一个rendeerer.js的问题，文件内容是：

global.electron = require('electron');

此次的数据绑定到全局后，其他js文件中也是可以访问的。global是node中顶层的全局变量，这儿将global改成window也是能生效的。好了，到这的话，差不多大功告成了。

到对应使用了require('electron')的地方，将他们改成window.electron就可以了。

注：直接访问http://127.0.0.1:3000/会有个undefined的报错，不过没有关系的，因为在react中本来就没有这个变量。只需要将在html中添加这步去掉就行了。

参考链接：https://www.jianshu.com/p/20817ba6041d 。