11月

论 IFTTT 的正确食用姿势

发表于 2015-11-08 • 字数统计 875 • 阅读次数

什么是IFTTT

这是一个2011年在美国上线的网站，IFTTT 是 If This Then That 的缩写。通俗的来讲，IFTTT 的作用就是如果触发了一件事，则执行设定好的另一件事。

结合上图，Recipes 的目的是打通「this」和「that」两个网络服务，网络服务在这里称为 Channels (频道)，前者称为 Trigger Channel (触发器频道)，后者称为 Action Channel (动作频道)，当触发器频道满足触发条件，那么就会执行动作频道指定的动作。

所以，IFTTT 创建一个「Recipes 流程」的流程如下：选择一个触发器频道，设置它的触发条件，再选择一个动作频道，然后设置它要执行的动作，OK，这样就搞定了。

比如我设置了这样一个Recipes：

整个Recipe的意思是 “If new feed item from https://www.anotherhome.net/feed, then publish a post to @DIYgod酱”。

这样等我这篇文章发布之后，一条微博就会自动发送了。

然而还没完，我还有两个涉及微博的 Recipes：

阅读全文 »

08月

创作集

《JavaScript高级程序设计》读书笔记

发表于 2015-08-19 • 字数统计 7039 • 阅读次数

莎士比亚曾经说过：“好记性不如烂笔头。”

第一章 JavaScript简介

1.1 JavaScript简史

1.2 JavaScript实现

一个完整的JavaScript实现应该由三个不同的部分组成：核心（ECMAScript）、文档对象模型（DOM）、浏览器对象模型（BOM）。
ECMAScript：提供核心语言功能；DOM：提供访问和操作网页内容的方法和接口；BOM：提供与浏览器交互的方法和接口。

1.3 JavaScript版本

第二章在HTML中使用JavaScript

2.1 script元素

标签的位置：为了避免浏览器在呈现页面时出现明显的延迟，现代Web应用程序一般都把全部JavaScript引用放在<body>元素中页面内容的后面。
延迟脚本：defer属性表明脚本在执行时不会影响页面的构造，脚本会被延迟到整个页面都解析完毕后再运行；只适用于外部脚本文件。

1	<script defer="defer" src="example.js"></script>

异步脚本：async属性表示当前脚本不必等待其他脚本，也不必阻塞文档呈现，告诉浏览器立即下载文件，且并不保证标记为async的脚本按照他们的先后顺序执行；只适用于外部脚本文件。

1 2	<script async src="example1.js"></script> <script async src="example2.js"></script>

2.2 嵌入代码与外部文件

2.3 文档模式

混杂模式与标准模式；开启标准模式：

1 2	<!-- HTML 5 --> <!DOCTYPE html>

2.4 noscript元素

第三章基本概念

3.1 语法

区分大小写：ECMAScript中的一切都区分大小写。
严格模式：在严格模式下，ECMAScript 3 中的一些不确定的行为将得到处理，而且对某些不安全的操作也会抛出错误。在顶部添加如下代码：

1	"use strict"

3.2 关键字和保留字

3.3 变量

给未经声明的变量赋值在严格模式下会导致抛出 ReferenceError 错误。

3.4 数据类型

typeof操作符，用来检测变量的数据类型。
5种简单数据类型：Undefined、Null、Boolean、Number、String；1种复杂数据类型（引用类型）：Object。

Undefined类型：使用var声明变量但未对其加以初始化时，这个变量的值就是undefined。
Null类型：null值表示一个空对象指针；只要意在保存对象的变量还没有真正保存对象，就应该明确地让该变量保存null值。
Boolean类型：其他类型转换为Boolean类型，使用函数Boolean()。
Number类型：其他类型转换为Number类型，常用函数parseInt()，转换字符串时，如果第一个字符不是数字字符或者负号，会返回NaN，第二个参数可选，表示进制
String类型：字符串是不可变的；其他类型转换为String类型，使用函数toString()或String()或加一个空字符串（1+’’）。
Object类型

创建对象的方法：

1	var o = new Object();

创建Object对象的实例并为其添加属性或方法，就可以创建自定义对象；

Object类型是所有它的实例的基础，具有下列属性和方法：

constructor：保留着用于创建当前对象的函数即构造函数；
hasOwnProperty(propertyName)：用于检查给定的属性在当前对象实例中是否存在；
isPrototypeOf(object)：用于检查传入的对象是否是传入对象的原型；
propertyIsEnumerable()；toLocaleString()；
toString()：返回对象的字符串表示；
valueOf()：返回对象的字符串、数值或布尔值表示；

3.5 操作符

在比较字符串时，实际比较的是两个字符串中对应位置的每个字符的字符编码值。

1	"23" < "3" // true

在比较数值和字符串时，字符串都会被被转换成数值，然后再以数值方式与另一个数值比较；如果不能转换成数值，就转换成NaN。
任何操作数与NaN进行比较，结果都是false。

