Read more »]]>

引子

App Store 如今正风靡世界，许多人都想尝试去自己开发一个 iOS App，不过苹果官方推荐使用的是 Objective-C 这个语言。而 Objective-C 与 C、Java 之类的语言风格差异有些大，短时间并不容易掌握，又或者许多人只是想尝试开发一个可以运行在 iOS 上的程序而已，不想再去额外去学一门新的语言，那这个时候就可以考虑另外的一些技术来开发 iOS App。

在移动开发领域，得益于现在手机的性能越来越好，浏览器的功能越来越强大，JavaScript 也成为一门很流行的程序开发语言，而对应到 iOS 平台上，也有多种使用 JavaScript 来开发 iOS App 的技术。这次要介绍的三种技术之中，就有两种使用了 JavaScript。

另外，许多开发跨平台移动应用开发的解决方案，首选要支持的就是 iOS，因此在 iOS 这个平台上可以看到很多种不使用 Objective-C 去开发 iOS App 的技术，而且其中技术所编写出来的程序，除了可以在 iOS 上运行之外，还可以运行在 Android 以及其他系统平台上。能少写一份代码，何乐而不为呢～

不使用 Objective-C

这次要介绍的是三个不使用 Objective-C 来开发 iOS App 的解决方案：

• Titanium Mobile
• PhoneGap(http://phonegap.com)
• Mono Touch(http://xamarin.com/monotouch)

这三个解决方案各有特点，它们的运行机制也有所不同，至于在开发 iOS App 时选用何种方案，可以根据每种方案不同的特点去选择适合自己的。

Titanium Mobile

Titanium Mobile 是 AppCelerator 推出的一个基于 JavaScript 的跨平台移动应用开发技术。通过 Titanium Mobile，可以直接使用 JavaScript 开发能运行于 iOS 和 Android 平台的应用程序，而代码只需要写一次。

Titanium Mobile 是通过将 JavaScript 代码映射到对应平台的 Native Code，在 Titanium Mobile 中操作某一个 UI 对象，或者是其他对象时，实时上是在操作对应平台中实际的 UI 对象，例如使用 Ti.UI.createView() 创建一个视图，它在 iOS 中运行时会实际对应到 UIView，使用 Ti.UI.createTabGroup() 就会对应到 iOS 中的 UITabBarController。这样做的好处就是，可以直接使用 JavaScript 来创建出原生的 UI，而不需要使用额外的代码来让程序 UI 更像系统的 UI。

另外，AppCelerator 在收购了 Apatna 之后，推出了适用于 Titanium 的 IDE Titanium Studio，通过使用 Titanium Studio，可以很方便的创建项目、带智能提示的编辑器，以及很方便的调试项目。

在 Titanium Studio 中调试 iOS 项目时，可以做到单步调试，也就意味着，可以拥有不弱于使用 Xcode 开发项目的体验。断点、单步、变量查看功能一应具全。如果需要发布到 App Store，也可以很方便的通过图形化界面来打包。

当然，使用 Titanium Studio 也需要配合 Xcode 来使用，必须要在安装了 Xcode 的情况下，才可以使用 Titanium Studio 来调试和测试项目。

在 Titanium Studio 推出之前，Titanium Mobile 是靠一个 Developer Tool 来进行打包等操作的，相对比较繁琐，而有了 Titanium Studio 之后，让一切变得简单，我也是从那时开始关注 Titanium Mobile。

对于前端开发工程师来说，只需要理解了 iOS 开发中的一些概念，就可以使用 Titanium Mobile 来开发一个像模像样的 iOS App。并且 Titanium Mobile 实现了 CommonJS 规范，可以很方便来模块化程序代码。

PhoneGap

PhoneGap 是一个使用 HTML+CSS+JavaScript 来开发移动 App 的解决方案，使用它来开发 App 只需要有 Web 开发基础即可。它在今年10月份被 Adobe 收购了，然后加入到 Apache Software Foundation 进行孵化。

目前 PhoneGap 已经支持了市面上大多数的智能手机平台，其中就有 iOS。

在我看来，PhoneGap 其实只是提供了一个运行于各种智能手机平台的浏览器的壳，通过这个壳，PhoneGap 的 JavaScript 库可以和系统进行沟通，从而实现在 Web 页面中与系统交互的功能。

因为 PhoneGap 只提供了系统功能的 API 调用，而没有提供任何和界面相关的 API，那么界面就只能自己来折腾了。

幸好开源的世界是强大的，已经有了一堆这样的界面库来供我们选择，像 jQTouch、jQuery Mobile、Sencha Touch 之类，都提供了类似于 iOS 的界面组件，可以让我们省去许多界面上的编码工作。

使用浏览器来运行 App 的一个坏处就是：慢。因为整个 App 就是一个网页，如果编码不当，整个程序使用起来体验会比较差，和原生的应用会有很大区别。

在上面提到的几个 UI 框架之中，我比较喜欢的是 jQTouch，它只提供了基本 UI 框架和一些视图切换效果，做出来的程序是一个单页面 App，在整个程序的反应速度上会感觉比较好。不过 jQTouch 也缺少一些常用的组件像对话框，而这些在 jQuery Mobile 和 Sencha Touch 之中又有提供。选择使用哪个框架就要看个人喜好了，它们的网站都提供了在线预览功能

其实，如果用不到系统的 API，只是想把自己的程序包装成一个很像 App 的 App 的话，只要用一用 PhoneGap 提供的壳就行了，它的 API 几乎可以不用看，配合一些 UI 框架可以快速的产出一个 iOS App 来。

当然了，PhoneGap 最大的好处就是，几乎跨了几乎所有的主流智能手机平台，这对于初创团队来说，是迅速推出各个平台客户端的一个好方法。另外 PhoneGap 官方网站也提供了一系列配套服务，例如使用 PhoneGap Build 可以直接编译各个平台的程序安装包，而不需要开发者自己在本地配置每个平台的编译环境。

Mono Touch

Mono Touch 是一个使用 C# 来编写跨平台应用的框架，同样支持了 iOS 和 Android 两大平台。

Mono Touch 对于 .NET 程序员来说应该是一个好消息，除了调试，其他的都可以在 Windows 中搞定，调试的时候可以通过在虚拟机里运行 Mac OS X 来解决。Mono Touch 因为是基于 Mono 的，也有个配套的 IDE 可以用：Mono Develop。因为都是 .NET，当然也可以用 Vistual Studio 这个更强大的工具了。

与 Titanium Mobile 和 PhoneGap 不同的是，Mono Touch 如果要编译到设备，或者发布到 App Store 的话，是需要收费的。

另外，因为 Mono Touch 也是编译成可执行代码再部署到设备上的，因此运行速度相对于 PhoneGap 所制作的应用来说，应该会快上一些。

不过 Mono Touch 要收费，并且收费还不是很便宜，可能会影响到它的普及率。

小结

在上面讲的三个解决方案之外，还有其他好多大大小小的移动应用开发解决方案，但是用于 iOS 上的解决方案，主要也就是映射代码、或者是包装的形式了，对于应用而不是游戏类型来说，一般都是够用的，在具体选择的时候，也可以根据自己更为熟悉哪种语言，或者框架来挑选。

如果你发现了其他有意思的移动应用开发技术，也可以和我分享一下 :)

参考资料

1. http://www.appcelerator.com/products/titanium-mobile-application-development/
2. http://developer.appcelerator.com/apidoc/mobile/latest
3. http://phonegap.com/about
4. https://build.phonegap.com/
5. http://www.mono-project.com/Main_Page
6. http://xamarin.com/monotouch
7. https://github.com/xamarin/monotouch-samples
8. http://blog.zhaojie.me/2010/09/develop-ios-app-with-monotouch-in-visual-studio-1.html

–EOF–

Read more »]]>

