撸一个Vue手势验证码组件

手势验证码VAPTCHA

这是一种绘制轨迹进行人机的验证码,官网称为手势验证码。以下为官网说明:

VAPTCHA是“Variation Analysis based Public Turing Test to Tell Computers and Humans Apart”(基于变量分析来区分人类和计算机的图灵测试程序)的缩写,又称为手势验证码,一种基于人工智能和大数据的人机验证解决方案 。相对于传统验证码,VAPTCHA更加简单和安全。

Read More

Partager

30行代码,给hexo博客添加点击复制代码的功能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
function copyToClipboard(str) {
var save = function (e) {
e.clipboardData.setData('text/plain', str);
e.preventDefault();
}
document.addEventListener('copy', save);
document.execCommand('copy');
document.removeEventListener('copy', save);
}

$('figure.highlight').map(function (k, el) {
var btn = $('<div class="click-copy-code">单击复制代码</div>');
$(el).css({
'position': 'relative'
})
btn.css({
'padding': '5px 10px',
'position': 'absolute',
'top': '0',
'right': '0',
'background': '#6acaf1',
'color': '#fff',
'font-size': '12px',
'cursor': 'pointer',
})
btn.click(function () {
var content = $(el).find('.code')[0].innerText;
copyToClipboard(content)
})
$(el).append(btn[0])
})
Partager

使用webpack构建react项目

使用npm安装所需要的依赖

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#初始化项目
npm init
#安装react
cnpm i -S react react-dom
#安装webpack
cnpm i -D webpack webpack-dev-server
#使用sass
cnpm i -D node-sass sass-loader css-loader style-loader
#css加载相关
cnpm i -D postcss-loader postcss-flexbugs-fixes resolve-url-loader autoprefixer
#使用babel
cnpm i -D babel-core babel-loader babel-preset-es2015 babel-preset-react
#热更新
cnpm i -D html-webpack-plugin extract-text-webpack-plugin

Read More

Partager

自己实现一个Promise类

思考

最开始实现的时候总是把焦点放在函数上面,后面才发现应该将焦点放在所得到的结果,核心思想就是把resolve的值保存下来,然后执行then所传入的回调函数时,将值传入,reject同理。

对于异步的结果,当状态为pending时将onFulfilled函数保存,当函数执行resolve的时候再执行onFulfilled并把值传入。

Read More

Partager

创建一个只读属性

1
2
3
4
5
6
7
var a = Object.create()
Object.defineProperty(a, 'c', {
get: function() {return 1},
set: function(v) {console.log('c is read only')}
})
console.log(a.c) // 1
a.c = 3 // c is read only

使用Performance监测性能

1
2
3
4
5
6
7
8
9
10
11
Performance.mark('load-start') //标记
Performance.end('load-end')
Performance.mesurce('load', 'load-start', 'load-end') // 记录两标记之间的数据
Performance.getEnteriesByName('load')[0] //获取
// 得到PerformanceEntry 对象, 属性如下
PerformanceEntry = {
duration
entryType
name
startTime
}

技巧

1
2
//赋值
var a = b && c;
Partager

使用nvm管理NodeJs

安装nvm

curl 方式

1
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash

wget 方式

1
wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash

Read More

Partager

uglifyjs压缩代码遇到的ie8兼容性问题

1
2
3
4
5
6
var a = function() {
this.show();
}
a.prototype = {
show: function() {}
}

压缩后变成了 (大致结构)

1
2
3
4
5
6
var a = function b() {
this.show();
}
a.prototype = {
show: function() {}
}

在其他版本浏览器正常运行,因为这里b只在函数中有效且等于a,函数外部输出b则为undefined,但是如果使用ie8,b则变成了一个独立函数,并且与a不等于b。所以执行new a()时就会报对象不支持此方法的错误,因为此时this会在b的原型链中查找方法。

但是奇怪的只有一个地方出现了这个问题,其他地方正常,尚未找到原因。

Partager

deepin的安装与开发环境配置

deepin 下载安装

官网下在镜像:https://www.deepin.org,把镜像解压后里面有u盘启动盘制作工具,使用U盘一键安装。

用硬盘安装总是出现各种各样的问题,而且没有交换空间,会比较卡。

Read More

Partager

使用python 将js文件中的中文处理为Unicode 解决discuz编码问题

前言

开发discuz过程中最头疼的就是编码问题了,每次都要把中文作为语言包,js脚本文件就跟头疼了,特别是要用到webpack打包的时候

于是就想到了写个脚本来批量处理,开始用shell,折腾许久还是用python写出来了。

Read More

Partager

正确的检测对象类型 Object.prototype.toString

使用typeof

使用typeof会有一个问题,就是nullArray得到的结果也是object,所以我们需要判断一个变量是否是对象就应该用到Object.prototype.toString

Read More

Partager