第七章 浏览器环境

文档对象模型(处理当前页面内容的)与浏览器对象模型(处理当前页面之外的)
参考资料：

* The Mozilla DOM reference for Firefox information
* Microsoft’s documentation for Internet Explorer
* W3C’ DOM specs

BOM
提供一组对象访问浏览器(window)及计算机屏幕信息(window.screen)

window对象相关属性
window.navigator 包含浏览器及其功能信息
navigator.userAgent 返回浏览器标识信息，开发者常用它区分浏览器以提供不同的实现代码

if (navigator.userAgent.indexOf('MSIE') !== -1) {
     // this is IE
   } else {
     // not IE
}

这并不能完整的细分到每一个浏览器，更好的办法是使用特性嗅探法

if (typeof window.addEventListener === 'function') {
     // feature is supported, let's use it
   } else {
     // hmm, this feature is not supported, will have to
     // think of another way
}

window.location 提供与当前页面url有关的信息，同时提供了三个方法reload(), assign() 和 replace().
assign和replace功能很相似，区别是replace不在window.history中产生信息。

window.history允许你访问当前会话窗口的访问历史

window.frames保存一组当前页面的frames信息,无论是否存在frames，window.frames总是指向window对象（这说明它也是一个伪数组）
每个frame中都包含一个独立的window对象，可以通过下面几种形式访问它
>>> window.frames[0]
>>> window.frames[0].window
>>> frames[0].window
>>> frames[0]

父页面可以访问子页面，子页面同样可以访问父页面，每个页面都有一个window.parent指向其父页面(不存在时指向自身)
如果要访问顶层页面，window.top (不存在时指向自身)

如果一个frame有name属性，也可以通过name访问它window.frames['myframe']

window.screen提供屏幕与颜色深度信息

window.open()/window.close()/window.moveTo()/window.resizeTo()/window.alert()/window.prompt()/window.confirm()这些别用了。

注意：alert()并不是ECMAScript中定义的方法。

window.setTimeout(), window.setInterval()延时执行和重复执行
虽然第一个参数可以传字符串setTimeout(‘foo’,2000)但是还是别传字符串，传函数引用更妥当setTimeout(foo,2000)

window.document提供当前页面文档对象模型相关的信息(DOM)

nodeType为1的节点(element nodes)，nodeName和tagName都是节点的标签名称。

innerHTML并不是标准中存在的，但所有的浏览器都支持它。

document.getElementsByTagName(‘*’)
早期的IE浏览器并不支持星号作为tag名称传入，不过可以使用document.all获得所有元素。
IE7开始支持*号作为标签名，但它会返回所有节点，而不仅仅只是元素类节点。

遍历dom

function walkDOM(n) {
 do {
   console.log(n);
   if (n.hasChildNodes()) {
     walkDOM(n.firstChild)
   }
 } while (n = n.nextSibling)
}
walkDOM(document.body)

CSS中的短横线在JavaScript并不是合法的名字，所以margin-left在在js中是以el.style.marginLeft的形式访问。
可以直接修改节点的属性,如
el.id = ‘sidebar’
由于class在JavaScript中是保留字，修改class属性则使用el.className

HTML 私有对象
document.images 等效于 document.getElementsByTagName('img')

document.applets 等效于 document.getElementsByTagName ('applets')

document.links 所有的

<a href="…"></a>

document.anchors 所有的

<a name="…"></a>

document.forms

非核心对象
document.cookie
document.title
document.referrer
document.domain
document.location

注意，改变document.title并不等效于访问document.getElementsByTagName(' title')[0]，它只是更改浏览器窗口上的显示。

document.referrer的值等同于http头里的Referer(由于历史原因，这是个拼写错的词)

document.domain可以从小域改称大域(www.yahoo.com -> yahoo.com)，但不能从大域改称小域(yahoo.com -> www.yahoo.com)，常用于解决跨域问题。

window.location === document.location

事件
在2级DOM事件模型中，事件传播分三个阶段进行，即捕获阶段（capturing）、目标阶段和冒泡阶段（bubbling）。

