Jolson's Blog

Quick Notes


  • 首页

  • 归档

  • 标签

  • 搜索
close
Jolson's Blog

ES6学习笔记(一):Set和Map

发表于 2016-04-05 | 分类于 JavaScript |

Set

ES6利用Set数组去重:

  1. 方法一:
1
2
3
4
5
function dedupe(array) {
return Array.from(new Set(array));
}
dedupe([1, 1, 2, 3]); // [1, 2, 3]
  1. 方法二(利用扩展运算符):
1
2
3
let arr = [3, 5, 2, 2, 5, 5];
let unique = [...new Set(arr)];
// [3, 5, 2]

特性

  • Set结构没有键名,只有键值,所以keys()和values()的行为完全一致。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
let set = new Set(['red', 'green', 'blue']);
for (let item of set.keys()) {
console.log(item);
}
// red
// green
// blue
for (let item of set.values()) {
console.log(item);
}
//red
//green
//blue
for (let item of set.entries()) {
console.log(item);
}
// ["red", "red"]
// ["green", "green"]
// ["blue", "blue"]
  • 可以省略values()方法,直接用for...of循环遍历Set,因为其默认遍历器生成函数就是它的values()方法
1
2
Set.prototype[Symbol.iterator] === Set.prototype.values
//true

### Set实现并集、交集、差集

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);
//并集
let union = new Set([...a, ...b]);
//[1, 2, 3, 4]
//交集
let intersect = new Set([...a].filter(x => b.has(x)));
//[2, 3]
//差集
let difference = new Set([...a].filter(x => !b.has(x)));
//[1]

Map

  • 和对象类似,Object结构提供了“字符串-值”的对应,Map结构提供了“值-值”的对应,是一种更完善的Hash结构实现。

Map和其他数据结构的转换

Map -> Array

1
2
3
let myMap = new Map().set(true, 7).set({foo: 3}, ['abc']);
[...myMap];
// [[true, 7], [{foo: 3}, ['abc']]]

Array -> Map

1
2
new Map([[true, 7], [{foo: 3}, ['abc']]])
// Map {true => 7, Object {foo: 3} => ['abc']}

Map -> Object

1
2
3
4
5
6
7
8
9
10
11
function strMapToObj(strMap) {
let obj = Object.create(null);
for (let [k,v] of strMap) {
obj[k] = v;
}
return obj;
}
let myMap = new Map().set('yes', true).set('no', false);
strMapToObj(myMap)
// { yes: true, no: false }

Object -> Map

1
2
3
4
5
6
7
8
9
10
function objToStrMap(obj) {
let strMap = new Map();
for (let k of Object.keys(obj)) {
strMap.set(k, obj[k]);
}
return strMap;
}
objToStrMap({yes: true, no: false})
// [ [ 'yes', true ], [ 'no', false ] ]
Jolson's Blog

前端构建工具Gulp

发表于 2016-03-24 | 分类于 教程 |

第一步:安装Node

首先需要搭建node环境。访问Node.js官网,然后点击大大的绿色的install按钮,下载完成后直接运行程序,就一切准备就绪。npm会随着安装包一起安装,稍后会用到它。

第二步:使用命令行

查看node版本号

1
node -v

查看npm版本

1
npm -v

第三步:安装gulp

NPM是基于命令行的node包管理工具,它可以将node的程序模块安装到项目中,在它的官网中可以查看和搜索所有可用的程序模块。
在命令行中输入

1
sudo npm install -g gulp

  • sudo是以管理员身份执行命令,一般会要求输入电脑密码
  • npm是安装node模块的工具,执行install命令
  • -g表示在全局环境安装,以便任何项目都能使用它
  • 最后,gulp是将要安装的node模块的名字

运行时注意查看命令行有没有错误信息,安装完成后,你可以使用下面的命令查看gulp的版本号以确保gulp已经被正确安装。

1
gulp -v

接下来,我们需要将gulp安装到项目本地

1
npm install —-save-dev gulp

这里,我们使用–save-dev来更新package.json文件,更新devDependencies值,以表明项目需要依赖gulp。

Dependencies可以向其他参与项目的人指明项目在开发环境和生产环境中的node模块依懒关系,想要更加深入的了解它可以看看package.json文档。