NaN == NaN  // false
NaN === NaN  // false
NaN &gt; NaN  // false
NaN &lt; NaN  // false

相等（==）全等（===）：全等只在两个操作数未经转换就相等的情况下返回true。

1 2	"55" == 55 // true "55" === 55 // false

条件操作符

1	variable = boolean_expression ? true_value : false_value;

3.6 语句

由于ECMAScript中不存在块级作用域，因此在循环内部定义的变量也可以在外部访问到：

for (var i = 0; i &lt; 10; i++) {
	var j = 1;
}
console.log(i, j);  // 10 1

for-in 语句可以用来枚举对象的属性。

1
2
3

for (property in expression) {
  ...
}

break 和 continue 语句与 label 语句联合使用：多发生在循环嵌套的情况下。

var num = 0;

outermost:
for (var i = 0; i &lt; 10; i++) {
	for (var j = 0; j &lt; 10; j++) {
		if (i == 5 &amp;&amp; j ==5) {
			break outermost;
		}
		num++;
	}
}

console.log(num);  // 55

3.7 函数

函数参数：参数在内部是用一个数组来表示的，函数接收到的始终都是这个数组，而不关心数组中包含哪些函数；通过arguments对象来访问这个参数数组；命名的参数只提供便利，但不是必需的；arguments对象中的值与对应的命名参数的内存空间是独立的，但它们的值会同步。

function example(name, age) {
	console.log('arguments:', arguments);
	console.log('name:', name, 'age:', age);
	name = 'DIYgod';
	console.log(arguments[0]);
}
example('Anotherhome', '556', 'www.anotherhome.net');

// arguments: ["Anotherhome", "556", "www.anotherhome.net"]
// name: Anotherhome age: 556
// DIYgod

第四章变量、作用域和内存问题

4.1 基本类型和引用类型的值

在操作对象时，实际上是在操作对象的引用而不是实际的对象。

2.从一个变量向另一个变量复制基本类型的值时，会创建这个值的一个副本；从一个变量向另一个变量复制引用类型的值时，复制的是指向存储在堆中的一个对象的指针，复制之后两个变量指向同一个对象。

var o1 = {};
var o2 = o1;
o1.name = 'DIYgod';
console.log(o2.name);  // DIYgod

var n1 = 1;
var n2 = n1;
n1 = 2;
console.log(n2);  // 1

传递参数：参数只能按值传递，参数为对象时，在函数内部访问的是同一个对象。

function setName(o) {
	o.name = 'DIYgod';
	o = {};
	o.name = 'Anotherhome';
}

var p = {};
setName(p);
console.log(p.name);  // DIYgod

确定一个值是哪种基本类型可以使用typeof操作符，而确定一个值是哪种引用类型可以使用instanceof操作符。

4.2 执行环境及作用域

执行环境有全局执行环境和函数执行环境之分；每个执行环境都有一个与之关联的变量对象；每次进入一个新执行环境，都会创建一个用于搜索变量和函数的作用域链，作用链的前端是当前执行的代码所在的变量环境，最后一个对象是全局执行环境的变量对象。
查询标识符：从作用域链的前端开始，向上逐级查询，找到后搜索结果停止，没有找到则一直追溯到全局环境的变量对象。

4.3 垃圾回收

最常用的垃圾搜集方式是标记清除：垃圾回收器在运行时会给存储在内存中的所有变量都加上标记，然后去掉环境中的变量以及被环境中的变量引用的变量的标记，而在此之后还有标记的变量被视为准备删除的变量，因为这些变量无法被访问到了。
优化内存占用：为执行中的代码只保存必要的数据；一旦数据不再有用，最好通过将其值设置为null来释放其引用——解除引用；解除引用的作用是让其值脱离执行环境，以便垃圾搜集器下次运行时将其回收。

第五章引用类型

5.1 Object类型

创建Object实例：使用Object构造函数；对象字面量。

// new 操作符法
var o1 = new Object();
o1.name = 'DIYgod';
o1.age = 20;

// 对象字面量表示法
var o1 = {
  name: 'DIYgod',
  age: 20
}

访问对象属性：点表示法；方括号表示法。建议使用点表示法。

// 点表示法
console.log(o.name);

// 方括号表示法
console.log(o['name']);

var n = 'name';
console.log(o[n]);