昨天搞定了一个小网站的搭建，用了 node.js，另外为了能在一个 VPS 上搭建多个网站，用了 nginx 作为反向代理。

软件介绍

嗯，从维基上复制了一下～

node.js

Node.js是一个事件驱动I/O伺服端JavaScript环境，基于V8。目的是为了提供撰写可扩充网络程式，如web服务。第一个版本由Ryan Dahl于2009年释出，后来，Joyent雇用了Dahl，并协助发展Node.js。

nginx

nginx（发音同engine x）是一款由俄罗斯程序员Igor Sysoev所开发轻量级的网页服务器、反向代理服务器以及电子邮件（IMAP/POP3）代理服务器。

cluster

在 node.js 0.6.0 之前，有一个第三方的 node.js 模块 cluster，用来进行多核服务器上运行 node.js，以及提供扩展的支持。但是在 node.js 0.6.0 之后，node.js 本身就提供了 cluster 的支持，另外，第三方的 cluster 也与 node.js 0.6 有兼容性问题。目前 node.js 的稳定版本是 0.6.5，因此需要使用原生的 cluster 来代替第三方的 cluster。

幸好内置的 cluster 也足够简单，如果只是为了多核负载均衡，以及支持即时服务重启的话，只需要写一点的代码就可以完成这些功能了。

server.js

var path = require('path');
var http = require('http');
var cluster = require('cluster');

var NODE_ENV = process.env.NODE_ENV || 'production';
var appName = path.basename(__dirname);
var appPort = 9000;

var numCPUs = require('os').cpus().length;

if (cluster.isMaster) {
    process.title = appName + ' master';
    console.log(process.title, 'started');

    // 根据 CPU 个数来启动相应数量的 worker
    for (var i = 0; i < numCPUs; i++) {
        cluster.fork();
    }

    process.on('SIGHUP', function() {
        // master 进程忽略 SIGHUP 信号
    });

    cluster.on('death', function(worker) {
        console.log(appName, 'worker', '#' + worker.pid, 'died');
        cluster.fork();
    });

} else {
    process.title = appName + ' worker ' + process.env.NODE_WORKER_ID;
    console.log(process.title, '#' + process.pid, 'started');

    process.on('SIGHUP', function() {
        // 接收到 SIGHUP 信号时，关闭 worker
        process.exit(0);
    });

    http.Server(function(req, res) {
        res.writeHead(200);
        res.end('Worker ' + process.env.NODE_WORKER_ID);
    }).listen(8000);
}

运行服务 node server.js ：

nodejs master started
nodejs worker 1 #38928 started
nodejs worker 3 #38930 started
nodejs worker 2 #38929 started
nodejs worker 4 #38931 started

如果直接 kill 掉某一个 worker，kill 38928：

nodejs worker #38931 died
nodejs worker 5 #38934 started

可以看到一个新的 worker 会马上启动，这就保证了服务的不间断性。

Virtual Host 支持

通常情况下，我们不会在一个 IP 上只部署一个网站。在使用 node.js 时，可以使用 connect 提供的 vhost 支持 Virtual Host，但是，这也限制了服务器只能用 node.js，而不能同时使用其他的服务，例如再安装一个 PHP 服务之类。

这时就可以使用 nginx 的反向代理来解决了，用户在访问网站时，请求先到 nginx 进行处理，如果是 node.js 站点的话，将请求转发到 node.js 的服务，然后再将 node.js 服务的结果返回给用户。

在 nginx 中设置反向代理很简单，一句 proxy_pass 就可以搞定：

server {
    listen 80;
    server_name example.com;

    location / {
        proxy_pass http://localhost:9000;
    }
}

在添加了 Virtual Host 之后，就可以把一些静态资源，例如 CSS、JavaScript 之类的文件，直接交给 nginx 来处理，而不是什么请求都需要到 node.js 这一层去处理，也省去反向代理这一关的消耗。

Session 支持

使用 express 这个 node.js web framework 来创建网站时，可以配合 connect 这个中间件来实现 session 支持。

默认情况下，connect 的 session 是使用内置的内存存储来存放 session 信息，这时如果 node.js 服务一旦重启，所有的 session 信息都会丢失，这对于用户来说不是个好体验，那么我们可以用外部的存储来存放 session 信息，例如 redis。

要让 connect 使用 redis 作为 session 存储的话也是很方便的：

var express = require('express');
var RedisStore = require('connect-redis')(express);

var app = express.createServer(
    express.session({ secret: 'keyboard cat', store : new RedisStore() })
);

监测文件改动

在调试的时候，经常需要重新启动 node.js 以便修改过的文件生效，原来第三方的 cluster 有一个配置项，可以很方便的配置监测时间间隔，文件改动后自动重新启动 worker，但是原生的 cluster 就没有这个功能了，需要自己来实现。

fs 模块提供了 watch 函数，可以方便的监测文件修改，使用这个就可以来实现文件修改后自动重启 woker 功能了。

if (cluster.isMaster) {
    process.title = appName + ' master';
    console.log(process.title, 'started');

    var workers = [];

    // 根据 CPU 个数来启动相应数量的 worker
    for (var i = 0; i < numCPUs; i++) {
        var worker = cluster.fork();
        workers.push(worker.pid);
    }

    process.on('SIGHUP', function() {
        // master 进程忽略 SIGHUP 信号
    });

    // 监测文件改动，如果有修改，就将所有的 worker kill 掉
    fs.watch(__dirname, function(event, filename) {
        workers.forEach(function(pid) {
            process.kill(pid);
        });
    });

    cluster.on('death', function(worker) {
        var index = workers.indexOf(worker.pid);
        if (index != -1) {
            workers.splice(index, 1);
        }
        console.log(appName, 'worker', '#' + worker.pid, 'died');
        worker = cluster.fork();
        workers.push(worker.pid);
    });

}

