ES2015入门系列10-类 classes

OK, 我们继续,这次来聊聊类。

内有 Jon Snow大战异鬼, 😄

熟悉后端的朋友们对类肯定都不陌生,如下面一段PHP的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class Human
{


protected $name;

public function __construct($name)
{

$this->name = $name;
}

public function introduce()
{

echo '你好,我叫 ' . $this->name . PHP_EOL;
}

}
$jack = new Human('Jack');
$jack->introduce();

上面的代码,我们创建了一个叫Human的类,初始化的时候传入名字,还有一个自我介绍的方法。

查看全文

Hexo插件之自动摘要生成器(hexo-excerpt)

Hexo 默认没有对列表页面进行摘要处理,即列表页面会把整个文章内容抛出,很吓人对不对?

除非手动在内容中增加:

1
<!-- more -->

本插件通过注册generator对所有文章在生成的时候进行处理,如果文章内容含有10个一级html标签,那么取这10个做为列表页面摘要,否则全部显示。

更新 v1.1.0

查看全文

ES2015入门系列9-Babel和Rollup

通过前面章节的讲解,大家对ES2015的一些新语法有了初步的理解,之前我们的测试代码都可以直接放入 Chrome Console 中直接运行,为了更好的学习后面的面向对象和模块开发,我先用一章介绍一下 Babel 和 Rollup。

ES2015虽然够好用,奈何没有浏览器对其可以完全支持,本文书写时间,Chrome开发版号称已经支持99%的ES2015特性。

所以,我们需要借助一个可以帮助我们将ES6代码翻译为浏览器都100%支持的ES5代码的工具,这就是本文的主角之一:Babel

打开Babel官网, 可以看到大大的介绍:

Babel is a JavaScript complier. Use next generation JavaScript today.

查看全文

ES2015入门系列8-新对象特性

继续以代码进行展开, 在ES5中,如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function makeDuckToy() {
var name = '鸭子';
var color = '黄色';
return {
name: name,
color: color,
quacks: function() {
console.log('嘎嘎嘎~~~');
}
}
}

var duck = makeDuckToy();

console.log(duck.name); // 鸭子
console.log(duck.color); // 黄色
duck.quacks(); //嘎嘎嘎~~~

ES2015为对象带来的新特性:

  • 属性简写

如果属性名称和变量名称一致,那么可以直接用省略变量名,如下:

查看全文

ES2015入门系列7-模版字符串

说到 模版字符串 (Template strings or Template literals), 我们先来看看在ES5中,我们遇到的问题:

假设我们需要拼接一段html字符串,常规的做法如下:

1
2
3
4
5
6
var text = 'ES5 sucks!';
var html = '\
<div> \
<p>' + text + '</p>\
</div>';

console.log(html);

或者:

1
2
3
4
5
6
7
var text = 'ES5 sucks!';
var html = [
'<div>',
'<p>' + text + '</p>',
'</div>'
].join('');
console.log(html);

查看全文

ES2015入门系列6-Rest和Spread

ES2015为我们带来了一个新的操作符: ,

  • 用于定义函数参数的地方,称之为 Rest
  • 用于调用函数的地方,称之为 Spread

我们一个个来分析:

  • Rest

写程序的时候或多或少都会有,传入不定参数给一个函数的需求,如,给一个班级加入学生名单,可以一次给一个,也可以一次给多个,以前的做法,可能是传入数组,或者定义2个方法,一个传入单个学生,一个传入学生数组,如:

查看全文

ES2015入门系列4-参数默认值

这个功能比较简单,但对于后端开发来说,会觉得会奇怪,参数默认值还需要特殊支持么?答案是肯定的,在ES5中, 参数是不可以指定默认值的,统一默认为 undefined, 如下代码:

1
2
3
4
5
6
7
function say(word) {
word = word || '呵呵!';
console.log(word);
}

console.log(say()); //呵呵!
console.log(say('哈哈!')); //哈哈!

没错,ES2015之前,我们只能这么来操作参数默认值,但是在ES2015中,就不再需要啦,就和普通的后端语言一样:

1
2
3
4
5
6
function say(word = '呵呵!') {
console.log(word);
}

console.log(say()); //呵呵!
console.log(say('哈哈!')); //哈哈!

是不是就这么结束啦?当然不是,回到官方手册上,我们看到的是:

查看全文