IE 只支持冒泡
Netscape 只支持捕获

var mypara = document.getElementById('my-div');
mypara.addEventListener('click', function() {alert('Boo!')}, false);

第三个参数决定是否使用捕获，由于兼容性原因，建议传false，在实际的使用中只使用冒泡。

可以使用e.stopPropagation();放弃冒泡。
事件代理(event delegation)的应用

IE中还是可能使用事件捕获的 setCapture() / releaseCapture()，但它只支持鼠标事件，其它事件（如键盘事件）则不支持。

window.addEventListener('click', function(){alert ('clicked window')}, false);
window.attachEvent('click', function(){alert ('clicked window')}, false);

DOM 规范中并没有说事件绑在window上会怎么样，在IE中(注：低版本)并不会触发，在Firefox中会出发。

移除一个事件，需要传入原事件指针，故绑的匿名函数不能被移除掉。

para.removeEventListener('click', paraHandler, false);

终止默认事件
e.preventDefault();

并不是所有事件的默认行为都能被终止，可以检查事件对象的cancellable字段来确认。

IE中事件不同的部分：

1.（低版本的）IE没有addEventListener() 但IE5开始它有个等价的 attachEvent()方法
2.attachEvent()中click要写作onclick
3.使用老式方法（onclick）时，回调函数并不会传入event参数，但会有个全局的window.event供使用(注：现实场景中它需要先cache下来)
4.IE的事件没有target属性用于指示目标函数，但有个等价的srcElement
5.并不是素偶有的事件都有捕获截断，所以只能使用冒泡
6.没有stopPropagation()方法，但是可以设置cancelBubble 属性值为true
7.没有preventDefault()方法，但是可以设置returnValue值为false
8.removeEventListener()的等效方法detachEvent().

兼容性示例：

function callback(evt) {
     // prep work
     evt = evt || window.event;
     var target = (typeof evt.target !== 'undefined') ? evt.target : evt.srcElement;
     // actual callback work
     console.log(target.nodeName);
}
// start listening for click events
if (document.addEventListener){ // FF
     document.addEventListener('click', callback, false);
} else if (document.attachEvent){ // IE
     document.attachEvent('onclick', callback);
} else {
     document.onclick = callback;
}

事件类型

鼠标事件：
mouseup, mousedown, click (the sequence is mousedown-up-click), dblclick

mouseover (mouse is over an element), mouseout (mouse was over an element but left it), mousemove

键盘事件：
keydown, keypress, keyup (occur in this sequence)

载入\window事件：
load (an image or a page and all of its components are done loading), unload (user leaves the page), beforeunload (the script can provide the user with an option to stop the unload)
abort (user stops loading the page in Firefox or an image in IE), error (a JavaScript error in Firefox and IE, also when an image cannot be loaded in IE)
resize (browser window is resized), scroll (the page is scrolled), contextmenu (the right-click menu appears)

表单事件：
focus (enter a form field), blur (leave form field)
change (leave a field after the value has changed), select (select text in a text field)
reset, submit

AJAX（XMLHttpRequest以及IE7之前使用ActiveXObject）
-EOF-

Related posts:

• Object-Oriented JavaScript笔记(四)
• Object-Oriented JavaScript笔记(二)
• Object-Oriented JavaScript笔记(五)
• Object-Oriented JavaScript笔记(三)
• Object-Oriented JavaScript笔记(一)

第六章 继承

空的构造函数—new F()
用于解决原型链上的属性被覆盖的问题。

var extend = function(origin, target){
     var F = function(){};
     F.prototype = origin.prototype;
     target.prototype = new F();
     target.prototype.constructor = target;
};
 
var A = function(){};
A.prototype.name = 'A';
A.prototype.toString = function(){ return this.name};
 
var B = function(){};
extend(A,B);
B.prototype.name = 'B';
 
/*
var a = new A();
var b = new B();
b instanceof B
true
b instanceof A
true
a instanceof A
true
a instanceof B
false
*/

Uber 访问父方法。