这样，每次文件保存之后，node.js 都会自动重启，从而避免了每次保存文件要手动重启服务的麻烦。

当然，在使用监测文件自动重启的时候，最好加上 NODE_ENV 的判断，在 development 的时候才进行自动重启，而 production 的时候使用手动重启就够了。

小结

总的来说，使用 node.js 来构建网站还是很方便的，加上 nginx 反向代理之后，与使用 PHP 之前也没有很大的区别，又可以享受到 node.js 的高效。

嗯，就这样了，希望此文对你有所帮助。

参考资料

1. http://zh.wikipedia.org/wiki/Node.js
2. http://nodejs.org/docs/v0.6.5/api/cluster.html
3. http://learnboost.github.com/cluster/
4. http://expressjs.com/
5. http://senchalabs.github.com/connect/
6. http://redis.io/

–EOF–

Read more »]]>

Read more »]]>

上一篇介绍了 HTML5 中 Canvas 的路径，这篇将要介绍一下 Canvas 中的颜色及渐变。

Canvas 中的基本颜色系统

在 Canvas 中，颜色主要用途就是在绘制路径时，用来指定填充颜色和边框颜色。

Canvas 中的颜色参数值有两种格式：

1. 如果透明度为 1.0，也就是不透明，颜色值的格式就与一般使用一样，为：#AABBCC，其中 AA、BB、CC 分别为 Red、Green、Blue 分量。

2. 如果透明度不为 1.0，也就是带透明，颜色值格式可以使用 rgba(r, g, b, a)，其中 r、g、b、a 分别为 Red、Green、Blue 分量和透明度。透明度的值为 0 至 1.0 之间的一个数值。

3. 颜色值还可以为已知的颜色名称，例如 red、blue、green 等。

总的说来，Canvas 中颜色值的格式与 CSS 中一致，因此颜色值没有特别需要注意的地方。

<div id="_mcePaste">&lt;canvas id="canvas" width="600" height="500"&gt;&lt;/canvas&gt;
&lt;script type="text/javascript"&gt;
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    // fill a rectangle whit sepecified fill style
    function fillRect(color) {
        ctx.fillStyle = color;
        ctx.fillRect(0, 0, 150, 100);
        ctx.font = "10pt Arial";
        ctx.fillStyle = "white";
        ctx.fillText(color, 6, 20);
        ctx.translate(160, 0);
    }
    ctx.translate(0, 50);
    // fill rect with color name
    fillRect("green");
    // fill rect with 0xAABBCC
    fillRect("#AABBCC");
    // fill rect with rgba(50, 100, 150, 0.5)
    ctx.translate(0, -25);
    fillRect("rgba(50,100,150,0.5)");
 
    // fill another rect with rgba(150, 100, 50, 0.5)
    ctx.translate(-110, 50);
    fillRect("rgba(150, 100, 50, 0.5)");
&lt;/script&gt;</div>

注意，以上代码需要使用 Firefox 3.5 来查看，在 Firefox 3.0.x 中，Canvas 的 Context 对象不支持 fillText 方法，而我安装的 Chrome 2.0.174.0 对 translate 方法的实现有误。

2. Canvas 中的渐变

WHATWG 的 Canvas 规范中规划了两种渐变模式，一种是线性渐变，另一种是径向渐变。如果需要在 Canvas 中使用渐变，首先要根据你所要创建的渐变模式来调用 Context 的相应方法来创建一个渐变对象，这个对象就是用来控制渐变的效果。

2.1 线性渐变

线性渐变使用 Canvas Context 的 createLinearGradient 方法创建，它的定义如下：

CanvasGradient createLinearGradient(in float x0, in float y0, in float x1, in float y1);

通过 (x0, y0) 与 (x1, y1) 指定渐变的开始位置与截止位置。当然，创建完线性渐变对象并不能完全开始使用渐变对象，你需要给它指定渐变的起始色以及终止色。CanvasGradient 对象有一个 addColorStop 方法用来添加颜色。

gradient.addColorStop(offset, color)

在线性渐变中，偏移量 offset 只能取 0 或 1，分别代表线性渐变的起始色和终止色。color 参数的值可以参考上面说明的颜色格式。

例如，我要创建一个从 (20, 20) 到 (150, 150) 的一个渐变，从绿色渐变到白色透明，就可以按照下面的代码来创建 CanvasGradient 对象：

var gradient = ctx.createLinearGradient(20, 20, 150, 150);

gradient.addColorStop(0, ’green’);

gradient.addColorStop(1, ’rgba(255,255,255,0)’);

• 创建完渐变对象后，可以直接将它赋值给 CanvasContext 的 fillStyle 属性或 strokeStyle 属性，用来指定填充的渐变色或画边框的渐变色。也就是说，CanvasGradient 对象的用法等同于颜色参数值，通过赋值给 Context 对象来起作用。

  

<script type="text/javascript">
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    // fill a rectangle whit sepecified fill style
    function fillRect(color, x, y, h, w) {
        ctx.fillStyle = color;
        ctx.fillRect(x || 0, y || 0, h || 150, w || 100);
        ctx.font = "10pt Arial";
        ctx.fillStyle = "white";
        ctx.fillText(color, 6, 20);
    }
    ctx.translate(0, 50);
    // fill rect with color name
    fillRect("green");
    // 从绿色渐变到白色完全透明，并指定给填充色
    var gradient = ctx.createLinearGradient(20, 20, 150, 150);
    gradient.addColorStop(0, 'green');
    gradient.addColorStop(1, 'rgba(255,255,255,0)');
    ctx.translate(250, 0);
    fillRect(gradient, -50, -50, 250, 200);
    fillRect(gradient);
 
    // 从白色到黑色的渐变，并指定给边框色
    gradient = ctx.createLinearGradient(0, 0, 150, 100);
    gradient.addColorStop(0, 'white');
    gradient.addColorStop(1, 'black');
    ctx.strokeStyle = gradient;
    ctx.strokeRect(0, 0, 150, 100);
</script>

2.2 径向渐变

与线性的用法类似，它的函数签名如下：

CanvasGradient createRadialGradient(in float x0, in float y0, in float r0, in float x1, in float y1, in float r1);