console.log(o['first name'];

5.2 Array类型

创建数组：使用Array构造函数；使用数组字面量表示法。

var a1 = new Array();
var a2 = new Array(20);
var a3 = new Array('red', 'blue', 'green');

var a4 = [];
var a5 = ['red', 'blue', 'green'];

利用length在末尾添加新项。

1 2	var a = ['a', 'b']; a[a.length] = 'c';

检测数组：Array.isArray()（解决了存在两个以上全局执行环境时instanceof检测结果出错的情况）。
栈方法和队列方法：push()添加一项到数组末尾；pop()移除数组末尾一项；shift()移除数组第一项；unshift()；添加一项到数组前端。
重排序

reverse()：反转数组项的顺序。
sort()：默认将数组项转换成字符串然后升序排列。可以接收一个比较函数作为参数。

比较函数接收两个参数，如果第一个参数位于第二个参数之前则返回一个负数，相等则返回0，第二个参数位于第一个参数之前则返回一个负数。

var a = [0, 1, 15, 10, 5];
a.sort();
console.log(a)  // [0, 1, 10, 15, 5]

function compare(value1, value2) {
	return value1 - value2;
}
a.sort(compare);
console.log(a)  // [0, 1, 5, 10, 15]

操作方法

concat()：添加项

1
2
3

var a1 = ['red', 'green', 'blue'];
var a2 = a1.concat('yellow', ['black', 'brown']);
console.log(a2)  // ["red", "green", "blue", "yellow", "black", "brown"]

slice()：截取

1 2	var a = ["red", "green", "blue", "yellow", "black", "brown"]; console.log(a.slice(1), a.slice(1, 4)) // ["green", "blue", "yellow", "black", "brown"] ["green", "blue", "yellow"]

splice()：删除插入替换

var a = ["red", "green", "blue", "yellow", "black", "brown"];
console.log(a.splice(2, 1), a);  // 删除项; ["blue"] ["red", "green", "yellow", "black", "brown"]
console.log(a.splice(1, 0, 'yellow', 'orange'), a);  // 插入项; [] ["red", "yellow", "orange", "green", "yellow", "black", "brown"]
console.log(a.splice(1, 1, 'red', 'purple'), a);  // 替换项; ["yellow"] ["red", "red", "purple", "orange", "green", "yellow", "black", "brown"]

位置方法：indexOf() lastIndexOf() 接收两个参数：要查找的项和（可选）查找起点位置的索引；indexOf()从前往后查找，lastIndexOf()从后往前查找；返回要查找的项的位置，没找到则返回-1。

var a = ["red", "purple", "orange", "green", "red", "yellow", "black", "brown"];
console.log(a.indexOf('red'));  // 0
console.log(a.lastIndexOf('red'));  // 4
console.log(a.indexOf('red', 1));  // 4
console.log(a.lastIndexOf('red', 1));  // 0

迭代方法：every() some() filter() map() forEach()。

var a = [1, 2, 3, 4, 5, 4, 3, 2, 1];

var everyResult = a.every(function (item, index, array) {
	return (item &gt; 2);
});
console.log(everyResult);  // false

var someResult = a.some(function (item, index, array) {
	return (item &gt; 2);
});
console.log(someResult);  // true

var filterResult = a.filter(function (item, index, array) {
	return (item &gt; 2);
});
console.log(filterResult);  // [3, 4, 5, 4, 3]

var mapResult = a.map(function (item, index, array) {
	return (item * 2);
});
console.log(mapResult);  // [2, 4, 6, 8, 10, 8, 6, 4, 2]

var forEachResult = a.forEach(function (item, index, array) {
	console.log(item);
});
console.log(forEachResult);  // undefined

归并方法

var a = [1, 2, 3, 2, 1];

var sum1 = a.reduce(function (prev, cur, index, array) {
	console.log(index);  // 1 2 3 4
	return prev + cur;
});
console.log(sum1);  // 9

var sum2 = a.reduceRight(function (prev, cur, index, array) {
	console.log(index);  // 3 2 1 0
	return prev + cur;
});
console.log(sum2);  // 9

5.3 Date类型

创建日期对象：月份基于0（一月是0，二月是1…）。

1
2
3

var d1 = new Date();

var d2 = new Date(2015, 2, 5, 17, 55, 55);  // 2015年3月5日下午5点55分55秒

获取调用时的日期和时间和毫秒数，可以用来分析代码。

var start = Date.now();
doSomething();
var stop = Date.now();
var result = stop - start;

日期格式化方法：local表示以特定于地区的格式显示。

var d2 = new Date(2015, 2, 5, 17, 55, 55);
d2.toString();  // "Thu Mar 05 2015 17:55:55 GMT+0800 (CST)"
d2.toDateString();  // "Thu Mar 05 2015"
d2.toTimeString();  // "17:55:55 GMT+0800 (CST)"
d2.toLocaleString();  // "2015/3/5 下午5:55:55"
d2.toLocaleDateString();  // "2015/3/5"
d2.toLocaleTimeString();  // "下午5:55:55"

5.4 RegExp类型

创建一个正则表达式：

pattern部分是正则表达式

flags，标志，标明正则表达式的行为：g 全局模式；i 不区分大小写；m 多行模式

1 2	var exp1 = / pattern / flags var exp2 = new RegExp('pattern', 'flags');

实例方法：

exec()：返回第一个匹配项信息的数组，数组第一项是与整个模式匹配的字符串，其他项是与模式中的捕获组匹配的字符串；还包含两个额外的属性，index 和 input。

var text = "I'm DIYgod, and this is Anotherhome";
var pattern = /and( this( is)?)?/gi;
var matches = pattern.exec(text);
console.log(matches.index);  // 12
console.log(matches.input);  // I'm DIYgod, and this is Anotherhome
console.log(matches[0]);  // and this is
console.log(matches[1]);  //  this is
console.log(matches[2]);  //  is

test()：在模式与该参数匹配的情况下返回true，否则返回false。

var text = "I'm DIYgod, and this is Anotherhome";
var pattern = /DIYgod/;
var matches = pattern.test(text);
console.log(matches);  // true

RegExp构造函数包含一些属性，适用于作用域中的所有正则表达式，记录一些最近一次正则表达式操作的信息。

5.5 Function类型

定义函数，函数实际上是 Function 类型的实例，因此函数也是对象。

// 使用函数声明语法
function f1 (n1, n2) {
	return n1 + n2;
}

// 使用函数表达式
var f2 = function (n1, n2) {
	return n1 + n2;
};

// 使用构造函数，不推荐
var f3 = new Function('n1', 'n2', 'return n1 + n2');

函数名是一个指向函数对象的指针。

function f1 (n1, n2) {
	return n1 + n2;
}
var f2 = f1;
f1 = null;
console.log(f2(1, 1));  // 2

ECMAScript中没有函数重载。
函数声明与函数表达式的区别：解释器会率先读取函数声明，并使其在执行任何代码之前可用（函数声明提升）；函数表达式必须等到解释器执行到它所在行才会真正被解释执行。

console.log(f1(1, 1));  // 2
function f1 (n1, n2) {
	return n1 + n2;
}

console.log(f2(1, 1));  // Uncaught TypeError: f2 is not a function
var f2 = function(n1, n2) {
	return n1 + n2;
}

函数内部属性

函数的arguments对象的callee属性：是一个指针，指向拥有这个arguments对象的函数。可以在递归时减小函数和函数名的耦合。

// 明显第二种写法更好一些

function factorial1 (num) {
	if (num &lt;= 1) {
		return 1;
	}
	else {
		return num * factorial1(num - 1);
	}
}

function factorial2 (num) {
	if (num &lt;= 1) {
		return 1;
	}
	else {
		return num * arguments.callee(num - 1);
	}
}

caller属性：保存着当前函数的函数的引用。

function outer() {
	inner();
}
function inner() {
	console.log(arguments.callee.caller);  // function outer()...
}
outer();

函数属性和方法

length属性：表示函数希望接收的命名参数的个数。

function f (n1, n2) {
	return n1 + n2;
}
console.log(f.length);  // 2

apply() call()：用来改变函数的this对象的值。

window.color = 'red';
var o = {
	color: 'blue'
};

function sayColor (n1, n2) {
	console.log(this.color);
	return n1 + n2;
}

sayColor(1, 1);  // red
o.sayColor = sayColor;
o.sayColor();  // blue

// 使用call和apply可以消除对象与方法的耦合关系
sayColor.call(window, 1, 1);  // red
sayColor.call(o, 1, 1);  // blue

sayColor.apply(window, [1, 1]);  // red
sayColor.apply(o, [1, 1]);  // blue

5.6 基本包装类型

Boolean类型、Number类型、String类型

暂时跳过

5.7 单体内置对象

Global对象、Math对象

暂时跳过

第六章面向对象的程序设计

6.1 理解对象

两种属性：数据属性和访问器属性。特性：描述属性的各种特征，是为了实现JavaScript引擎用的，不能直接访问。

数据属性，有4个特性：

[[Configurable]]：表示能否通过 delete 删除属性从而重新定义属性，能否修改属性的特性，能否把属性修改为访问器属性。
[[Enumerable]]：表示能否通过 for-in 循环返回属性。
[[Writeable]]：表示能否修改属性的值。
[[Value]]：包含这个属性的数据值。

访问器属性，有4个特性：

[[Configurable]]：表示能否通过 delete 删除属性从而重新定义属性，能否修改属性的特性，能否把属性修改为数据属性。
[[Enumerable]]：表示能否通过 for-in 循环返回属性。
[[Get]]：在读取属性时调用的函数。
[[Set]]：在写入属性时调用的函数。

定义及读取特性：Object.defineProperty() Object.defineProperties() Object.getOwnPropertyDescriptor()

6.2 创建对象

工厂模式：虽然解决了创建多个相似对象的问题，但却没有解决对象识别的问题。

function createPerson(name, age, job) {
	var o = new Object();
	o.name = name;
	o.age = age;
	o.job = job;
	o.sayName = function () {
		console.log(this.name);
	}
	return o;
}
var p1 = createPerson('DIYgod', 20, 'Software Engineer');
var p2 = createPerson('Anotherhome', 2, 'Website');

构造函数模式。（构造函数应该以大写字母开头）

function Person(name, age, job) {
	this.name = name;
	this.age = age;
	this.job = job;
	this.sayName = function () {
		console.log(this.name);
	}
}
var p1 = new Person('DIYgod', 20, 'Software Engineer');
var p2 = new Person('Anotherhome', 2, 'Website');

// p1 p2 分别保存着 Person 的一个不同的实例，这两个对象都有一个 constructor 属性，该属性指向Person
console.log(p1.constructor);  // function Person(name, age, job) {...

console.log(p1 instanceof Object);  // true
console.log(p1 instanceof Person);  // true

这种方法会经历4个步骤：

创建一个新对象
将构造函数的作用域赋给新对象（this指向这个新对象）
执行构造函数中的代码（为新对象添加属性）
返回新对象

构造函数的问题：每个方法都要在每个实例上重新创建一遍。

1	console.log(p1.sayName === p2.sayName); // false

原型模式：每个函数都有一个 prototype 属性，这个属性是一个指针，指向一个对象（函数的原型对象），这个对象包含可以由该类型的所有实例共享的属性和方法。

// 组合使用构造函数模式与原型模式
function Person(name, age, job) {
	this.name = name;
	this.age = age;
	this.job = job;
}
Person.prototype.sayName = function () {
	console.log(this.name);
}
var p1 = new Person('DIYgod', 20, 'Software Engineer');
var p2 = new Person('Anotherhome', 2, 'Website');

console.log(p1.sayName === p2.sayName);  // true

理解原型对象：

只要创建一个新函数，就会根据一组特定的规则为该函数创建一个 prototype 属性，指向原型对象
默认所有原型对象都会获得一个 constructor 属性，指向 prototype 属性所在函数
调用构造函数创建新实例后，实例将有一个 proto 属性，指向构造函数的原型对象，指针叫[[Prototype]]，默认原型指向Object
实例与构造函数没有直接关系
读取属性：搜索先从对象实例本身开始，如果没找到，搜索原型对象
使用 isPrototype() 来检测构造函数和实例之间是否有关系
使用 hasOwnProperty() 来检测属性存在于实例中还是原型中

原型与 in 操作符

// in操作符会在通过对象能够访问到属性时返回true
console.log('name' in p1);  // true

// 枚举属性
for (var prop in p1) {
	console.log(prop);  // name age job sayName
}

用对象字面量重写原型对象

function Person() {
}
Person.prototype = {
	constructor: Person,  // 这里重写了prototype，不再默认有constructor属性
	name: 'DIYgod',
	age: 20
};

动态原型模式、寄生构造函数模式、稳妥构造函数模式

6.3 继承

JavaScript中最常用的继承：组合继承。融合了原型链和构造函数的优点。

function SuperType(name) {
	this.name = name;
	this.color = ['red', 'blue', 'green'];
}
SuperType.prototype.sayName = function () {
	console.log(this.name);
}

function SubType(name, age) {
	SuperType.call(this, name);  // 借用构造函数
	this.age = age;
}
SubType.prototype = new SuperType();  // 原型链
SubType.prototype.constructor = SubType;  // construcotr在上一句中被重写
SubType.prototype.sayAge = function () {
	console.log(this.age);
}

var instance = new SubType('DIYgod', 20);
instance.sayName();  // DIYgod
instance.sayAge();  // 20

确定原型和实例的关系。接上例：

1 2	console.log(instance instanceof SuperType); // true console.log(SuperType.prototype.isPrototypeOf(instance)); // true

原型式继承、寄生式继承、寄生组合式继承

第七章函数表达式

7.1 递归

7.2 闭包

闭包是有权访问另一个函数作用域中的变量的函数。
（作用域链见4.2）在外部函数内部定义的内部函数将包含外部函数的活动对象添加到它的作用域中；外部函数执行完毕后，其活动对象不会被销毁，因为内部函数的作用域链仍然在引用这个活动对象；外部函数执行完毕后，内部函数仍然可以访问到其定义的所有变量。

function outer () {
	var name = 'DIYgod';
	return function () {
		console.log(name);
	}
}
var inner = outer();
inner();  // DIYgod
inner = null;  // 解除对outer内部的匿名函数的引用，以便释放内存

闭包只能取得包含函数中任何变量的最后一个值。

function createFunction () {
	var result = [];
	for (var i = 0; i &lt; 10; i++) {
		result[i] = function () {
			return i;
		}
	}
	return result;
}
console.log(createFunction()[0]());  // 10
console.log(createFunction()[1]());  // 10
// 返回的都是同一个变量i

匿名函数的this通常会指向window。

var name = 'The Window';
var object = {
	name: 'My Object',
	getNameFunc: function () {
		return function () {
			return this.name;
		}
	}
}
console.log(object.getNameFunc()());  // The Window

7.3 模仿块级作用域

用匿名函数来模仿块级作用域：第一个括号的作用是将函数声明转换成函数表达式（函数声明不能通过后面加括号来调用），第二个括号来调用这个函数。

(function () {
	var i = 9;
	console.log(i);  // 9
})();
console.log(i);  // Uncaught ReferenceError: i is not defined

7.4 静态对象

任何在函数中定义的变量，都可以认为是私有变量。
有权访问私有变量和私有函数的公有方法称为特权方法。

function MyObject() {
	// 私有变量和私有函数
	var privateVariable = 'DIYgod';
	function privateFunction() {
		console.log('lalala');
	}

	// 特权方法
	this.publicMethod = function () {
		console.log(privateVariable);
		privateFunction();
	};
}
var o = new MyObject();
o.publicMethod();  // DIYgod lalala
o.privateFunction();  // Uncaught TypeError: o.privateFunction is not a function

…

第十三章事件

13.1事件流

事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点；IE9、FireFox、Chrome 和 Safari 将事件一直冒泡到 window 对象。
事件捕获：由于老版本的浏览器不支持，因此很少有人使用事件捕获。
“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。

13.2 事件处理程序

HTML事件处理程序：扩展作用域，在函数内部可以像访问局部变量一样访问document及该元素本身的成员，栗子：

1	<input type="button" value="Click Me" onclick="alert(value)">

如果是一个表单输入元素，则作用域中还会包含访问表单元素的入口，栗子：

&lt;form method="post"&gt;
    &lt;input type="text" name="username" value=""&gt;
    &lt;input type="button" value="Echo username" onclick="alert(username.value)"&gt;
&lt;/form&gt;

缺点：①存在时差问题，解析函数之前就触发事件会引发错误 ②扩展处理程序的作用域链在不同浏览器中会导致不同结果 ③导致HTML和JavaScript代码紧密耦合。

DOM0级事件处理程序

// 绑定事件处理程序
var btn = document.getElementById('myButton');
btn.onclick = function () {
	console.log(this.id);    // myButton
}

// 删除事件处理程序
btn.onclick = null;

以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。

DOM2级事件处理程序

addEventListener() 和 removeEventListener()

三个参数：要处理的事件名、作为事件处理程序的函数、在捕获阶段调用函数(true)还是在冒泡阶段调用函数(false，默认)

好处是可以添加多个事件处理程序，使用 addEventListener 添加的事件处理程序只能使用 removeEventListener移除，匿名函数无法移除。

IE事件处理程序

attachEvent() 和 detachEvent()

var btn = document.getElementById('myButton');
btn.attachEvent('onclick', function () {
	console.log(this === window);    // myButton
});

以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。

13.3 事件对象

在触发DOM上的某个事件时，会产生一个事件对象event，这个对象包含着所有与事件有关的信息。只有在事件处理程序执行期间，event对象才会存在，一旦事件处理程序执行完成，event对象就会被销毁。
属性/方法：

currentTarget：正在处理事件的那个元素

target：事件的目标

type：事件类型

cancelable：可以阻止特定事件的默认行为

preventDefault()：阻止特定事件的默认行为

stopPropagation()：停止事件在DOM层次中的传播，即取消进一步的事件捕获或冒泡

eventPhase：事件出于事件流的阶段捕获阶段为1 处于目标对象为2 冒泡阶段为3

13.4 事件类型

UI事件、焦点事件、鼠标事件、滚轮事件、文本事件、键盘事件、合成事件、变动事件。

…

第二十一章 Ajax与Comet

21.1 XMLHttpRequest对象

用法

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
	if (xhr.readState === 4) {
		if (xhr.status &gt;= 200 &amp;&amp; xhr.status &lt; 300 || xhr.status === 304) {
			console.log(xhr.responseText);
		}
		else {
			console.log('Request was unsuccessful: ' + xhr.status);
		}
	}
};
xhr.open('get', 'example.php', true);
xhr.send(null);

