博客园_BeiYuu - 前端实验室

windows下部署安装nodejs

2011-07-29T14:59:00Z

nodejs作为一个新兴的后台语言，有很多吸引人的地方：

RESTful API
单线程
非阻塞IO
Google V8
事件驱动

Node的处理模型和现在常用的使用操作系统线程的并发模型不同。基于线程的网络相对效率低并且难以使用。与传统线程模型对每个新连接都要申请2M的线程堆栈相比，Node在高负载下表现出更好的内存效率。而且，Node用户不必关心进程死锁，因为Node里根本没有锁的概念。Node几乎没有直接执行IO操作的函数，进程也就永不阻塞，因为没有阻塞，即使不是专家也能编写快速的系统。

Node在设计上受Ruby的Event Machine和Python的Twisted影响并且和它们有些像。Node更注重事件模型，它将事件循环作为语言结构而不是类库。在其它的系统中，一般会有一个阻塞的调用来开始事件循环，在脚本的开始使用回调函数定义一个行为，然后在最后通过调用阻塞的调用(例如EventMachine::run())来启动服务。Node没有这样的启动事件循环的函数调用，它执行完输入脚本后自动进入事件循环，这有点像浏览器的JavaScript，事件循环对用户隐藏了。

在Linux上安装部署nodejs，相关的文档之类很完整，整个过程也比较简单，但是在windows上要部署nodejs，在之前还是要费点力气的，现在好了，有了官方的支持，一切就变的很简单了：

首先：下载这个nodejs的exe文件：http://nodejs.org/dist/v0.5.2/node.exe （目前还是不稳定版）

接着：进入node.exe的文件目录，然后新建一个hello.js文件，内容如下：

var http = require('http');
http.createServer(function(req, res) {
res.writeHead(200, {
'Content-Type': 'text/plain'
});
res.end('Hello World\n');
}).listen(1337, "127.0.0.1");
console.log('Server running at http://127.0.0.1:1337/');

然后：打开cmd命令行，进入到node.exe的存放目录，或者可以把node.exe加入系统path中，这样就可以在任意地方执行了，执行上面这个文件

node hello.js

这个时候就可以看到：

打开浏览器：

恩，一切就绪了，可以开始了！

本文链接

js本地存储解决方案(localStorage与userData)

2011-07-19T17:02:00Z

WEB应用的快速发展，是的本地存储一些数据也成为一种重要的需求，实现的方案也有很多，最普通的就是cookie了，大家也经常都用，但是cookie的缺点是显而易见的，其他的方案比如：IE6以上的userData，Firefox下面的globalStorage，以及Flash的本地存储，除了Flash之外，其他的几个都有一些兼容性的问题。

sessionStorage与localStorage

Web Storage实际上由两部分组成：sessionStorage与localStorage。

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

userData

语法：

XML <Prefix: CustomTag ID=sID STYLE="behavior:url('#default#userData')" />

HTML <ELEMENT STYLE="behavior:url('#default#userData')" ID=sID>

Scripting object .style.behavior = "url('#default#userData')"

object .addBehavior ("#default#userData")

属性:

expires 设置或者获取 userData behavior 保存数据的失效日期。

XMLDocument 获取 XML 的引用。

方法:

getAttribute() 获取指定的属性值。

load(object) 从 userData 存储区载入存储的对象数据。

removeAttribute() 移除对象的指定属性。

save(object) 将对象数据存储到一个 userData 存储区。

setAttribute() 设置指定的属性值。

localStorage
方法：
localStorage.getItem(key):获取指定key本地存储的值
localStorage.setItem(key,value)：将value存储到key字段
localStorage.removeItem(key):删除指定key本地存储的值
封装
1 localData = {
2 hname:location.hostname?location.hostname:'localStatus',
3 isLocalStorage:window.localStorage?true:false,
4 dataDom:null,
5
6 initDom:function(){ //初始化userData
7 if(!this.dataDom){
8 try{
9 this.dataDom = document.createElement('input');//这里使用hidden的input元素
10 this.dataDom.type = 'hidden';
11 this.dataDom.style.display = "none";
12 this.dataDom.addBehavior('#default#userData');//这是userData的语法
13 document.body.appendChild(this.dataDom);
14 var exDate = new Date();
15 exDate = exDate.getDate()+30;
16 this.dataDom.expires = exDate.toUTCString();//设定过期时间
17 }catch(ex){
18 return false;
19 }
20 }
21 return true;
22 },
23 set:function(key,value){
24 if(this.isLocalStorage){
25 window.localStorage.setItem(key,value);
26 }else{
27 if(this.initDom()){
28 this.dataDom.load(this.hname);
29 this.dataDom.setAttribute(key,value);
30 this.dataDom.save(this.hname)
31 }
32 }
33 },
34 get:function(key){
35 if(this.isLocalStorage){
36 return window.localStorage.getItem(key);
37 }else{
38 if(this.initDom()){
39 this.dataDom.load(this.hname);
40 return this.dataDom.getAttribute(key);
41 }
42 }
43 },
44 remove:function(key){
45 if(this.isLocalStorage){
46 localStorage.removeItem(key);
47 }else{
48 if(this.initDom()){
49 this.dataDom.load(this.hname);
50 this.dataDom.removeAttribute(key);
51 this.dataDom.save(this.hname)
52 }
53 }
54 }
55 }
使用方法就很简单了，这节set,get,remove就好了。
下面这个例子，在你输入之后，然后刷新页面，也会保留相应的值。
本文链接