与线性渐变不同的是，径向渐变除了要指定起始位置和终止位置外，还需要指定起始半径和终止半径。使用不同中心点的径向渐变可以实现类似光照的效果，不过目前 Chrome 对不同中心点的径向渐变支持不好，在 Chrome 中只会使用第二个中心点进行径向渐变，测试发现在最新开发版 Chrome 3.0.184.0 (17842) 中仍是如此。

在下图中可以看到，主流支持 Canvas 的浏览器都能正确渲染中心点不同的径向渐变，而 Chrome 则只能使用第二个中心点进行渲染。

<canvas id="canvas" width="600" height="500"></canvas>
<script type="text/javascript">
    var canvas = document.getElementById("canvas");
    var ctx = fixContext(canvas.getContext("2d"));
    // fill a rectangle whit sepecified fill style
    function fillRect(color, x, y, w, h) {
        ctx.fillStyle = color;
        ctx.fillRect(x || 0, y || 0, w || 150, h || 100);
        ctx.font = "10pt Arial";
        ctx.fillStyle = "white";
        ctx.fillText(color, 6, 20);
    }
    ctx.translate(50, 50);
    // 同中心，从绿色渐变到白色完全透明，并指定给填充色
    var gradient = ctx.createRadialGradient(50, 50, 0, 50, 50, 100);
    gradient.addColorStop(0, 'white');
    gradient.addColorStop(1, 'green');
    fillRect(gradient, -50, -50, 300, 200);
    // 第二次填充，矩形区域颜色加深
    fillRect(gradient);
 
    ctx.translate(250, 0);
    // 不同中心，从绿色渐变到白色完全透明，并指定给填充色
    var gradient = ctx.createRadialGradient(0, 0, 10, 50, 50, 100);
    gradient.addColorStop(0, 'white');
    gradient.addColorStop(1, 'green');
    fillRect(gradient, -50, -50, 200, 200);
    // 第二次填充，矩形区域颜色加深
    fillRect(gradient);
</script>

小结

总的来说，Canvas 中的颜色使用与使用 CSS 进行颜色定义没有什么区别，但比较强大的是 Canvas 支持渐变，这样就可以通过 Canvas 来做一些比较炫的效果。

这篇拖的太久了，已经有些忘了，先结束掉这部分再继续写了……

参考资料

1. The Canvas Element, WHATWG

Read more »]]>

上一篇介绍了 HTML5 中 Canvas 的基本概念，这篇将要介绍一下 Canvas 中的基本图形。

图形的基础 - 路径

在 Canvas 中，所有基本图形都是以路径为基础的，也就是说，我们在调用 2dContext 的 lineTo、rect 等方法时，其实就是往已经的 context 路径集合中再添加一些路径点，在最后使用 fill 或 stroke 方法进行绘制时，都是依据这些路径点来进行填充或画线。

在每次开始绘制路径前，都应该使用 context.beginPath() 方法来告诉 Context 对象开始绘制一个新的路径，否则接下来绘制的路径会与之前绘制的路径叠加，在填充或画边框时就会出现问题。在绘制完成路径后，可以直接使用 context.closePath() 方法来关闭路径，或者手动关闭路径。另外，如果在填充时路径没有关闭，那么 Context 会自动调用 closePath 方法将路径关闭。

基本路径方法

1. beginPath, closePath

这两个方法在前面已经介绍过，分别用来通知 Context 开始一个新的路径和关闭当前的路径。

在 Canvas 中使用路径时，应该要保持一个良好的习惯，每次开始绘制路径前都要调用一次 beginPath 方法，否则画出来的效果难看不说，还会严重影响性能。

在下面这张图中，左边的图形在每次绘制矩形前都调用了一次 beginPath 来清除之前的路径并重新开始绘制新的路径，而后面的图形则就只在绘制所有图形前调用了一次 beginPath 来清除路径，因此，虽然这里是使用的边框色是 #666，但是右边的图形颜色比左边的深一些，因为每次使用 stroke 绘制边框时，会把之前的路径再次绘制一遍，叠加起来颜色就比原来深一些。

<div id="_mcePaste">&lt;canvas id="canvas" width="500" height="500"&gt;&lt;/canvas&gt;
&lt;script type="text/javascript"&gt;
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    ctx.strokeStyle = "#666";
    function useBeginPath() {
        for (var i = 0; i &lt; 5; ++i) {
            ctx.beginPath();
            ctx.rect(10 + i*20, 10 + i*20, 210 - i*40, 210 - i*40);
            ctx.stroke();
        }
    }
    function notUseBeginPath() {
        ctx.beginPath();
        for (var i = 0; i &lt; 5; ++i) {
            ctx.rect(240 + i*20, 10 + i*20, 210 - i*40, 210 - i*40);
            ctx.stroke();
        }
    }
    useBeginPath();
    notUseBeginPath();
&lt;/script&gt;</div>

在 Context 中路径数较少时，如果不考虑显示效果，性能上还可以接受，但是如果 Context 中的路径数很多时，在开始绘制新路径前不使用 beginPath 的话，因为每次绘制都要将之前的路径重新绘制一遍，这时性能会以指数下降。

因此，除非有特殊需要，每次开始绘制路径前都要调用 beginPath 来开始新路径。

2. 移动与直线 moveTo, lineTo, rect

<canvas id="canvas" width="500" height="500"></canvas>
<script type="text/javascript">
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(10, 10);
    ctx.lineTo(110,110);
    ctx.lineTo(10, 110);
    ctx.lineTo(10, 10);
    ctx.stroke();
    ctx.beginPath();
    ctx.rect(120, 10, 100, 100);
    ctx.stroke();
</script>

void moveTo(in float x, in float y);

在 Canvas 中绘制路径，一般是不需要指定起点的，默认的起点就是上一次绘制路径的终点，因此，如果需要指定起点的话，就需要使用 moveTo 方法来指定要移动到的位置。

void lineTo(in float x, in float y);

lineTo 方法则是绘制一条直接路径到指定的位置。在调用完 lineTo 方法后，Context 内部的绘制起点会移动到直线的终点。

void rect(in float x, in float y, in float w, in float h);

rect 方法用来绘制一个矩形路径，通过参数指定左上角位置以及宽和高。在调用 rect 后，Context 的绘制起点会移动到 rect 绘制的矩形的左上角。

rect 方法与后面要介绍的 arc 方法与其他路径方法有一点不同，它们是使用参数指定起点的，而不是使用 Context 内部维护的起点。

3. 曲线 arcTo, arc, quadraticCurveTo, bezierCurveTo

void arcTo(in float x1, in float y1, in float x2, in float y2, in float radius);