var extend = function(origin, target){
     var F = function(){};
     F.prototype = origin.prototype;
     target.prototype = new F();
     target.prototype.constructor = target;
     target.uber = origin.prototype;
};
 
var A = function(){};
A.prototype.name = 'A';
A.prototype.toString = function(){
     var result = [];
     if (this.constructor.uber){
          result[result.length] = this.constructor.uber.toString();
     }
     result[result.length] = this.name;
     return result.join(', ');
};
A.prototype.show = function(){
     console.log('A show');
};
var B = function(){};
extend(A,B);
B.prototype.name = 'B';
B.prototype.show = function(){
     this.constructor.uber.show();
     console.log('B show');
};
/*
var a = new A();
var b = new B();
b instanceof B
true
b instanceof A
true
a instanceof A
true
a instanceof B
false
*/

用函数来实现继承 （注：实际上上面的两个示例的extend已经是被我封装过的了）

var exntend = function(Child, Parent){
     var F = function(){};
     F.prototype = Parent.prototype;
     Child.prototype = new F();
     Child.prototype.constructor = Child;
     Child.uber = Parent.prototype;
};

复制属性

function extend2(Child, Parent) {
     var p = Parent.prototype;
     var c = Child.prototype;
     for (var i in p) {
          c[i] = p[i];
     }
     c.uber = p;
}

当复制引用带来的问题

修改引用对象会导致原型的也被修改。

从对象中继承：

浅拷贝

function extendCopy(p) {
     var c = {};
     for (var i in p) {
     c[i] = p[i];
     }
     c.uber = p;
     return c;
}

深拷贝：

function deepCopy(p, c) {
     var c = c || {};
     for (var i in p) {
          if (typeof p[i] === 'object') {
               c[i] = (p[i].constructor === Array) ? [] : {};
               deepCopy(p[i], c[i]);
          } else {
               c[i] = p[i];
          }
     }
     return c;
}

object()构造起，老道提议的形式。

function object(o) {
     function F() {}
     F.prototype = o;
     return new F();
}

混合原型拷贝和属性继承（很多时候需要继承一个对象，并给它添加一些属性用）

function objectPlus(o, stuff) {
     var n;
     function F() {}
     F.prototype = o;
     n = new F();
     n.uber = o;
     for (var i in stuff) {
     n[i] = stuff[i];
     }
     return n;
}

多重继承，说白了就是按顺序进行属性复制，后出现的覆盖已经存在的。

function multi() {
     var n = {}, stuff, j = 0, len = arguments.length;
     for (j = 0; j < len; j++) {
          stuff = arguments[j];
          for (var i in stuff) {
               n[i] = stuff[i];
          }
     }
     return n;
}

-EOF-

Related posts:

• Object-Oriented JavaScript笔记(四)
• Object-Oriented JavaScript笔记(二)
• Object-Oriented JavaScript笔记(三)
• Object-Oriented JavaScript笔记(六)
• Object-Oriented JavaScript笔记(一)

http://dl.google.com/chrome/mac/GoogleChrome-18.0.1025.168.dmg

在Chrome Releases Blog查到对应的版本号，替换即可。
-EOF-

Related posts:

• Chrome离线安装包下载方法
• Chrome OS 拿什么去爱你
• Chrome自带的HTTP请求抓包系统
• 一周开源项目集锦(2011/11/01)
• 我常使用的免费软件

第五章 原型

原型链继承：new 出来的对象仍能继承到给原型prototype添加的方法

给实例添加与原型属性同名的属性，会隐藏原型链属性。
>>> var Class = function(){};
>>> Class.prototype.name = ‘John’;
>>> var toy = new Class()
>>> toy.name = ‘Tom’;
>>> toy.name
“Tom”
>>> delete toy.name
>>> toy.name
“John”

并不是所有的属性都会在for in中被枚举出来。
判断属性是自身属性还是原型链上的属性使用hasOwnProperty()
propertyIsEnumerable()对于prototype上的属性都会返回false，虽然他们都能在for in中被枚举出来。

isPrototypeOf()判断一个对象是否是另一个对象的原型。