iframe异步加载技术及性能

2011-07-18T13:21:00Z

这是一篇原创翻译文章。原文地址。

我们会经常使用iframes来加载第三方的内容、广告或者插件。使用iframe是因为他可以和主页面并行加载，不会阻塞主页面。当然使用iframe也是有利有弊的：Steve Souders在他的blog里面有阐述：Using Iframes Sparingly:

iframe会阻塞主页面的onload事件
主页面和iframe共享同一个连接池

阻塞主页面的onload是这两个问题中最影响性能的方面。一般都是想让onload时间越早触发越好，一方面是用户体验过更重要的是google给网站的加载速度的打分：用户可以用IE和FF中Google工具栏来计时。

那么为了提高页面性能，怎样才能不阻塞主页面的onload事件的来加载iframe呢？

这篇讲了四种加载iframe的方法：普通iframe，onload之后加载iframe，setTimeout() iframe和异步加载iframe。每种方法的加载结果我都用IE8的时间线来展示。我建议多注意下动态异步加载这个方法，因为这是性能表现最佳的。另外，还有一种友好iframe(friendly iframe)技术。他可能算不上是iframe加载的技术，但是必须使用iframe，他是无阻塞加载的。

普通方法加载iframe

这是一种人尽皆知的普通加载方法，它没有浏览器的兼容性问题。

1 <iframe src="/path/to/file" frameborder="0" width="728" height="90" scrolling="auto"> </iframe>

使用这种加载方法会在各浏览器中有如下表现：

iframe会在主页面的onload之前加载
iframe会在所有iframe的内容都加载完毕之后触发iframe的onload
主页面的onload会在iframes的onload触发之后触发，所以iframe会阻塞主页面的加载
当iframe在加载的过程中，浏览器的会标识正在加载东西，处于忙碌状态。

这里是一个演示页面，时间线图显示出iframe会阻塞主页面的加载。

我的建议：注意onload阻塞。如果iframe的内容只需要很短的时间来加载和执行，那么也不是个大问题，而且使用这种方法还有个好处是可以和主页面并行加载。但是如果加载这个iframe需要很长时间，用户体验就很差了。你得自己测试一下然后在http://www.webpagetest.org/也做些测试，根据onload的时间看看是否需要其他加载方法。

在onload之后加载iframe

如果你想在iframe中加载一些内容，但是这些内容对于页面来说不是那么的重要。或者这些内容不需要马上展现给用户的，需要点击触发之类的。那么可以考虑在主页面载入之后加载iframe。

1 <script>
2
3 //doesn't block the load event
4 function createIframe() {
5 var i = document.createElement("iframe");
6 i.src = "path/to/file";
7 i.scrolling = "auto";
8 i.frameborder = "0";
9 i.width = "200px";
10 i.height = "100px";
11 document.getElementById("div-that-holds-the-iframe").appendChild(i);
12 };
13 // Check for browser support of event handling capability
14 if (window.addEventListener) window.addEventListener("load", createIframe, false);
15 else if (window.attachEvent) window.attachEvent("onload", createIframe);
16 else window.onload = createIframe;
17 </script>

这种加载方法也是没有浏览器的兼容性问题的：

iframe会在主页面onload之后开始加载
主页面的onload事件触发与iframe无关，所以iframe不会阻塞加载
当iframe加载的时候，浏览器会标识正在加载

这是是一个测试页面，时间线图如下

这种方法比普通方法有什么好处呢？load事件会马上触发，有两个好处：

其他等待主页面onload事件的代码可以尽早执行
Google Toolbar计算你页面加载的时间会大大减少

但是，当iframe加载的时候，还是会看到浏览器的忙碌状态，相对于普通加载方法，用户看到忙碌状态的时间更长。还有就是用户还没等到页面完全加载完的时候就已经离开了。有些情况下这是个问题，比如广告。

setTimeout()来加载iframe

这种方法的目的是不阻塞onload事件。

