IceHoney IceHoney
IceHoney

如何封装第三方vue组件

js vue

终于算是正式接触 SPA 的前端工作了，最近在解决很多 Vue 组件的问题，其中就有一个针对第三方组件的定制化需求，花了不少时间来折腾。

# 解决 v-model 绑定

这次封装的就是 element 的前端 vue 框架，因为框架本身对 iOS 兼容性不好，所以需要二次封装。封装的是一个 select 组件。所以需要数据的双向绑定，官方教程也已经解释了。 v-model (opens new window) 本质上就是绑定一个值和监听相应的事件。 这次本质是封装的一个 input 元素，所以我们需要手动绑定 value 和监听事件。

<template>
  <el-select v-bind:value="value" v-on="$listeners"></el-select>
</template>
1
2
3

官方文档也解释了这个内置变量的用法vm-listeners (opens new window)

# 继承父元素的属性

父元素的属性继承可以使用v-bind="$attrs"来完成。所以完成组建的透明封装只需要加上三个指令。

<template>
  <el-select v-bind="$attrs" v-bind:value="value" v-on="$listeners">
  </el-select>
</template>
1
2
3
4

虽然知道答案之后很简单，但是探索的过程中还是比较花时间的。希望能帮助大家解决这个问题，如果有什么疏漏之处，也请大家指正。

JavaScript开发中的性能优化

js performance

最近工作比较清闲，5 月又换了一个工作环境。总结下最近看的有关 JavaScript 性能的知识，并记下来供未来的自己参考。希望自己能不忘初心，继续成长！

# 使用 requestAnimationFrame 来更新动画

使用requestAnimationFrame把动画渲染交给浏览器，可以保证渲染保持在 60FPS。应该避免使用setTimeout或者setInterval来实现动画，因为计时器和事件队列会消耗更多的资源，还会导致无用的页面重新绘制。

# 使用 Web Workers 来进行复杂的运算

可以把单纯的计算放在 Web Workers 中，这样不影响主页面的渲染和流畅，例如加密和矩阵变换的运算就可以完全放在 Web Workers 中来减少主线程的执行时间，避免浏览器渲染堵塞。

# 避免微优化 JavaScript

举个最简单的例子，我曾经在一本书上看到过一个提升程序效率的例子。大致是这样的：

var array = [1, 2, 3, ...100];

for (var i = 0; i < array.length; i++) {
  console.log(array[i]);
}
1
2
3
4
5

这里的array.length获取数组的长度，每次都要计算数组长度会消耗不少时间，优化之后的代码是这样的：

var array = [1, 2, 3, ...100];
var len = array.length;
for (var i = 0; i < len; i++) {
  console.log(array[i]);
}
1
2
3
4
5

通过缓存数组的长度来保证只计算一次。这就是典型的微优化，说实话这段代码我一直在用，直到最近读了其他的书才发现，现在的 JS 解释器早就优化了对数组长度的计算。无论是读取一次还是一万次消耗的时间都没有太大差别。微优化应该是 JS 引擎需要做的事情，我们不应该在实际开发中在这方面耗费过多的时间。

# 滑动事件优化

当用户监听滑动事件并执行相关动画操作的时候，记得使用window.requestAnimationFrame来优化动画的执行。

function onScroll(evt) {
  // Prevent multiple rAF callbacks.
  if (scheduledAnimationFrame) return;

  scheduledAnimationFrame = true;
  requestAnimationFrame(readAndUpdatePage);
}

function readAndUpdatePage() {
  // do something
  requestAnimationFrame(readAndUpdatePage);
}

window.addEventListener('scroll', onScroll);
1
2
3
4
5
6
7
8
9
10
11
12
13
14

参考：

Debounce Your Input Handlers (opens new window)

Optimize JavaScript Execution (opens new window)

使用letsencrypt为自己的网站加密

site ssl

好吧，这次博客的更新稍微有点迟到了。因为自己各种忙着考驾照什么的，不过新的一年又要有新的开始了。最近买了 VPS 也就开始折腾起来了，讲讲如何用 letsencrypt 来给自己的网站颁发不要钱的证书，而且最近还支持通配符的二级域名了，想怎么开子网站都行！！！

# dehydrated

浏览器的证书签名的步骤实在是很麻烦，所以有位热心的学生做了一个自动化脚本，可以自动生成脚本并且可以和其他脚本一起使用。达到一键签名证书。

# letsencrypt-cloudflare-hook

我把自己的 DNS 服务托管到 cloudflare 上，还可以使用 cloudflare 提供免费的 CDN 服务。最重要的一点是 cloudflare 有 API 接口。利用这个接口就可以自动完成 DNS-01 challenge。简单的来说，就是通过添加一条 DNS 记录来证明自己对这个域名的所有权，才能给这个域名颁发证书。

# 安装过程

知道了这两个工具之后，我们就可以开始配置证书了。具体的流程都写在项目的文档 (opens new window)里面了。我这里主要是讲述下遇到的坑，首先我自己的服务器环境是 CentOS7，使用的是默认的 python2 的环境。需要安装cryptography的库才能顺利完成编译。

sudo yum install gcc libffi-devel python-devel openssl-devel
1

其次，配置环境最好保存在dehydrated/config里，这样就没必要每次都设置环境变量。

echo "export CF_EMAIL=user@example.com" >> config
echo "export CF_KEY=K9uX2HyUjeWg5AhAb" >> config
echo "export CF_DEBUG=true" >> config
1
2
3

CF_KEY 就是 cloudflare 里面的 Global API Key，替换一下就好了。因为我们要配置的域名包含所有的二级域名，所以需要新建一个dehydrated/domains.txt文件，并写入：

icehoney.me *.icehoney.me
1

这样就会对主域名和所有二级域名生效。

之后再执行命令，./dehydrated -c -t dns-01 -k 'hooks/cloudflare/hook.py'。如果没有问题就可以看到成功生成的日志。

参考：

dehydrated (opens new window)

letsencrypt-cloudflare-hook (opens new window)

Failed to install Python Cryptography package with PIP and setup.py Ask Question (opens new window)