Prototype陷阱
prototype对象被替换后，实例的原型链仍然是存在的
prototype.constructor并不可靠
介于此，重写prototype后，最好重置constructor (这里的确很让人迷惑)
－EOF-

Related posts:

• Object-Oriented JavaScript笔记(二)
• Object-Oriented JavaScript笔记(五)
• Object-Oriented JavaScript笔记(三)
• Object-Oriented JavaScript笔记(六)
• Object-Oriented JavaScript笔记(一)

而在今年年初，GAE完美支持Django+MySQL，给原本失去的希望又重新点燃，用其托管一个小访问量的站点又有了规避方案，另一方面Cloud SQL可以方便的导出数据，数据备份不需要再经过复杂的操作。在二月结束的时候，我写了一个小的网站原型，后经过改进，并将其命名为Story Board托管在GitHub上开源出来。

同时用它替换原来的Oh Bug!。希望Oh Bug!不再单单只是一个Blog，也是一个小众技术讨论区，欢迎任何人参与进来讨论～

Project Story Board
https://github.com/darcyliu/storyboard

Oh Bug!
http://www.ohbug.com/

You are very welcome.

-EOF-

Related posts:

• 电影《青少年堕落指南》
• 常用PHP程式介绍

Function.prototype.method = function(name,fn){
	this.prototype[name] = fn;
	return this;
}
Function.method('inherits',(function(){
	function mix(a,b){
		for(var i in b){
			//replace
			if(typeof a[i] == 'undefined'){
				a[i] = b[i];
			} 
		}
	}
	return function(Parent){
		var fn = function(){};
		mix(this.prototype,Parent.prototype);
		mix(this,Parent);
		this.__super__ = Parent;
		//static method
		//object.__super__.demo
 
		//prototype method
		//object.__super__.prototype.hidden
	  return this;
	};
})());
 
 
var a = function(){};
var b = function(){};
var c = function(){};
var d = function(){};
a.prototype.show = function(){
	console.log('a show');
};
b.prototype.hidden = function(){
	console.log('b hidden');
};
a.test = function(){
	console.log('a test');
};
b.demo = function(){
	console.log('b demo');
};
 
//usage
b.inherits(a);
c.inherits(a);
d.inherits(b);

-EOF-

Related posts:

• Object-Oriented JavaScript笔记(二)
• JavaScript 入门指南
• Object-Oriented JavaScript笔记(四)
• Object-Oriented JavaScript笔记(五)
• JavaScript性能陷阱

第四章 对象

对象
对象属性名需要引号括起来的情况有：
1.保留字2.包含空格或特殊字符3.以数字开头
Best Practice Tip: No quotes
1.使用点访问符访问方法和属性
2.在对象字面量中不要使用引号将属性括起来

构造函数
按照约定，构造函数首字母大写

不使用new操作符调用构造函数跟调用普通函数无异，此时this指针指向全局对象global object

JavaScript 是运行在宿主环境中的，其提供一个全局对象，所有的全局变量都是全局对象的属性。
在浏览器中，该全局对象是window，如
>>> var a = 1;
>>> window.a
1

instanceof操作符用于测试对象的构造函数
注：原书103页的h instanceof Object;得到false实际上是印刷错误， Object是基类