创建XHR对象：new XMLHttpRequest();
open()：启动一个请求以备发送；3个参数：请求类型、请求的URL、是否异步发送请求（同步必须等到服务器响应后再继续执行）；不会真正发送请求。
send()：发送请求；1个参数：发送的数据；不需要发送数据则必须传入null。
XHR对象的属性：

responseText 返回的文本
status 响应的HTTP状态。

HTTP状态码：

2xx 成功
3xx 重定向，304 Not Modified 表示请求的资源没有被修改，可以直接用浏览器中缓存的版本，302 Found 表示请求的资源现在临时从不同的URI响应请求
4xx 客户端错误，403 Forbidden，404 Not Found
5xx 服务器错误，500 Internal Server Error，503 Service Unavailable。

XHR的readyState属性：

0：未初始化
1：启动，已调用open()
2：发送，已调用send()
3：接收到部分响应数据
4：接收到全部响应数据

readystatechange事件：readystate属性的值由一个值变成另一个值，都会触发readystatechange事件。

21.4 跨域资源共享

CORS：使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是应该失败。IE中要使用XDR对象实现，其他浏览器XHR对象原生支持。
图像Ping：只能发送GET请求；无法访问服务器的响应文本。

var img = new Image();
img.onload = img.onerror = function () {
	console.log('Done!');
};
img.src = 'http://api.hitokoto.us/rand?encode=jsc';