Steve Souders(又是他？)有一个这种方法的测试页面(http://stevesouders.com/efws/iframe-onload-nonblocking.php)。他写道：“src通过setTimeout动态的设置，这种方法可以再所有的浏览器中避免阻塞”。

在除了IE8以外的所有浏览器中会有如下表现：

iframe会在主页面onload之前开始加载
iframe的onload事件会在iframe的内容都加载完毕之后触发
iframe不会阻塞主页面的onload事件(IE8除外)
为什么不会阻塞主页面的onload呢(IE8除外)？因为setTimeout()
当iframe加载的时候，浏览器会显示忙碌状态

下面是时间线图

因为IE8的问题，这种技术就不适合很多网站了。如果有超过10%的用户使用IE8,十分之一的用户体验就会差。你会说那也只是比普通加载差一点点，其实普通加载性能上也不差。onload事件对于10%的用户来说都更长。。。。额，你自己考虑吧。但是最好在看了下面这个很赞的异步加载方法之后再决定吧。

我在参加Velocity 2010的时候，Meebo的两个工程师(@marcuswestin and Martin Hunt)做了一个关于他们的Meebo Bar的演讲。他们使用iframe来加载一些插件，并且真正做到了无阻塞加载。对于有的开发者来说，他们的做法还比较新鲜。很赞，超级赞。但是一些原因导致这种技术没有得到相应的关注，我希望这篇blog能把它发扬光大。

神奇的地方就在<body onload=”">:这个iframe一开始没有内容，所以onload会立即触发。然后你创建一个script元素，用他来加载内容、广告、插件什么的，然后再把这个script添加到HEAD中去，这样iframe内容的加载就不会阻塞主页面的onload！你应该看看他在个浏览器中的表现：

iframe会在主页面onload之前开始加载
iframe的onload会立即触发，因为iframe的内容一开始为空
主页面的onload不会被阻塞
为什么这个iframe不会阻塞主页面的onload？因为<body onload=”">
如果你不在iframe使用onload监听，那么iframe的加载就会阻塞主页面的onload
当iframe加载的时候，浏览器终于不显示忙碌状态了（非常好）

我的测试页给出下面的时间线：

转义字符让代码看着有些难受，这都不是问题。试试吧。

友好型iframe加载

这是用来加载广告的。虽然这不是一种iframe的加载技术，但是是用iframe来盛放广告的。他的亮点不在于iframe如何加载，而是主页面、iframe、广告如何协同工作的。如下：

先创建一个iframe。设置他的src为一个相同域名下的静态html文件
在这个iframe里面，设置js变量inDapIF=true来告诉广告它已经加载在这个iframe里面了
在这个iframe里面，创建一个script元素加上广告的url作为src，然后像普通广告代码一样加载
当广告加载完成，重置iframe大小来适应广告
这种方法也没有浏览器的兼容性问题。

Ad Ops Council在推荐过这个方法，AOL也是用这种方法。想看看源码：这里有一个。一家瑞典的出版社Aftonbladet对于这种加载有很不错的结论：在他们的主页上，加载时间减少30%，用户每周增加7%，新闻部分的点击量增加35%。我建议可以看看他们的资料：High Performance Web Sites, With Ads: Don’t let third parties make you slow

我没有创建相关的测试页，所以也没有第一首的资料。从我调研的结果来说：

如果你只想在你的网页上调用一个确定的src地址的iframe的话这个方法不是很有用。

如果你想在网页上展示多个广告，比较灵活的方法的是：加载一个广告，然后更新iframe加载另一个主页面的DOMContentLoaded时间不会被阻塞，页面渲染也不会被阻塞，当然，主页面的onload事件还是会被阻塞。

本文链接

给博客园加上新浪微薄的挂件

2011-07-17T04:18:00Z

很多博客都可以自己添加修改一些代码，但是作为博客平台来说，可能为了安全考虑，很多时候要过滤一些特性，比如：新浪微博的挂件是iframe形式的，但是博客园不支持iframe。经过一些尝试，最终有了下面两种解决办法：

首先先在公告中写一个空div，方便我们插入新建的iframe，省的用class选来选去的麻烦：

1、在公告中直接用innerHTML插入iframe代码：

innerHTML是很很简单的，从新浪微博的配置中，配好你自己想要的样式，然后他会自动生成一段html代码，类似下面这样的：

但是如果你直接写成下面这个样子的话，不会生效的：

var ifr = '<iframe width="100%" height="100" class="share_self" frameborder="0" scrolling="no" src="http://widget.weibo.com/weiboshow/index.php?width=0&height=100&fansRow=1&ptype=1&speed=0&skin=1&isTitle=1&noborder=0&isWeibo=0&isFans=0&uid=1855270953&verifier=375b89d6"></iframe>';

document.getElementById('weiboIframe').innerHTML = ifr;

估计博客园后台直接去匹配iframe文本，所以我们把这个打乱，这样，他应该不会去检测逻辑，改成这样就成功了：

2、还可以使用createElement方法：

因为这里有人用过Google Adsense的代码，所以猜测这个方法是可以使用的，经过测试，确实可用，就是比上面那个要多写一些东西：

把上面这些弄到公告里面去，就可以显示你的新浪微博的挂件了，很简单了，可以在微薄关注我：http://weibo.com/beiyuu

本文链接

如何在JavaScript中处理大量数据

2011-03-21T02:23:00Z

在之前的文章中，我们讲了浏览器对于JavaScript代码执行的限制和基于计时器的伪线程机制。这里，我们再看看如何在JavaScript中处理大量数据。

在几年之前，开发人员不会去考虑在服务端之外处理大量的数据。现在这种观念已经改变了，很多Ajax程序需要在客户端和服务器端传输大量的数据。此外，更新DOM节点的处理在浏览器端来看也是一个很耗时的工作。而且，需要对这些信息进行分析处理的时候也很可能导致程序无响应，浏览器抛出错误。

将需要大量处理数据的过程分割成很多小段，然后通过JavaScript的计时器来分别执行，就可以防止浏览器假死。先看看怎么开始：

1 function ProcessArray(data,handler,callback){

ProcessArray()方法支持三个参数：

data:需要处理的数据
handler:处理每条数据的函数
callback:回调函数

然后定义一些变量：

1 var maxtime = 100;
2 var delay = 20;
3 var queue = data.concat();

maxtime表示每个处理进程的最大毫秒数。delay表示每个程序块之间的毫秒数。queue是源数据的复制，虽然不是在所有情景下都必要，但是我们是通过传递引用修改的，所以最好还是备份一下。

然后就可以使用setTimeout()方法来处理了：

1 setTimeout(function(){
2 var endtime = new Date() + maxtime;
3 do{
4 hanler(queue.shift());
5 }while(queue.length>0 && endtime > new Date());

首先，先计算endtime，这是程序处理的最大时间。do.while 循环用来处理每一个小块的数据，直到循环全部完成或者超时。

为什么使用do..while循环呢？
JavaScript支持while和do…while循环。不同之处在于do..while循环回至少执行一次。如果使用while循环，那么当开发者设置一个很小或者很低的endtime值的时候，那么处理就根本不会执行了。

最后，我们再决定是否需要处理其他的数据，如果需要，那么就再调用一次：

1 if (queue.length > 0) {
2 setTimeout(arguments.callee, delay);
3 }
4 else {
5 if (callback) callback();
6 }
7 }, delay);
8 }

这样回调函数会在每一个数据都处理结束的时候执行。我们可以通过ProcessArray()来测试一小组数据：

// process an individual data item
function Process(dataitem) {
console.log(dataitem);
}
// processing is complete
function Done() {
console.log("Done");
}
// test data
var data = [];
for (var i = 0; i < 500; i++) data[i] = i;
// process all items
ProcessArray(data, Process, Done);

这个方法在任何浏览器中都可以执行，不过HTML5提供了更好的办法，Rockux在以后的文章中会提到。（英文）

本文链接

函数型 VS 面向对象型的javascript程序设计

2011-02-26T11:21:00Z

原文点击这里

灵活的js语言可以轻易的就完成截然相反的两种编程模式–函数型程序设计和面向对象的程序设计。

js原生的支持将函数当做变量来处理。你可以将一个函数赋值给一个变量，然后把他传给其他的变量。抽象的说，我们可以认为js的函数是一个特殊的变量：只不过他的形式是“函数”。

js原生的也提供对象。在js中，对象可以认为是一系列平面化的属性值和方法。他们看起来像是一个数据字典，而不像你在其他诸如java、c++、c#中看到的对象那样。在经典的面向对象编程中，类表示可以通过new操作符来生成一个实例的模板。但是在js中，没有可以当做蓝本来生成对象的。在js中，一个对象的蓝本更像是一个数据字典。所以在js中，你可以创建对象，然后可以在对象中存储数据。当然，js的对象也提供一定程度的面向对象的特性，比如封装和继承。

js开发越来越热，两种模式的优劣是什么？js对两种模式都支持，但是问题的答案得你自己来弄清楚。它两种都支持，但并不是某一种特别的合适。OOP的js框架和函数型的js都同时存在。

函数型程序设计简介

函数型程序设计中，每个代码段都是在”function”之上建立的，这与传统的OOP建立在”class”之上是不同的。一个函数只是对输入的展现的一种操作。一个函数只是接收一些输入，然后返回一些输出，其他的都是隐藏起来的。

在函数型程序设计中，你通过在一个函数中调用其他的函数来完成程序的输入与输出。这通常都没有可以处理输入、存储数据以及一系列的状态更新的那一层。函数就像一个数值一样，可以作为参数传递给其他函数。

javascript与函数型程序设计

需要明确的一个事实是：js并不是像F#那样真正的函数型程序设计语言，虽然他有一些函数型程序设计模式的特性。利用这些特性，你也可以用js做很好的工作。到今天为止，使用jQuery就是这种模式最广泛的应用了。

匿名函数是函数型程序设计的精华之所在。匿名函数是lambda计算式的另一种形式，一种可以适配经流行的编码风格。

1
2
3

function (x,y){
return x + y;
}

普通函数和匿名的函数的唯一区别就在于名字。在函数的上下文中，当你只是需要函数的返回值作为参数来使用的时候，并不是非得要给他一个函数名。通过下面这个例子我们来看看：

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

// 一个用来计算和的函数
var CalcTotal = function(x, y) {
return x + y;
};

// 增加税率
var AddTaxes = function(x) {
return x * 1.2;
};

// 最终的计算函数
var CalcTotalPlusTaxes = function (fnCalcTotal, fnAddTaxes, x, y) {
return fnAddTaxes(fnCalcTotal(x, y));
};

// 执行
var result = CalcTotalPlusTaxes(CalcTotal, AddTaxes, 40, 60);
alert(result);

需要注意的是，你也可以使用匿名函数，而不是非得通过一个中间变量来传递给最终的计算式。

1
2
3

alert(
(function(x){return x * 1.2})(100);
);

将匿名函数看做一个变量，可以很轻松的将数据和特性合并在一起。这也给你了一个机会去试验一些其他的设计原则。当高一级的模块（无论对象还是函数）需要低一级的模块提供的返回值的时候，就可以将低一级的模块直接当做参数传过去。很多情况下，这会提高函数参数的可读性，并且让代码更优雅一些，当然，也会让你在处理复杂事物的时候更加得心应手。

jQuery和函数型程序设计

jQuery在函数型程序设计方面吸引了人们极大的关注。整个jQuery库都是基于jquery对象或者说$。$是DOM元素的一个封装，DOM元素也可以通过$()表达式传递进去。另外，jQuery支持链式操作，每一个函数运行之后都会返回同一个jquery对象。

jQuery非常高效，因为你可以在主要工作是操作DOM元素的WEB编程环境下最大限度的发挥出函数型程序设计的威力。你也许是jQuery的粉丝，并且觉得这种函数式的操作非常赞。但是，这不是需要完全把这种编程模式到处使用的理由。我们通过下面这个jQuery源码来看个例子：

1
2
3
4
5
6
7
8

jQuery.fn = jQuery.prototype = {
init: function( selector, context ) { ... },
size: function() { return this.length; },
each: function( callback, args ) {
return jQuery.each( this, callback, args ); },
ready: function( fn ) { ... }
:
}

可以看到，jQuery对象有他自己的原型，也有一些自有的方法：比如size和each。更有意思的是，当你写jQuery的插件的时候，你只是给通过添加一个函数扩展了原型方法。至此，所有高效的js编程，都是两种模式混合的结果。当然jQuery中函数型的模式更加明显一些。

javascript中的对象

真正面向对象编程中的对象与javascript中的对象有一个很明显的不同。在面向对象的语言中，类是你要使用的对象的蓝本。在javascript中，你所使用的对象的蓝本是一个数据字典或者一个函数。当你在js中创建了一个对象，你就拥有一个你可以填进去任何数据的空的数据字典。

之前说过，通过一些方法，你可以创建一些自定义的对象或者继承自现有的对象。这只在js中有效。

当你需要通过添加中间的转化来接近真正的面向对象语言的时候，在js中有两种办法：闭包和原型。

在讲述那两种办法之前，我们先来讲讲js中的对象类型和他的用法。

你可以通过new关键字来创建一个空的对象，然后你可以给这个对象添加进去你想要的内容：

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

var person = new Object();
person.Name = "Dino";
person.LastName = "Esposito";
person.BirthDate = new Date(1979,10,17)
person.getAge = function() {
var today = new Date();
var thisDay = today.getDate();
var thisMonth = today.getMonth();
var thisYear = today.getFullYear();
var age = thisYear-this.BirthDate.getFullYear()-1;
if (thisMonth > this.BirthDate.getMonth())
age = age +1;
else
if (thisMonth == this.BirthDate.getMonth() &&
thisDay >= this.BirthDate.getDate())
age = age +1;
return age;
}

我们现在拥有一个名为person的对象，但是没有Person对象。在js中，所有的原声对象都有一个只读的prototype属性。通过这个属性，你可以用来提供一些函数，这些函数在使用new关键字的时候，新生成的对象可以与原对象共享这些方法。下面有两种方法可以在js中实现面向对象编程。

通过闭包实现面向对象

闭包是编程语言中的一个基本概念。在js中，闭包是指那些拥有同样上下文的变量和方法的一个函数。下面这个例子就是使用闭包来模拟一个Person类：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

var Person = function(name, lastname, birthdate){
this.Name = name;
this.LastName = lastname;
this.BirthDate = birthdate;

this.getAge = function() {
var today = new Date();
var thisDay = today.getDate();
var thisMonth = today.getMonth();
var thisYear = today.getFullYear();
var age = thisYear-this.BirthDate.getFullYear()-1;
if (thisMonth > this.BirthDate.getMonth())
age = age +1;
else
if (thisMonth == this.BirthDate.getMonth() &&
thisDay >= this.BirthDate.getDate())
age = age +1;
return age;
}
}

可以看出，闭包就是父类的构造函数。在闭包模式中，构造器包含类成员的声明，并且这些成员都是封装起来的。另外，成员都是基于实例的，所以会消耗内存。如何使用呢：

1 2	var p = new Person('Rock','ux',new Date()); alert(p.name + 'is' + p.getAge());

闭包模式是完全封装的，仅此而已。

原型模式的面向对象方法

通过js中prototype对象，你可以定义一个类的结构。下面这个例子用来说明怎样避免使用闭包来重写Person类。

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

// 构造器
var Person = function(name, lastname, birthdate)
{
this.initialize(name, lastname, birthdate);
}

// 成员
Person.prototype.initialize(name, lastname, birthdate)
{
this.Name = name;
this.LastName = lastname;
this.BirthDate = birthdate;
}
Person.prototype.getAge = function()
{
var today = new Date();
var thisDay = today.getDate();
var thisMonth = today.getMonth();
var thisYear = today.getFullYear();
var age = thisYear-this.BirthDate.getFullYear()-1;
if (thisMonth > this.BirthDate.getMonth())
age = age +1;
else
if (thisMonth == this.BirthDate.getMonth() &&
thisDay >= this.BirthDate.getDate())
age = age +1;
return age;
}

在原型模式下面，构造器和成员之间结构清晰，但是构造函数是必须的。这里并没有私有成员，var关键字可以让其只在闭包中有效。你可以通过定义setter/getter来操作你需要的属性，但是这些属性在类外面也是可以直接访问修改的。你可以通过一些特殊的操作（比如添加前缀）来定义私有变量。只是一种办法而已。

原型模式可以很简单的实现继承：

1
2
3
4
5

Developer = function Developer(name, lastname, birthdate)
{
this.initialize(name, lastname, birthdate);
}
Developer.prototype = new Person();

需要注意的是，你必须通过使用this关键字来访问原型中的相关成员方法。

闭包还是原型？

在原型模式中，所有的成员都是共享的。所以，相比而言，内存的开销要小一些。除去语法方面的不同，通过原型模式定义的类更加接近经典意义上的面向对象语言。

闭包还是原型的选择还要从性能和浏览器的兼容性来考虑。原型模式的加载速度不错，而且在Firefox中性能也很好。（相比而言，闭包模式在IE下面的加载更快一些。）原型模式对于智能感知支持不错，这样在一些IDE中（比如VS）就能得到很好的工具支持。原型模式下，你不必通过创建一个实例来查看类型信息，闭包模式下就不行。最后，调试的时候，原型模式可以方便的访问私有成员，闭包模式下面得多几步操作才行。

举个例子，微软的ajax库使用的就是原型模式（闭包模式从未被考虑）。

结论

Javascript并不是纯粹的函数型或者面向对象的语言。但是他从两种语言都有借鉴，所以你需要做好一些准备。

如今，Javascript对于编写客户端的网页和移动应用程序来说必不可少。而且现在的脚本编写也不像当初这个语言开始使用的时候了。现在我们经常使用js来做客户端的表单验证等程序。为了让开发进程更加的平稳，我们也需要一些js库。jQuery就是最好的例证。

随着jQuery大放光芒，函数型变成再次在js语言中相对于面向对象得到了更多的关注。最终，选择什么还是在你。你也不必像选择一种信仰似的选择一种开发模式，开发中，两者混合使用是非常常见的事情。

如前所述，如果我是前端开发，我可能会使用jQuery，然后使用一些匿名函数，不去关心什么自定义的对象。如果我是要自己写一个js的库，那么我肯定会选择面向对象开发，或者使用闭包模式或者使用原型模式。

点击查看原文

本文链接

创建书签小工具之理论

2011-02-23T14:36:00Z

书签小工具（Bookmarklets）是一个非常棒的javascript代码小片断伪装成的小应用，它驻留在你的浏览器里并为网页提供额外的功能。这里我们将研究如何从头开始创建一个书签小工具及一些最佳实践的建议。

我们一直在寻找增加浏览体验的方法，有的方法众所周知，有的则鲜为人知。我原本认为书签小工具属于后者，非常令人讨厌的东西。令我非常懊恼的是我发现在这个问题上我完全是错误的。它并不是令人厌烦的，而是以用户为中心的，能实现很多出色的功能，而且就像人们所预期的一样，它成为了我与浏览者以及网络交互的核心部分。
这里我想向你介绍开发书签小工具以实现一些精妙的书签的全过程。是的，书签，我们将创建不只一个书签，即使是非常小的书签。很好奇吗？我们开始吧！

究竟什么是书签小工具呢？

引用前文的话：
书签小工具是一个非常棒的javascript代码小片断伪装成的小应用，它驻留在你的浏览器里并为网页提供额外的功能，仅仅只需要点击一下。

这个词是bookmark和applet的合成词，也叫做收藏小工具（favelets），这个小的javascript片断让你可以在浏览任何页面时召唤出额外的功能。因为它们只有javascript构成，所以它们是可移动的，可以支持所有的浏览器，甚至是移动设备和平板设备的。安装它们也相当简单，只需要将它们拖到收藏夹就行了！

那么，什么是关键呢？

关键之处在于书签小工具认你可以做很多原本要以开发人员为中心才能做的事情。任何通过书签小工具能获得的功能你都可以使用浏览器的控制台花费很少的时间而获得。书签小工具简化了这个过程，将实现一些功能的代码打包在一个小小的按钮里。书签小工具大体上来说可以分为以下几类：

用于传输数据。它用于将页面提交到特定的服务。处理社交媒体，查字典，搜索都属于这一类。我们将创建一个提交信息到Reddit（一个新闻网站）的书签小工具。
用于获取信息或修改当前页面的。我们将创建一个设置网页背景色的小工具。
用于后台运作。清除当前网站cookie的书签小工具是一个主要的例子，我们将下面创建一个。

1、开始

你需要记住的第一点就是在所有javascript代码前缀上“javascript”URI。浏览器实现了特定的前缀因此前缀后面的内容可以被当作javascript代码正确的处理，解析。
例如，点击“这个链接”（代码如下）将会强出一个对话框。

<a href="javascript: alert('文字链接');">这个链接</a>

2、包装成匿名函数

记住你的代码将运行于当前加载的页面，它可能会拥有自己的javascript代码，这意味着可能和书签小工具的代码存在冲突。最后你需要做的是让你的小工具中止当前页面。
将你的代码包装在一个匿名函数里可以保证没有名称冲突。此外，javascript新手将会被搞混并认为你是上帝，如果你这样做的话。

javascript:(function(){// your code here })();

当你在其它地方使用javascript代码时这也是适当，时刻注意保持自己的代码隔离。

3、按需外部化

书签小工具不一定要很小，你可以需要多大就写多大。在这种些情况下，为了发布方便并在不让用户手动干预的情况下保持代码为最新，最好是创建一个获取需要的代码的封装。

javascript: (function () {
var jsCode = document.createElement('script');
jsCode.setAttribute('src', 'http://path/to/external/file.js');
document.body.appendChild(jsCode);
}());

上面的代码变得美化了许多，它创建了一个script标签，将src属性设置成其它地方的一个文件，然后最终将它附加到文档中。通过这种方法，无论你哪上部分代码发生变化，你可以部署你修改后的文件并立刻传播到每一个用户。

注意：这不仅限于javascript。如果你的书签小工具使用前端，你也可以自由地引入外部HTML和CSS，使得你的小工具真正的自动更新。

4、谨慎地添加类库

如果你要创建一个大型的书签工具，你可能需要一个javascript类库。但是在你的页面里使用它们不仅仅只是将它们包含进来那么简单，你需要保证这个库不是已经存在了的。像jQuery和MooTools这样占有很大市场的类库你得仔细的处理来确保它预先没有被载入。
另一方面网页可能已经载入了其它类库，可能会导致“$”符号组件冲突。版本冲突在一些情况下也会出现，所以也要注意。

这里是一段我代码中使用的脚本。注意，在你的代码中你需要注意我上面说的几点。

if (!($ = window.jQuery)) { // typeof jQuery=='undefined' works too
script = document.createElement( 'script' );
script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js';
script.onload=releasetheKraken;
document.body.appendChild(script);
}
else {
releasetheKraken();
}

function releasetheKraken() {
// The Kraken has been released, master!
// Yes, I'm being childish. Place your code here
}

这段代码的含义应该很明确了，我们简单地过一下。

首先我们通过判断jQuery对象是不是存在于名称空间里来确定jQuery是不是已经被加载了。
如果不存在，我们引入它。我们根据最佳实践能过CDN来载入它。最后我们确保指向包含要执行的代码的程序主函数。
如果已存在，直接运行主函数。

如果你觉得解决这个问题很麻烦，我强烈推荐Ben Alman的“书签小工具生成器”。它用一种很完全的方法解决全称空间和版本冲突。好东西！

5、非不得已不要搞乱母页

这一点太重要了。如果不小心破坏了母页，书签小工具就是毫无用处的。请注意javascript并不是你唯一需要处理的东西。如果你有一个前端，HTML和CSS也会在页面中运行。不要给你的容器和类取非常普通的名字，比如你把它叫做“container”，我会永远讨厌你。一种简单的方法就是给所有名字添加具有工具特色的特别前缀（或者是后缀）字符串。当你写CSS的时候，需要特别特别的特殊。使用样式很不错，但请使用最高的精度。如果有样式泄漏到主页面上是不合规范的，且会引发不信任。

6、测试，测试，再测试

如果你正创建一个较小的书签小工具，它引用了脆弱的第三方的类库，你可能会碰到永远的噩梦——跨浏览器兼容性问题。看起来很明显但是这是很多人很多时候都会忘记的一点。
另一个陷阱是希望能工作在所有网站上的小工具只工作在几个网站上。网页可以有不同的层次，使用不同的方法论。有些网站可能包含了HTML5并且使用了相关的容器而其它的可能安全起见使用了通用的div标签。在收集信息的时候确保考虑了每一种情况。

接下来请阅读“创建书签小工具之实例”

源文

本文链接

你也应该用VIM，不仅仅只是酷

2011-01-09T04:09:00Z

为什么要用VIM？

1、他是一个文本编辑器，不是IDE，所以他很快、很轻、很高效。

2、不想动鼠标，因为它离键盘实在太远了。

3、看看电影里那些个黑客，不都是噼里啪啦的敲键盘，哪有弄个鼠标点来点去的？

4、自己捣鼓一些脚本，一句顶五句，腿不疼了，腰也不酸了，吃嘛嘛香了。

5、这样的年代，没有整过linux简直不好意思说自己是搞网络的，linux必须得用用vim吧

6、一个编辑器不同插件就能搞定所有语言，搞定所有你想要的。

7、完全跨平台，一个伟大的人绝对没有种族歧视，你应该被这种伟大所感染。

8、商业化产品可能是有用的，但最好的东西往往是免费的，空气，水，Vim。

9、周围同事不是用 Vim 就是 Emacs , 你要是用一 EditPlus，你都不好意思跟人家打招呼… 什么插件呀，语法高亮呀，拼写检查呀，能给它开的都给它开着，就是一个字儿：酷。你说这么牛B一东西，怎么着学会也得小半年吧。半年！入门都远着呢，能学会移动光标就不错了，你还别说耗不起，就这还只是左右移动。

10、谁用谁知道。

如果你没有用过VIM，建议参考下面的初级入门教程，可以帮你快速进阶。

【VIM基本用法（七）】更多有用的命令

【VIM基本用法（六）】在文章中移动、定位

【VIM基本用法（五）】标记与宏

【VIM基本用法（四）】搜索查找替换

【VIM基本用法（三）】复制、粘贴、剪贴板

【VIM基本用法（二）】修改、删除

【VIM基本用法（一）】移动、编辑

转载注明:http://rockux.com/archives/%E4%BD%BF%E7%94%A8vim%E7%9A%84%E5%8D%81%E5%A4%A7%E7%90%86%E7%94%B1

本文链接

jCutter，一个图片hover的jQuery插件

2010-04-20T13:00:00Z

效果演示看这里。先来看看使用方法。HTML文件中这样写：[代码]调用的话需要这样写：[代码]当然要引用这个插件才行。下面我们来讲解这个插件的编写。一、jQuery插件编写的方法写一个jQuery插件，首先需要一些必要的结构，如下所示：代码这个结构和我们最终的结果有些出入，但是大体上jQuery插件的结构就是如此。首先要写成一个闭包的形式，不污染命名空间，然后根据jQuery提供的接口来编写，这里的...

jQuery与YUI中鼠标位置检测比较学习(document.documentElement document.body与pageX pageY以及clientX clientY)

2010-04-12T07:15:00Z

关于鼠标位置的检测，我们先来看看jQuery和YUI中的实现jQuery中：[代码]YUI中：[代码]YUI的写法比起jQuery来确是“工程化”了很多，如果是按照代码行数发工资的话，推荐YUI，哈哈。之前翻译PPK的作品的是提到了无论如何都不要检测浏览器的类型，因为没必要，而且浏览器的UA都在胡言乱语。关于document.documentElement和document...