按照 WHATWG 文档的说明，这个方法是画一个与两条射线相切的的圆弧，两条射线其中一条为穿过 Context 绘制起点，终点为 (x1, y1)，另外一条为穿过 (x2, y2)，终点为 (x1, y1)，这条圆弧为最小的与这两条射线相切的圆弧。在调用完 arcTo 方法后，将 圆弧与 射线 (x1, y1)-(x2, y2) 的切点添加到当前路径中，做为下次绘制的起点。

在测试中发现，Firefox 和 Opera 目前对这个方法的支持并不好，只有 Chrome 和 Safari 4 能绘制出正确的路径。

图中的的两条灰色直线是偏移 4 个像素后的两条射线所在的位置。

<canvas id="canvas" width="500" height="500"></canvas>
<script type="text/javascript">
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.strokeStyle = "#000";
    ctx.translate(200, 200);
    ctx.moveTo(10, 10);
    ctx.arcTo(110, 60, 10, 110, 30);
    ctx.stroke();
 
    ctx.beginPath();
    ctx.strokeStyle = "#999";
    ctx.moveTo(10, 6);
    ctx.lineTo(114, 60);
    ctx.lineTo(10, 114);
    ctx.stroke();
</script>

void arc(in float x, in float y, in float radius, in float startAngle, in float endAngle, in boolean anticlockwise);

arc 方法用来绘制一段圆弧路径，通过圆心位置、起始弧度、终止弧度来指定圆弧的位置和大小，这个方法也不依赖于 Context 维护的绘制起点。而在画圆弧时的旋转方向则由最后一个参数 anticlockwise 来指定，如果为 true 就是逆时针，false 则为顺时针。

void quadraticCurveTo(in float cpx, in float cpy, in float x, in float y);

quadraticCurveTo 方法用来绘制二次样条曲线路径，参数中 cpx 与 cpy 指定控制点的位置，x 和 y 指定终点的位置，起点则是由 Context 维护的绘制起点。

void bezierCurveTo(in float cp1x, in float cp1y, in float cp2x, in float cp2y, in float x, in float y);

bezierCurveTo 方法用来绘制贝塞尔曲线路径，它与 quadraticCurveTo 相似，不过贝塞尔曲线有两个控制点，因此参数中的 cp1x, cp1y, cp2x, cp2y 用来指定两个控制点的位置，而 x 和 y 指定绺的位置。

<canvas id="canvas" width="500" height="500"></canvas>
<script type="text/javascript">
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    ctx.translate(10, 10);
    ctx.beginPath();
    ctx.arc(50, 50, 50, 0, Math.PI, true);
    ctx.stroke();
    // quadraticCurveTo
    ctx.beginPath();
    ctx.strokeStyle = "#000";
    ctx.moveTo(110, 50);
    ctx.quadraticCurveTo(160, 0, 210, 50);
    ctx.stroke();
    ctx.beginPath();
    ctx.strokeStyle = "red";
    ctx.moveTo(110, 50);
    ctx.lineTo(160, 0);
    ctx.lineTo(210, 50);
    ctx.stroke();
    // bezierCurveTo
    ctx.beginPath();
    ctx.strokeStyle = "#000";
    ctx.moveTo(220, 50);
    ctx.bezierCurveTo(250, 0, 280, 10, 320, 50);
    ctx.stroke();
    ctx.beginPath();
    ctx.strokeStyle = "red";
    ctx.moveTo(220, 50);
    ctx.lineTo(250, 0);
    ctx.lineTo(280, 10);
    ctx.lineTo(320, 50);
    ctx.stroke();
</script>

4. fill, stroke, clip

fill 与 stroke 这两个方法很好理解，分别用来填充路径与绘制路径线条。

clip 方法用来给 Canvas 设置一个剪辑区域，在调用 clip 方法之后的代码只对这个设定的剪辑区域有效，不会影响其他地方，这个方法在要进行局部更新时很有用。默认情况下，剪辑区域是一个左上角在 (0, 0)，宽和高分别等于 Canvas 元素的宽和高的矩形。

在画这个图时，虽然两次都是使用 fillRect(0, 0, 100, 100) 填充了一个 100×100 大小矩形，但是显示的结果却是第二次填充的只是中间的一小块，这是因为在两次填充之间使用 clip 方法设定了剪辑区域，这样第二次填充时只会影响到所设定的中间那一小部分区域。

<canvas id="canvas" width="500" height="500"></canvas>
<script type="text/javascript">
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    ctx.translate(10, 10);
    // fill a green rectangle
    ctx.fillStyle = "green";
    ctx.fillRect(0, 0, 100, 100);
    // set the clipping region
    ctx.beginPath();
    ctx.rect(30, 30, 40, 40);
    ctx.clip();
    ctx.stroke();
    // fill a yellow rectangle
    ctx.fillStyle = "yellow";
    ctx.fillRect(0, 0, 100, 100);
</script>

5. clearRect, fillRect, strokeRect

这三个方法并不是路径方法，而是用来直接处理 Canvas 上的内容，相当于 Canvas 的背景，调用这三个方法也不会影响 Context 绘图的起点。

要清除 Canvas 上的所有内容时，可以直接调用 context.clearRect(0, 0, width, height) 来直接清除，而不需要使用路径方法绘制一个与 Canvas 同等大小的矩形路径再使用 fill 方法去清除。

结语

通过 Canvas 的路径方法，可以使用 Canvas 处理一些简单的矢量图形，这样在缩放时也不会失真。不过 Canvas 的路径方法也不是很强大，至少连个椭圆的路径都没有……

这篇写得有点长了，Cnavas 中路径相关的内容就写这么多，后面再讲讲 Canvas 其他的东西。

参考资料

1. The Canvas Element, WHATWG

Read more »]]>

什么是Canvas

<canvas> 是一个新的 HTML 元素，这个元素在 HTML5 中被定义。这个元素通常可以被用来在 HTML 页面中通过 JavaScript 进行绘制图形、合成图像等等操作，也可以用来做一些动画。当然，目前 HTML5 规范还在草稿阶段，正式发布也许要等到2010年，不过现在已经有不少浏览器已经支持了部分 HTML5 规范。目前支持 canvas 元素的浏览器有 Firefox 3+、Safari 4、Chrome 2.0+ 等，因此，在运行本页中的例子时，请确保你使用的是上述浏览器之一。

尽管在 Mozilla 已经有不少关于 Canvas 的教程，我还是决定把自己的学习过程记录下来。如果觉得我写的不够明白，那么你可以在参考资料中找到 Mozilla 网站上 Canvas 教程的链接。

另外，可以在这里找到一些有趣的 Canvas 示例。

开始使用 Canvas

使用 Canvas 很简单，与使用其他 HTML 元素一样，只需要在页面中添加一个 <canvas> 标签即可：

<canvas id="screen" width="400" height="400"></canvas>

