在这最近 25 天的日子里

我都干了什么?

  • 开发了一款应用。
  • 体会了黑眼圈的烦躁。

好吧以上就是没有更新的借口···

应用做什么用的呢?

简单说是我对时间、工作与生活、梦想和目标的感悟之作!以上纯属扯淡,开个玩笑!其实就是一款计划类型的工具应用,设置任务,完成获得奖励。

具体请看github

阅读全文 »

font-face 的实用价值

@font-face是什么?

MDN的解释:

这是一个叫做@font-faceCSS@规则,它允许网页开发者为其网页指定在线字体。通过这种作者自备字体的方式,@font-face可以消除对用户电脑字体的依赖。@font-face不仅可以放在在CSS的最顶层,也可以放在@规则的条件规则组中。

用户电脑字体是什么呢?更好理解的名称叫做Web安全字体,它是一种妥协,网页上的字体需要是本该存在于当前用户电脑上的字体才能正确显示,不然只会显示默认的Web字体;这样的灵活性,观赏性就会差很多了。使用方法

阅读全文 »

JavaScript 忍者秘籍读书笔记 —— 第八章 驯服线程和定时器

timeoutinterval之间的区别

  • JavaScript引擎是单线程执行,异步事件必须要排队等候才能执行。
  • 如果当前正在执行其它事件,该定时器就会推迟到下一个可用的执行时间点上,不会比延迟时间更短。
  • 如果一直不能执行定时器,最后就会无延迟执行,并伴随着多个同时执行。
  • setTimeout会在回调结束后再延迟至少10毫秒执行。

    1
    2
    3
    4
    5
    setTimeout( function reset () {
    /* code */
    setTimeout( reset, 10 );
    }, 10 );
  • setInterval则不管回调是否结束,每隔10毫秒执行;便会出现同时执行。

    1
    2
    3
    setInterval( function () {
    /* code */
    }, 10 );
阅读全文 »

JavaScript 忍者秘籍读书笔记 —— 第三章 函数是根本

函数的独特之处

JavaScript 是函数式语言,开发人员对JavaScript印象不好也在于浏览器的API

函数是第一型对象

对象的功能:

  • 可以通过字面量进行创建。
  • 可以赋值给变量、数组或其它对象的属性。
  • 可以作为参数传递给函数。
  • 可以作为函数的返回值进行返回。
  • 可以拥有动态创建并赋值的属性。
    函数可以像对象一样使用以上所有功能,并且可以被调用。

事件轮询

函数的调用通常是异步方式,浏览器的事件轮询是单线程的,每次只能处理一个事件,所以事件都被按照FIFO列表的顺序来处理。

回调

函数定义之后再调用就是回调。

阅读全文 »

《JavaScript 设计模式与开发实战》读书笔记 —— 第十四章 中介者模式

中介者模式的作用就是解除对象与对象之间的紧耦合关系。所有的相关对象都通过中介者对象来通信,而不是相互引用;中介者模式使网状的多对多关系变成了一对多关系。

中介者模式是迎合迪米特法则最少知识原则的一种实现,一个对象应当尽可能少的了解另外的对象。

阅读全文 »

《JavaScript 设计模式与开发实战》读书笔记 —— 第十三章 职责链模式

职责链模式把一系列可能会处理请求的对象连接成一条链,请求在这些对象间依次传递,直到遇到处理它的对象。

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
44
45
46
47
48
49
50
51
52
53
54
55
const order500 = function ( orderType, pay, stock ) {
if ( orderType === 1 && pay === true ) {
console.log( '500元定金预约,得到100' );
} else {
return false;
}
};
const order200 = function ( orderType, pay, stock ) {
if ( orderType === 2 && pay === true ) {
console.log( '200元定金' );
} else {
return false;
}
};
const orderNormal = function ( orderType, pay, stock ) {
if ( stock > 0 ) {
console.log( '普通用户' );
} else {
console.log( '库存不足' );
}
};
class Chain {
constructor( fn ) {
this.fn = fn;
this.successor = null;
}
setNextSuccessor( successor ) {
return this.successor = successor;
}
passRequest( ...args ) {
const ret = this.fn.apply( this, args );
if ( ret === false ) {
this.successor && this.successor.passRequest.apply( this.successor, args );
}
return ret;
}
}
const chainOrder500 = new Chain( order500 );
const chainOrder200 = new Chain( order200 );
const chainOrderNormal = new Chain( orderNormal );
chainOrder500.setNextSuccessor( chainOrder200 ).setNextSuccessor( chainOrderNormal );
chainOrder500.passRequest( 1, true, 500 );
chainOrder500.passRequest( 2, true, 500 );
chainOrder500.passRequest( 2, false, 500 );
chainOrder500.passRequest( 2, false, 0 );