JSONP：两部分组成回调函数和数据。

function myCallBack (data) {
	console.log(data.hitokoto);  // 像平常的你一样引发奇迹吧-
}
var script = document.createElement('script');
script.src = 'http://api.hitokoto.us/rand?encode=jsc&amp;fun=myCallBack';  // 返回一个包含在函数调用中的JSON，调用了myCallBack函数：myCallBack({"hitokoto":"...","author":"...",....});
document.body.insertBefore(script, document.body.firstChild);

缺点：安全性不可靠；不容易判断请求失败。

To Be Continued…

阅读全文 »

05月

创作集

百度前端技术学院编码挑战（TASK 0004）

发表于 2015-05-24 • 字数统计 2946 • 阅读次数

任务4（最终挑战）已经发布，任务deadline是6月10日至6月30日。

TASK 0004 内容：https://github.com/baidu-ife/ife/tree/master/task/task0004

我做的：https://github.com/DIYgod/ife-work/tree/master/task0004

在线Demo： https://www.anotherhome.net/file/ife/task0004

本次任务断断续续花费了20天（5.20-6.9）的时间。

下面是我做 TASK 0004 过程中的一些记录。

阅读全文 »

05月

创作集

百度前端技术学院编码挑战（TASK 0003）

发表于 2015-05-08 • 字数统计 1198 • 阅读次数