当然，这样只是简单的创建了一个 Canvas 对象而已，并没有对它进行任何操作，这个时候的 canvas 元素看上去与 div 元素是没什么区别的，在页面上什么都看不出来：）

另外，canvas 元素的大小可以通过 width 与 height 属性来指定，这与 img 元素有点相似。

Canvas 的核心：Context

前面说到可以通过 JavaScript 来操作 Canvas 对象来进行绘制图形、合成图像等操作，这些操作并不是通过 Canvas 对象本身来进行的，而是通过 Canvas 对象的一个方法 getContext 获取 Canvas 操作上下文来进行。也就是说，在后面我们使用 Canvas 对象的过程中，都是与 Canvas 对象的 Context 打交道，而 Canvas 对象本身可以用来获取 Canvas 对象的大小等信息。

要获取 Canvas 对象的 Context 很简单，直接调用 canvas 元素的 getContext 方法即可，在调用的时候需要传递一个 Context 类型参数，目前可以用的并且是唯一可以用的类型值就是 2d：

<script type="text/javascript"><!--mce:0--></script>

Firefox 3.0.x 的尴尬

Firefox 3.0.x 虽然支持了 canvas 元素，但是并没有完全按照规范来实现，规范中的 fillText、measureText 两个方法在 Firefox 3.0.x 中被几个 Firefox 特有的方法代替，因此在 Firefox 3.0.x 中使用 Canvas 时需要先 fix 这个几个方法在不同浏览器中的差别。

下面这代码取自 Mozilla Bespin 项目，它修正了 Firefox 3.0.x 中 Canvas 的 Context 对象与 HTML5 规范不一致的地方：

function fixContext(ctx) {
    // * upgrade Firefox 3.0.x text rendering to HTML 5 standard
    if (!ctx.fillText && ctx.mozDrawText) {
        ctx.fillText = function(textToDraw, x, y, maxWidth) {
            ctx.translate(x, y);
            ctx.mozTextStyle = ctx.font;
            ctx.mozDrawText(textToDraw);
            ctx.translate(-x, -y);
        };
    }
    // * Setup measureText
    if (!ctx.measureText && ctx.mozMeasureText) {
        ctx.measureText = function(text) {
            if (ctx.font) ctx.mozTextStyle = ctx.font;
            var width = ctx.mozMeasureText(text);
            return { width: width };
        };
    }
    // * Setup html5MeasureText
    if (ctx.measureText && !ctx.html5MeasureText) {
        ctx.html5MeasureText = ctx.measureText;
        ctx.measureText = function(text) {
            var textMetrics = ctx.html5MeasureText(text);
            // fake it 'til you make it
            textMetrics.ascent = ctx.html5MeasureText("m").width;
            return textMetrics;
        };
    }
    // * for other browsers, no-op away
    if (!ctx.fillText) {
        ctx.fillText = function() {};
    }
    if (!ctx.measureText) {
        ctx.measureText = function() { return 10; };
    }
    return ctx;
}

注意：到 Opera 9.5 为止，Opera 还不支持 HTML5 规范中 Canvas 对象的 fillText 以及其相关方法和属性。

Hello, Canvas!

在对 Canvas 进行了一些初步了解后，开始来写我们的第一个 Canvas 程序，闻名的 HelloWorld 的又一个分支“Hello, Canvas”：

<canvas  id="screen" width="400" height="400"></canvas>
<script  type="text/javascript">
(function() {
    var canvas = document.getElementById("screen");
    var ctx = fixContext(canvas.getContext("2d"));
    ctx.font = "20pt Arial";
    ctx.fillText("Hello, Canvas!", 20, 20);
    ctx.fillText("www.xujiwei.com", 20, 50);
    function fixContext(ctx) {
        // * upgrade Firefox 3.0.x text rendering to HTML 5 standard
        if (!ctx.fillText && ctx.mozDrawText) {
            ctx.fillText = function(textToDraw, x, y, maxWidth) {
                ctx.translate(x, y);
                ctx.mozTextStyle = ctx.font;
                ctx.mozDrawText(textToDraw);
                ctx.translate(-x, -y);
            };
        }
        // * Setup measureText
        if (!ctx.measureText && ctx.mozMeasureText) {
            ctx.measureText = function(text) {
                if (ctx.font) ctx.mozTextStyle = ctx.font;
                var width = ctx.mozMeasureText(text);
                return { width: width };
            };
        }
        // * Setup html5MeasureText
        if (ctx.measureText && !ctx.html5MeasureText) {
            ctx.html5MeasureText = ctx.measureText;
            ctx.measureText = function(text) {
                var textMetrics = ctx.html5MeasureText(text);
                // fake it 'til you make it
                textMetrics.ascent = ctx.html5MeasureText("m").width;
                return textMetrics;
            };
        }
        // * for other browsers, no-op away
        if (!ctx.fillText) {
            ctx.fillText = function() {};
        }
        if (!ctx.measureText) {
            ctx.measureText = function() { return 10; };
        }
        return ctx;
    }
})();
</script>

运行示例，Canvas 对象所在区域显示出“Hello, World!”，这正是代码中 ctx.fillText(“Hello, World!”, 20, 20); 的作用。

fillText 以及相关属性

fillText 方法用来在 Canvas 中显示文字，它可以接受四个参数，其中最后一个是可选的：

void fillText(in DOMString text, in float x, in float y, [Optional] in float maxWidth);

其中 maxWidth 表示显示文字时最大的宽度，可以防止文字溢出，不过我在测试中发现在 Firefox 与 Chomre 中指定了 maxWidth 时也没有任何效果。

在使用 fillText 方法之前，可以通过设置 Context 的 font 属性来调整显示文字的字体，在上面的示例中我使用了“20pt Arial”来作为显示文字的字体，你可以自己设置不同的值来看具体的效果。

结束

暂时就到这里了，我会一边看规范一边写这个系列：）

参考资料

1. HTML5的Canvas，脚本语言的新舞台, hred
2. The Canvas Element, WHATWG
3. Canvas Tutorial 中文, Mozilla
4. Canvas Tutorial 英文, Mozilla
5. Canvas support in Opera, Opera

Read more »]]>

Mozilla Labs 在今年情人节那天发布了一个叫 Bespin 的编辑器，这是一个基于网络的可扩展文本编辑器，按照现在流行的说法，就是“云编辑”了。并且，这个编辑器是开源的。

Bespin 是基于 Canvas 的，因此目前它只支持少数浏览器，其中包括 Firefox 3+、Safari 4 以及 Chrome 2 开发版，因此，如果要使用 Bespin 的话，你必须使用这几款浏览器中的一种。