阅读全文 »

《JavaScript 设计模式与开发实战》读书笔记 —— 第十二章 享元模式

享元模式是一种用于性能优化的模式,运用共享技术来有效支持大量细微度的对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
class Model {
constructor( sex ) {
this.sex = sex;
}
takePhoto() {
console.log( `sex=${this.sex}, underwear=${this.underwear}` );
}
}
let maleModel = new Model( 'male' ),
femaleModel = new Model( 'female' );
for ( let i = 0; i < 50; i++ ) {
maleModel.underwear = `underwear${i}`;
maleModel.takePhoto();
}
for ( let i = 0; i < 50; i++ ) {
femaleModel.underwear = `underwear${i}`;
femaleModel.takePhoto();
}

阅读全文 »

《JavaScript 设计模式与开发实战》读书笔记 —— 第十一章 模板方法模式

模板方法模式就是把代码中相同的部分搬移到父类中,通过继承来重复利用代码。

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
class Beverage {
boilWater() {
console.log( '把水煮沸' );
}
brew() {
throw new Error( '子类必须重写方法' );
}
pourIncup() {
throw new Error( '子类必须重写方法' );
}
addCondiments() {
throw new Error( '子类必须重写方法' );
}
customerWantsCondiments() {
return true;
}
init() {
this.boilWater();
this.brew();
this.pourIncup();
if ( this.customerWantsCondiments() ) {
this.addCondiments();
}
}
}
class Coffee extends Beverage {
brew() {
console.log( '用沸水冲泡咖啡' );
}
pourIncup() {
console.log( '把咖啡倒进杯子' );
}
addCondiments() {
console.log( '加糖和牛奶' );
}
}
class Tea extends Beverage {
brew() {
console.log( '用沸水泡茶' );
}
pourIncup() {
console.log( '把茶倒进杯子' );
}
addCondiments() {
console.log( '加牛奶' );
}
customerWantsCondiments() {
return window.confirm( '请问需要调料吗?' );
}
}
const coffee = new Coffee();
coffee.init();
const tea = new Tea();
tea.init();
阅读全文 »

《JavaScript 设计模式与开发实战》读书笔记 —— 第十章 组合模式

组合模式就是用小的子对象来构建更大的对象。

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
const MacroCommand = ( function () {
let commandsList = [];
return {
add( command ) {
commandsList.push( command );
},
execute() {
for ( let i = 0, c; c = commandsList[ i++ ]; ) {
c.execute();
}
},
};
} )();
const closeDoorCommand = {
execute() {
console.log( '关门' );
},
};
const openDoorCommand = {
execute() {
console.log( '开门' );
},
};
MacroCommand.add( closeDoorCommand );
MacroCommand.add( openDoorCommand );
MacroCommand.execute();

阅读全文 »

《JavaScript 设计模式与开发实战》读书笔记 —— 第九章 命令模式

命令模式中的命令指的是一个执行某些特定事情的指令,最常见的应用场景是:向某些对象发送请求,但并不知道请求的接收者是谁,也不知道被请求的操作是什么,此时就希望用一种松耦合的方式来设计程序,使得请求发送者和请求接收者能够消除彼此之间的耦合关系。

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
44
45
const Ryu = {
attack() {
console.log( '攻击' );
},
defense() {
console.log( '防御' );
},
jump() {
console.log( '跳跃' );
},
crouch() {
console.log( '蹲下' );
},
};
const makeCommand = function ( receiver, state ) {
return function () {
receiver[ state ]();
};
};
const commands = {
'119': 'jump',
'115': 'crouch',
'97': 'defense',
'100': 'attack',
};
let commandStack = [];
document.body.onkeypress = function ( event ) {
const keyCode = event.keyCode;
const command = makeCommand( Ryu, commands[ keyCode ] );
if ( command ) {
command();
commandStack.push( command );
}
};
document.getElementById( 'replay' ).onclick = function () {
let command = null;
while ( command = commandStack.shift() ) {
command();
}
};
阅读全文 »