任务3已经发布，初级班的任务时间是从5月7日至5月18日，中级班为4月30日至5月10日。

TASK 0003 内容：https://github.com/baidu-ife/ife/tree/master/task/task0003

我做的：https://github.com/DIYgod/ife-work/tree/master/task0003

在线Demo： https://www.anotherhome.net/file/ife/task0003/

本次任务累计花费时间10天（5.6-5.16 ）

下面是我做 TASK 0003 过程中的一些记录。

阅读全文 »

04月

创作集

百度前端技术学院编码挑战（TASK 0002）

发表于 2015-04-24 • 字数统计 2707 • 阅读次数

TASK 0002 已经发布，初级班的任务时间是从4月24日至5月7日，中级班为4月18日至4月25日。

TASK 0002 内容：https://github.com/baidu-ife/ife/tree/master/task/task0002

我做的：https://github.com/DIYgod/ife-work/tree/master/task0002

在线Demo： https://www.anotherhome.net/file/ife/task0002/task0002_1.html

本次任务累计花费时间17天（4.19-5.6 ）

下面是我做 TASK 0002 过程中的一些记录。

阅读全文 »

04月

创作集

百度前端技术学院编码挑战（TASK 0001）

发表于 2015-04-14 • 字数统计 2245 • 阅读次数