特例：
>>> Object.prototype instanceof Object;
false
>>> Object instanceof Object;
true
说明Object.prototype可能是内置类型
函数返回对象，可以用该特性来改变this指针
function Test = function(){ this.name = ‘Tom’;
return {‘name’:'Tony’};
}

传入函数的对象是按引用传递的，将对象赋值给其他变量也如此，这意味着只是变了别名，修改引用对象也会改变原对象。

指向同一对象的变量比较时才会返回true，即使比较两个对象包含相同的方法和属性得到的也是false。

内置对象

内置对象可以分为三组：
1.数据包装类的 — Object, Array, Function, Boolean, Number, and String
2.工具类的 — Math, Date, RegExp
3.异常类的 — Error

对象构造方法：
1.使用构造函数
var o = new Object();

2.使用字面量
var o = {};

简单对象valueOf方法返回的是自身
>>> var o = {};
>>> o.valueOf() === o
true

继承自Object的对象会带上
o.constructor
o.toString()
o.valueOf()

数组对象

数组对象构造方法：
1.使用构造函数
var a = new Array();

2.使用字面量
var a = [];

数组构造函数传入单个数字的话，定义的是数组的长度；但使用字面量方式不存在该问题。
>>> var a2 = new Array(5);
>>> a2
[undefined, undefined, undefined, undefined, undefined]

>>> var a = [5];
>>> a
[5]

数组的常用方法
1.pop 取出最后一个
2.push 插入元素到尾端
3.sort 对数组元素排序
4.join 将内容转换成字符串
5.slice 切片，不改变原对象
6.splice 切片(或替换)，改变原对象

函数
Function构造函数实际上使用了eval来计算传入的字符串，尽量避免使用它。
>>> var second = new Function(‘a, b, c’, ‘d’, ‘return arguments;’);
>>> second(1,2,3,4);
[1, 2, 3, 4]

Function有一个length属性，用来返回函数的参数个数。

Function还有一个caller属性，它不是ECMA标准里面的，但浏览器都实现了它。

实例会可以调用构造函数prototype中属性和方法。

Function的toString方法返回其source code.

call和apply方法可以将对象自己的方法借给其它对象使用。

arguments是个类数组;arguments.callee指向自身。

arguments.callee可以帮助匿名函数调用自身(递归调用)：

(function(count){
    if (count < 5) {
        console.log(count);
        arguments.callee(++count);
    }
})(1);

Boolean对象

Boolean对象几乎没有用。在不使用new操作符的情况下，它将非布尔值转换成布尔值，这于使用!!value是等效的。
>>> Boolean(‘test’) == !!’test’
true

Number对象

Number对象比较有趣一点，它有一些有意思的属性：
Number.MAX_VALUE
Number.MIN_VALUE
Number.POSITIVE_INFINITY
Number.NEGATIVE_INFINITY
Number.NaN

Number对象提供三个内置方法：toFixed() 小数点位数
toPrecision() 精度
toExponential() 科学计数法

Number对象的toString方法也是很有趣的，可以传入一个[2~36]之间的整数表示要转换的进制。
>>> (9).toString(2)
“1001″

String对象

原始的string和String对象是不同的
>>> var primitive = ‘Hello’;
>>> typeof primitive;
“string”

>>> var obj = new String(‘world’);
>>> typeof obj;
“object”

因而
>>> Boolean(“”)
false
>>> Boolean(new String(“”))
true

String对象带有一些有用的方法，string类型不带有这些方法和属性，但是在普通类型上调用这些方法的时候，JavaScript将其作为对象对待。

Math/Date

Math/Date/RegExp都是工具对象
Math不是构造函数，不能使用new操作符
Date有两个静态方法
Date.parse(‘Jan 1, 2008′)
Date.UTC(2008, 0, 1)

RegExp

RegExp正则表达式采用的是Perl 5语法
RegExp的几个属性global 全局
ignoreCase 大小写敏感
multiline 多行
lastIndex 开始位置
source 正则表达式

除lastIndex外其余都是只读。

异常
几种内置异常对象，都继承自Error
EvalError
RangeError
ReferenceError
SyntaxError
TypeError
URIError

抛出异常throw new Error(‘Custom Error’);
-EOF-

Related posts:

• Object-Oriented JavaScript笔记(四)
• Object-Oriented JavaScript笔记(二)
• Object-Oriented JavaScript笔记(五)
• Object-Oriented JavaScript笔记(六)
• Object-Oriented JavaScript笔记(一)

第三章 函数

JavaScript会给定义了但是没有传值的参数赋值为undefined，若是参数多于定义的，会被忽略。

没有函数都会带有一个名为arguments的类数组变量，包含所有传入的参数信息。

JavaScript内置函数（Pre-defined Functions）：
parseInt()
parseFloat()
isNaN()
isFinite()
encodeURI()
decodeURI()
encodeURIComponent()
decodeURIComponent()
eval()

使用parseInt时最好每次都明确指定第二个（基数）参数，如 parseInt(‘FF’, 16)

parseFloat只接受一个参数，并能够识别指数表示法，如 parseFloat(’123e2′)

escape() 与 unescape() 已经被弃用，不应该再被使用。

alert并不是JavaScript的一部分，并且它会阻塞浏览器线程，在富ajax应用中不应该使用它。

未使用var 声明的变量会被分配到全局作用域
>>> var f = function(){test = 2;};
>>> test
ReferenceError: test is not defined
>>> f();
>>> test
2

函数中声明的局部变量与全局变量同名会覆盖同名全局变量，即使是先使用后声明。

var a = 123;
function f() {
     console.log(a);
     var a = 1;
     console.log(a);
}
f();

匿名函数

不仅是字符串，一些常量写在代码中也是可以的

"test"; [1,2,3]; undefined; null; 1;

ECMAScript 5严格模式（Strict Mode）便是利用该特性

'use strict';

Lexical Scope 函数工作在定义时的作用域，而非执行作用域。它仅能访问自己的作用域和全局作用域。

>>> function f1(){var a = 1; f2();}
>>> function f2(){return a;}
>>> f1();
a is not defined

闭包Closure的常用场景
如：循环、get/set访问器、迭代器
-EOF-

Related posts:

• Object-Oriented JavaScript笔记(四)
• Object-Oriented JavaScript笔记(五)
• Object-Oriented JavaScript笔记(三)
• Object-Oriented JavaScript笔记(六)
• Object-Oriented JavaScript笔记(一)

$ ./configure –with-apxs=/usr/sbin/apxs
$ make
$ sudo make install

但是事实却不尽人意，在Mac OS X Lion可能会遇到下面这个错误：

connobject.c:142: error: request for member ‘next’ in something not a structure or union
apxs:Error: Command failed with rc=65536

说明connobject.c这个文件中142行有错误，我们找到并打开它

vim src/connobject.c

将142行处的

!(b == APR_BRIGADE_SENTINEL(b) ||

改为

!(b == APR_BRIGADE_SENTINEL(bb) ||

-EOF-

Related posts:

• Ubuntu 安装 Python Imaging Library (PIL)
• Python文件编码
• 安装golang程序语言
• 开始学Python
• 如何在 Debian/Ubuntu VPS 安装 OpenVPN

http://static.ioio.name/upload/hello.jpg

改成随机的使用

http://s1.ioio.name/upload/hello.jpg

http://s2.ioio.name/upload/hello.jpg

http://s3.ioio.name/upload/hello.jpg

这时候我们需要将s1/s2/s3服务器上的文件跟源服务器static同步。以使得他们都是访问的static上同名文件的拷贝。

这里我写了一段简单的php脚本采用溯源的策略来更新这些文件，当s1/s2/s3服务器上不存在该文件的时候，就向源服务器(static)请求该文件，并且保存在本地cache一份以便后续的相同请求使用。

1.在s1/s2/s3服务器上添加名为cdn.php的文件，内容如下：

<?php
$path = $_GET["name"];
$filename = md5($path);
$file = "save/".$filename.".data";
if(file_exists($file)){
	header('Content-type: '.mime_content_type($file));
	echo file_get_contents($file);
}else{
	$content = file_get_contents("http://source.ioio.name/upload/".$path);
	file_put_contents($file,$content);
	header('Content-type: '.mime_content_type($file));
	echo $content;
}
?>

这段脚本会将读取到的文件存在本地的save文件夹里，需要save文件夹的读写权限。

2.配置.htaccess文件，添加一行记录：

RewriteRule ^upload/(.*)$ /cdn.php?name=$1 [L]

这样配置后s1/s2/s3就能按照static的路径规则访问到相同的文件了。在实际的生成环境，可能会需要更复杂的cache策略，这里就不深入讨论。
-EOF-

Related posts:

• 万物皆缓存
• IIS 缓存问题
• Ubuntu 下字体的安装
• 禁用Internet Explorer的DNS缓存
• 利用 GAE同步更新饭否与TWITTER，建立你的HELLOTXT