第四步:新建Gulpfile文件,运行gulp

安装好gulp后我们需要告诉它要为我们执行哪些任务,首先,我们自己需要弄清楚项目需要哪些任务。

  • 检查Javascript
  • 编译Sass(或Less之类的)文件
  • 合并Javascript
  • 压缩并重命名合并后的Javascript

安装依赖

1
npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-dev

提醒下,如果以上命令提示权限错误,需要添加sudo再次尝试。

新建gulpfile文件

现在,组件都安装完毕,我们需要新建gulpfile文件以指定gulp需要为我们完成什么任务。

gulp只有五个方法: task,run,watch,src,和dest,在项目根目录新建一个js文件并命名为gulpfile.js,把下面的代码粘贴进去:

gulpfile.js

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
32
33
34
35
36
37
38
39
40
41
42
43
// 引入 gulp
var gulp = require('gulp');
// 引入组件
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
// 检查脚本
gulp.task('lint', function() {
gulp.src('./js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
// 编译Sass
gulp.task('sass', function() {
gulp.src('./scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('./css'));
});
// 合并,压缩文件
gulp.task('scripts', function() {
gulp.src('./js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('./dist'))
.pipe(rename('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist'));
});
// 默认任务
gulp.task('default', function(){
gulp.run('lint', 'sass', 'scripts');
// 监听文件变化
gulp.watch('./js/*.js', function(){
gulp.run('lint', 'sass', 'scripts');
});
});

现在,分段解释下这段代码。

引入组件

1
2
3
4
5
6
var gulp = require('gulp');
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

这一步,我们引入了核心的gulp和其他依赖组件,接下来,分开创建lint, sass, scripts 和 default这四个不同的任务。

Lint任务

1
2
3
4
5
gulp.task('lint', function() {
gulp.src('./js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});

Link任务会检查js/目录下得js文件有没有报错或警告。

Sass任务

1
2
3
4
5
gulp.task('sass', function() {
gulp.src('./scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('./css'));
});

Sass任务会编译scss/目录下的scss文件,并把编译完成的css文件保存到/css目录中。

Scripts 任务

1
2
3
4
5
6
7
8
gulp.task('scripts', function() {
gulp.src('./js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('./dist'))
.pipe(rename('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist'));
});

scripts任务会合并js/目录下得所有得js文件并输出到dist/目录,然后gulp会重命名、压缩合并的文件,也输出到dist/目录。

default任务

1
2
3
4
5
6
gulp.task('default', function(){
gulp.run('lint', 'sass', 'scripts');
gulp.watch('./js/*.js', function(){
gulp.run('lint', 'sass', 'scripts');
});
});

这时,我们创建了一个基于其他任务的default任务。使用.run()方法关联和运行我们上面定义的任务,使用.watch()方法去监听指定目录的文件变化,当有文件变化时,会运行回调定义的其他任务。

现在,回到命令行,可以直接运行gulp任务了。

1
gulp

这将执行定义的default任务,换言之,这和以下的命令式同一个意思

1
gulp default

当然,我们可以运行在gulpfile.js中定义的任意任务,比如,现在运行sass任务:

1
gulp sass

Jolson's Blog

自动备份Hexo博客源文件

发表于 2015-12-06 | 分类于 教程 |

前言

这两天给电脑换上了SSD和内存,系统重装,一堆的软件和配置真是折腾死了。得益于之前加入的一个博文自动备份到Github上的脚本,让我没有再为这个费头脑。所以此文记录自动备份Hexo博客源文件到Github的过程。

原文出自:自动备份Hexo博客源文件

原理

通过通过监听Hexo的其它事件来完成自动执行Git命令完成自动备份。
通过查阅Hexo文档,找到了Hexo的主要事件,见下表:

事件名   事件发生时间
deployBefore 在部署完成前发布
deployAfter 在部署成功后发布
exit 在 Hexo 结束前发布
generateBefore 在静态文件生成前发布
generateAfter 在静态文件生成后发布
new 在文章文件建立后发布

于是我们就可以通过监听Hexo的deployAfter事件,待上传完成之后自动运行Git备份命令,从而达到自动备份的目的。

实现

将Hexo目录加入Git仓库

  1. 在Github下创建一个新的repository,取名为HEXO。(与本地的Hexo源码文件夹同名即可)进入本地的Hexo文件夹,执行以下命令创建仓库:
    1
    git init
  1. 设置远程仓库地址,并更新:
    1
    2
    git remote add origin git@github.com:XXX/XXX.git
    git pull origin master
  1. 修改.gitignore文件(如果没有请手动创建一个),在里面加入*.log 和 public/ 以及.deploy*/。因为每次执行hexo generate命令时,上述目录都会被重写更新。因此忽略这两个目录下的文件更新,加快push速度。

  2. 执行命令以下命令,完成Hexo源码在本地的提交:

    1
    2
    git add .
    git commit -m "添加hexo源码文件作为备份"
  1. 执行以下命令,将本地的仓库文件推送到Github:
    1
    git push origin master

安装shelljs模块

要实现这个自动备份功能,需要依赖Node.js的一个shelljs模块,该模块重新包装了child_process,调用系统命令更加的方便。该模块需要安装后使用。

在命令中键入以下命令,完成shelljs模块的安装:

1
npm install --save shelljs

编写自动备份脚本

待到模块安装完成,在Hexo根目录的scripts文件夹下新建一个js文件,文件名随意取。

ps: 如果没有scripts目录,请新建一个。

然后在脚本中,写入以下内容:

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
32
33
34
35
require('shelljs/global');
try {
hexo.on('deployAfter', function() {//当deploy完成后执行备份
run();
});
} catch (e) {
console.log("产生了一个错误<( ̄3 ̄)> !,错误详情为:" + e.toString());
}
function run() {
if (!which('git')) {
echo('Sorry, this script requires git');
exit(1);
} else {
echo("======================Auto Backup Begin===========================");
cd('D:/hexo'); //此处修改为Hexo根目录路径
if (exec('git add --all').code !== 0) {
echo('Error: Git add failed');
exit(1);
}
if (exec('git commit -am "Form auto backup script\'s commit"').code !== 0) {
echo('Error: Git commit failed');
exit(1);
}
if (exec('git push origin master').code !== 0) {
echo('Error: Git push failed');
exit(1);
}
echo("==================Auto Backup Complete============================")
}
}

其中,需要修改第17行的D:/hexo路径为Hexo的根目录路径。(脚本中的路径为博主的Hexo路径)

如果你的Git远程仓库名称不为origin的话,还需要修改第28行执行的push命令,修改成自己的远程仓库名和相应的分支名。

保存脚本并退出,然后执行hexo deploy命令,将会得到类似以下结果:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
INFO Deploying: git>
INFO Clearing .deploy folder...
INFO Copying files from public folder...
[master 3020788] Site updated: 2015-07-06 15:08:06
5 files changed, 160 insertions(+), 58 deletions(-)
Branch master set up to track remote branch gh-pages from git@github.com:smilexi
amo/notes.git.
To git@github.com:smilexiamo/notes.git
02adbe4..3020788 master -> gh-pages
On branch master
nothing to commit, working directory clean
Branch master set up to track remote branch gitcafe-pages from git@gitcafe.com:s
milexiamo/smilexiamo.git.
To git@gitcafe.com:smilexiamo/smilexiamo.git
02adbe4..3020788 master -> gitcafe-pages
INFO Deploy done: git
======================Auto Backup Begin===========================
[master f044360] Form auto backup script's commit
2 files changed, 35 insertions(+), 2 deletions(-)
rewrite db.json (100%)
To git@github.com:smilexiamo/hexo.git
8f2b4b4..f044360 master -> master
==================Auto Backup Complete============================

这样子,每次更新博文并deploy到服务器上之后,备份就自动启动并完成备份啦

Jolson's Blog

CentOS 6.6下源码编译安装Python

发表于 2015-11-19 | 分类于 Python |
  1. 准备安装模块

    1
    2
    yum groupinstall "Development tools"
    yum install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readline-devel tk-devel
  2. Python3.4 安装下载代码 configure → make → make altinstall

    1
    2
    3
    4
    5
    6
    cd /usr/local/src
    wget https://www.python.org/ftp/python/3.4.3/Python-3.4.3.tgz
    tar -zxvf Python-3.4.3.tgz
    cd Python-3.4.3
    ./configure --prefix=/usr/local/python
    make && make altinstall
  3. 安装Python3.4 :公用库的安装

    1
    2
    echo "/usr/local/python/lib" >> /etc/ld.so.conf
    ldconfig
  4. 安装Python3.4: 4. /usr/local/bin/

    1
    ln -s /usr/local/python/bin/python3.4 /usr/local/bin/python
  5. 安装Python3.4 :5. 确认是否安装正确

    1
    2
    /usr/local/python/bin/python3.4 -V
    python -V
  6. 安装Python3.4 Easy_Install

    1
    2
    3
    4
    5
    6
    cd /usr/local/src
    wget https://pypi.python.org/…/s/setuptools/setuptools-18.0.1.zip
    unzip setuptools-18.0.1.zip
    cd setuptools-18.0.1
    /usr/local/bin/python setup.py install
    ln -s /usr/local/python/bin/easy_install /usr/local/bin/easy_install
  7. 安装Python3.4 :Pip

    1
    2
    /usr/local/bin/easy_install pip
    ln -s /usr/local/python/bin/pip /usr/local/bin/pip
  8. 安装Python3.4: Virtualenv

    1
    2
    pip install virtualenv
    ln -s /usr/local/python/bin/virtualenv /usr/local/bin/virtualenv
  9. 安装Python3.4 :Virtualenvwrapper

    1
    pip install virtualenvwrapper
  10. 安装Python3.4 :参数设定$

    1
    2
    3
    4
    5
    vim ~/.bashrc
    if [ -f /usr/local/python/bin/virtualenvwrapper.sh ]; then
    export WORKON_HOME=$HOME/.virtualenvs
    source /usr/local/python/bin/virtualenvwrapper.sh
    fi
Jolson's Blog

Vim 常用命令总结

发表于 2015-10-25 | 分类于 Linux |

光标移动(Cursor Movement)

命令 作用(解释)
h,j,k,l h表示往左,j表示往下,k表示往右,l表示往上
Ctrl+f 上一页
Ctrl+b 下一页
w, e, W, E 跳到单词的后面,小写包括标点
b, B 以单词为单位往前跳动光标,小写包含标点
O 开启新的一行
^ 一行的开始
$ 一行的结尾
gg 文档的第一行
[N]G 文档的第N行或者最后一行


插入模式(Insert Mode)

命令    作用(解释)
i   插入到光标前面
I   插入到行的开始位置
a   插入到光标的后面
A   插入到行的最后位置
o, O    新开一行
Esc    关闭插入模式


编辑(Editing)

命令    作用(解释)
r 在插入模式替换光标所在的一个字符
J 合并下一行到上一行
s 删除光标所在的一个字符, 光标还在当行
S 删除光标所在的一行,光标还在当行,不同于dd
u 撤销上一步操作
ctrl+r 恢复上一步操作
. 重复最后一个命令
~ 变换为大写
[N]>> 一行或N行往右移动一个tab
[N]<< 一行或N行往左移动一个tab


关闭(Exiting)

命令    作用(解释)
:w 保存
:wq, :x 保存并关闭
:q 关闭(已保存)
:q! 强制关闭


搜索(Search)

命令    作用(解释)
v 选中一个或多个字符
V 选中一行


剪切和复制(Cut and Paste)

命令    作用(解释)
dd 删除一行
dw 删除一个单词
x 删除后一个字符
X 删除前一个字符
D 删除一行最后一个字符
[N]yy 复制一行或者N行
yw 复制一个单词
p 粘贴


窗口操作

命令    作用(解释)
:split 水平方向分割出一个窗口
:vsplit 垂直方向分割出一个窗口
:close 关闭窗口
Ctrl+W 切换窗口, h到左边窗口,j到下方窗口,k到上方窗口,l到右边窗口
1234…6
朱洁高

朱洁高

Hello, World

26 日志
10 分类
31 标签
RSS
GitHub Zhihu
© 2015 - 2017 朱洁高
由 Hexo 强力驱动
主题 - NexT.Pisces