要体验 Bespin，可以直接在 bespin.mozilla.com 注册一个帐号并且登录，不过目前 bespin.mozilla.com 所用的代码并不是最新版本的，线上使用的代码有许多不完善之处。因此，除了使用 Mozilla Labs 官方的 Bespin 站点，我们也可以从 Mozilla Labs 下载 Bespin 源代码，并在本地搭建 Bespin 服务，从而可以体验 Mozilla Labs 最新的开发成果。

注意，这篇文章并不介绍怎么去使用 Bespin，而是介绍怎么样去配置一个可以在本地运行的 Bespin 服务器，因此，如果你需要了解怎么去使用这个编辑器，可以参阅 Mozilla Labs 上的文档，或者等我再写一篇使用 Bespin 的文章：）

准备工作

首先需要说明的是，这里介绍的配置 Bespin 本地服务器的环境是 Windows Vista(or WinXP) + Python。另外，如果是在 Vista 中安装 Bespin Server，你使用管理员权限来运行 cmd。

第 1 步：在这里把 Bespin 的源代码下载下来，然后解压到任意目录，我这里解压到的是“D:\Source\Bespin\bespin-8b89188c5066”。

第 2 步：这篇文章介绍的是 Python 版 Bespin 服务器的配置，因此还需要安装 Python 解释器，可以在这里下载到 Python 2.5.4，使用默认设置安装即可。

第 3 步：在 bespin 源代码目录中新建一个目录 Scripts，这个目录与 backend 和 frontend 两个目录是平级的。然后到 Python 的安装目录下，将安装目录下的 msvcr71.dll、python.exe、python25.dll、pythonw.exe 四个文件拷贝到前面建立的 Script 目录中。

第 4 步：将 Python 安装目录中的 libs 目录拷贝到 bespin 源代码目录中。

第 5 步：Bespin Python 服务器所用的有些组件是使用 C 写的，在 Windows 上要编译与 Python 兼容的 C 扩展，需要使用 MinGW，下载以下这些压缩包，解压到 D:\Tools\MinGW，这里解压的位置可以自己选，但是后面要用到，所以请记住你解压的路径：

http://nchc.dl.sourceforge.net/sourceforge/mingw/binutils-2.19.1-mingw32-bin.tar.gz http://nchc.dl.sourceforge.net/sourceforge/mingw/gcc-g++-3.4.5-20060117-3.tar.gz http://nchc.dl.sourceforge.net/sourceforge/mingw/gcc-core-3.4.5-20060117-3.tar.gz http://nchc.dl.sourceforge.net/sourceforge/mingw/w32api-3.13-mingw32-dev.tar.gz http://nchc.dl.sourceforge.net/sourceforge/mingw/mingwrt-3.15.2-mingw32-dev.tar.gz

开始安装

第 1 步：打开 cmd，进入 bespin 源代码目录，运行：

bootstrap.py –no-site-packages

这个命令会下载必须的模块源代码，并且进行安装。在运行到最后时会报一个错：

IOError: [Errno 2] No such file or directory: ‘/d:\\source\\bespin\\bespin-8b89188c5066\\ext\\paste-1.7.3dev-r7791.tar.gz’

这时需要用文本编辑器打开 Bespin 源代码目录中的“Lib\site-packages\pip-0.3.1-py25.egg\pip.py”，注意，这里所用的文本编辑器必须支持 UNIX 换行模式，也就意味着不要使用 Windows 记事本来编辑 pip.py，而是使用诸如 EditPlus、UltraEdit 等编辑器来编辑。

打开 pip.py 后使用搜索功能定位到 unpack_file 方法，搜索“def unpack_file”即可。找到这个方法后，在方法定义的下一行添加下面这样一句代码：

filename = filename.lstrip('/')

第 2 步：再在 pip.py 搜索“Running setup.py install for %s”定位到模块安装代码：

   try:
            call_subprocess(
                [sys.executable, '-c',
                 "import setuptools; __file__=%r; execfile(%r)" % (self.setup_py, self.setup_py),
                 'install', '--single-version-externally-managed', '--record', record_filename,
                 '--install-headers', header_dir] + install_options,
                cwd=self.source_dir, filter_stdout=self._filter_install, show_stdout=False)
        finally:
            logger.indent -= 2

在 try 的后面添加下面 CODE TO ADD START 与 CODE TO ADD END 之间的代码，用来设置默认编译器为 mingw32：

     try:
        ## CODE TO ADD START ##
        call_subprocess(
            [sys.executable, '-c',
             "import setuptools; __file__=%r; execfile(%r)" % (self.setup_py, self.setup_py),
             'setopt', '--command=build', '--option=compiler', '--set-value=mingw32'],
            cwd=self.source_dir, filter_stdout=self._filter_install, show_stdout=False)
        ## CODE TO ADD END ##
            call_subprocess(
                [sys.executable, '-c',
                 "import setuptools; __file__=%r; execfile(%r)" % (self.setup_py, self.setup_py),
                 'install', '--single-version-externally-managed', '--record', record_filename,
                 '--install-headers', header_dir] + install_options,
                cwd=self.source_dir, filter_stdout=self._filter_install, show_stdout=False)
        finally:
            logger.indent -= 2

在修改的时候注意缩进，因为 Python 就靠缩进来判断代码结构了。修改完成后保存 pip.py。

第 3 步：回到 cmd 中，先设置一下环境变量，将 MniGW 的路径添加到 PATH 环境变量中，注意，这里的路径要与你解压 MinGW 时的路径一致：

set path=D:\Tools\MinGW\bin;%PATH%

然后再次运行：

bootstrap.py –no-site-packages

这次就可以正确安装了，最后会提示安装完成：

Installed d:\source\bespin\bespin-8b89188c5066\backend\python Processing dependencies for BespinServer==tip Finished processing dependencies for BespinServer==tip

第 4 步：在 cmd 中运行 Scripts\activate.bat，这个命令会设置当前的环境变量。

第 5 步：在 cmd 中运行

paver dojo create_db

这个命令会安装 dojo 库，然后运行：

paver start

cmd 中会提示：

—> pavement.start serving on http://127.0.0.1:8080

恭喜，Bespin Server 已经成功启动！

体验 Bespin

打开浏览器，在地址栏中输入 http://localhost:8080/ 马上开始体验 Bespin：）

by Xu Jiwei

Read more »]]>

YUI学习笔记（4）