百度Web前端技术学院（Baidu Institute of Front-End Technology简称IFE）是一个由百度EFE团队、百度人力资源部校园招聘组联合出品的、面向在校大学生的前端培训组织，借助百度大量优秀的前端工程师以及丰富的前端知识积累，帮助大学生们更加高效、系统地学习Web前端技术。

百度Web前端技术学院已正式开学，我有幸成为了第一期的初级班学员，可以和菊苣们一起玩耍啦～

想一起学但是没录取的可以加群：438966405

TASK 0001 发布，初级班Review提交截止时间为4月23日，中级班为4月16日。

TASK 0001 内容：https://github.com/baidu-ife/ife/tree/master/task/task0001（还设置了1-6小节照顾我这样的弱菜，大赞～）

我做的：https://github.com/DIYgod/ife-work/tree/master/task0001

在线Demo： https://www.anotherhome.net/file/ife/task0001/

本次任务累计花费时间6天（4.13-4.19 ）

下面是我做 TASK 0001 过程中的一些记录。

阅读全文 »

03月

事件簿

博客又搬新家啦

发表于 2015-03-19 • 字数统计 300 • 阅读次数

眼看 Google Adsense 已经100多美元马上就能提现了，加上想买个vps跑Python爬虫，就新入了 Linode 1GB，感觉超爽。

感谢离开恒创这段时间收留我的 TECHNETCAL 音符，还有一个奇葩说是要赞助我然后过几天就把我赶走了的主机商

另外整理了一下友链，移除部分软件分享类网赚类私自移除我的链接的友链（恕不另行通知，如有疑问请联系我）；还有一些貌似死掉的：

http://wanan.me/
http://www.12s.me/
http://blog.juanzii.me/
http://www.gazyip.com/
http://blog.aixinyongshi.cn/
http://shana.me/
http://waysmaker.com/

如果还活着请马上与我联系。

鉴于友链已经多至80多个，为了限制数量，所以友链从此不再来者不拒，新增友链要求如下：