by xujiwei (http://www.xujiwei.com/)

YAHOO.util.Subscriber 与 YAHOO.util.CustomEvent。

1. YAHOO.util.Subscriber (event.js)

这 应该算是设计模式中的观察者模式了，Subscriber 订阅一个事件，在 Publisher 触发那个事件后，会逐个通知 Subscriber。

对 于一般开发者来说，并不需要去关心 Subscriber 的实现，因为 Subscriber 主要是 CustomEvent 用来分发动作以及删 除 Subscriber 的。

Subscriber 类只定义了 3 个属性：fn、obj 以及 override，3 个方 法：getScope、contains、toString，其中 fn 为订阅者的回调函数，obj 为要传递给回调函数的一个额外参 数，override 如果是布尔型的 true 值，那么表示使用 obj 属性为回调函数执行时的上下文，或者直接使用一个对象来作为回调函数执行的 上下文。

Subscriber 的 3 个方法中比较有用的是 getScope 和 contains，toString 只是简单的 将 Subscriber 对象转换成一个字符串。getScope 会根据 Subscriber 对象的 override 属性来获取回调函数执行 的上下文，contains 用来判断 Subscriber 对象与指定的回调函数和 obj 是否一致。

2. YAHOO.util.CustomEvent (event.js)

CustomEvent 的 作用相当在观察者模式中发布者的身份，可以通过它来实现一个自己的事件发布者。

CustomEvent 构造函数的定义如下：

CustomEvent = function(type, oScope, silent, signature)

在 创建 CustomEvent 对象时，几个参数的用途如下：

type 是自定义事件的名称，在使用回调函数的参数格式 为 YAHOO.util.Event.LIST 时，回调函数的第一个参数就是 CustomEvent 对象的名称；

oScope 是 执行回调函数时的上下文对象，也就是在回调函数中可以用 this 来引用这个对象；

silent 参数是用指示是否 在 YUI 为 debug 版本时禁用调试信息；

signature 用来指示回调函数参数的格式，可以为 YAHOO.util.Event.FLAT 或 YAHOO.util.Event.LIST， 默认是 YAHOO.util.Event.LIST。

在使用 CustomEvent 之前，先要了解一下 CustomEvent 中 回调函数参数的格式，CustomEvent 的回调函数可以有两种格式，一种为 YAHOO.util.Event.LIST，这种格式的回调函数具有 三个参数，分别是事件名称、参数数组和附加对象参数；另外一种回调函数参数格式为 YAHOO.util.Event.FLAT，这个时候回调函数只有两 个参数，一个为 CustomEvent 对象调用 fire 方法时的第一个参数，另外一个是订阅时的额外对象参数。

在创 建 CustomEvent 对象时，CustomEvent 构造函数还会首先创建一个内部的自定义事件，用来处理该自定义事件被订阅的事件，这 在 EventProvider 中用到，这里暂且不提。

CustomEvent 对象使用一个名为 subscribers 的数组来保 存所有订阅者的列表，并且通过维护这个列表来维护该自定义事件的订阅者。

CustomEvent 对象提供了 subscribe、 unsubscribe、unsubscribeAll、fire 这几个方法来处理自定义事件的订阅、退订以及触发等动作，而这几个就是观察者模式中的 主要动作了。

subscribe 的签名为 subscribe: function(fn, obj, override)， 三个参数分别对应了 Subscriber 类构造函数的三个参数，分别对应了回调函数、额外对象参数以及是否使用额外对象参数作为执行上下文。 subscribe 只是简单的判断参数 fn 是否有定义，然后会触发自定义事件订阅事件，最后使用这三个参数创建一个 Subscriber 对象添 加到 CustomEvent 对象的 subscribers 属性中。

unsubscribe 方法用来取消事件的订阅，它的函数签名 为 unsubscribe: function(fn, obj)，两个参数分别是回调函数和额外对象参数，如果使用无参数调 用 unsubscribe 方法，那么会直接调用 unsubscribeAll 来删除所有订阅者，否则会逐一判断 subscribers 中的每 个对象，通过使用 Subscriber 对象的 contains 方法来判断给定的 fn 和 obj 与其是否一致，如果一致，就使用一个私有方 法 _delete 来删除这个 Subscriber。

unsubscribeAll 方法没有参数，它只是简单的直接删除自定义事件的 所有订阅者，最后直接给 subscribers 赋值一个空数组来避免有可能出现漏删订阅者的情况。

内部方法 _delete 的参数 是 Subscriber 对象在 subscribers 数组中的索引，它会先删除 Subscriber 对象的 fn 和 obj 属性，最后使 用 splice 方法将 Subscriber 对象从数组中删除。

var s = this.subscribers[index]; if (s) { delete s.fn; delete s.obj; } this.subscribers.splice(index, 1);

使用 delete 删除 Subscriber 对象的 fn 和 obj 属性是为了去除 回调函数及额外对象参数的引用，以免引起不必要的内 存泄露。

CustomEvent 对象最重要的方法就是 fire 了，就是通过这个方法来通知所有了订阅者这个自定义事件被触发了。 fire 方法先使用 Array 的 slice 方法将调用 fire 方法时的参数转化成数组，这样就可以在调用 Subscriber 的回调函 数时可以传递参数给它们。

在遍历 subscribers 中的 Subscriber 前，fire 方法先使用 了 subscribers 的 slice 方法来创建一个 subscribers 的副本，这样避免在执行 fire 的过程中 有 Subscirber 取消订阅了这个自定义事件会导致错误。

在执行 Subscriber 的回调函数前，先使 用 Subscriber 对象的 getScope 方法来获取执行回调函数时的上下文对象，再根据 CustomEvent 对象 的 signature 属性来决定怎么去调用 Subscriber 的回调函数。

如 果 signature 为 YAHOO.util.CustomEvent.FLAT，那么就把调用 fire 方法时的第一个参数做为回调函数的第一 个参数，再把 Subscriber 对象的 obj 属性做为第二个参数：

s.fn.call(scope, param, s.obj)

如 果 signature 为 YAHOO.util.CustomEvent.LIST，那么就除了把整个 fire 方法的参数列表传递给回调函数外， 还要传递当前 CustomEvent 的名称给回调函数：

s.fn.call(scope, this.type, args, s.obj)

Subscriber 的 回调函数如果在执行过程中出现了错误，那么 CustomEvent 的 lastError 属性就是指向错误对象的引用，另外，如 果 YAOO.util.Event.throwErrors 为 true，那么会把这个错误再次抛出。

另外，Subscriber 对 象也可以控制事件通知是否继续，如果 Subscriber 对象的回调函数执行后的返回一个 false，那么在 fire 方法中就会停止通知剩下 的 Subscriber 对象，通常情况下，先订阅自定义事件的 Subscriber 可以阻止后订阅的 Subscriber 接收到通知。

使 用 YUI 的自定义事件（CustomEvent）可以很方便地实现观察者模式，更好地组织 JavaScript 程序的结构。