1. 无侵权内容，包括但不限于盗版软件盗版视频未署名转载文章，跟我玩得好的允许少量存在（我就是要双重标准，不服咬我呀٩(๑`н´๑)۶）
2. 非网赚商业化严重或以盈利为目的
3. 真正用心去维护
4. 跟我多交流
5. 待补充，还没想好ღ(๑╯◡╰๑ღ)

阅读全文 »

02月

创作集

一个完整编译器的实现(二) 语法分析

发表于 2015-02-16 • 字数统计 790 • 阅读次数

1 系列说明

GitHub地址各阶段源码各阶段说明集合

2 语法分析说明

语法：组合单词以形成词组从句或句子的方法。

经过词法分析，我们已经可以将输入文本识别成一个个的单词，本阶段的目标是将这些单词识别成句子，判断单词的这种组合形式是否符合我们定义的语法。

2.1 用文法来定义语法

语法分析需要由递归而获得的额外的表示能力，显然正则表达式已经不能满足我们的需求。

事实上，文法也可以用来描述词法单词的结构，但正则表达式已经可以满足需求，这时使用正则表达式更为简练。

2.2 LR(1) 分析法

@%……￥&%#￥太复杂不想说

总之，LR(1) 是一种非常非常强大的分析算法，能够解决很多归约-归约冲突，大多数用上下文无关文法描述其语法的程序设计语言都有一个 LR(1) 文法。

阅读全文 »

02月

创作集

一个完整编译器的实现(一) 词法分析

发表于 2015-02-05 • 字数统计 1314 • 阅读次数

GitHub地址各阶段源码各阶段说明集合

为了将一个程序从一种语言翻译成另一种语言，编译器必须首先把程序的各种成分拆开，并搞清其结构和含义，然后再用另一种方式把这些成分组合起来。编译器的前端执行分析，后端进行合成。

而分析一般分为3种：词法分析语法分析语义分析

本阶段进行的是词法分析，目的是将输入文件分解成一个个独立的词法符号，即单词。

根据虎书的提示，在本阶段分了三个模块：

1.错误处理模块（errormsg.c errormsg.h）：用来产生含文件名和行号的报错信息
2.词法分析模块（lexical.lex token.h）：通过Lex进行词法分析
3.常用工具模块（util.c util.h）：定义一些常用的函数

词法分析模块与错误处理模块：两者通过 errormsg.h 中声明的变量和函数进行通信：EM_tokPos 变量传递每个单词以字符为单位的位置；EM_newline()函数记录行号；EM_error() 输出报错信息。

错误处理模块与常用工具模块：错误处理模块使用 util.h 中声明的 checked_malloc() 分配内存函数

另外还包含了驱动程序（driver.c）测试文件（test.c） makefile

阅读全文 »

02月

创作集

一个完整编译器的实现

发表于 2015-02-01 • 字数统计 229 • 阅读次数

图灵生机器，机器生汇编，汇编生 C，C 生万物
(来自知乎用户 Joy Neop)

本系列将展示一个完整编译器从无到有的实现过程.

目标是从一个C语言的不完全子集翻译到x86汇编语言, 将借助 Lex Yacc LLVM 等工具, 另外暂定实现垃圾回收及面向对象.

全部代码托管在 GitHub. 各阶段的源代码在这里查看.

主要参考虎书(《现代编译原理–C语言实现》), 根据此书, 暂将实现分为11个阶段: 词法分析语法分析语义动作语义分析栈帧布局翻译规范化指令选择控制流分析数据流分析寄存器分配代码流出.

已完成：

《一个完整编译器的实现—词法分析 | Anotherhome》

《一个完整编译器的实现—语法分析 | Anotherhome》

To be continued…

阅读全文 »

HiKainy

关♥生活，关注互联网。

Email 订阅 RSS 订阅

什么是IFTTT

第一章 JavaScript简介

1.1 JavaScript简史

1.2 JavaScript实现

1.3 JavaScript版本

第二章 在HTML中使用JavaScript

2.1 script元素

2.2 嵌入代码与外部文件

2.3 文档模式

2.4 noscript元素

第三章 基本概念

3.1 语法

3.2 关键字和保留字

3.3 变量

3.4 数据类型

3.5 操作符

3.6 语句

3.7 函数

第四章 变量、作用域和内存问题

4.1 基本类型和引用类型的值

4.2 执行环境及作用域

4.3 垃圾回收

第五章 引用类型

5.1 Object类型

5.2 Array类型

5.3 Date类型

5.4 RegExp类型

5.5 Function类型

5.6 基本包装类型

5.7 单体内置对象

第六章 面向对象的程序设计

6.1 理解对象

6.2 创建对象

6.3 继承

第七章 函数表达式

7.1 递归

7.2 闭包

7.3 模仿块级作用域

7.4 静态对象

第十三章 事件

13.1事件流

13.2 事件处理程序

13.3 事件对象

13.4 事件类型

第二十一章 Ajax与Comet

21.1 XMLHttpRequest对象

21.4 跨域资源共享

第二章在HTML中使用JavaScript

第三章基本概念

第四章变量、作用域和内存问题

第五章引用类型

第六章面向对象的程序设计

第七章函数表达式

第十三章事件