1、认识一下Canvas
2、在Canvas上绘图
3、通过Canvas元素实现高级图像操作
4、写一个游戏框架（一）
5、写一个游戏框架（二）
6、通过Canvas实现视差滚动
7、动画
8、JavaScript键盘输入
9、综合运用
10、定义级别
11、跳跃与坠落
12、添加道具
13、加载资源
14、添加主菜单

在Canvas元素上实现视差滚动

http://www.brighthub.com/internet/web-development/articles/40511.aspx

视差滚动是在2D应用中创造立体纵深感的一种技术。这篇文章就来看一看在我们刚刚创建的游戏框架基础上实现视差滚动有多容易。

视差滚动

有了游戏框架，就可以通过画布元素来做一些好玩的东西了。

视差滚动指的是屏幕上的几个图层发生相对位移的效果，换句话说，背景图层滚动得比它前面的那些图层要慢一些。这种创造视觉纵深感的技术在2D游戏中的应用极为普遍。

RepeatingGameObject.js

/**
    这个类可以重复显示纹理图像，支持纹理图像在x轴或y轴偏移
    @class
*/
function RepeatingGameObject()
{
    /** 最终图像占据的宽度
 	@type Number
    */
    this.width = 0;
    /** 最终图像占据的高度
    	@type Number
    */
    this.height = 0;
    /** 绘制时应用多少scrollX和scrollY
	@type Number
    */
    this.scrollFactor = 1;

    /**
        初始化对象
        @return 对初始化对象的引用
    */
    this.startupRepeatingGameObject = function(image, x, y, z, width, height, scrollFactor)
    {
        this.startupVisualGameObject(image, x, y, z);
        this.width = width;
        this.height = height;
        this.scrollFactor = scrollFactor;
        return this;
    }

    /**
        清理对象
    */
    this.shutdownstartupRepeatingGameObject = function()
    {
        this.shutdownVisualGameObject();
    }

	/**
        把当前元素绘制到后台缓冲
        @param dt 自上一帧绘制起经过的秒数
		@param context 绘制上下文
		@param xScroll x轴的全局滚动值
		@param yScroll y轴的全局滚动值

    */
    this.draw = function(dt, canvas, xScroll, yScroll)
    {
        var areaDrawn = [0, 0];

        for (var y = 0; y < this.height; y += areaDrawn[1])
        {
            for (var x = 0; x < this.width; x += areaDrawn[0])
            {
                // 绘制下一张贴片左上角的点
		var newPosition = [this.x + x, this.y + y];
		// 剩余的绘制空间
                var newFillArea = [this.width - x, this.height - y];
		// 第一次必须从图像的中央开始绘制
		// 后续贴片从上方或左侧绘制
                var newScrollPosition = [0, 0];
                if (x==0) newScrollPosition[0] = xScroll * this.scrollFactor;
                if (y==0) newScrollPosition[1] = yScroll * this.scrollFactor;
                areaDrawn = this.drawRepeat(canvas, newPosition, newFillArea, newScrollPosition);
            }
        }
    }

    this.drawRepeat = function(canvas, newPosition, newFillArea, newScrollPosition)
    {
        // 找到重复绘制纹理图像的起点（左上角）
        var xOffset = Math.abs(newScrollPosition[0]) % this.image.width;
        var yOffset = Math.abs(newScrollPosition[1]) % this.image.height;
        var left = newScrollPosition[0]<0?this.image.width-xOffset:xOffset;
        var top = newScrollPosition[1]<0?this.image.height-yOffset:yOffset;
        var width = newFillArea[0] < this.image.width-left?newFillArea[0]:this.image.width-left;
        var height = newFillArea[1] < this.image.height-top?newFillArea[1]:this.image.height-top;

        // 绘制图像
        canvas.drawImage(this.image, left, top, width, height, newPosition[0], newPosition[1], width, height);

        return [width, height];
    }
}
RepeatingGameObject.prototype = new VisualGameObject();

这个RepeatingGameObject类可以让图像在一个确定的区域内重复和滚动。此前，我们已经实现了绘制整幅图像。而RepeatingGameObject的不同之处在于，它拿到一幅图像并用它来填充一块范围既定的区域（其尺寸与绘制的图像无关）。我们通过这个类每次显示一幅大图像（如一座山的全景图）的一小部分，从而创建出一个背景。

也许你已经注意到了GameObjectManager的xScroll和yScroll属性，它们被传递给了GameObject的draw和updata函数。这两个值定义的是摄像机沿x轴或y轴移动了多远。RepeatingGameObject使用这两个值来它们显示的纹理，以创造移动的假象。

首先，定义RepeatingGameObject要绘制的区域。底层的GameObject类的x和y属性定义了左上角位置，而新的width和height属性定义的是绘制区域。

    /** 最终图像占据的宽度
 	@type Number
    */
    this.width = 0;
    /** 最终图像占据的高度
    	@type Number
    */
    this.height = 0;
    /** 绘制时应用多少scrollX和scrollY
	@type Number
    */

而scrollFactor属性用于改变RepeatingGameObject滚动的量，该变化是通过传递到draw函数的xScroll和yScroll来控制的。将scrollFactor设置为小于1的值，会导致滚动变慢，从而造就画面中的远景。

    /** 绘制时应用多少scrollX和scrollY
	@type Number
    */
    this.scrollFactor = 1;

最后两个draw和drawRepeat函数具体负责渲染贴片及偏移的纹理。

	/**
        把当前元素绘制到后台缓冲
        @param dt 自上一帧绘制起经过的秒数
		@param context 绘制上下文
		@param xScroll x轴的全局滚动值
		@param yScroll y轴的全局滚动值

    */
    this.draw = function(dt, canvas, xScroll, yScroll)
    {
        var areaDrawn = [0, 0];

        for (var y = 0; y < this.height; y += areaDrawn[1])
        {
            for (var x = 0; x < this.width; x += areaDrawn[0])
            {
                // 绘制下一张贴片左上角的点
		var newPosition = [this.x + x, this.y + y];
		// 剩余的绘制空间
                var newFillArea = [this.width - x, this.height - y];
		// 第一次必须从图像的中央开始绘制
		// 后续贴片从上方或左侧绘制
                var newScrollPosition = [0, 0];
                if (x==0) newScrollPosition[0] = xScroll * this.scrollFactor;
                if (y==0) newScrollPosition[1] = yScroll * this.scrollFactor;
                areaDrawn = this.drawRepeat(canvas, newPosition, newFillArea, newScrollPosition);
            }
        }
    }

    this.drawRepeat = function(canvas, newPosition, newFillArea, newScrollPosition)
    {
        // 找到重复绘制纹理图像的起点（左上角）
        var xOffset = Math.abs(newScrollPosition[0]) % this.image.width;
        var yOffset = Math.abs(newScrollPosition[1]) % this.image.height;
        var left = newScrollPosition[0]<0?this.image.width-xOffset:xOffset;
        var top = newScrollPosition[1]<0?this.image.height-yOffset:yOffset;
        var width = newFillArea[0] < this.image.width-left?newFillArea[0]:this.image.width-left;
        var height = newFillArea[1] < this.image.height-top?newFillArea[1]:this.image.height-top;

        // 绘制图像
        canvas.drawImage(this.image, left, top, width, height, newPosition[0], newPosition[1], width, height);

        return [width, height];
    }   

ApplicationManager.js

/**
    ApplicationManager用于管理应用
    @class
*/
function ApplicationManager()
{
    /**
        初始化对象
        @return A 对初始化对象的引用
    */
    this.startupApplicationManager = function()
    {
        this.startupGameObject();
	this.background3 = new RepeatingGameObject().startupRepeatingGameObject(g_back2, 0, 100, 3, 600, 320, 1);
        this.background2 = new RepeatingGameObject().startupRepeatingGameObject(g_back1, 0, 100, 2, 600, 320, 0.75);
        this.background = new RepeatingGameObject().startupRepeatingGameObject(g_back0, 0, 0, 1, 600, 320, 0.5);
        return this;
    }

	/**
        更新当前对象
        @param dt 自上一帧绘制起经过的秒数
        @param context 绘制上下文
        @param xScroll x轴的全局滚动值
        @param yScroll y轴的全局滚动值
    */
    this.update = function(/**Number*/ dt, /**CanvasRenderingContext2D*/ context, /**Number*/ xScroll, /**Number*/ yScroll)
    {
		g_GameObjectManager.xScroll += 50 * dt;
	}
}
ApplicationManager.prototype = new GameObject

在这里，我们通过ApplicationManager创建了三个RepeatingGameObject类的实例，每个实例分别显示为一个图层，使用z（深度）和scrollFactor值来创造RepeatingGameObject 渐远和渐慢的效果。

最终结果很不错。视差滚动为画布赋予了完美的纵深感，而整个效果只多编写了一个类就实现了。

看一看视差滚动的Demo吧。http://webdemos.sourceforge.net/jsplatformer4/jsplatformer4.html

1、认识一下Canvas
2、在Canvas上绘图
3、通过Canvas元素实现高级图像操作
4、写一个游戏框架（一）
5、写一个游戏框架（二）
6、通过Canvas实现视差滚动
7、动画
8、JavaScript键盘输入
9、综合运用
10、定义级别
11、跳跃与坠落
12、添加道具
13、加载资源
14、添加主菜单

4、写一个游戏框架（二）

在这篇文章里，我们继续介绍构成这个基本JavaScript游戏框架的其他必要的类。

前一篇文章介绍了GameObjectManager类，该类负责画布的渲染并允许GameObject类更新和删除它们自己。下面就来看一看GameObject类。

GameObject.js

/**
    游戏中出现的所有元素的基类
    @class
*/
function GameObject()
{
    /** 显示的深度次序。较小的zOrder值表示先渲染，因而会在背景中。
        @type Number
    */
    this.zOrder = 0;
    /**
        x轴的坐标
        @type Number
    */
    this.x = 0;
    /**
        y轴的坐标
        @type Number
    */
    this.y = 0;

    /**
        初始化游戏对象，并将其添加到GameObjectManager维护的对象列表中
        @param x        x轴的坐标
        @param y        y轴的坐标
        @param z        元素的z次序（背景元素的z值较小）
    */
    this.startupGameObject = function(/**Number*/ x, /**Number*/ y, /**Number*/ z)
    {
        this.zOrder = z;
        this.x = x;
        this.y = y;
        g_GameObjectManager.addGameObject(this);
        return this;
    }

    /**
        清理当前对象，将其从GameObjectManager维护的对象列表中删除
    */
    this.shutdownGameObject = function()
    {
        g_GameObjectManager.removeGameObject(this);
    }
}

这个GameObject类（是一个引擎类）的目的，是为游戏中将会出现的所有对象定义一些共有的属性，包括它们的位置（x和y）和深度（z）。需要注意的是，我们不会直接创建GameObject类的实例，而是会再创建一个类来扩展它。

这个类的x和y坐标值没有什么好说的——就是相应对象左上角位置在画布上的坐标。关键是GameObject中的z值，这个值定义的是对象的深度。理解这个值很重要，这个值较小的GameObject会先绘制到画布上。换句话说，z值较大的GameObject将被绘制到z值较小的GameObject上面。

上一篇文章里介绍过，所有类都是通过一个类似startupClassName的函数完成自身初始化的。因此，GameObject类就有一个名为startupGameObject的函数。在这个函数里，除了初始化所有变量外，还会通过addGameObject函数把当前的GameObject添加到由GameObjectManager维护的GameObject列表中。

    /**
        初始化游戏对象，并将其添加到GameObjectManager维护的对象列表中
        @param x        x轴的坐标
        @param y        y轴的坐标
        @param z        元素的z次序（背景元素的z值较小）
    */
    this.startupGameObject = function(/**Number*/ x, /**Number*/ y, /**Number*/ z)
    {
        this.zOrder = z;
        this.x = x;
        this.y = y;
        g_GameObjectManager.addGameObject(this);
        return this;
    }

函数shutdownGameObject用于清除GameObject。这里所谓的清除，是指GameObject通过removeGameObject函数将自身从GameObjectManager中删除。

    /**
        清理当前对象，将其从GameObjectManager维护的对象列表中删除
    */
    this.shutdownGameObject = function()
    {
        g_GameObjectManager.removeGameObject(this);
    }

VisualGameObject.js

/**
    出现在游戏中的所有元素的基类
    @class
*/
function VisualGameObject()
{
    /**
        由当前对象显示的图像
        @type Image
    */
    this.image = null;

    /**
        将当前元素绘制到后台缓冲
        @param dt 自上一帧绘制起经过的秒数
    */
    this.draw = function(/**Number*/ dt, /**CanvasRenderingContext2D*/ context, /**Number*/ xScroll, /**Number*/ yScroll)
    {
        context.drawImage(this.image, this.x - xScroll, this.y - yScroll);
    }

    /**
        初始化当前对象
        @param image 要显示的图像
    */
    this.startupVisualGameObject = function(/**Image*/ image, /**Number*/ x, /**Number*/ y, /**Number*/ z)
    {
        this.startupGameObject(x, y, z);
        this.image = image;
        return this;
    }

    /**
        清理当前对象
    */
    this.shutdownVisualGameObject = function()
    {
        this.shutdownGameObject();
    }
}
VisualGameObject.prototype = new GameObject;

VisualGameObject也是一个引擎类，它扩展了GameObject类，为将在屏幕上绘制的对象定义了更具体的属性和函数。顾名思义，可见对象显然是需要绘制的对象，因此VisualGameObject定义了一个image属性，当把当前对象绘制到后台缓冲时，将以这个属性作为图形的来源。

    /**
        由当前对象显示的图像
        @type Image
    */
    this.image = null;

此外，还需要写几行代码，以便把这个对象实际地绘制到后台缓冲——这就是draw函数了，它接受图像并基于GameObject类中定义的x和y值将其复制到后台缓冲。

    /**
        将当前元素绘制到后台缓冲
        @param dt 自上一帧绘制起经过的秒数
    */
    this.draw = function(/**Number*/ dt, /**CanvasRenderingContext2D*/ context, /**Number*/ xScroll, /**Number*/ yScroll)
    {
        context.drawImage(this.image, this.x - xScroll, this.y - yScroll);
    }

ApplicationManager.js

/**
    ApplicationManager用于管理应用
    @class
*/
function ApplicationManager()
{
    /**
        初始化对象
        @return 对初始化对象的引用
    */
    this.startupApplicationManager = function()
    {
        this.bounce = new Bounce().startupBounce(g_image);
        return this;
    }
}

ApplicationManager是第一个应用类，之所以将其归为应用类，是因为它用来定义应用的运行方式，而不是定义与浏览器的底层交互。这个类非常简单，只用来创建并初始化Bounce类的一个新实例。表面上看，创建一个类仅仅是为了创建一个对象有点多此一举。但在更复杂的应用中，把创建和管理游戏对象的逻辑放到一起是很有必要的。

Bounce.js

/**
    测试类，用于演示VisualGameObject类的用法
    @class
*/
function Bounce()
{
	/** x轴的运动方向
        @type Number
    */
	this.xDirection = 1;
	/** y轴的运动方向
        @type Number
    */
	this.yDirection = 1;
	/** 运动速度
        @type Number
    */
	this.speed = 10;

	/**
        初始化对象
        @return 对初始化对象的引用
    */
	this.startupBounce = function(image)
	{
		this.startupVisualGameObject(image, 0, 0, 0);
		return this;
	}

	/**
       更新对象
        @param dt 自上一帧绘制起经过的秒数
        @param context 绘制上下文
        @param xScroll x轴的全局滚动值
        @param yScroll y轴的全局滚动值
    */
	this.update = function (/**Number*/ dt, /**CanvasRenderingContext2D*/context, /**Number*/ xScroll, /**Number*/ yScroll)
	{
		this.x += dt * this.speed * this.xDirection;
		this.y += dt * this.speed * this.yDirection;

		if (this.x >= 450)
		{
			this.x = 450;
			this.xDirection = -1;
		}
		else if (this.x <= 0)
		{
			this.x = 0;
			this.xDirection = 1;
		}

		if (this.y >= 250)
		{
			this.y = 250;
			this.yDirection = -1;
		}
		else if (this.y <= 0)
		{
			this.y = 0;
			this.yDirection = 1;
		}
	}
}
Bounce.prototype = new VisualGameObject;

Bounce是第二个应用类，它扩展了VisualGameObject类，并将把自己绘制到屏幕上。Bounce类会显示一幅在屏幕上反弹的图像，效果非常类似第一篇文章中举的例子。这个类是在前面所有类的基础上实现最终动画的关键。

startupBounce函数接受一幅图像，通过调用startupVisualGameObject来初始化这个基本的类。

	/**
        初始化对象
        @return 对初始化对象的引用
    */
	this.startupBounce = function(image)
	{
		this.startupVisualGameObject(image, 0, 0, 0);
		return this;
	}

而update函数（将被GameObjectManager在渲染期间调用）会更新图像的位置，在图像到达画布边缘时反转方向。

	/**
       更新对象
        @param dt 自上一帧绘制起经过的秒数
        @param context 绘制上下文
        @param xScroll x轴的全局滚动值
        @param yScroll y轴的全局滚动值
    */
	this.update = function (/**Number*/ dt, /**CanvasRenderingContext2D*/context, /**Number*/ xScroll, /**Number*/ yScroll)
	{
		this.x += dt * this.speed * this.xDirection;
		this.y += dt * this.speed * this.yDirection;

		if (this.x >= 450)
		{
			this.x = 450;
			this.xDirection = -1;
		}
		else if (this.x <= 0)
		{
			this.x = 0;
			this.xDirection = 1;
		}

		if (this.y >= 250)
		{
			this.y = 250;
			this.yDirection = -1;
		}
		else if (this.y <= 0)
		{
			this.y = 0;
			this.yDirection = 1;
		}
	}
}

就这些了。你可能会想，怎么没有与绘制这个对象有关的代码呢？相应的代码都在VisualGameObject类的draw函数中了。而且，由于VisualGameObject类扩展了GameObject类，所以我们知道每渲染一帧都会调用一次update和draw函数。Bounce类中的所有代码只跟让图像反弹有关，也就是修改变量x和y。

好啦，我们已经创建了一批类，基于这些类也实现了与第一个示例相同的效果。而有了这个框架，再创建游戏就不必因为绘制画布等底层逻辑以及管理游戏对象等问题而重复编码了。

看看示例Demo吧。http://webdemos.sourceforge.net/jsplatformer3/jsplatformer3.html

为之漫笔 最后编辑于：
2011/08/15 @ 22:25

1、认识一下Canvas
2、在Canvas上绘图
3、通过Canvas元素实现高级图像操作
4、写一个游戏框架（一）
5、写一个游戏框架（二）
6、通过Canvas实现视差滚动
7、动画
8、JavaScript键盘输入
9、综合运用
10、定义级别
11、跳跃与坠落
12、添加道具
13、加载资源
14、添加主菜单

4、写一个游戏框架（一）

http://www.brighthub.com/internet/web-development/articles/40512.aspx
在知道了如何使用画布元素之后，接下来我教大家写一个框架，有了这个框架，我们就可以把它作为基础来创建游戏。在这第一部分，我们会介绍前两个文件/类。

编写代码之前，我们先来看一看随后几篇文章将致力于创建的示例Demo。表面上看起来，这个Demo跟第二篇文章里的那个没啥区别，但如果你看看后台（查看网页源代码）就会发现，为了更方便地创建这个最终效果，一个凝聚不少心血的基础框架已经写好了。

下面我们要介绍的JavaScript代码使用面向对象的方式来编写。对于没有编写过多少JavaScript代码的人来说，恐怕第一眼看到它们会觉得有点奇怪。如果你真的不太熟悉JavaScript的面向对象编程，建议通过Mozilla Developer Network的这个教程https://developer.mozilla.org/en/Introduction_to_Object-Oriented_JavaScript来补补课。这篇教程里解释了我们稍后会用到的一些编程技术。

从设计思想上来看，这个框架可以分成两部分：与底层的2D引擎交互的类（用于操作画布、控制渲染循环、处理输入等的代码）和用来创建对象以便构成游戏的类。前者可以归为引擎类，后者可以归为应用类。由于应用类要构建于引擎类之上，所以我们需要先来创建引擎类。

Main.js

如果你研究了前面例子中的代码，就会发现Main.js文件中包含了不少代码。

/** 每秒多少帧
    @type Number
*/
var FPS = 30;
/** 两帧间间隔的秒数
    @type Number
*/
var SECONDS_BETWEEN_FRAMES = 1 / FPS;
/** GameObjectManager 实例的全局引用
    @type GameObjectManager
*/
var g_GameObjectManager = null;
/** 应用中用到的图像
    @type Image
*/
var g_image = new Image();
g_image.src = "jsplatformer3-smiley.jpg";

// 将应用的入口设置为init函数
window.onload = init;

/**
    应用的入口
*/
function init()
{
    new GameObjectManager().startupGameObjectManager();
}

首先是定义全局变量的代码。然后，跟以前一样，当页面加载完毕后立即运行init函数。在init函数里，创建GameObjectManager类的实例。

这里在GameObjectManager类的实例上调用了startupGameObjectManager函数。这篇文章以及后面的几篇文章还将多次提到几个命名上具有startupClassName形式的函数。这些函数实际上充当了各自类的构造函数，这样做有两个原因。

首先，JavaScript不支持函数重载（至少不容易实现）。如果你想让一个类有多个构造函数，那么这就成了问题。而通过把构造工作分配给另一组函数（如startupClassName1、startupClassName2），就可以比较容易地定义构造类的不同方式了。

第二个原因（很大程度上也是个人的问题）是我经常会在构造函数中引用尚未定义的变量。这可能是我使用C++、Java和C#这些语言落下的毛病，在这些语言里，类变量在源代码中的位置对其在构造函数中的可见性没有影响。拿下面这个C#类为例：

class Test
{
	public void Test() {this.a = 5;}
	public int a;
}

这些代码是合乎语法的，可以正常工作。下面再看看JavaScript中一个相同的例子：

function Test()
{
	this.a = 5;
	var a;
}

这段代码的问题在于，局部变量a在我们把数值5赋给它的时候还不存在。只有运行到var a;这一行，变量a才存在。尽管这个例子有点故意编排的意味，但的确能够说明我所遇到的问题。通过把类的创建放到一个类似startupClassName这样的函数中完成，并且在构造函数中定义（但不初始化）局部变量，然后当我在这些构建函数中引用相应的局部变量时，就能够确保它们一定是存在的。

GameObjectManager.js

/**
    管理游戏中所有对象的管理器
    @class
*/
function GameObjectManager()
{
    /** 保存游戏中对象的数组
        @type Arary
    */
    this.gameObjects = new Array();
    /** 上一次帧被渲染的时间
        @type Date
    */
    this.lastFrame = new Date().getTime();
    /** x轴的全局滚动值
        @type Number
    */
    this.xScroll = 0;
    /** y轴的全局滚动值
        @type Number
    */
    this.yScroll = 0;
    /** 对ApplicationManager实例的引用
        @type ApplicationManager
    */
    this.applicationManager = null;
    /** 对画布元素的引用
        @type HTMLCanvasElement
    */
    this.canvas = null;
    /** 对画布元素2D上下文的引用
        @type CanvasRenderingContext2D
    */
    this.context2D = null;
    /** 对内存中用作后台缓冲区的画布的引用
        @type HTMLCanvasElement
    */
    this.backBuffer = null;
    /** 对后台缓冲画布的2D上下文的引用
        @type CanvasRenderingContext2D
    */
    this.backBufferContext2D = null;

    /**
        初始化这个对象
        @return A reference to the initialised object
    */
    this.startupGameObjectManager = function()
    {
        // 设置引用this对象的全局指针
        g_GameObjectManager = this;

        // 取得画布元素及其2D上下文的引用
        this.canvas = document.getElementById('canvas');
        this.context2D = this.canvas.getContext('2d');
        this.backBuffer = document.createElement('canvas');
        this.backBuffer.width = this.canvas.width;
        this.backBuffer.height = this.canvas.height;
        this.backBufferContext2D = this.backBuffer.getContext('2d');

        // 创建一个新的ApplicationManager
        this.applicationManager = new ApplicationManager().startupApplicationManager();

        // 使用setInterval来调用draw函数
        setInterval(function(){g_GameObjectManager.draw();}, SECONDS_BETWEEN_FRAMES);

        return this;
    }

    /**
        渲染循环
    */
    this.draw = function ()
    {
        // 计算从上一帧到现在的时间
        var thisFrame = new Date().getTime();
        var dt = (thisFrame - this.lastFrame)/1000;
        this.lastFrame = thisFrame;

        // 清理绘制上下文
        this.backBufferContext2D.clearRect(0, 0, this.backBuffer.width, this.backBuffer.height);
        this.context2D.clearRect(0, 0, this.canvas.width, this.canvas.height);

        // 首先更新所有游戏对象
        for (x in this.gameObjects)
        {
            if (this.gameObjects[x].update)
            {
                this.gameObjects[x].update(dt, this.backBufferContext2D, this.xScroll, this.yScroll);
            }
        }

        // 然后绘制所有游戏对象
        for (x in this.gameObjects)
        {
            if (this.gameObjects[x].draw)
            {
                this.gameObjects[x].draw(dt, this.backBufferContext2D, this.xScroll, this.yScroll);
            }
        }

        // 将后台缓冲复制到当前显示的画布
        this.context2D.drawImage(this.backBuffer, 0, 0);
    };

    /**
        向gameObjects集合中添加一个GameObject
        @param gameObject The object to add
    */
    this.addGameObject = function(gameObject)
    {
        this.gameObjects.push(gameObject);
        this.gameObjects.sort(function(a,b){return a.zOrder - b.zOrder;})
    };

    /**
        从gameObjects集合中删除一个GameObject
        @param gameObject The object to remove
    */
    this.removeGameObject = function(gameObject)
    {
        this.gameObjects.removeObject(gameObject);
    }
}

首先看一看GameObjectManager类。GameObjectManager是一个引擎类，用于管理画布的绘制操作，还负责分派GameObject类（下一篇文章里介绍）的事件。

GameObjectManager类的startupGameObjectManager函数的代码如下：

    /**
        初始化这个对象
        @return A reference to the initialised object
    */
    this.startupGameObjectManager = function()
    {
        // 设置引用this对象的全局指针
        g_GameObjectManager = this;

        // 取得画布元素及其2D上下文的引用
        this.canvas = document.getElementById('canvas');
        this.context2D = this.canvas.getContext('2d');
        this.backBuffer = document.createElement('canvas');
        this.backBuffer.width = this.canvas.width;
        this.backBuffer.height = this.canvas.height;
        this.backBufferContext2D = this.backBuffer.getContext('2d');

        // 创建一个新的ApplicationManager
        this.applicationManager = new ApplicationManager().startupApplicationManager();

        // 使用setInterval来调用draw函数
        setInterval(function(){g_GameObjectManager.draw();}, SECONDS_BETWEEN_FRAMES);

        return this;
    }

前面已经说过，我们会把每个类的初始化工作放在startupClassName函数中来做。因此，GameObjectManager类将由startupGameObjectManager函数进行初始化。

而引用这个GameObjectManager实例的全局变量g_GameObjectManager经过重新赋值，指向了这个新实例。

        // 设置引用this对象的全局指针
        g_GameObjectManager = this;

对画布元素及其绘图上下文的引用也同样保存起来：

        // 取得画布元素及其2D上下文的引用
        this.canvas = document.getElementById('canvas');
        this.context2D = this.canvas.getContext('2d');

在前面的例子中，所有绘图操作都是直接在画布元素上完成的。这种风格的渲染一般称为单缓冲渲染。在此，我们要使用一种叫做双缓冲渲染的技术：任意游戏对象的所有绘制操作，都将在一个内存中的附加画布元素（后台缓冲）上完成，完成后再通过一次操作把它复制到网页上的画布元素（前台缓冲）。

双缓冲技术（http://www.brighthub.com/internet/web-development/articles/11012.aspx）通常用于减少画面抖动。我自己在测试的时候从没发现直接向画布元素上绘制有抖动现象，但我在网上的确听别人念叨过，使用单缓冲渲染会导致某些浏览器在渲染时发生抖动。

不管怎么说，双缓冲还是能够避免最终用户看到每个游戏对象在绘制过程中最后一帧的组合过程。在通过JavaScript执行某些复杂绘制操作时（例如透明度、反锯齿及可编程纹理），这种情况是完全可能发生的。

使用附加缓冲技术占用的内存非常少，多执行一次图像复制操作（把后台缓冲绘制到前台缓冲）导致的性能损失也可以忽略不计，可以说实现双缓冲系统没有什么缺点。

如果将在HTML页面中定义的画布元素作为前台缓冲，那就需要再创建一个画布来充当后台缓冲。为此，我们使用了document.createElement函数在内存里创建了一个画布元素，把它用作后台缓冲。

        this.backBuffer = document.createElement('canvas');
        this.backBuffer.width = this.canvas.width;
        this.backBuffer.height = this.canvas.height;
        this.backBufferContext2D = this.backBuffer.getContext('2d');

接下来，我们创建了ApplicationManager类的一个新实例，并调用startupApplicationManager来初始化它。这个ApplicationManager类将在下一篇文章中介绍。

        // 创建一个新的ApplicationManager
        this.applicationManager = new ApplicationManager().startupApplicationManager();

最后，使用setInterval函数重复调用draw函数，这个函数是渲染循环的核心所在。

        // 使用setInterval来调用draw函数
        setInterval(function(){g_GameObjectManager.draw();}, SECONDS_BETWEEN_FRAMES);

下面来看一看draw函数。

    /**
        渲染循环
    */
    this.draw = function ()
    {
        // 计算从上一帧到现在的时间
        var thisFrame = new Date().getTime();
        var dt = (thisFrame - this.lastFrame)/1000;
        this.lastFrame = thisFrame;

        // 清理绘制上下文
        this.backBufferContext2D.clearRect(0, 0, this.backBuffer.width, this.backBuffer.height);
        this.context2D.clearRect(0, 0, this.canvas.width, this.canvas.height);

        // 首先更新所有游戏对象
        for (x in this.gameObjects)
        {
            if (this.gameObjects[x].update)
            {
                this.gameObjects[x].update(dt, this.backBufferContext2D, this.xScroll, this.yScroll);
            }
        }

        // 然后绘制所有游戏对象
        for (x in this.gameObjects)
        {
            if (this.gameObjects[x].draw)
            {
                this.gameObjects[x].draw(dt, this.backBufferContext2D, this.xScroll, this.yScroll);
            }
        }

        // 将后台缓冲复制到当前显示的画布
        this.context2D.drawImage(this.backBuffer, 0, 0);
    };

这个draw函数就是所有渲染循环的核心。在前面的例子中，渲染循环的函数会直接修改要绘制到屏幕上的对象（笑脸）。如果只需绘制一个对象，这样做没有问题。但是，一个游戏要由几十个单独的对象组成，所以这个draw函数并没有直接在渲染循环中直接处理要绘制的对象，而是维护了一个保存着这些对象的数组，让这些对象自己来更新和绘制自己。

首先，计算自上一帧渲染所经过的时间。即便我们在代码里写了每秒钟调用30次draw函数，但谁也无法保证事实如此。通过计算自上一帧渲染所经过的时间，可以做到尽可能让游戏的执行与帧速率无关。

        // 计算从上一帧到现在的时间
        var thisFrame = new Date().getTime();
        var dt = (thisFrame - this.lastFrame)/1000;
        this.lastFrame = thisFrame;

接着清理绘制上下文。

        // 清理绘制上下文
        this.backBufferContext2D.clearRect(0, 0, this.backBuffer.width, this.backBuffer.height);
        this.context2D.clearRect(0, 0, this.canvas.width, this.canvas.height);

然后，就是调用游戏对象（这些对象是由GameObject类定义的，下一篇文章将介绍该类）自己的更新（update）和绘制（draw）方法。注意，这两个方法是可选的（这也是我们在调用它们之前先检查它们是否存在的原因），但差不多每一个对象都需要更新和绘制自已。

        // 首先更新所有游戏对象
        for (x in this.gameObjects)
        {
            if (this.gameObjects[x].update)
            {
                this.gameObjects[x].update(dt, this.backBufferContext2D, this.xScroll, this.yScroll);
            }
        }

        // 然后绘制所有游戏对象
        for (x in this.gameObjects)
        {
            if (this.gameObjects[x].draw)
            {
                this.gameObjects[x].draw(dt, this.backBufferContext2D, this.xScroll, this.yScroll);
            }
        }

最后，把后台缓冲复制到前台缓冲，最终用户就可以看到下一帧了。

        // 将后台缓冲复制到当前显示的画布
        this.context2D.drawImage(this.backBuffer, 0, 0);

理解了draw函数，下面再分别讲一讲addGameObject和removeGameObject函数。

    /**
        向gameObjects集合中添加一个GameObject
        @param gameObject The object to add
    */
    this.addGameObject = function(gameObject)
    {
        this.gameObjects.push(gameObject);
        this.gameObjects.sort(function(a,b){return a.zOrder - b.zOrder;})
    };

    /**
        从gameObjects集合中删除一个GameObject
        @param gameObject The object to remove
    */
    this.removeGameObject = function(gameObject)
    {
        this.gameObjects.removeObject(gameObject);
    }

利用addGameObject和removeGameObject（在Utils.js文件里通过扩展Array.prototype添加）函数，可以在GameObjectManager所维护的GameObject集合（即gameObjects变量）中添加和删除游戏对象。

GameObjectManager类是我们这个游戏框架中最复杂的一个类。在下一篇文章中，我们会讲解游戏框架的另外几个类：GameObject、VisualGameObject、Bounce和ApplicationManager。

好了，现在放松一下，看一看Demo吧。

为之漫笔 最后编辑于：
2011/08/14 @ 23:19

1、认识一下Canvas
2、在Canvas上绘图
3、通过Canvas元素实现高级图像操作
4、通过Canvas实现视差滚动
5、写一个游戏框架（一）
6、写一个游戏框架（二）
7、动画
8、JavaScript键盘输入
9、综合运用
10、定义级别
11、跳跃与坠落
12、添加道具
13、加载资源
14、添加主菜单

3、通过Canvas元素实现高级图像操作

http://www.brighthub.com/internet/web-development/articles/39509.aspx

这篇文章将带领大家学习使用JavaScript和Canvas元素操作图像了几种不同的方式，这些方式在Canvas元素出现之前是不可能的事儿。

上一篇文章演示了如何利用Canvas实现一个基本的图像动画。那个例子很简单，同样的效果通过修改IMG或DIV等标准HTML元素的一些属性，照样也可以轻易实现。下面我们就来演示一下画布元素的高级应用，展示一下它的真正威力。

首先，还是准备一个HTML页面。

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
  <html lang="en">
     <head>
        <title>JavaScript Platformer 2</title>
        <script type="text/javascript" src="jsplatformer2.js"></script>
        <style type="text/css">
           body { font-family: Arial,Helvetica,sans-serif;}
        </style>
     </head>
    <body>
       <p>
          <a href="http://www.brighthub.com/internet/web-development/articles/38364.aspx">
             Game Development with Javascript and the canvas element
          </a>
       </p>
       <canvas id="canvas" width="600" height="400">
          <p>Your browser does not support the canvas element.</p>
       </canvas>
       <br />
       <button onclick="currentFunction=alpha;">Change Alpha</button>
       <button onclick="currentFunction=shear;">Shear</button>
       <button onclick="currentFunction=scale;">Scale</button>
       <button onclick="currentFunction=rotate;">Rotate</button>
    </body>
 </html>

与上个一例子的HTML页面相比，唯一的区别就是添加了一些按钮。单击这些按钮，就会设置currentFunction变量（稍后介绍）的值，用以改变在渲染循环中运行的函数。

以下是 jsplatformer2.js 的代码。

 // 每秒多少帧
 const FPS = 30;
 const SECONDSBETWEENFRAMES = 1 / FPS;
 const HALFIMAGEDIMENSION = 75;
 const HALFCANVASWIDTH = 300;
 const HALFCANVASHEIGHT = 200;
 var image = new Image();
 image.src = "jsplatformer2-smiley.jpg"; //还是第一个例子中的图像
 var canvas = null;
 var context2D = null;
 var currentFunction = null;
 var currentTime = 0;
 var sineWave = 0;

 window.onload = init;

 function init()
 {
    canvas = document.getElementById('canvas');
    context2D = canvas.getContext('2d');
    setInterval(draw, SECONDSBETWEENFRAMES * 1000);
    currentFunction = scale;
 }

 function draw()
 {
     currentTime += SECONDSBETWEENFRAMES;
     sineWave = (Math.sin(currentTime) + 1) / 2;

     context2D.clearRect(0, 0, canvas.width, canvas.height);

     context2D.save();

     context2D.translate(HALFCANVASWIDTH - HALFIMAGEDIMENSION, HALFCANVASHEIGHT - HALFIMAGEDIMENSION);

     currentFunction();

     context2D.drawImage(image, 0, 0);

     context2D.restore();
 }

 function alpha()
 {
     context2D.globalAlpha = sineWave;
 }

 function shear()
 {
     context2D.transform(1, 0, (sineWave - 0.5), 1, 0, 0);
 }

 function scale()
 {
     context2D.translate(HALFIMAGEDIMENSION * (1 - sineWave), HALFIMAGEDIMENSION * (1 - sineWave));
     context2D.scale(sineWave, sineWave);
 }

 function rotate()
 {
     context2D.translate(HALFIMAGEDIMENSION, HALFIMAGEDIMENSION);
     context2D.rotate(sineWave * Math.PI * 2);
     context2D.translate(-HALFIMAGEDIMENSION, -HALFIMAGEDIMENSION);
 }

跟前面一样，这个JavaScript文件先定义了一些全局变量。

• FPS：每秒多少帧
• SECONDSBETWEENFRAMES：两帧之间间隔的秒数（FPS的倒数）
• HALFIMAGEDIMENSION：要绘制图像的宽度/高度的一半，用于把图像定位到画布的中心点
• HALFCANVASWIDTH：画布宽度的一半，用于配合HALFIMAGEDIMENSION使用，以便在画布上居中图像
• HALFCANVASHEIGHT：画布高度的一半，用于配合HALFIMAGEDIMENSION使用，以便在画布上居中图像
• currentFunction：渲染循环（参见上一篇文章）中运行的函数
• currentTime：应用已经运行了多少秒
• sineWave：0到1之间的一个值，用于控制图像的运动
• image：要在画布上绘制的图像
• canvas：画布元素的引用
• context2D：画布元素的2D上下文的引用

然后，跟前面一样，要设置在window的onload事件发生时立即调用init函数（关于init函数的介绍，请参见上一篇文章）。

draw函数

下面来看一看draw函数：

function draw()
{
    currentTime += SECONDSBETWEENFRAMES;
    sineWave = (Math.sin(currentTime) + 1) / 2;

    context2D.clearRect(0, 0, canvas.width, canvas.height);

    context2D.save();
    context2D.translate(HALFCANVASWIDTH - HALFIMAGEDIMENSION, HALFCANVASHEIGHT - HALFIMAGEDIMENSION);
    currentFunction();
    context2D.drawImage(image, 0, 0);
    context2D.restore();
}

这个例子要演示4种效果：修改alpha值（透明度），以及缩放、旋转和切变图像。为了展示这些效果，需要基于某一范围内的值来应用变化。变量sineWave就用来定义这个范围值的基准。

标准的正弦函数能够在-1到1之间产生非常完美的波形图。首先，我们通过递增currentTime变量来反映动画已经运行了多长时间，然后再利用这个值在正弦曲线上找到一个点。给正弦函数返回的值（从-1到1）先加1再除以2，就可以把它们转换成0到1这个范围内的值。

    currentTime += SECONDSBETWEENFRAMES;
    sineWave = (Math.sin(currentTime) + 1) / 2;

然后，调用clearRect方法清空画布，以便为后面的绘图准备一个干净的版面。

    context2D.clearRect(0, 0, canvas.width, canvas.height);

应用到画布上面的效果是可以累积的，因而就可以利用几个简单的函数来“组合”出效果来。例如，在向屏幕上绘制之前，可能会有一艘飞船需要旋转、变换和缩放。因为所有效果都对画布起作用，所以这些效果会应用到将被绘制在屏幕上的所有对象，而不仅仅是某一幅图像或某一个形状（比如一艘飞船）。

其中，save和restore函数为应用这些累积的效果提供了一种简单的机制，可以将应用了这些效果的图像或图形绘制到画布上，然后“撤销”这些改变。后台的操作是什么呢？save函数把当前的绘制状态推进栈里，而restore函数则把最后一个状态弹出栈。还拿前面提到的飞船为例，需要执行下列操作：

• 调用save函数（保存当前的绘制状态）
• 旋转、变换和缩放上下文
• 绘制飞船
• 调用restore函数，移除自上一次调用save方法以来所添加的任何效果，也就是撤销之前的变化

在这里，我们就是要组合起来使用这两个方法。首先，在把任何效果应用到画布之前，先保存绘制状态。

    context2D.save();

保存了绘制状态之后，就该应用目标效果了。为此，首先调用translate函数，从而将随后要绘制的图像在画布上居中。

    context2D.translate(HALFCANVASWIDTH - HALFIMAGEDIMENSION, HALFCANVASHEIGHT - HALFIMAGEDIMENSION);

接下来，调用由变量currentFunction引用的函数。正是这些被引用的函数，是让图像发生alpha（透明度）变化以及缩放、旋转和切变的关键。这些函数我们稍后再介绍。

    currentFunction();

为图像应用完效果之后，就可以把它绘制到画布上面了。所以，接下来就是调用drawImage来绘图。

    context2D.drawImage(image, 0, 0);

最后，再调用restore函数，把自调用save函数以来应用的所有效果从画布上移除。

    context2D.restore();

alpha函数

 function alpha()
 {
     context2D.globalAlpha = sineWave;
 }

通过修改上下文对象的globalAlpha属性，所有后续绘制操作的透明度都会被修改。将globalAlpha设置为0，意味着被绘制的任何对象都将完全透明，而将这个属性设置为1，则意味着任何绘制操作都会保持原有的透明度级别。在此，我们通过修改这个globalAlpha属性，可以实现笑脸的淡入和淡出效果。

shear函数

 function shear()
 {
     context2D.transform(1, 0, (sineWave - 0.5), 1, 0, 0);
 }

切变操作是通过transform函数向画布应用一个矩阵来实现的。变换矩阵本身就是一个值得研究的主题，但对我们来说，如果不想理解背后的数学原理，可以在网上找到很多标准的2D变换矩阵（http://en.wikipedia.org/wiki/Transformation_matrix#Examples_in_2D_graphics），直接使用transform函数来应用它们即可。所谓切变，其实就是把图像的顶部或底部推到一边。

scale函数

 function scale()
 {
     context2D.translate(HALFIMAGEDIMENSION * (1 - sineWave), HALFIMAGEDIMENSION * (1 - sineWave));
　   context2D.scale(sineWave, sineWave);
 }

顾名思义，scale（缩放）函数修改的是图像的大小。但在此之前，我们还调用了一次transalte函数。这是为了让缩放后的图像在画布上居中。如果你把这行代码注释掉，就会发现图像会从左上角向右下角膨胀。调用translate函数就是为抵消其圆心的位移，让图像始终居中。

rotate函数

 function rotate()
 {
     context2D.translate(HALFIMAGEDIMENSION, HALFIMAGEDIMENSION);
     context2D.rotate(sineWave * Math.PI * 2);
     context2D.translate(-HALFIMAGEDIMENSION, -HALFIMAGEDIMENSION);
 }

与scale函数类似，rotate（旋转）函数的作用也正如其名：旋转图像。与scale函数同样类似的是，这里也额外调用了translate函数以确保图像围绕中心点而不是左上角旋转。建议大家把对translate函数的调用注释掉，自己看一看结果有什么不同。

刚刚我们看到了使用画布元素实现的4种也还算简单的效果，这些效果使用标准的HTML元素几乎是不可能做到的。其中，有的效果可以使用scale和rotate等内置函数来实现，而使用transform函数则可以完成大量的图像操作（切变只是其中之一）。

看看Demo吧。http://webdemos.sourceforge.net/jsplatformer2/jsplatformer2.html

为之漫笔 最后编辑于：
2011/08/12 @ 06:29

1、认识一下Canvas
2、在Canvas上绘图
3、通过Canvas元素实现高级图像操作
4、通过Canvas实现视差滚动
5、写一个游戏框架（一）
6、写一个游戏框架（二）
7、动画
8、JavaScript键盘输入
9、综合运用
10、定义级别
11、跳跃与坠落
12、添加道具
13、加载资源
14、添加主菜单

1、认识一下Canvas

http://www.brighthub.com/internet/web-development/articles/38364.aspx

Canvas元素以及JavaScript引擎中新增的一些特性，让Web开发人员不必借助第三方插件，即可设计开发出精细且具有交互性的2D网页。这篇文章就向大家介绍一下Canvas元素，以及它的一些可能的用途。

JavaScript与Canvas元素

HTML是为创建静态页面而生的。HTML所能实现的动态效果，也仅限于显示GIF动画和闪烁的文本。JavaScript改变了这一切，通过它能够动态修改网页。今天，很多Web服务都利用AJAX来创建网页，为用户提供更加流畅的体验，也超越了标准HTML页面中常见的“点击－重新加载－点击”式的交互模式。

然而，JavaScript的某些功能会受到其宿主浏览器的制约。尽管可以在网页中创建和修改任何元素，但JavaScript不能（轻易地）让浏览器显示一种新对象。通过JavaScript修改文本、插入图像或者缩放表格都很容易，因为这些对象本来就是HTML所支持的。如果你想再玩得刺激一点，比如写一个网页游戏，怎么办？那恐怕就得苦心积虑地改变标准HTML元素的用途，克服种种不测才能达到目的。要么，你就得求助于Flash或Silverlight这样的插件。

Canvas元素登场了。这个新HTML元素为JavaScript开发者提供了一种无需插件即可在网页中直接绘图的机制。Canvas元素最早是由苹果公司在其WebKit框架中引入的，Safari浏览器和Dashboard微件都在使用。Canvas元素现在也被建议加入了HTML5规范，得到了最新的Chrome、Firefox、Opera以及Konqueror等浏览器的支持。Internet Explorer（至少在IE8之前）还不支持Canvas，但ExplorerCanvas项目倒是为IE提供了与Canvas元素类似的功能。

Canvas元素对做过2D图形编程的人是小菜一碟。可以在这个元素上画线、画各种形状、画渐变，甚至可以利用与其他2D API中类似的函数来修改其中的每一个像素。得益于Chrome的V8、Firefox的SpiderMonkey以及Safari的Nitro等最新JavaScript引擎的性能，创建精细且具有交互性的Web应用已经完全没有问题。

我们这一系列文章将教会大家使用JavaScript和Canvas元素创建一个简单的平台游戏。将要涉及的内容包括动画、加载资源、分层渲染、滚动和交互。通过一步一步地展示示例代码和实际效果，你可以很快学会如何驾驭强大的Canvas元素。

2、在Canvas上绘图

http://www.brighthub.com/internet/web-development/articles/38744.aspx

下面，我们就通过一个循序渐进的示例及实时演示，来介绍如何使用JavaScript在Canvas元素上绘图及实现动画。

准备工作

知道了什么是Canvas元素之后，该学习在屏幕上绘图了。首先，需要一个HTML页面来放置和显示Canvas元素。

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
  <html lang="en">
     <head>
        <title>JavaScript Platformer 1</title>
        <script type="text/javascript" src="jsplatformer1.js"></script>
        <style type="text/css">
           body { font-family: Arial,Helvetica,sans-serif;}
        </style>
     </head>
    <body>
       <p>
          <a href="http://www.brighthub.com/internet/web-development/articles/38364.aspx">
             Game Development with Javascript and the canvas element
          </a>
       </p>
       <canvas id="canvas" width="600" height="400">
          <p>Your browser does not support the canvas element.</p>
       </canvas>
    </body>
 </html>

这些HTML代码很直观。其中有两个重要的元素。

<script type="text/javascript" src="jsplatformer1.js"></script>

这里包含的是将会修改Canvas元素的JavaScript代码，对应的Canvas元素的标记如下：

<canvas id="canvas" width="600" height="400">
	<p>Your browser does not support the canvas element.</p>
</canvas>

以上代码创建了一个Canvas元素。不支持Canvas的浏览器，比如Internet Explorer（IE8之前的版本），会忽略这个元素，而只显示其子元素。在这个简单的例子中，这个子元素就是一个段落，其中的文本告诉用户他们的浏览器不支持Canvas元素。而对于那些支持Canvas元素的浏览器，如Chrome、Opera和Firefox，则会忽略Canvas元素的子元素。

这个Canvas元素的ID属性很重要，因为后面的JavaScript将通过它来取得对该元素的引用。而width和height属性指定了画布的宽度和高度，这两个属性跟table或img等其他HTML元素中的同名属性作用一样。

以下是 jsplatformer1.js的代码：

//每秒钟target帧
const FPS = 30;
var x = 0;
var y = 0;
var xDirection = 1;
var yDirection = 1;
var image = new Image();
//建议读者将图片下载到本地加载（经测试，此图片响应头部的Content-Type为application/empty，浏览器无法识别）
image.src = "http://javascript-tutorials.googlecode.com/files/jsplatformer1-smiley.jpg";
var canvas = null;
var context2D = null;

window.onload = init;
function init(){
	canvas = document.getElementById('canvas');
	context2D = canvas.getContext('2d');
	setInterval(draw, 1000/FPS);
}
function draw(){
	context2D.clearRect(0, 0, canvas.width, canvas.height);
	context2D.drawImage(image, x, y);
	x += 1* xDirection;
	y += 1* yDirection;

	if (x >= 450) {
		x = 450;
		xDirection = -1;
	}else if(x <= 0){
		x = 0;
		xDirection = 1;
	}
	if (y >= 250) {
		y = 250;
		yDirection = -1;
	}else if(y <= 0){
		y = 0;
		yDirection = 1;
	}
}

如果只是一个Canvas元素，也没有什么用。JavaScript必须要在这块画布上面画点什么，相应的代码保存在 jsplatformer1.js中。简单来说，JavaScript在这里先加载了一幅图像，然后将其画在画布上面，最后让它在画布上移动。

首先，定义一些全局变量。

const FPS = 30;

FPS定义的是画布重绘的频率。

var x = 0;
var y = 0;
var xDirection = 1;
var yDirection = 1;

变量x、y、xDirection和yDirection用于定义图像（相对于画布左上角）的位置，以及它在任意一时刻移动的方向。

var image = new Image();
image.src = "http://javascript-tutorials.googlecode.com/files/jsplatformer1-smiley.jpg";

要把图像画到画布上，必须先加载一幅图像。为此，我们创建一个Image对象，将其src属性设置为一幅图像文件的URL（建议把图片下载到本地。——译者注）。

var canvas = null;
var context2D = null;

我们还需要取得对Canvas元素以及绘图上下文（稍后再详细介绍绘图上下文）的引用。稍后我们会把正确的值赋给这两个变量，现在先把它们设置为null。

window.onload = init;

最后，当页面加载完成后，我们必须知道立即运行绘制画布的代码；因此，在window对象的onload事件发生时，立即调用init函数。

init函数

function init(){
	canvas = document.getElementById('canvas');
	context2D = canvas.getContext('2d');
	setInterval(draw, 1000/FPS);
}

页面加载完毕后就会调用上面这个init函数。在这个函数中，我们先通过在HTML文件中指定的ID属性取得画布元素（毫无疑问，除了把它叫做画布，还能叫个啥？），然后再取得这个画布的2D绘图上下文对象。

上下文对象用于定义如何在画布上绘图。顾名思义，2D上下文嘛，支持在画布上绘制2D图形、图像和文本。支持画布元素的浏览器都支持2D上下文，除了2D上下文，还有其他试验性的上下文对象。Opera有一个专门为游戏设计的2D上下文，而Mozilla则有一个能够显示3D场景的上下文。可惜呀，目前这些上下文对象只有特定的浏览器才支持。如果你想用画布来创建Web应用，最好还是只使用常见的2D上下文。

因为我们在这里是想绘制一幅能移动的图像，所以必须建立渲染循环（render loop）。所谓渲染循环，实际上就是一个被重复调用的函数，渲染循环的每一次迭代，（在这个例子中）都可以让图像在屏幕上产生一点位移，如此循环往复就能给人图像在移动的感觉。为此，我们调用了setInterval函数，它的第一个参数是应该被重复调用的函数，这里的函数名是draw。setInterval函数的第二个参数指定调用函数的频率。这个参数值的单位是毫秒，而用1000除以早先定义的FPS得到的就是每次调用之间相隔的毫秒数。

这里需要注意一下，虽然我们指定每秒钟调用30次draw函数，但实际上不会调用30次。多长时间调用一次draw函数，取决于底层JavaScript引擎的速度和要执行的draw函数代码的复杂程度。如果系统很慢的话，很可能每秒钟只能调用一次draw函数。所以说，这里指定给setInterval的频率只是一种最理想的情况。

draw函数

在画布上绘图的操作实际上都是由draw函数来完成的。下面我们就一步一步地说明其中的绘图操作。

context2D.clearRect(0, 0, canvas.width, canvas.height);

所有绘图操作都是在上下文对象上发生的，并不是在画布元素上发生的。这里首先清空上下文，以便为绘制每一帧画面准备一个干净的版面。

context2D.drawImage(image, x, y);

紧接着，就把图像绘制到上下文对象中，参数x和y指定了绘制图像的左上角坐标。

x += 1 * xDirection;
y += 1 * yDirection;

为了让图像在画布上移动，需要根据xDirection和yDirection是等于1（向右或向下）还是等于-1（向左或向上），来递增或递减x与y的值。

if (x >= 450){
	x = 450;
	xDirection = -1;
} else if (x <= 0) {
	x = 0;
	xDirection = 1;
}
if (y >= 250) {
	y = 250;
	yDirection = -1;
} else if (y <= 0) {
	y = 0;
	yDirection = 1;
}

如果图像移动到了画布外面，则反转图像的移动方向。我们知道图像的大小是150×150像素，而画布的大小的是600×400像素，因而就有了450（600 – 150）和250（400 – 150）这两个值。

最后的效果就是笑脸图像会在画布的范围内反弹往复。此时此刻，有读者可能会想：同样的效果如果通过修改DIV元素的位置来实现可能更容易一些。这一点我不否认。但这个例子只演示了画布元素所能实现的简单效果。下一篇文章我们就会介绍使用画布元素能够实现的高级效果，同样的效果若采用其他方式，恐怕就要困难多了。

为之漫笔 最后编辑于：
2011/08/12 @ 06:39

有些人认为“JavaScript是Web的汇编语言”完全是精神病说的话。为此，我询问了几位JavaScript权威，比如Brendan Eich（JavaScript之父）、Douglas Crockford（JSON之父），还有Mike Shaver（Mozilla技术副总裁）。以下都是从个人邮件里摘过来的，得到了以上几位的许可。

Mike Shaver：

Brendan Eich：

Douglas Crockford：

Brendan Eich，补充：

以下是前一段时间Nick Thompson在YCombinator说过的话：

当然，这个比喻不一定准确。JavaScript代码无论从外观到行为，肯定不像ASM。但作为一个比喻，至少可以说明：

• JavaScript无所不在；
• 它速度快而且越来越快；
• JavaScript酷似低级的Web编程语言；
• 它可以通过手工编写，也可以从另一种语言编译而来。

诸如此类的话题也经常在Hacker News中出现：

好啦，能听到如此有见地、有深度，而又详尽的讨论，该满足了吧。亲爱的读者，你们太棒了。

（更新）有些人认为“JavaScript是Web的汇编语言”完全是精神病说的话。为此，我询问了几位JavaScript权威，比如Brendan Eich（JavaScript之父）、Douglas Crockford（JSON之父），还有Mike Shaver（Mozilla技术副总裁）。他们的评论发表在下一篇文章里。

昨天我跟Erik Meijer聊天，他说：

怎么会说起这件事儿呢？当时我正在试用Google+，就跟上大多数让我印象深刻的网站一样，我立即就查看它的源代码。不看不要紧，一看吓一跳：

咱就将就说吧，我看到了1300行代码，密密麻麻的，大约90KB。上面图片显示的只是最前面的一小部分，基本上都是“瘦身后”的JavaScript代码。再往下看，页面中间呢，全都是像下面这样的span、div以及生成的类和id：

我勒个去，满篇都是GUID（Globally Unique Identifier，全局唯一标识符）。

话又说回来了，http://msn.com、http://www.bing.com、http://.www.facebook.com，全都这样啊。就连http://www.twitter.com也都开始有点“瘦身”的迹象了。所有大点的网站好像都丝毫不在乎什么标记之美。这是为什么呢？

这样有效率啊，性能高啊。Google很多最出色的网站背后都依赖GWT呢。在这种情况下，要是这一类网站的里头和外头全都一样漂亮，你反而会觉得不可思议了。

不能不说这可真有点讽刺的意味。曾几何时，ASP.NET的开发人员对ViewState可是怨声载道啊。“简直太笨了”的意思就是“我看不懂它都干什么了。”ViewState曾经（现在也）是一项让Web开发效率提高很多倍的技术。它跟Google Web Toolkit（GWT）不一样，但GWT与WebForms的出发点也并非完全没有相似之处。看看GWT网站自己怎么说：

这个出发点可真是值得赞美，不对？难道不可以这样说（抱歉，开个玩笑而已）：

本文的目的不是想夸奖WebForms，也不是给WebForms正名。WebForms对于某些应用是不二之选，正如GWT对其他一些应用那样。我真正想说的是，使用服务器端的工具包，没有办法像使用jQuery写出清晰的JavaScript，或者使用Razor或HAML写出清晰、清楚的标记一样，给Web开发带来真正的快乐。归根结底，其实就是你选择的抽象级别的问题。

所谓的语义标记在这种情况下仍然是被隐藏的，而诸如http://schema.org之类的站点也仍然非常重要，只不过可别指望你能在心仪的站点里看到缩进得像俳句一样整齐的源代码。

大家知道，精简和压缩属于正交优化。而我要说的是，一点也不在乎标记和脚本发送到客户端之后是否美观，确实太草率了。假如谁都不在乎发送到浏览器的标记，只在乎结果，那谁的标记和JS就那么不值钱啊，谁还愿意主动公开自己的源代码呢？反正，网站不是运行得挺好嘛，谁还在乎其他的？

现在我要给亲爱的读者提个问题，你觉得自己为什么那么在乎点击“查看网页源代码”之后的结果呢？难道HTML5和JavaScript是Web的新汇编语言不成？

（更新）声明一下：
当然，这个比喻不一定准确。JavaScript代码无论从外观到行为，肯定不像ASM。但作为一个比喻，至少可以说明：

• JavaScript无所不在；
• 它速度快而且越来越快；
• JavaScript酷似低级的Web编程语言；
• 它可以通过手工编写，也可以从另一种语言编译而来。

作为开发人员或者设计人员，如果有工具提供了你需要的控制和你需要的结果，你最关心哪一个？我认为Rails、ASP.NET，甚至GWT，都没有100%做到这一点。它们都有自己的问题，但我认为将来的Web不会再专注于清晰的标记，而是夺目的用户体验和语言、工具的天下，开发人员会很享受，效率也会更高。

亲爱的读者，你愿意HTML和JavaScript再多抽象一点吗？还是希望它少抽象一点？

（再更新）为了让大家明白，我得再说一遍。本文讨论了两个独立的问题。一个当然就是源代码经过了精简和通常的混淆。但这只是第一个问题。真正的问题在于，JavaScript已经成了其他多种语言的目标语言。GWT是一个用JAVA来写Web应用的框架，它产生的字节码是“JavaScript”。GWT为原来天然的语言（HTML+JS）选择了一个设计好的高级语言，并将整个浏览器当成了一个VM。好，问题来了：我们是在写汇编呢，还是在写某种更高级点的代码？而且，我刚知道Google+是用Closure来写的，但这不影响前面的问题。

我在前一篇文章里已经提到过了，松本行弘（Yukihiro Matsumoto，或Matz）已经加入了Heroku，成为该公司的首席Ruby架构师。我通过电子邮件询问了Matz对自己未来的设想。

“让Ruby核心功能更丰富、品质更高是我的使命。”

PublicKey（以下称Q）：能不能介绍一下你怎么就换工作了呢？

松本行弘先生（以下称Matz）：上一次跟Marc Benioff先生（Salesforce.com的CEO）碰面时，他就问我，怎么才可以支持Ruby的开发。

于是，我就说了，我说我想要改变当前大多数Ruby核心开发人员面临的窘境：这些人有的是牺牲自己的闲暇时间来完成自己的工作，有的还在为自己的职业前途担心。

然后，他就说他可以为我们提供一些支持，而这也是我通过Heroku加入Salesforce.com的原因（注意：目前还有几位Ruby核心开发人员也正协商加入Heroku）。

也就是说，我们工作的核心内容没有变。我们的使命依旧还是开发Ruby核心，把它变得功能更丰富、品质更高。如此说来，我期待着我们提供的职业前景，以及来自包括Heroku在内的大量Ruby用户的反馈，能够加速Ruby开发的进程。要不然，我换这次工作就没有什么意义了。

不过，加入Heroku并担任他们的首席架构师，并不意味着我只关心Heroku和Salesforce.com的发展。我加入他们不会改变我与NaCI还有Rakuten的合作关系，后两者仍然会继续支持我，而且我还将继续担任Ruby协会的会长一职。

我为什么选这个头衔？因为我觉得“首席架构师”这个名字听起来显得最容易与业务撇清关系。我不打算将来在Heroku参与任何业务上的决策。

Q：你对自己在Heroku的角色有什么期许？

Matz：刚才不是已经说了嘛，我的工作没有什么变化，但我们的开发进度会加快。除此之外，我还能与Heroku进行更加密切的沟通，以便尽早解除Ruby对云计算平台的限制（如果有限制的话）。

而且，我还会继续与Engine Yard、VMWare等公司保持良好的关系，即使我加入了Heroku，我仍然还是那个“Ruby的Matz”，不会辜负他们的信任。

Q：此时此刻，你对Ruby和云计算有什么看法？

Matz：说实话，很多Ruby核心开发人员（包括我自己）都对Web没有多大的兴趣，但云计算会变得越来越重要，这一点是显而易见的。所以，我希望能从这些云计算运营商那里得到更多的需求，以便将其反映到未来的Ruby中。

Q：你会去硅谷上班吗，还是在松江远程工作？

Matz：我的生活方式不会变（但工作方式会变），所以多数时候我会在松江的家里远程参与开发。

就我自己而言，搬到硅谷去工作不一定会比现在这个环境更好。

不过，我想我每年都会跟旧金山/硅谷（包括Heroku）的那些人直接沟通几次。

（注意：大家别误会，Heroku的总部在旧金山，不在硅谷，但他们在新闻稿里自称是“硅谷公司”。）

Q：还有别的要说的吗？

Matz：我听说很多（日本之外国家的）人并不知道，Ruby核心团队迄今还没有一个可持续的发展模式。我希望我这次换工作能为代表日本发布消息的日本软件开发人员树立一个榜样。

Q：谢谢你接受采访。

很长时间以来，JavaScript在我眼里都是编程语言中的二等公民。早先，它经常是很多安全问题的发源地，就像是胶水一样，它能把HTML应用与样式粘到一块，可没有人拿它来正正规规地写程序；这样的情形太普遍了。而Java、Ruby、Python，这些才是真正能用来写程序的语言。

过去几年间，我对JavaScript的态度有了彻底的改变。JavaScript已经“长大成人”了。我敢保证很多JavaScript开发人员都不会认同我前面的说法，他们会说JavaScript一直都是一个十分强大、成熟、深得人心的语言。或许他们说得没错，事实上只要是一门完整的编程语言，就能拿来写程序，也包括BASIC这种滥东西。而一门语言真正有用，必须一方面自身具备很强的表达能力，另一方面还要有众多的库和开发工具。显然，JavaScript的表达能力早就没有问题了，即便是创建对象的方式有点不好让人接受，其实问题也不大。直到最近，一些极其重要的扭转局面的技术出现了：jQuery、JSON、Node.js和HTML5。或许JavaScript以前就是一门完善的语言了，但却是这些重要的相关技术（以及其他一些没有在这里提及的），让JavaScript成为了每一个开发人员都知道的语言。如果明年你要学一门新语言的话，那一定就是JavaScript。

潜力无限的Node.js

说Node.js潜力无限的意思，就是它有可能引发Web开发的革命。Node.js是一个框架，用于构建高性能Web应用——即使是巨量的请求也能应对如流。虽然Node本身作为一个底层框架，能够用于构建任何应用，但它还是最适合构建Web服务器。它的异步事件驱动模式与传统的请求-响应模式相比，无疑更适合Web应用。

有两方面因素更让人看好Node。首先，Google在提升JavaScript性能方面掀起了一场革命。这句话的意思并不是说你随时随地都可以用上最好的JavaScript引擎（尽管这也是我们一个美好的期望）。但可以肯定的是，Google在其他竞争对手还没有上心的情况下，真的把JavaScript性能当成了一回事儿。如此一来，就把Mozilla、Apple、Microsoft、Opera，还有其他浏览器开发商逼到了性能竞赛的跑道上。结果导致我们现在使用的JavaScript引擎较之几年前快了不知道有多少倍，完全有能力运行复杂的大型Web应用。

其次，Node有着庞大的开发人员基础。不管大家在服务器端使用的是什么语言，但在客户端却鲜有不使用JavaScript的。有的人可能是“剪刀加浆糊”式的东拼西凑，有的人则可能用JavaScript做出了高超的Ajax应用，而有的人甚至实现了全功能的应用程序，像Twitter或Gmail。可不管怎么说，JavaScript开发人员的数量无疑是非常庞大的。而Doug Crockford等作者更是极力宣传所有人都应该把JavaScript当成一门严肃正经的编程语言来看待——尽管它还有不少缺点。

当时当下，编写Node应用相对还是个“粗”活儿，毕竟它只是一个底层库。想象一下单纯使用JavaScript写代码，对，就是这种感觉，Node当前还是一个beta版的格局，与Rails或Django这样成熟的Web开发框架还没法比。这种状况无疑会改变。一些轻量级的框架，比如Express，已经出现了；我坚信更多基于Node的全功能框架将继续不断涌现。

前面提到过一些几乎完全在浏览器中运行的高级Web应用。那些都已经不算什么新鲜事儿了，Gmail多大了？Google Maps贵庚了？不过，用JavaScript编写在浏览器中运行的应用的客户端无疑是越来越有吸引力了。HTML5则继续推高了人们对这一趋势的期许。

HTML5就是JavaScript

我不知道已经说过多少次了，HTML5实际上并没有多少与HTML有关，它其实就是JavaScript。HTML本身有什么变化？不过一些新标签而已，况且哪个新标签都不难理解。HTML5的威力在于让你能用JavaScript来创建这些标签。假如没有后台代码通过Canvas来创建动画、游戏，或者通过它来实现一些数据的可视化，这个标签也没有大用处。从浏览器开始支持Canvas开始，我已经看到了Asteroids（行星游戏）的上百个实现，那都是开发人员为熟悉这个新特性所做的练习。有的比较粗糙一些，而有的则极其精美。这些完全都要归功于JavaScript。

由此可见，HTML5并不是以尖括号为特征的标签语言的一次大的改进，其实质是赋予了JavaScript更强大的能力。WebGL库（当前还羽翼未丰）支持在HTML5的画布中绘制实时的3D图形。HTML5的地理位置支持在浏览器中实现LBS（Location Based Service）应用——这都是手机的基本配置。而持久存储以及离线功能则为开发能与桌面应用媲美，但却在浏览器中运行的全功能应用奠定了基础。目前，就连增加多点触摸事件的实验性的库也已经出现了。凡此种种，无一不是实实在在的JavaScript特性。HTML5只是为这些高级功能的发挥提供了舞台。

退一步讲，不依赖于HTML5的浏览器端开发库也取得了长足的进步。长久以来，JavaScript一直都是在HTML中实现动态效果的不二之选。可两个问题迟迟得不到解决：一是浏览器兼容性问题，二是直接操作DOM太麻烦。jQuery让这两个问题霎那间消失得无影无踪，这个库已经成为现代基于浏览器的客户端开发的基本配置。不过，并非只有jQuery。Protovis、还有D3，都可以让你直接在浏览器中创建复杂的交互性数据可视化效果，有史以来第一次让浏览器成为了展示数据的一个重要媒介。

JavaScript与数据库，编译器与语言

就连数据库里都开始广泛使用JavaScript了！当前如火如荼的NoSQL运动的三只领头羊：CouchDB、MongoDB和Riak，都是“文档数据库”。它们保存的不是表，而是文档。这几个数据库所谓的“文档”，其实就是JSON文档，而不是Word或Excel。（Riak除了JSON文档，还支持XML和纯文本。）JSON已经成为一种被广泛采用的数据交换格式（所有现代的编程语言几乎全都有解析JSON的库），不过请注意，JSON实际上不就是一种序列化JavaScript对象的格式嘛！因此，虽然你可以在任何语言中使用JSON，但在JavaScript开发中使用它则是再自然不过的事了。况且，JSON 这个格式成为一种跨语言的标准，而不是Python、Ruby或Java等语言的序列化格式，这个事实本身足以说明JavaScript将在更加广阔的舞台上大显身手。还不仅仅如此，上述三个数据库都内置了支持JavaScript查询的能力。未来几年，更多的人都将会惊讶地发现，JavaScript和JSON还会内置到其他应用程序中！

JavaScript时代的大幕才刚刚拉开。在今年的JSConf上，一个核心主题就是“JavaScript到JavaScript的编译器”，也被人们看成是未来的一个主要趋势。Google在“编译生成JavaScript代码”方面是首开先河者。据我所知，GWT（Google Web Toolkit）应该是通过编译（从Java代码）生成JavaScript代码的第一个框架。以前我对GWT并没有太重视，只是觉得它是一个致力于拯救那些Java程序员的框架，好让他们不必因为（学习）编写JavaScript而浪费时间。可是，GWT在编译过程中对JavaScript做了那么多的优化，简直是太神了。Closure就是一个“JavaScript到JavaScript的编译器”，能够实现同样级别的优化。Traceur，这是几个星期前才冒出来的一个框架，通过它能够试验JavaScript的新特性，换句话说，它可以把带有实验性语言特性的JavaScript代码编译成可以在所有现代平台中运行的JavaScript代码。

最后，我们也开始看到了当初Java大旗下JVM语言的蓬勃景象：很多语言都在致力于编译成JavaScript！其中有一些语言比较有意思，像Coffeescript和Kaffeine，它们在风格上酷似JavaScript，但更关注弥补JavaScript的一些不够完善的地方。是不是觉得JavaScript的对象模型特有意思，可怎么看怎么有点笨笨滴，有木有？是不是一想到基于原型创建一个实际的对象都需要反反复复地定义这定义那，就望而却步了，有木有？Coffeescript对此作了明显的改进。除了完善对象模型，Coffeescript 还添加了类似列表解析（list comprehensions）的新特性，去掉了大部分花括号。就像在Python中一样，要使用缩进来区分代码块。

未来的Web服务器、取之不尽的客户端库、HTML5、数据库，乃至基于JavaScript的语言——我现在一睁眼看到的就是JavaScript！假如你曾经对JavaScript敬而远之，今年可是该学习它了。没有任何理由，真的，再不学，恐怕你就没机会跟上时代了！

2003年夏天，我还在打理自己第一个小公司的时候，突然想到一个“好主意”：社交新闻阅读器。有点类似后来的Google阅读器加智能收件箱（Priority Inbox）和社会化推荐。我没日没夜地想着这件事，觉也睡不着了。每天人虽然躺在床上，脑子里一直在苦思冥想怎么把这个东西做出来。我可能是得了“痴心妄想症”了。“这个阅读器一定会大受欢迎！”，我想。这个想法太好了，要是你的话，恐怕你早就拿着它去招徕风险投资了。可我在温莎（Windsor），加拿大呀，硅谷对我来说太远了，再说我那时候还没听说过VC啊投资啊什么的。我只能靠自己，什么事都从头来。

2003年还没有Google阅读器，Fackbook还在娘胎里，RSS新闻源也少得可怜。找不着RSS源？不要紧，我自己来，我可以自己写一个程序，一个网站一个网站地分析，自动采集新闻或者新内容。没有Faccbook提供社交用户资料？这还真是个问题。没有这些用户，还做什么社交新闻阅读器呢。对，没有用户不行，不仅如此，用户太少也不行。看来我这个“好主意”一时半会是不太可能有结果了，为了吸引用户，我决定先做个简单的东西，免费供人们下载。我对计算机通话还有些经验，开发个小桌面应用，显示来电者的ID对我来说不过举手之劳。两个月后，PhoneTray Free呱呱坠地。

2003年我可真是熬过来的。我的第一家创业公司本来还小有成就，但很快就下滑到了破产的边缘。由于我签证上的身份，我也不能给别人做任何咨询。照直说吧，这一年我没挣多少钱，我差一点就把自己的公司扔掉，然后去找一份全职工作。幸好我妻子还有工作，我们也还有点存款，合计了一下，我们决心一块挺过去，我还接着做自己想做的事。

一方面是继续设法实现我的那个“好主意”，另一方面就是我第一家公司的一些琐事。我的PhoneTray Free也有人赏脸，肯下载了。后来，我就陆续收到PhoneTray用户的一些反馈邮件，看得出来，他们都很喜欢我这个小应用。“嘿，我们单位的头儿老给我打骚扰电话”，一封邮件里这么说，“你的程序能帮我把他屏蔽掉吗？”我想“这有什么难的？”于是就在程序里加了屏蔽特定号码的功能。没想到所有人都喜欢这个功能。PhoneTray Free一下子火了。到2004年年底那会儿，每天的下载量达到了几百次，反馈邮件也越来越多。

“我喜欢你的程序，”有一封邮件说，“可我们怎么办，我们是拔号上网用户？我们上网的时候有可能错过重要的电话！”“嗯，这是真的吗？”我想，“还有人拔号上网吗？”我用Google一搜，结果显示美国当时的互联网用户确实还有65%通过拔号的方式上网。等等，呼叫等待（modem-on-hold）和V.92标准不就是解决这个问题的吗？很明显，不是，因为我很快就找到了答案。V.92标准只是规定了如何在硬件上实现来电检测和呼叫等待，并没有对软件或者API作出规定。Windows操作系统也没有内置对呼叫等待的支持。虽然有几家调制解调器制造商也提供了支持呼叫等待的软件，但那些软件都只能在特定的调制解调器上使用。大多数调制解调器还是没有随机附送的呼叫等待软件。可不可以在PhoneTray中增加这个功能，让所有拔号用户都能在上网的时候接听电话？

噢，这件事可不容易。要实现呼叫等待功能，没有任何标准可以参照。现有的几款软件都是使用内部API直接调用“猫”的驱动程序，当然也没有文档可查。而且不同调制解调器芯片提供商又各自有各自的API。更有甚者，某些提供商不愿自找麻烦，干脆连API都没有。这对我而言，不啻为一个挑战，但是谁不喜欢挑战呢？于是，我翻出了以前学过的讲x86汇编程序的旧书，打开自己一直不离不弃的IDA，开始从头研究调制解调器驱动程序的工作原理。我反汇编了几个驱动程序，弄明白了开发驱动程序的步骤，也知道了自己下一步该怎么做。下一步，我要自己开发一个核心驱动程序，以调制解调器的驱动程序为依托，来监控调制解调器驱动程序的行为。这样，PhoneTray就可以与我自己的驱动程序通信，进而控制调制解调器。

我说过我喜欢挑战，是吗？要是你曾经给哪个调制解调器开发过内核驱动程序，你就能体会到我要为自己这个爱好付出多大代价了。远程内核调试器、BSOD/重启、核心内存转储……，这些事儿忙得我是不亦乐乎，而我的那个“好主意”呢，早被我给抛到爪哇国里去了——至少暂时没时间想它了。为了让我的驱动程序兼容所有调制解调器，我花了5个月时间。但不管怎么说，2004年5月，PhoneTray Dialup的第一个版本终于整装待发了。这可是一个能真正解决人们问题的产品，我打算通过它收点钱。一开始，卖得并不好，而且PhoneTray Dialup本身还有一些bug，但到了2.10版，这个产品就已经非常完善了，销量也随之直线上升。

2004年底的时候，PhoneTray Dialup达到了每月几千的销量，而且还在增长。而我呢，也成了加拿大的永久居民，可以通过开展一些咨询业务挣钱了。我感觉到自己的前途真是一片光明！我接着思考自己那个“好主意”，给别人提供一些咨询，时不时地还升级一下PhoneTray Free和PhoneTray Dialup。就这样，突然有一天，一个小ISP所有人给我发了一封邮件，说是希望为他们的用户提供PhoneTray Dialup。“就是啊！为什么我就没有想到呢？”我心里暗自思忖，“这可是一个全新的市场啊！”很快，我就专门针对ISP定制开发了一个新版本，让他们可以把它当作自己的软件来提供给用户。同时，我也拉来了一个人，帮我一起推销这个新版本。两年后，这个新版本已经授权给了几十家ISP，其中最大一家是沙特阿拉伯的，有30万用户。

我们的生意越做越好，而我要处理的事也越来越多。为此，我妻子辞掉了自己的工作，加入Traysoft来帮我。我的那个好主意呢，我又忘了。眼瞅着拔号上网的经营模式渐渐日薄西山，我还得赶紧想点别的办法好继续赚钱。这些年来，我收到过不少公司发来的邮件，想请我帮他们开发PhoneTray Free的定制版。我没有打算那么做，我想让开发人员能够自己根据需求去自己开发。我把PhoneTray的核心电话功能拿出来，移植到C#上面，又添加了一些必要的东西，最后发布了一个基于.NET的电话功能库（AddTapi.NET）。这个新产品很成功，它的收入占到了我们公司收入的一半以上。PhoneTray呢，也越来越有声色，用不了多久，我们先进的电话管理软件PhoneTray Pro也要问世了。

这就是我8年以来的创业故事，现在我的小公司生机勃勃，养活我和我的家人已经没有问题了。而这个公司最早只不过是一个免费的小应用而已。什么，我的那个“好主意”怎么办？也许有一天我会实现那个梦想的，也许。

报告内容

1. 第一部分：市场综述
2. 第二部分：分类市场
3. 第三部分：出版商
4. 第四部分：编程语言
5. 第五部分：完结篇及数字出版

下载完整版（PDF）

在最后这一部分中，我们将对前四部分作一番总结，深入了解一些畅销书作者，同时展示一些电子图书销售的数据，分析一下为什么部分电子图书的市场表现已经超过纸版图书。

首先来对本报告的前四部分作个简单的总结。

总体来看，2010年美国图书市场的总销量比2009年下降了4.54%。技术图书市场下降了6.46%，技术书出版商比其他同行承受了更多的压力。然而，与2009年技术图书市场下降13.05%相比，这已经是一个进步了。市场趋势的季节性特征仍然十分明显，2010年初的市场快速启动，到了6月份开始骤降，到了秋季又恢复正常。在Bookscan Top 3000中，2010年计算机类图书比2009年增加了268种（包括不同版权年份出版的图书），而2009年比2008年增加了260种，相当于年增长率为3.5%。单品平均销量从2009年的39.64册下降到2010年的37.92册。根据数据统计，2010年少出版图书104种，但单品平均销量增加了6册。注意，这些图书的出版年份都是2010年。

移动开发类图书成为市场主力军。Android编程和Android设备（面向用户）类图书都有极大的增长，而iOS和Objective-C的市场份额进一步扩大。Windows 7的表现也相当不俗，重现了原来Windows XP曾经达到过的市场份额（Vista从未达到过）。平板电脑异军突起，成为2010年底的一大亮点。在多款Android平板电脑即将上市的背景下，有理由相信平板电脑图书市场一定会继续高歌猛进。另一方面，网页制作、Web设计工具以及Web编程类图书都明显下滑。由于Snow Leopard的突破没有前几个版本的OS那么大，Mac OS图书市场多年来首次出现下滑。Flash和Silverlight的市场也有较大幅度的下滑，原因是HTML5能够提供类似的功能，导致了它们的市场关注度下降。

从出版商的角度看，O’Reilly在2010年底爬升至第二位，位居Wiley之后，以微弱优势领先于Pearson。O’Reilly和Dummies这两家出版公司涉足的出版门类最为多样，而它们在6大技术门类中的表现也非常令人瞩目。至于最受欢迎的图书，从码洋来看是PMP Exam Prep, Sixth Edition: Rita’s Course in a Book for Passing the PMP Exam，从销量来看是Windows 7 For Dummies。2009和2010年的最热门语言都是Java，JavaScript和VBA在2010年也增长了不少。简单的回顾到此为止。

下面我们把注意力转移到出版背后的最重要因素——作者上面。作者是实际创造各种内容的人。作者的类型也很多。有的实际上很像小型的出版工作室，让其他“合著者”完成大部分写书工作；有的则从头到尾大包大揽，从编辑、写作、测试到编写代码，全都自己干，等书出版之后，还会参与推广、活动和销售。后一类作者的活动决定了我们所说的“作者平台”。有些作者凭自己的名气或自己的全职工作，拥有一个稳定的平台。而另外一些作者则不得不苦心经营，不断培养自己的平台。在我们数据库中，最成功的作者都解决了前期内容生产和后期发行销售的问题。在对前15位作者的数据（实际上，他们书的销量和码洋还会更多）进行分析的基础上，可以得到下列两张柱形图，其中展示的是2004-2010年的图书总销量和总码洋情况。

总销量

总码洋

2010年，Paul McFedries的名字出现在了58本不同的图书上（出版日期从2001年到2010年），反映在我们的数据中，这些书的总销量为112,152册。他的书在2010年卖得最好，2010年他有12本新书出版，这是我们的数据。他的总销量比David Pogue多20,000册，后者在我们的数据中有13本书出版，总销量为92,000册。从单品平均销量看，Pogue是7,000册，而McFedries只有1,900册。销量前5名中的其他三位作者是：Andy Rathbone、Greg Harvey和Dan Gookin。如果从码洋的角度来看，前5名的作者从多到少分别是：Paul McFedries、David Pogue、Andy Rathbone、Rita Mulcahy和Scott Kelby。

电子书发行与销售

好了，说完了2010年纸质书的销售情况，接下来就看一看至少已经部分脱离传统发行渠道的电子书的发行情况。下面这张表显示的是2008年的电子书销售情况，数据来源于AAP（Association of American Publishers，美国出版商协会）。最令人惊讶的是增长规模，从2008年1800万美元，到2010年1.2亿美元，增长了近10倍。随着各种平板阅读设备的纷纷上市，电子图书将会迎来其黄金时代。即使市场增速不变，2013的电子图书市场规模也将到达10亿美元。

2008年电子书市场

2010年电子书市场

AAP对自己发布的数据给出了如下说明。

• 以上数据仅代表美国的收入。
• 以上数据仅代表通过批发渠道交易的电子书销售额。考虑到批发折扣，零售渠道的销售额可能会是以上数字的两倍左右。
• 以上数据仅代表12到15家出版商提供的交易额数据。
• 以上数据不包含图书馆、教育及专业类电子书销售。
• 以上数据反映的是出版商的批发收入（出版实洋）。
• 报告中所称的电子书是指“所有以电子形式通过Internet交付或传输到手持设备的图书”。
• 相关数据由IDPF和AAP从2006年第一季度开始共同收集。

根据以上说明，我个人认为，电子书交易到2013年达到10亿美元的规模还是保守的估计。

下面的两张图展示了Safari收入的增长情况及oreilly.com直接销售的情况。展示这两张图的原因是，纸质图书的内容会以不同的数字形式出现。Safari本身是一个订阅服务，拥有50多万用户，其主要业务是B2B服务，定位于让世界各大公司的开发人员能够访问Safari Books Online。为此，一个显著的区别就是那些以普通读者为对象的书，以及很多数字媒体类图书，在Safari中的表现都不佳。从下图可以看出，我们Safari中的内容销售每年都能实现稳定的增长。

Safari中O’Reilly图书的增长情况

下面这张图更有意思一些，因为它反映了真实的市场情况。其中显示的是2010年通过oreilly.com卖出的纸质书、电子书和视频的数据。这三类出版物的内容大部分都是相同的，其中电子书无非就是我们纸版书的数字版而已。但从图中可以看出，我们电子书的销量占到总销量的88%，占到了总码洋的79%。真正值得注意的是，我们数字产品的市场增长速度超过了纸质书的市场下滑速度。这表明我们不同形式产品的销售并没有此消彼涨，而是出现了互为补充的良好局面。

oreilly.com销售多种形式产品的情况

第三张图展示了出版物形态变迁的本质，其中的百分比值表示每种特定出版物形态，以及相应年度的销售量。我个人认为，这张图显示了的出版业转型的一个趋势。纸质书慢慢减少，EPUB、Mobi及Ebooks的快速上升速度比纸质书下降的速度更快。PDF的销量在下降，想一想，也在情理之中。O’Reilly以前只提供两种图书产品形式：纸版书和PDF版。而现在，我们提供读者需要的任何一种形式。因此，在提供Mobi、EPUB和Ebook的情况下，不那么有用的PDF在显著下降。

O’Reilly各类产品的销售情况

再强调一下，这些数据来自O’Reilly和oreilly.com，不一定能反映整个计算机图书市场。我从其他出版商那里了解过，比如Prags的Dave Thomas曾告诉我，以上分布情况与他们的出版模式大致相同，有时候可能会比他们落后一些。一些成长型的小出版商致力于数字出版的积极性明显高于纸质出版，而对于我们这种具有相当规模的传统纸质出版模式的出版商来说，数字出版的增长速度也会超过纸质出版。在纸质出版前面冠以“传统”两个字好像有点新鲜，但这种说法的确是名副其实。难道这表明计算机图书市场真的要发生质的变化了吗？

感谢您看完这几篇报告。如果您想再看到某些细节（或者弄得更明白一点），请跟我联系，我一定尽力提供帮助。我打算今年在Twitter上摘录对这几篇报告中内容的更新信息。这些消息将通过@mikehatora发布，然后可能会由@oreillymedia转发，敬请关注。

报告内容

1. 第一部分：市场综述
2. 第二部分：分类市场
3. 第三部分：出版商
4. 第四部分：编程语言
5. 第五部分：完结篇及数字出版

下载完整版（PDF）

这是《2010年计算机图书市场报告》的第四部分，我们来看一看编程语言市场，对各种编程语言作一备盘点。

与2009年相比，2010年编程语言市场总体下滑，幅度为-6.27%。从销售总量看，2009年图书共售出6,303,125册，而2010年共售出5,931,452册，减少了371,673册。其中，Java语言类图书销量增长最多，2010年比2009年多售出28,633册，而PHP语言类图书销量降低最多，比上一年减少了38,614册。

在盘点各种语言之前，有必要先明确一下“语言维度”这个概念。语言维度是我们对语言类图书进行分类的一个标准，这个标准就是看图书中的代码示例是使用什么语言编写的。比如，Flash Programming with Java这本书，它的基本分类是Flash，但按语言维度分，则属于Java类。同样，Head First Design Patterns中的示例是用Java写的，因此按语言维度分，这本书也属于Java类。

综合来看，2009和2010年编程语言类图书的市场表现是最糟糕的。下面这张图中不包括谈方法论的、项目管理的、消费者操作系统的，以及其他不涉及具体语言的图书。因此，我们现在对编程语言类图书的分析，与本报告第一部分的总体评价出发点是不一样的。这张图显示的是以周为单位的所有语言类图书的市场表现情况，其中2009年和2010年与其他年份比，依旧是最差的。

2008年，我们在报告中分析C#超过Java成为了最热门的语言。但时隔不久，Java图书就在2009年发力反弹，终于在2010年王者归来，重新登上编程语言图书第一位的宝座。通过下面这张2010年最畅销语言的柱状图可以看出，Java在这些语言里遥遥领先，而Objective-C则迅速攀升至第三位，仅次于C#。

2010年市场份额

再看看下面这张图，哪些语言的图书对2004年至2010年的码洋贡献最大可以一目了然。比较新的语言，或者说“时尚”的语言，由于时间太短，它们市场表现如何一时可能还看不出来。这张表基本上根据这些语言在相应时间段内的实际销量绘制的。其中，前10位的图书7年总共销售7,655,365册，后10位的图书7年总共销售1,919,691册。从份额来看，前10位大约占80%。从这些语言7年来的趋势看，C#在2009年之前一直是稳步增长的，Java则正好相反，2009年之前它的市场表现是越来越差的。2009到2010年，除了Java、VBA、VBScript、SAS、JavaScript、C++和C呈现上升态势，其他13门语言的销量都减少了。

编程语言类图书市场表现的Treemap

在上面这张Treemp图中，我们对比的是2010年第四季度和2009年第四季度，两年的同期相比，可以看到不少亮绿色区域、几块深绿色区域，黑色及红色区域也占相当面积。Objective-C之所以会下降12%，因为它在2009年的表现实在太好，很难维持。但由于它的在图中面积很可观，结果就让这张图显得有些压抑了。

深入数据分析之前，我们先了解一下这些语言的总体情况。首先，对它们进行了分组，分组依据是它们在2004-2010年间的总销量。通过下面这张表就可以看出来，只有Mid-Majo组的销量在2010年是增长的，其他组的销量都在减少。而Mid-Major组中销售增长幅度最大的是R。有意思的是，像R这样的统计分析语言基本上都在增长（和Strata大会的结论类似）。实际上，R、SAS、Matlab、Labview、Mathematica以及SPSS这些语言加在一起，总共增长了49,504册，增幅达到了102.87%。也许是因为Hal Varian关于统计将成为“最有前途的工作”的论调，刺激了开发人员都去学习这些语言。

为了以分组方式更清楚地展示这些信息，我们使用了这些表头对这些语言进行了分类。

1. 语言的名字或简写形式
2. 2010销售量
3. 2009销售量
4. 2010年Bookscan监控销量前3000名中的品种数
5. 2009年Bookscan监控销量前3000名中的品种数
6. 2010年市场份额
7. 2009年市场份额

下面这个表展示的是Large语言组的数据。排名前10位的语言中，在Java止跌回涨的带领下，有5种在2010年是增长的。本报告前几部分也介绍过，Java语言类图书的销量一直在持续减少，到2009年甚至延续到2010年都是如此。难道是Android开发为Java的复活注射了强心剂？而Objective-C虽然在2010年销量减少，但依旧跻身前10之列。此前Objective-C的排名差不多是在第20位左右。JavaScript保持了稳步增长态势，作为Web编程中最常用也是最重要的一门语言，它的地位如今已经不可动摇了。

Large组的编程语言（2010年销量在50,000-195,000之间）

下面这个表里列出Large组语言中卖得最好的几本书。而且，不管从销量看，还是从码洋看，这几本书的排名都是相同的，只不过按码洋排名，WordPress第5的位置会被Addison-Wesley的PHP and MySQL Web Development取代。

在Major语言组中，C、Powershell、ShellScript和VBScript都在增长。总体来看，这些语言的图书2010年比2009年少销售27,000册，相当于Major组语言总体减少量的12%。

Major组的编程语言（2010年销量在10,000-49,999之间）

以下是Major组语言中销量前5名的图书。

Mid-Major组的编程语言（2010年销量在3,000-9,999之间）

在这个组中，统计分析语言的表现非常出色。如前所述，这些语言2010年比2009年增长了102.87%。其中，最为突出的是以R in a Nutshell为首的8本R语言图书。

Mid-Major组销量前5名如下。

Mid-Minor组的编程语言（2010年销量在1,682-2,999之间）

函数式编程语言是这个组中的亮点，比如F#、Scals和Lisp等。函数式编程语言类图书的年增长率达到了喜人的51.38%，2010年共销售了7,648册，而2009年这个数字只有3,718册。

Mid-Minor组中销量前5名如下。

Minor组的编程语言（2010年销量在1,000-1,680之间）

这个组10门语言中有6种在2010年的销量减少了。总体来看，销量比上一年下降了约20%。其中，最吸引眼球的是Mathematica，很大程度归功于Mathematica Cookbook这本书。与Mid-Minor组一样，这个组仍然是函数式编程语言的主战场，但它们在这个组里表现平平。

Minor组语言中销售排名前5的图书如下。

Linelist 组的编程语言（2010年销量在399-999之间）

虽然销售总量很少，但这个组里的10门语言中仍然有6门在2010年实现了增长。这个组的年销售下降幅度大约为-0.81%。后面并没有列出畅销书的名录，因为这个组整体都还谈不上畅销。

TheRest组的编程语言（2010年销量少于400）

最后是2010年销量低于400册的语言。这些语言按降序排列如下：autolisp、unity、x++、cfml、inform、mysql spl、blitz3d、q、nxt、gml、pure data、javafx、rpg、cobol、nxc、minitab、ml、boo、ada、fortran、octave、jcl、racket、jsl、idl、cfscript、abap、verilog、m、smalltalk、mumps、go、windows script、egl、c/al、realbasic、bondi、cl、cs2、eiffel、ocaml、xquery。

接下来，第五部分将关注电子图书销售。

报告内容

1. 第一部分：市场综述
2. 第二部分：分类市场
3. 第三部分：出版商
4. 第四部分：编程语言
5. 第五部分：完结篇及数字出版

下载完整版（PDF）

这一部分主要以2009年作为对比分析2010年出版商的经营情况。下面两张饼图展示了2009年和2010年各大出版商的经营业绩。最值得注意的是，Wiley继续稳坐最大出版商的位置（占图书销售量份额的32%），而Pearson和O’Reilly各掉了1%，分别被Cengage和McGraw Hill拿走。（后面将会分析收入份额。）

2009 Pub Share

2010 Pub Share

可能有人不太熟悉这些排名靠前的出版商，那是因为这些大型出版集团几年来收购、成立、拆分出了很多小出版公司。而往往这些小出版公司才是读者心目中最熟悉的品牌。比如说，你买了一本Peachpit或Sams出的书，书脊上印的都是Peachpit和Sams，而非Pearson，但后者拥有前两家出版公司。对O’Relly来说，任何不打“O’Reilly”标志的出版公司都是他们的发行合作伙伴，而不属于O’Reilly。至于构成各大出版商的小出版公司的市场份额，也会在本文后面以饼图的形式详细给出。

下面来看一下各大出版商两年的市场表现情况。以下表格中包含了几组有趣的对比性数据。

这些数据说明什么问题？首先，最大的三家出版商（每年销售册数100万以上）业绩全部下滑。其次，前8名里有4家业绩攀升：McGraw Hill、Cengage、Reed Elsevier和Lightning Source在2010年都有适度增长。总体上看，2010年前8家出版商的出书品种虽然增加了222个，但图书销售量却减少了266,232册。

关于市场份额与单品效率

衡量出版商经营水平的一个典型指标，就是图书销售量的市场份额，这也是我们一直在讨论的问题。但是，还有一个更好的度量指标，就是出版商获得的可比较的销售份额是出了多少本书换来的。这个比例是用出书品种份额比上销量份额。解释一下：如果某出版商出版的图书在Bookscan Top 3000中占15%，而该出版商的销量份额也是15%，那么这个比例就是1:1，其单品效率为1.0。如果品种份额为20%，而销量份额是10%，单品效率就是0.5。单品效率1.0代表市场平均水平：100%的出版品种带来了100%的图书销售。以较少的品种实现其销量份额的出版商具有较高的效率。只有两个出版商的效率超过了1：Wiley和O’Reilly。

单品效率小于1.0的出版商的表现就是在Bookscan监控数据中拥有很多图书品种，但实际卖出的图书却不够多。但需要注意一点，有些出版商拥有不少长销不衰的书，这些书会影响数据。一般来说，老书的销量会逐年递减，但也不是所有书都这样。不少书后续年份的销量并不亚于刚上市的年份。Head First Design Patterns就是一个例子，其销量仍然位居大多数新书之上。为此，可以把单品效率看一种频率比，而不是真正用它去衡量出版效率，毕竟出一本书能卖好几年才是真正有效率。真正的效率指标应该考虑所有出版商出版的所有图书，以及这些图书中有多少进了前3000名。有的出版商还有一些书根本就没有进入过前3000名，数据库里没有这些书的数据，因而我们就无法统计它们（很难说它们对效率的贡献）。

关于长销书

下面表格中展示了一些出版公司拥有的长销书比例。我们是怎么统计长销书的呢？我们会按照版权日期给一本书打分，分为16年以上（最高分）、10-16年、5-10年以及5年以内（零分，因为还没有证明其长销）。在为每本书打分之后，就可以统计出2004到2010年每家公司的长销书比例。统计发现，当然也是意料之中的，拥有长销书最多的前三家出版公司（Wiley、Addison-Wesley和Prentice Hall）都有稳定的学术遗产（a strong academic heritage ？）。

现在我们对单品效率和长销书的情况有了基本的了解，下面我们就深入分析一下这些出版公司2010年的经营业绩，先从Wiley、Pearson和O’Reilly这三大出版商入手。这一点很重要，因为你买书的时候通常只会看书上印的出版公司的名字，至少背后的出版商是谁，恐怕你不会在意。（如果想知道出版商是谁，可以翻到版权页找一找，但O’Reilly除外，因为我们其他出版公司都是发行合作伙伴。换句话说，O’Reilly会替这些合作伙伴提供一些销售和发行服务，但并不拥有这些公司，不像Pearson和Wiley那样。）

#1 Wiley

#2 O’Reilly Media

#3 Pearson

2010年，O’Reilly Media携所有出版和发行伙伴成为第二大出版商。我们的数据中包含了来自所有合作伙伴的贡献，以及它们加入各自出版集团的大致年份。很大程度上，我们与Microsoft Press达成的协议是让O’Reilly Media一跃成为第二大技术出版商的根本原因。当然，这个第二名领先第三名Pearson的优势几乎是微不足道的（只有不到15,000册）。Wiley仍然是第一大出版商，而且应对市场下滑的能力好像更强一些，这主要归功于Dummies品牌及其广泛的领域。下面的趋势图展示了三大技术图书出版商几年来各自的增长情况。

了解了构成三大出版商的出版公司之后，我们接下来再看一看所有这些出版公司各自的市场份额情况。下面的柱形图展示了前20家出版公司，以及它们之间的业绩对比。其中前10家2010年的图书销量减少了422,814册，而2009年技术图书的市场表现也并不好。当然，还有一些图中没有列出的中小型出版公司同样占有相当的市场份额。从出版公司的角度来看，O’Reilly的市场份额居于Dummies之后。

这张图能够说明什么问题呢？第一，处于市场前10的出版公司基本上没变。换句话说，排名在前的出版公司仍然排名在前。实际上，在这前20家出版公司中，只有7家的图书销量比2009年略有增加，只有8家的销售码洋比2009年有所增长（见下面的柱形图）。唯一从前10名中下降的是Apress，它从第10变成了第11。其中，Sybex、Wrox和Course Technology依次是销量增长最多的三家公司，而Wrox、Course Technology和Sybex依次是百分比提高最多的三家公司。应该说，Sybex上一年的基数最大，因此市场份额百分比增长并不突出。而另外两家的码洋规模都少了一半，因此它们的销量增长对百分比增长的拉动更为明显。

在分类剖析各家出版公司之前，我们再从码洋角度看看这些出版公司的业绩。计算数据的公式很简单：销量×定价 = 码洋。就算有折扣、促销及其他因素影响计算结果的精确度，但应该也是相当接近实际的。再不然，你可以把码洋看成零售价值。因此，这一次是从收入角度排名，而且，是从出版公司层面，按照码洋来排序的。显然，与上面按销量排名的图一比，你马上就能发现非常大的变化。Microsoft Press这次成了产值最高的出版公司，其次是O’Reilly，然后是Dummies。前20名中变动最大的是Addison-Wesley，按码洋计算一下子让它从第8跃升至第4。相反，Wiley的Visual出版公司则从按销量排名的第10跌落至按码洋排名的第17位。

出版门类分析

在了解了这些出版公司在2010年的经营情况之后，下面我们就来看看这些出版公司涉足的出版门类，以及它们的优势所在。Dummies和O’Reilly拥有的出版门类是最多样化的，而且他们在涉足的任何门类中都取得了不错的成绩。在商业应用和消费者操作系统类别中，Dummies无疑是王者，而O’Reilly则在系统与程序设计类别中超越了Microsoft Press。下面这张图也说明，Addison-Wesley基本上只出版系统与程序设计类图书。而这也正是某些出版商的策略：他们自己的某家出版公司会专注于一或两个门类。这一策略是好是坏尚无定论，但Addison-Welsey在2010年码洋的增长可能是要归功于这种专注的。可以得出一个结论，在某个领域没有太多技术拉动的情况下，经营门类不够多样化会导致出版商/出版公司更容易受到市场下滑的冲击。

出版门类及位列第一的出版商

以下出版门类的数据图都是2010年的，表格中列出了每家出版商的出书品种及总销量。每个门类也分别给出了2010年度最畅销的图书书目。

门类：系统与程序设计

在这个门类中，O’Reilly在各大出版商中占有最多份额，Pearson以微弱差距位居第二。如果按照出版公司再细分一下，就很容易看谁是真正的市场主导者了。排名前6的出版公司分别是O’Reilly占13.66%、Microsoft Press占10.26%、Addison-Wesley占9.65%、For Dummies占7.04%、Apress占6.67%、Prentice Hall占5.48%。通过这张图看不出来的是，前几大出版商的市场份额都下降了两三个百分点，这说明市场的增长源自排名居中的出版公司。

从下面的表格中可以看出，O’Reilly的图书销量最多，单品效率也最高。这两个指标的组合是比较良性的。换句话说，虽然我们出版的图书品种并不少，但我们效率也明显高于市场平均值。

系统与程序设计类：出版商市场份额 （2010.1.1-2010.12.31）

注意：这个门类中包含“编程语言”和“程序设计”，这两个子类别2010年销量超过了2009年。2010年系统与程序设计类领先的图书及出版商如下：

1. PMP Exam Prep: Rita’s Course in a Book for Passing the PMP Exam （这本书位居榜首已经好几年了)(RMC)
2. MCTS Self-Paced Training Kit : Configuring Windows 7(Microsoft Press)
3. CISSP Certification All-in-One Exam Guide, 5th Ed.(McGraw Hill)
4. CCNA Official Exam Certification Library, 3rd Ed.(Cisco Press)
5. Head First Java, 2nd Edition(O’Reilly)

门类：Web设计与开发

在这个门类中，Wiley的市场份额是各家出版商中最大的，Pearson紧随其后。如果再细化到出版公司的层面，这张图的序列会发生一些变化。位于前6名的出版公司变成了O’Reilly占21.11%、Dummies占13.30%、Sams占6.25%、Wiley占5.92%、New Riders占5.82%、Peachpit占5.40%。

从下面这张表中可以看出，Pearson出书品种最多，其业绩在这个门类中也相当突出。在Web设计与开发这个类别中，前几大出版商的单品效率通常都高于平均值1.0。但这里只有前三家出版商的效率超过了1.0这个临界值。（这说明还有很多二线出版商的效率低于1.0，但这张表并没有体现出现来。）2010年，这个门类的销量减少了25,000册，但出书品种多了21种。市场下滑也影响了这个门类及相应出版商的效率。

Web设计与开发：出版商市场份额 （2010.1.1-2010.12.31）

Web设计与开发类中领先的图书和出版商如下：

1. Don’t Make Me Think: A Common Sense Approach to Web Usability, 2nd Ed.(New Riders’ )
2. Head First HTML with CSS & XHTML(O’Reilly)
3. CSS: The Missing Manual(O’Reilly)
4. HTML, XHTML, and CSS: Visual Quickstart, 6th Ed.(Peachpit)
5. WordPress For Dummies: 2nd Ed.(Wiley)

门类：商业应用

在这个类别中，拥有最大市场份额的是Wiley，而O’Reilly（抱歉，图中没有显示出O’Reilly的21%）已经超过Pearson，位居第二。从出版公司的层面上看，这张图的排名也会发生变化。前6名的出版公司分别是Dummies占28.34%、Microsoft Press占14.72%、McGraw Hill/Osborne占7.06%、O’Reilly占6.29、John Wiley占5.74%、Que占4.18%。

商业应用：出版商市场份额 （2010.1.1-2010.12.31）

商业应用类中领先的图书及出版商如下：

1. Facebook For Dummies(Wiley)
2. Office 2007 All-in-One Desk Reference For Dummies(Wiley)
3. Excel 2007 for Dummies(Wiley)
4. Microsoft Office Excel 2007 Step by Step(Microsoft)
5. QuickBooks 2010 The Official Guide (McGraw Hill)
6. Excel 2007 All-In-One Desk Reference For Dummies(Wiley)

门类：消费者操作系统

在这个门类中，我们看到Wiley占有最多的市场份额（达到了46%），其他出版商中，O’Reilly以22%居第二位，Pearson以17%稳稳坐在第三把交椅上。（抱歉，O’Reilly的百分比在图中被切掉了一点。）按照出版公司来看，这张图又会有变化。前6名的出版公司分别是Dummies占31.00%、O’Reilly占13.15%、Que占9.39%、Microsoft Press占8.52%、Wiley的Visual占7.19%。

从下面表格中可以看出，Wiley出的书最多，单品效率也相对不错。O’Reilly的单品效率更高。这个门类中最突出的一点是，前6家出版公司中有4家单品销售量超过1,000册。在我看来，它意味着这个门类支撑着很多大销售商的出货量，而绝不仅仅是零售渠道偶然的成功。从下面畅销书的排行可以看出，这个类别的突出表现很大程度上得益于Windows 7，而iPad: The Missing Manual出现在2010年畅销榜中实属意外。

消费者操作系统：出版商市场份额 （2010.1.1-2010.12.31）

消费者操作系统领域的畅销图书及其出版商分别是：

1. Windows 7 For Dummies(Wiley)
2. Windows 7 For Dummies Book + DVD Bundle(Wiley)
3. Windows 7 Plain & Simple(Microsoft Press)
4. Mac OS X Leopard: The Missing Manual(O’Reilly)
5. Windows 7 Step by Step(Microsoft Press)
6. iPad: The Missing Manual(O’Reilly)

门类：数字媒体

在这个类别中，Pearson跃居第一，Wiley降至第二。而通过后面的表格可以看出，Pearson出版的图书最多，单品效率也相当不错。O’Reilly的单品效率和平均单品销量也都很高。这一点印证了我前面的说法，少出书多卖书才是出版之道。比如，下面的表格显示Reed Elsevier已经成为第三大出版商，但这个市场地位的获得，完全是建立在其出书量比O’Reilly高两倍的基础之上的。因此，它的单品效率比O’Reilly低了很多。如果考虑到Reed Elsvier有一本书的销量占到了其总销量的1/4，那么它的实际单品效率应该会更低。

数字媒体：出版商市场份额 （2010.1.1-2010.12.31）

数字媒体领域的畅销图书及其出版商如下：

1. Adobe Photoshop CS5 for Photographers(Focal Press)
2. The Adobe Photoshop CS5 Book for Digital Photographers(New Riders)
3. Adobe Photoshop CS4 Classroom in a Book(Adobe Press)
4. Adobe Photoshop CS5 Classroom in a Book (Adobe Press)
5. Photoshop Elements 8 for Windows: The Missing Manual(O’Reilly)

接下来，第四部分将详细分析编程语言类图书，而第五部分将重点关注电子图书销售。

报告内容

1. 第一部分：市场综述
2. 第二部分：分类市场
3. 第三部分：出版商
4. 第四部分：编程语言
5. 第五部分：完结篇及数字出版

下载完整版（PDF）

在这一部分，我们按照技术门类来分析一下计算机图书的销售情况。

在上一部分，我们把数据分成六大“门类”：系统与程序设计、Web设计与开发、商业应用、数字媒体应用、消费者操作系统与设备、IT人文（Computer Topics）。

这六大门类下面，是一级分类、二级分类、三级分类、四级分类，一共5层。比如说，系统与程序设计门类下面的一级分类有编程语言、数据库、软件工程、通用程序设计、安全，等等。

本部分将对比2010年与2009年的第四季度，也会将2010年与2009年的情况进行对比。

为了方便起见，下面给出了上一部分中展示过的Treemap，其中包含各个门类与一级门类2010年与2009年第四季度的对比。

这张图中的红、绿、黑色方块基本上反映了市场的波动情况。其中，代表高度增长领域的浅绿色方块非常少。但不要忘了这是2010年第四季度与2009年第四季度的对比。两个最大、最亮的绿色区域是“Android编程”和“Android消费者应用”，这两类图书从2008年微不足道的小方块成长为2010年相当可观的大市场。

下面的两张图可以反映出各图书门类历年的增长情况。第一张图是历年构成Top 3000的图书品种，而第二张图是历年来的图书销量。从中可以看出，“商业应用/人文”和“系统与程序设计”类图书的品种在2010年都增加了，但这两类图书的销量却是双双下跌的。“消费者操作系统与设备”是唯一一个出书品种和销量在2010年双增的门类。“系统与程序设计”是最大的一个门类，但其销售业绩也更加不稳定，2010年经历了最大的一次整体下滑。“系统与程序设计”是计算机图书市场的风向标，计算机（纸质）图书市场整体也是下滑的。在随后关于数字发行的部分中，我们还会展示一些更积极的信息。

历年的图书品种

历年的图书销量

下面这张表格列出了各个门类2009年到2010年的增长情况（YoY）、2009和2010年的排名情况（09Rand/10Rank）以及2009、2010年的市场份额百分比（09Share/10Share）。

在继续深入分析各门类之前，我们先来看看2010年出版的所有计算机图书的书名中出现的关键词。这是一个非常有意思的角度，因为这些关键词会出现在图书封面上、在线搜索中，以及任何相关内容的元数据中。说明一点：我把the、and、it、with等停顿词都过滤掉了。此外，Microsoft这个词因为被用于描述很多种产品，重复次数太多，也被我忽略了。下面就是这张图书市场的“书名关键词”图。

深入分析各门类图书后，我们发现在排名前10的二级分类中，有7个在2010年销量少于2009年，前20个二级分类销量净减少了244,936册。换句话说，在相对较大而且一般也较为稳定的领域，图书销量在2010年明显下降。2010年上半年，有49个二级分类销量领先于2009年上半年，而其中有6个二级分类下半年增长放缓、优势尽丧，最终导致全年销量下降。结果，2010年有43个二级分类的销量超过2009年。按照销量增长多少排序，这些二级分类分别是：平板电脑、移动编程、Windows应用、安全、硬件、社交网站、计算机与安全、云计算、信息技术和数据处理。其中平板电脑类图书2010年上半年的销量大约为15,000册，而下半年销量猛增至100,000册。图书品种的增多加快了这种增长——2010年上半年版权输出7种，而下半年底达到22种，是上半年的3倍。而图书销量下降幅度最大的领域依次是：网页制作、数字图像、Mac OS、Flash、Web程序设计、网页设计工具、个人电脑、Linux、软件项目管理和个人数据库。最让我吃惊的领域是Web程序设计。2010年上榜的Web程序设计类图书减少了16种，只有7%的图书销量过千，而这个比例在2009年是11%。

在市场持续下滑的同时，很多出版商的反应就是增加出书的数量，希望通过品种增加来获得市场份额。下面两张图显示的分别是Bookscan监控到的图书品种数，以及所有图书的单品平均销量。有一点似乎并不是显而易见：在没有必要多出那么多种书的情况下，居然有那么多新书说出就出了。这一切可能就要归结为上榜的门槛太低了。换句话说，有几周Top 3000中图书的销量都低到了只有6册。这个问题可以相对来看。前两年，低门槛的问题已经显现了，导致打榜的图书品种虽多，但单品的平均销量却不尽人意。如果市场良性发展，门槛自然会提高，因而只有销售业绩真好的图书才能进入Top 3000。低门槛的结果就是所有出版商的单品平均销量都在明显减少。除了22家最大的出版公司之外，2010年榜上有名的另外18家出版公司也增加了出书品种。然而，这18家出版公司中只有6家在多出书的同时也做到了单品平均销量的增长。因此，关键在于，进入Top 3000行列的图书品种可以增加，但如果进入的门槛太低，那么平均销量和总销量照样也会跟着低。

图书品种

平均销量

下面这张表格显示了市场被稀释的结果。平均最低值意味着给定年度内每周的“低门槛”水平。平均最高值则是给定年度内每周的最高销量。品种数的含义不言自明。数据显示，平均最低值越高，对应的年度图书品种数越少。总而言之，投入市场的图书品种越多，品种多销量少的稀释效应就会越明显。

因此，可以说我们现在正处于技术创新的低迷阶段。有什么技术、平台、方法、理论或者什么新点子，能让我们走出这个市场低迷期吗？还是说，出版商只能一味地多出书，而不管码洋是不是受损失，放任既有的市场空间被多出来的书稀释掉，难道真的就只能这样原地打转、束手无策吗？我认为是后一种情况。只能等有一天，突然大量的需求出现，才能把现在的市场托起来。我说不好这股需求到底是来自云计算、移动应用，还是社会化平台，当然也可能来自其他蓄势待发的潜力领域。未来5年哪个领域可能会有大的增长？有没有酝酿已久的将会对技术世界产生巨大影响的事物？

现在，我们来分析一下构成各大门类的细分类别。下面首先给出了一组趋势图，显示了从2009年1月到2010年12月24个月期间各个主要类别的市场表现。以24个月为周期，能够更清楚地看出某个特定领域是否会受到季节性因素的影响，该领域是不是在持续增长，还是持续下跌。大家在看图的时候，别忘记图中的曲线反映的是相对市场规模，因此纵轴上的市场规模绝对值不容忽视。另外，还有一种简便的判断方法，即曲线在方框图中的位置越高，说明其市场规模越大，反之市场规模越小。有意思的是，消费者操作系统、数字媒体、商业应用与设备这些类别在1月份都有一个很高的起点，这很可能是因为不少读者会因为买了新电脑、新设备或新操作系统，需要看一些入门指南类的图书。这其实就是明显的季节性特征。

IT人文	数字媒体	Web开发与设计
消费者操作系统与设备	商业应用	系统与程序设计

细分门类分析（以24个月为周期，从2009年1月到2010年12月）

在理解下面给出的细分门类的相关图表时，请参考上面的各大门类的趋势图。通过这些图表，可以更深入地了解细分门类的市场规模以及季节变化规律。

门类：消费者操作系统与设备

以下是消费者操作系统与设备门类下的4个细分门类的趋势线。

这是一个中等规模的门类，也是两个跨年度增长的门类之一。这个门类的增长主要由Windows 7和便携设备（Port Dev）子类别驱动。便携设备子类别2010年由Android领衔，2009年则是iPhone挂帅。前面我们提到过，平板电脑子类别在2010年下半年的表现非常突出，曲线上扬得很快。Andy Rathbone的新书Windows 7 For Dummies名列榜首，另外两本Windows 7的图书排名第二和第三。婵连销售冠军的Mac OS X Snow Leopard: The Missing Manual下落到第四位，由于Snow Leopard并非苹果公司的一个重要OS版本，因而相关主题的图书没有像往年一样拉动所属类别的增长。

虽然在Mac OS X爆炸性增长的带动下，这个市场也曾经增长过，但仍然还是不能与Windows图书相比，后者一直都稳居畅销排行榜之列，而且近两年也实现了增长。下面这张柱形图显示了Mac OS与Windows图书历年累计销量的对比情况。你使用PC还是Mac？这张图说明，还是使用PC的读者更多！

门类：商业/办公应用

2009与2010年商业应用类图书相比，有8个一级分类的表现好于上一年，有23个表现不如上一年。而这23个表现不佳的分类减少的销量比8个增长的分类多卖的销量还要多，相比之下，净损失67,000册，总体增长率为-5.10%。

两个最健康的一级分类是电子表格（Excel）和社交网络（Facebook），分别实现了2.42%和11.49%的增长率。两个最后进的一级分类是图形应用（Graphics Applications）和电子商务，增长率分别是-1.80%和-47.00%。最让我不理解的是，CMS（Content Management Systems，内容管理系统）没有像我想象得那样增长。为此，我查了几年的数据，发现CMS图书增长最快的时期是2006至2009年。而在过去的两年，这个分类的市场保持稳定，与整体市场下滑相比表现还是不错的。下面就是CMS图书历年的销量柱形图。

CMS图书历年销量

以下是商业/办公门类中三个主要领域的趋势图。

注意，“办公应用”这个分类的市场规模与另外两个分类（“一般商业应用”和“设计”）相比有多么大。但这个分类的市场表现略有下降，销量从2009年的196,722册下降到2010年的187,968册，增长率为-4.66%。这个增长率（下降率）与计算机整体市场的增长率（-4.54%）相差无几。办公应用类图书的王者是“阿呆系列”（Dummies）。2010年排名前三的都是阿呆系列，而且前10名的位子中阿呆系列占到了7席。想想也难怪，Excel之类的软件又不是什么高端技术，因此阿呆系列图书受到了各类读者的广泛青睐，其中既有闻技术而色变的普通老百姓，也不乏满脑子前沿技术的高端学者。对办公应用这个领域，即使称它为“阿呆帝国”恐怕也不过分。

门类：Web设计与开发

2010年与2009年相比，Web设计与开发类图书的销量下降了28.01%，251,000册。但是别忘了，2009年可是整体市场最差的一年了。这个门类中只有两个一级分类实现了增长：JavaScript和社交网站，增长率分别是7.81%和7.18%。我们出的Learning PHP, MySQL, and JavaScript是这个门类中卖得最好的一本书。最令人吃惊的是，网页制作类图书的销量与2009相比，骤减70,000册（别忘了，2009年已经很糟糕了）。是人们的兴趣从HTML转移到PHP、JavaScript和CMS上面去了吗？还是大家都跑去开发能访问自己网页的移动应用了呢？

以下三张趋势图展示的是Web设计与开发门类中三个主要的分类。

显然，最大的子类别是“网站建设”。这个子类别中占主导地位的图书，讨论的都是性能、可扩展性、可靠性以及调优等，都是能在我们的Velocity Conference和推荐书目中找到的话题。富Web界面在各子类别中位居第二，但总体是下滑趋势。在这个类别中，Flash和Silverlight的下降幅度最大。Flash下降幅度为-84.43%，Silverligth是-8.29%。不过，Flash的市场规模仍然是Silverlight的4倍。难道是HTML5让这两种技术失宠了吗？

门类：系统与程序设计

这是计算机图书市场中最大的一个门类。这个门类囊括了绝大多数编程语言、数据库和软件开发类的图书。这个门类的正常趋势是年初有一个不错的开端，而后到9月份（大学生开学）又会冲到一个高点。这个门类包含67个子类别，2010年有44个领域出现了负增长，只有23个领域是正增长，正负相抵，2010年整个门类的销量净减少72,024册。算下来，下降幅度只有-3.32%，因此这个大门类的实际市场表现还是好于整体市场的。在增长的二级分类中，位列前5的依次是移动编程、安全、云计算、信息技术和数据处理。业绩最差的二级分类中，前5名分别是：Linux、软件项目管理、个人数据库、Visual Basic和SQL Server。在增长率最高的移动编程领域，iPhone编程是2009年主流，而Android编程则是2010年的热门。注意，这些图书谈论的不是怎么玩iPhone或Droid手机，而是怎么开发移动应用。2009年，iOS类图书的市场规模是Android的9倍，而2010年大约是2.5倍。

以下是系统与程序设计门类中9个一级分类的前3名的趋势图。

注意一下每个分类的整体规模。编程语言（prog lang）仍然是最大的一级分类，而程序设计（prog）已经从第三跃居第二。算上2010年，数据库已经连续下滑了三年了。如前所述，软件项目管理是2010年最大的失败者，但它仍然还是系统与程序设计门类中的第三大二级分类，前面的两个二级分类是移动编程和安全。不过，与SPM（系统与程序设计市场）的整体下滑相对应，移动编程和安全也都是下滑的。另一个从名不见经传成长为可观的二级分类的是数据处理。这个类别中的很多书与我们 Strata Conference及Data Science 资源中的一些访谈、对话和文章是类似的。

第二组一级分类的趋势图与其他门类的一级分类相比，波动不是那么大。这组曲线的趋势虽然平缓，但都带有明显的季节性销售的特征。

对比2009年与2010年全年的数据可以发现，软件工程（sw engr）是这一组中最大的一级分类，经典著作The Mythical Man-Month: Essays on Software Engineering, Anniversary Edition和新经典Coders at Work: Reflections on the Craft of Programming是软件工程类的榜首图书。网络类图书由CompTIA（Computer Technology Industry Association，美国计算机行业协会）的资格认证图书占据，前10名中有5本书都是它们的，包括前2名。

第三组趋势线由CISSP（Certified Information System Security Professional，信息系统安全认证专业人员）、电脑入侵及CompTIA安全类图书主导。

接下来的第三部分，将分析出版商，包括赢家和输家。第四部分将对编程语言类图书市场进行更深入的分析。而第五部分将关注数字出版。

报告内容

1. 第一部分：市场综述
2. 第二部分：分类市场
3. 第三部分：出版商
4. 第四部分：编程语言
5. 第五部分：完结篇及数字出版

下载完整版（PDF）

自从上一次计算机图书市场报告发表之后的两年来，技术图书市场经历了一些重大的变化。恐怕不少读者根据图书市场日益疲软的征兆，已经看到未来发展的某些趋势了。实际上，我们早就断言过计算机图书销售情况预示着技术发展的趋势，大家也可以搜索一下有关计算机图书市场的其他文章。

本报告的数据来自Bookscan每周监控到的Top 3000图书的销售情况。Bookscan计量的是书店收银机的实际销售数据。换句话说，只要你在美国的书店里买过一本技术书，那么你购买这本书的信息十有八九已经进入了Bookscan的数据库里。Borders、Barnes & Noble以及Amazon等零售商实现了绝大多数技术图书的销售。

图书市场业绩综述

在讨论细分的计算机图书市场之前，我们先来了解一下截止到2011年1月2日这个周末，整个图书市场的表现情况。下面这张表涵盖了从The Girl with the Dragon Tatoo and Eat, Pray, Love to Decision Points到The Ugly Truth的所有图书，只要是印刷、装订并以书的形式销售的，都包含在里面。

整体图书市场表现（所有图书，数据截止日期2011年1月2日）

从表中可以看出，计算机图书市场较上年下滑了4%。需要注意的是，计算机图书的销售量只占实体和在线书店所有图书总销量的1%。下面这张图展示的整体图书市场各门类的业绩增长情况。其中，幽默（Humor）类图书的增长在普遍低迷的市场背景下显得独树一帜（14.45%）。另一个增长的领域是青少年非虚构类中的教材/教辅类（21.55%）。我很奇怪，为什么教材/教辅类图书居然有这么高的增长率。

整体图书市场增长情况

下面言归正传，看看技术图书市场。下面这张柱形图展示的是各年份累计图书销量的对比情况。从图中可以看出，每年的总销量从2007年开始逐年递减。2007年的时候，不少人认为市场会中止2001年以来一路下跌的态势，开始进入恢复期，但2009年较上一年的跌幅达到了历年最大值。

而下面这张折线图展示的是自2004年以来计算机图书市场每周的市场表现情况（根据我们从Bookscan获得的第一手数据生成）。请注意，这个图反映的是所有出版商，而不仅仅是O’Reilly。图中稍粗一点的红线表示2010年的数据。

从图中可以看出，我们提到过的明显的季节性特征依然存在。换句话说，每年开始都会强势上扬，然后一直到夏季逐步走低，到了秋天“返校”的季节开始止跌回升，到了年底又强势收尾。图中每年的趋势线都与上一年的趋势线非常接近，甚至连每周的涨跌都十分一致。在24个月来乏善可陈的市场表现中，唯一能让人感到一点慰藉的是，2009年每周销量与上一年度比有10-15%是下降的，而这个比例在2010年减少到了3-6%。但这能说明市场已经见底了吗，还是说我们也像读者思考着怎样才能学到新技术一样处于观望状态？如今，销售图书的方式更多了（后面几部分中会介绍），不少出版商通过不同数字格式来销售相同的内容实现了码洋与销量的双增长。而有些出版商纸质书发行量的降低，也通过数字发行和销售得到了补偿。

从上面图中看不来的是，计算机图书市场从2001年开始走下坡路，随后连续3年以20%的比例收缩，直到2004年趋于稳定，规模保持在2000年时的一半左右。（我们手中只有上溯到2004年的可靠数据。）如今，市场从2008年下半年开始又进入下跌通道，一直延续到2010年。前6年的整体市场增长率分别为：2005年1.48%、2006年3.17%、2007年-2.00%、2008年-4.27%、2009年-15.31%、2010年-4.29%。

那么，2010年有什么好消息吗？2010年，有11周的图书销量超过了上一年度。2009年，只有两周的销量超过了上一年度。因此，从这一点来说，似乎能看到市场复苏的某种迹象。2010年最终收关收在了2008年的销量水平上，而且整体市场降速比2009年慢了很多。持乐观态度的人认为，2010年市场已经触底；但持悲观态度的人则认为，这种情况早已有之：看起来好像市场已经跌无可跌了，但随后照样出现了大跌。因此，到底市场会再次走低，还是稳步复苏，都是没有办法确定的。

Treemap工具能够将数据可视化，通过它可以从另一个角度观察市场的表现。Treemap有助于迅速捕捉到市场的趋势信息，即使是几千种图书也不在话下。它的使用方法如下：

图中一个方块表示一个门类的市场份额和相对规模，颜色表示销量变化的速度。红色意味着下降，绿色意味着上升，而颜色的深浅表示变化的幅度（越深越大）。下面这张Treemap的屏幕截图显示了2010年第四季度与2009年第四季度相比，计算机图书市场各门类的损益情况。

从这些彩色方块中能看出什么来呢？首先别忘了它反映的是2010年第四季度与2009年第四季度的一个对比。这张屏幕截图已经不像去年那张那样“血流成河”了（去年的Treemap到处都是红色），与去年同期相比，2010年第四季度的亮点（浅绿色）不少。位于左上方的Android类图书，与2009年第四季度相比，增长了2,413%。你可能会注意到上部中间还有一个Android方块，呈浅绿色，区别在于中部上方的是面向消费者的书，左上角是Android编程的书。这两类书2010年都比2009年有很大的增长。左上角的iPad图书方块是黑色的，因为2009年还没有iPad图书。不过，方块的大小表明其发展规模一开始就令人印象深刻。

2010年，Windows 7图书增幅最大，其次是iPad，然后是Android（面向消费者的）和Android编程类图书。这是从销量增长来看的，而且这些技术之所以表现如此不俗，很大程度上是因为它们都是相对新的技术，没有大块的市场份额作为比较的基础。对于那些历史较长的技术，安全及网络安全、数字图像类图书的销量增长比较明显。

要看明白图中表示的趋势，可以按照颜色对这些门类加以分组：浅绿色代表“高度增长门类”，深绿及黑色代表“中度增长门类”，所有颜色都是“待观察门类”，红色及浅红色代表“下降门类”。除了“待观察门类”，其他都无须解释。“待观察门类”中包含那些不容易受季节性因素影响的，以及我们O’Reilly Radar关注的一些门类。您可以把希望添加到我们待观察范围的门类告诉我们。

下面这个表格分析并解释了上面Treemap中的某些数据，数据年份为2010年。其中Share（份额）一栏显示的是相应门类的市场份额，ROC一栏显示的是变化的速度（Rate of Change，RoC = (本期-上期)/上期）。举例来说，Mac OS类图书占整个计算机图书市场的份额为2.95%，收缩速度（RoC）为32.12%。

本报告的第二部分将深入分析这些门类中的各种技术。第三部分将关注出版商，包括赢家和输家。第四部分将主要分析编程语言，第五部分将关注数字销售。

简介

Web浏览器恐怕是用户最多的软件了。本文将介绍浏览器的工作原理。想知道从你在地址栏中输入“google.com”，到窗口中显示Google主页的过程中都发生了什么？本文会为你揭开这个秘密。

要讨论的浏览器

今天，人们主要使用5种浏览器：Internet Explorer、Firefox、Safari、Chrome和Opera。这篇文章的分析源自开源浏览器——Firefox、Chrome和Safari，Safari是部分开源的。根据W3C对浏览器使用情况的统计信息，当前（2009年10）Firefox、Safari和Chrome共同的市场占有率已接近60%。因此，可以说开源浏览器已经占据了浏览器市场的半壁江山。

浏览器的主要功能

浏览器的主要功能就是呈现你选择的网络资源，换句话说，就是你向服务器请求资源，然后浏览器把它们显示在自己的窗口中。资源的格式通常是HTML，当然也有PDF、图像等等。资源的位置是使用URI（Uniform Resource Indentifier，统一资源标识符）来指定的。与此相关的内容在后面讨论网络的时候还会详细介绍。

浏览器如何解释HTML文件是由HTML和CSS规范规定的。这些规范是由W3C（World Wide Web Consortium，万维网联盟）维护的，W3C是负责制定Web标准的组织。

HTML当前的版本号是4（http://www.w3.org/TR/html401/），HTML5还在制定中。CSS当前的版本号是2（http://www.w3.org/TR/CSS2/），CSS3也正在制定过程中。

多少年来，浏览器厂商各自为战，纷纷埋头开发自己的扩展，对规范的支持始终不给力。结果就给Web开发人员带来了生死攸关的兼容性问题。而今天，大多数浏览器对规范的支持程度仍然参差不齐。

浏览器的用户界面大同小异，其中相同的界面元素包括：

• 用于输入URI的地址栏
• 后退和前进按钮
• 书签选项
• 用于刷新和停止加载当前文档的刷新及停止按钮
• 返回主页的主页按钮

说来也怪，并没有哪个正式公布的规范对浏览器的用户界面作出规定，浏览器目前的外观是多年来浏览器厂商之间互相模仿和不断改进的结果。HTML5规范中没有定义浏览器必须具备的UI元素，但列出了一些公共元素，其中就包括地址栏、状态栏和工具栏。当然，有些浏览器还有自己专有的一些功能，如Firefox的下载管理器。相关的更多内容将在后面讨论用户界面时介绍。

浏览器的主要构成

以下是构成浏览器的主要组件（参考1.1）。
1、用户界面——包括地址栏、后退/前进按钮、书签菜单等等，也就是除了显示所请求页面的主窗口之外的其他所有部分。
2、浏览器引擎——用于查询和操作呈现（rendering）引擎的接口。
3、呈现引擎——负责显示请求的内容，例如请求的内容是HTML，它就负责解析HTML和CSS并将解析后的内容显示到屏幕上。
4、网络模块——用于完成网络调用，如HTTP请求。具有平台中立的接口和针对不同平台的底层实现。
5、UI后端——用于绘制基本的组合选择框及对话框之类的基本部件。具有不特定于某个平台的界面样式，在底层使用的是操作系统的用户界面方法。
6、JavaScript解释器——用户解释和执行JavaScript代码。
7、数据存储模块——属于持久层；浏览器需要在硬盘中保存各种数据，如Cookie。HTML5还为客户端存储定义了新的技术。

图1 浏览器的主要组件

需要特别指出的是，Chrome会为每个新建的标签页创建一个新的呈现引擎的实例，并且每个标签页也运行在独立的进程当中，这一点与其他浏览器不一样。对构成浏览器的这些组件，我们会逐一详细讨论。

组件之间的通信

Firefox和Chroem都具有联系各个组件的组件。后面也将讨论这些组件。

呈现引擎

呈现引擎主要负责……呈现，也就是把请求的内容显示到浏览器屏幕上。

默认情况下，呈现引擎可以显示HTML和XML文档以及图像。而借助插件（一种浏览器扩展）它还可以显示其他类型的内容，比如使用PDF阅读器插件可以显示PDF。后面我们还会专门讨论插件和扩展，但这里我们只讨论呈现引擎的主要用途——显示使用CSS格式化之后的HTML及图像。

呈现引擎

前面提到的浏览器（Firefox、Chrome和Safari）是构建在两个呈现引擎之上的。Firefox使用Gecko——Mozilla自己开发的一个呈现引擎；Safari和Chrome都使用Webkit。
Webkit是一个开源的呈现引擎，最早是为Linux平台开发的，后来由苹果公司移植到Mac和Windows平台。有关内容请参考http://webkit.org。

主流程

呈现引擎首先通过网络层取得被请求文档的内容。通常是以8K分块的方式完成。

取得内容之后，呈现引擎的基本工作流如下图所示：

图2 呈现引擎的基本工作流

呈现引擎会开始解析HTML文档，并将HTML标签转换成“内容树”中的DOM节点。然后，它开始解析样式数据，包括外部CSS文件和style元素中的样式。解析后的样式信息，再加上HTML中的视觉指令，将被用于创建另一个树——呈现器树。

呈现器树中包含着各种矩形，每个矩形都有颜色和大小等属性。这些矩形都按照显示在屏幕上的顺序排列好了。

在构建完呈现器树之后，呈现引擎要完成一个“布局”过程。在这个过程中，它会精确地确定每个节点在屏幕上出现时的坐标。紧接着的一个阶段就是绘制——遍历呈现器树，并使用UI后端层将所有节点逐个绘制出来。

上述过程是逐步完成的，认识到这一点很重要。为了获得更好的用户体验，呈现引擎会尽可能早地将内容呈示到屏幕上。换句话说，它不会等到把所有HTML标签都解析完毕之后再去构建和布局呈现器树，而是解析完一部分内容，就显示一部分内容；与此同时，剩余内容可能还在通过网络不断下载的过程中。

主流程示例

图3　Webkit的主流程

图4　Mozilla的Gecko呈现引擎的主流程

从图3和图4可以看出，Webkit和Gecko使用的术语稍有不同，但整个流程基本上是相同的。

Gecko把可见的格式化元素的树叫做“框架树”（Frame tree），每个元素都是一个框架。而Webkit使用的则是“呈现器树”（Render tree），这个树由“呈现器对象”构成。Webkit把排列元素叫做“布局”，而Gecko则称该过程为“重排”（Reflow）。同样，“附加”（Attachment）则是Webkit对连接DOM节点与样式信息以创建呈现器树的称呼。Gecko还有一个与语义无关的小差别，它在HTML与DOM树之间加了一层，叫做“内容渗入”（Content Sink），相当于一个制造DOM元素的工厂。下面我们就来解释流程中的每个阶段。

基本解析

由于解析是呈现引擎的一项非常重要的工作，因此我们会讨论得比较深入一些。首先来简单地介绍一下解析。

所谓的解析文档，就是把文档转换成具有某种意义的结构，以便代码能够被理解和使用。解析之后的结果通常是一个节点树，与文档的结构对应。这个节点树叫做解析树或语法树。

举个例子，解析表达式“2+3-1”会返回下面这个树：

图5 算术表达式的节点树

文法

解析是依据文档所遵循的语法规则进行的，取决于编写文档的语言和格式。每一个要解析的格式都必须具有由词汇表和语法规则构成的文法。这种文法称为上下文无关的文法。人类语言不具备上下文无关的文法，因此无法使用通常的解析技术来解析。

解析器——加上词法分析器

解析可以分为两个步骤：词法分析（lexical analysis）和语法分析（syntax analysis）。

词法分析指的是把输入分解成符号。符号来自语言的词汇表——基本有效单元的集合。对人类语言来说，符号就相当于我们字典中的那些单词。

语法分析就是使用语言的语法规则进行分析。

解析器通常把这两项工作交给两个组件来完成：词法分析器（有时也叫分词器）负责把输入分解成符号，而解析器则负责依据语言的语法规则来分析文档结构，然后构建起解析树。词法分析器知道如何剥离空格、换行等无关字符。

图6 从源文档到解析树

解析过程是迭代进行的。解析器通常会要求词法分析器给出一个新的符号，然后使用该符号去匹配某种语法规则。如果匹配成功，则将与该符号对应的节点添加到解析树中，然后继续要求词法分析器再提供另一个符号。

如果匹配不成功，解析器会在内部保存当前符号，然后继续从词法分析器那里获取符号，直到所有内部保存的符号能够匹配一项语法规则为止。如果最终都没有找到匹配的规则，解析器就会抛出异常。这就意味着文档无效，或者说包含语法错误。

转换
（待续2011/2/20）

]]> http://www.cn-cuckoo.com/2011/02/18/how-broswers-work-2257.html/feed 28 http://www.cn-cuckoo.com/2011/01/06/javascript-libraries-deconstructed-2231.html http://www.cn-cuckoo.com/2011/01/06/javascript-libraries-deconstructed-2231.html#comments Thu, 06 Jan 2011 15:25:09 +0000 为之漫笔 http://www.cn-cuckoo.com/?p=2231 JavaScript库“解构”系列旨在以可视化和可交互的方式剖析JavaScript库的源代码，包括 jQuery、Prototype 和 MooTools。
通过将 JavaScript 源代码以可见块元素的方式标记出来，可以更方便查找和学习。点开每个块元素，即可查看相应的代码。点击代码中的链接，即可在程序流中纵情畅游。

——Dave Stewart

这么好的东西，还用多说吗？你懂的。（见下图）
唯一需要说明的是，Dave Stewart原创的这个JavaScript库解构系列不知何故被挡在“墙”外头了，我只是把它搬到了“墙”里面来而已。换句话说，这个解构系列并非出自我手，我只是在自己的站点上提供了它的一个镜像，以方便“墙”内的JavaScript学习者参考。

现在就开始：解构JavaScript库!

]]> http://www.cn-cuckoo.com/2011/01/06/javascript-libraries-deconstructed-2231.html/feed 27 http://www.cn-cuckoo.com/2010/08/19/run-python-in-apache-by-use-mod_python-1960.html http://www.cn-cuckoo.com/2010/08/19/run-python-in-apache-by-use-mod_python-1960.html#comments Thu, 19 Aug 2010 11:25:35 +0000 为之漫笔 http://www.cn-cuckoo.com/?p=1960 要在Windows平台的Apache中使用Python，当然必须得先安装Apache和Python。Apache我使用的是XAMPP，而Python则随便一搜，就可以找到下载链接。由于这个解决方案要通过安装Apache模块mod_python来实现，而mod_python的当前版本3.3.1只支持Apache 2.2和Python 2.5，所以不得不先缷载已经装好的Python 3.0，重新下载安装了Python 2.5。mod_python是一个Apache模块，它可以将Python解释器嵌入到Apache服务器中（详情可以看这里）。

让Apache支持Python的过程很简单，只要3步。

1. 下载mod_python模块安装程序（注意文件名后面Python和Apache的版本号要与自己已经安装的版本一致；文件名前面的版本号则是mod_python的，文件名示例：mod_python-3.3.1.win32-py2.5-Apache2.2.exe），然后安装，安装向导会自动找到Python路径，但可能需要我们手工指定Apache路径，安装到最后，向导还会提示你如何修改Apache配置文件（参见下一步）并给出了后续步骤的英文说明。
2. 让Apache加载mod_python模块。在Apache安装目录下找到其配置文件apache\conf\httpd.conf，打开，搜“LoadModule”，找到加载模块的地方，然后添加一条语句：LoadModule python_module modules/mod_python.so，重新启动Apache。
3. 在htdocs目录下新建一个目录，如：“py”。进入py目录，新建一个文本文件，并命名为“.htaccess”，加入下列3条指令：

   
   AddHandler mod_python .py
   PythonHandler mptest
   PythonDebug On
   

   这里第一条指令是将所有URL末尾为.py的请求转发给mod_python处理程序，mod_python接收到请求之后再寻找适当的PythonHandler处理程序。第二条指令只定义了一个mptest处理程序。最后一条是启用Python代码调试功能，以便在代码运行出错时输出Python解释器返回的错误。

完成以上3步之后，就可以编写Python文件并进行测试了。在py目录下新建 mptest.py 文件，打开后添加如下代码：

from mod_python import apache

def handler(req):
	req.content_type = 'text/plain'
	req.write("Hello World!")
	return apache.OK

保存。打开浏览器，输入http://localhost/py/mptest.py，回车。看到“Hello World！”了吗？

实际上，由于前面只明确将mptest设置为处理程序，所以无论浏览器URL中的.py文件名是什么（如：login.py、default.py），都将被转发给mptest.py文件来处理，都会返回“Hello World！”。怎么办呢？长话短说，可以将上面第3步中的代码替换成如下所示：

AddHandler mod_python .py
PythonHandler mod_python.publisher
PythonDebug On

更多内容，参见Mod_python Manual和Introducing mod_python。

]]> http://www.cn-cuckoo.com/2010/08/19/run-python-in-apache-by-use-mod_python-1960.html/feed 36 http://www.cn-cuckoo.com/2010/04/20/are-you-one-of-the-10-percent-of-programmers-who-can-write-a-binary-search-1530.html http://www.cn-cuckoo.com/2010/04/20/are-you-one-of-the-10-percent-of-programmers-who-can-write-a-binary-search-1530.html#comments Tue, 20 Apr 2010 08:32:43 +0000 为之漫笔 http://www.cn-cuckoo.com/?p=1530 ——《编程珠玑》引发的编程竞赛

原文链接：http://reprog.wordpress.com/2010/04/19/are-you-one-of-the-10-percent/
迈克·泰勒（Mike Taylor），2010年4月19日
翻译完成：2010年4月20日

有一些讲编程的图书，我会从头到尾、一字不落地反复研读；还有一些讲编程的图书，我已经看过好几遍了，但每次差不多都是只看其中的一章。乔恩·本特利（Jon Bentley）1986年的经典名著《编程珠玑》（Programming Pearls）则是少数几本能同时归入上述两类的编程图书之一，我手里这本书的封面已经严重磨损，下图可以为证（点击看大图，注意左下角。——译者注）。

（我有这本书的第1版[amazon.com，amazon.co.uk]，上面就是扫描的这一版的封面，好像我该买一本又新又便宜的第2版了[amazon.com，amazon.co.uk]，第2版比第1版多了3章内容。）

我打算最近再专门写一篇关于这本书的文章（我已经为Coders at Work、The Elements of Programming Style、Programming the Commodore 64 和The C Programming Language专门写了几篇书评），但今天我只想就这本书中的几段话谈谈自己的想法。这几段内容有点骇人听闻。

只有10%的程序员可以写出二分查找

每次翻开《编程珠玑》，我都会先看一看下面这几段文字：

二分查找可以解决（预排序数组的查找）问题：只要数组中包含T（即要查找的值），那么通过不断缩小包含T的范围，最终就可以找到它。一开始，范围覆盖整个数组。将数组的中间项与T进行比较，可以排除一半元素，范围缩小一半。就这样反复比较，反复缩小范围，最终就会在数组中找到T，或者确定原以为T所在的范围实际为空。对于包含N个元素的表，整个查找过程大约要经过log(2)N次比较。

多数程序员都觉得只要理解了上面的描述，写出代码就不难了；但事实并非如此。如果你不认同这一点，最好的办法就是放下书本，自己动手写一写。试试吧。

我在贝尔实验室和IBM的时候都出过这道考题。那些专业的程序员有几个小时的时间，可以用他们选择的语言把上面的描述写出来；写出高级伪代码也可以。考试结束后，差不多所有程序员都认为自己写出了正确的程序。于是，我们花了半个钟头来看他们编写的代码经过测试用例验证的结果。几次课，一百多人的结果相差无几：90%的程序员写的程序中有bug（我并不认为没有bug的代码就正确）。

我很惊讶：在足够的时间内，只有大约10%的专业程序员可以把这个小程序写对。但写不对这个小程序的还不止这些人：高德纳在《计算机程序设计的艺术 第3卷 排序和查找》第6.2.1节的“历史与参考文献”部分指出，虽然早在1946年就有人将二分查找的方法公诸于世，但直到1962年才有人写出没有bug的二分查找程序。

——乔恩·本特利，《编程珠玑（第1版）》第35-36页

几个小时！90%！老兄，严肃点！难道这还不够骇人听闻吗？

之所以想看这本书的第2版，原因之一就是想看看这几段文字有没有修订过，看看从1986年到1999年出第2版，这个数字有没有变化。直觉告诉我，这个数字一定向好的方向变化了，事物都是向好的方向发展的嘛。但理性却告诉我，在一个程序员把更多的时间都花在摆弄库上，而不是编写实际代码的时代，重现核心算法的能力即使有也一定会弱化。别忘了，本特利提到的那些家伙可都不是等闲之辈，他们都是贝尔实验室和IBM的专业人员。所以，我们有理由相信他们的成绩实际上已经是最好的了。

好，下面就做一个二分查找的测验

我跟你一样（如果你是这么想的），想马上就试一试。（好啦，不是马上。先看完这篇文章！）我相信看这篇文章的人都知道什么是二分查找算法，即使你不知道，上面引用的本特利的描述也应该够了。请你打开编辑器，编写一个二分查找例程。什么时候觉得没有任何问题了，保留那个版本。然后测试，然后通过在下面留言的方式告诉我你是不是第一次就做对了。我们肯定能打破本特利10%的纪录吗？

规则如下。

1. 使用你喜欢的任何编程语言。
2. 不要剪切粘贴或以任何方式复制别人的代码。甚至在你写完之前，都不要参考其他的二分查找代码。
3. 甚至于我不得不强调，别调用bsearch()，或使用其他瞒天过海的手法
4. 时间自己来定：5分钟不短——只要你能保证写完写对；8小时不长——只要你愿意（而且有那么多闲工夫）。
5. 可以使用编译器消除一些无意识的错误，如语法错误或变量初始化失败，但……
6. 在确定程序正确之前不要测试。
7. 最后，也是最重要的：如果决定参与这次测验，就必须报告。成功也好，失败也罢，甚至半途而废也要给我个话儿。否则，就无法保证测验结果的准确性了。

（考虑到这只是一次测验，可以忽略计算索引时导致的数值溢出。这里描述了相应的情形，但打算参加这次测验的人在编完程序之前不要看，因为那篇文章里包含一个正确的二分查找的实现，想洁身自好的朋友一定是不屑为之的。）

如果你的代码经验证确实正确，那么如果你愿意的话，欢迎你在留言里贴出自己的代码。不过，假如你这样做了，而后来的留言给你挑出了bug，请你一定想好怎样为维护自己的形象而自圆其说

更酷的玩法：对于那些信心十足的人，如果你真敢肯定自己的程序没有问题，可以先把代码贴在留言里，然后再测试。当然，你必须要在留言里说明这一点，以便大家发现你的bug时，会考虑多少给你留些情面。

我会在某个时间总结一下这次测试的结果——比如说，一周以后。

行动吧！

第一次更新（一个半小时后）

感谢朋友们的积极响应，这么快就有那么多留言！我得提醒大家，WordPress的留言系统会解释HTML，因此会吞掉类似下面的代码段

if a[mid] < value

最好的办法就是把源代码放在{source}…{source}标签之间，注意用方括号代替这里的花括号。（我第一次想告诉大家这一点时，使用的是方括号，结果我写的规避标记的说明，反而被当成了标记——悲哀呀！）这样做还可以保留缩进，否则我还不知道有什么办法可以做到这一点。

替WordPress向大家致歉：我真的希望这个平台允许留言者预览留言和/或在发表后还能编辑留言，这样就可以避免出现乱七八糟的代码了。我也想了办法自己动手解决这个问题，但WordPress不仅会错误地显示带有<符号的代码，它实际上会丢弃该符号后面的所有内容，唉，我想我是没折了。

第二次更新（在原文章发表4个小时后）

哈哈，你们这些家伙太出人意料了。仅仅4个小时，这篇文章的留言数就超过了以前的一篇文章保持的纪录（Whatever Happened to Programming此时的留言有206条）。

如果想看到相关的更多讨论，Hacker News中有不少不错的留言，另外Reddit的留言质量虽然差一点，但也值得一看。这些讨论把实际地编写代码看成只有精英程序员才会干的事。

译后记：看了几眼，能认出来的加上认不出来的：C、PHP、Ruby、Python、Common Lisp、VB.NET 、C#、Java、Javascript、Delphi、Haskell、Scheme、Clojure、Perl、Smalltalk、FORTRAN、Lua、Objective-C、ColdFusion……各种各样语言的实现齐聚一堂。

有心人乔尔·甘勒（Joe Ganley）对前100个留言作了统计，结果如下：

Python 40
C/C++ 36
Unknown/pseudocode 6
Lisp/Clojure/Scheme 5
PHP 4
Three each: Java, Perl, C#, JavaScript
Haskell 2
One each: VB, Delphi, Smalltalk, FORTRAN, Lua, Objective-C, ColdFusion

Conclusion: Almost everyone (who cares about implementing binary search, anyway) uses C/C++ or Python.

PS：专注前端开发的程序员们，可以参考《JavaScript高级程序设计》的作者Nicholas C. Zakas使用JavaScript实现的一些基本算法，链接地址如下http://www.nczonline.net/blog/tag/computer-science/。其中，对本文提到的二分查找算法的实现如下：

//Copyright 2009 Nicholas C. Zakas. All rights reserved.
//MIT-Licensed, see source file
function binarySearch(items, value){

var startIndex = 0,
stopIndex = items.length – 1,
middle = Math.floor((stopIndex + startIndex)/2);

while(items[middle] != value && startIndex < stopIndex){

//adjust search area（调整查找范围）
if (value < items[middle]){
stopIndex = middle - 1;
} else if (value > items[middle]){
startIndex = middle + 1;
}

//recalculate middle（重新计算中项索引）
middle = Math.floor((stopIndex + startIndex)/2);
}

//make sure it’s the right value（确保返回正确的值）
return (items[middle] != value) ? -1 : middle;
}

]]> http://www.cn-cuckoo.com/2010/04/20/are-you-one-of-the-10-percent-of-programmers-who-can-write-a-binary-search-1530.html/feed 21 http://www.cn-cuckoo.com/2010/03/20/distributed-version-control-is-here-to-stay-baby-1436.html http://www.cn-cuckoo.com/2010/03/20/distributed-version-control-is-here-to-stay-baby-1436.html#comments Sat, 20 Mar 2010 00:34:57 +0000 为之漫笔 http://www.cn-cuckoo.com/?p=1436 译者按：3月17日，Joel Spolsky在他影响了全球数百万程序员的著名博客Joel on Software中发表了最后一篇文章Distributed Version Control is here to stay, baby。特翻译这篇文章，以为纪念。另外，推荐他的博客文集《软件随想录》（More Joel on Software中文版）。

前不久，杰夫、我，还有埃里克一块参加Stack Overflow Podcast的在线聊天。哥几个针对版本控制问题，狠狠地发了一通牢骚。特别是大批特批了以Mercurial和Git为代表的、新潮的DVCS（Distributed Version Control System，分布式版本控制系统）。

聊天中，我说：“我觉得，用它们来做分支和合并更简单，恰恰说明了你的同事可能会做更多的分支和合并。结果呢，就是你会把自己绕进去，最后非晕菜不可。”

说实话，你们也猜得到，参加那种聊天活动，不需要事先准备什么，不过是几个人东拉西扯地闲聊天而已。既然是闲聊天嘛，就免不了说错话，或者用技术术语来说就是——犯错误。要么哪句话里有错误，要么出发点有错误，要么就是出发点和话里都有错误。但这一次，我犯了一个低级错误。就像草莓配比萨、辣椒配面包，属于那种低级得不能再低级的错误。

在这次聊天之前，我们团队已经切换到Mercurial很长时间了，但这次切换真的把我搞晕了，我不得不花钱请人替我check in代码（开个玩笑）。不过，有一段日子我确实不好过，因为我得记住几个关键的命令，想象着自己是在Subversion中使用它们，期待能看到熟悉的结果。可是，一旦碰到结果跟我想象得不一样，我就会大惑不解。为此，我经常得颠儿颠儿地跑到楼下大房间里，请教本杰明或者雅各布。

你猜我的团队怎么说，“哎，乔总，这‘水银果汁’^[注1]太神了，我们打算用实际的产品代码来测试一下它。另外，还有，这一点更重要，我们发现了一个大市场，我们可以为它提供有偿技术支持和托管服务。”（Mercurial是基于GPL的自由软件，但有不少公司在决定使用什么之前，总会需要某种支持。）

我心里想，你们问我，我问谁？你们都知道，我在公司并不真正作主，因为“管理的职能就是提供支持”嘛。然后，他们就把所有6名实习生都组织起来，动手开发基于Mercurial的产品。

真不能再拖下去了，我必须得尽快弄明白，所谓的“分布式版本控制”到底咋回事。免得我们公司的产品都上市开卖了，人家让我介绍产品，我自己都说不出个子丑寅卯来。那样的话，博客圈里又会有人跳出来，对我指手画脚，说我糟蹋好东西了（junking the sharp）。

于是，我学呀，学呀，最后终于闹明白了。今天，我想跟大家在这里分享一下。

在分布式版本控制系统中，所谓的“分布式”其实不是最关键的。

最关键的是在使用这些系统时，你时刻要想着“更改”，而不是“版本”。

我明白，这里边其实有几分“道可道，非常道”的意味。在使用传统的版本控制系统时，你会想：嗯，这是版本1，这是版本2，这是版本3。

而在使用分布式版本控制系统时，其实我不用想版本。我只要想，我做了这些更改，我又做了另一些更改。

“程序模型”变了，“用户模型”也得跟着变。

在Subversion中，你可能会想，“要保证我的版本跟主版本随时一致”，或者“恢复到前一个版本”。

在Mercurial中，你会这样想，“看看雅各布的更改”，或者“我们先不用考虑那些更改”。

如果你在使用Mercurial时，心里想的是Subversion，多数情况下倒也问题不大；但是，万一出了问题，你就会找不着北、会不高兴，最后因为无计可施而恨上Mercurial。

可是，如果你能够解放思想，换一个角度来看版本控制，就能悟出管理“版本”与管理“变更”的差异所在。你会觉得豁然开朗，由衷地感叹这才是控制版本的最佳方式。

没错，是有点异样的感觉——从1972年至今，所有人关注的都是怎么管理版本，而今天，人们突然要去关注更改本身了，能不感觉异样吗？而且，关注更改解决了一个非常重要的问题：合并分支代码。

这一点最重要了。没错，在长达10年的时间里，我们深刻地体会到，这一点对提高开发效率最为重要。重要到了什么程度呢？重要到在我今天最后一次谈软件时，必须要反复强调它。好了，如果你只想记住一句话，那就记住下面这句：

在管理更改而非管理版本时，合并很容易做到，你可以根据工作需要随时创建分支，因为合并已经是小菜一碟了。

记不清有多少个使用Subversion的用户，曾对我说过下面这番话：“用它创建分支代码的时候，没什么问题。但是，等到要把分支合并到一块时，那个费劲啊，我们不得不手工重新应用每一次更改。我们发誓，这种蠢事一辈子也不会再干了。结果，我们想出了一个开发软件的新主意，就是用if语句，不用分支。”

有时候，他们在提到自己发明的这种一个主干的做法时，甚至还有几分得意。好像弥补了自己版本控制工具的不足，就可以流芳百世了。

使用分布式版本控制系统，合并简单，还不会出错。所以，你可以创建一个稳定的分支、一个开发分支，还可以为QA团队创建一个长期使用的分支，以便在实际部署之前进行测试。当然，还可以创建一个临时分支，用它来验证各种想法，观察结果。

这一点太重要了，怎么强调它都不算过分。自从我10年前开始写博客以来，这恐怕是我笔下的软件开发技术领域中最大的进步了。

或者，可以换一种说法，如果我要放弃Mercurial，除非是我想再使用C++。

如果你还在使用Subversion，停止使用。马上停止使用。Subversion＝水蛭。Mercurial＝抗生素。我们现在有更好的技术了。

很多人在没有完全理解这种新程序模型的情况下，往往会盲目地使用Mercurial，而这容易让人觉得它有问题，不可靠。为此，我专门写了一套Mercurial教程，叫做HgInit^[注2]。

如今，要是有人问我那次聊DVCS时为什么要贬低DVCS，我会告诉他们那是我精心设计一个圈套，我是在放烟雾弹，目的是要迷惑我的老朋友和老竞争对手埃里克——他在开发一个非分布式的版本控制系统。就像上一次他要卖bug追踪软件一样。那一次，为了惩罚他，我们用一个特制的信封寄给他一个非常值钱的Fog Creek双肩背包。让他觉得我们会在圣诞节的时候，也会把这么值钱的背包作为圣诞礼物，送给所有FogBugz软件的客户。

我的博客写到今天，时间已经够长了。10年来，大家能够坚持阅读我写的文章，是我莫大的荣幸。这个博客的读者群能达到今天这个规模，是我当初做梦也想不到的。无论你是谁，是花自己的时间把我的文章翻译成40多种语言的那几百位志愿者中的一员，是给我写过电子邮件的22 894位朋友中的一位，是订阅了我的邮件简报的50 838名订阅者之一，还是每年2 262 384位访问这个站点并阅读了我写的1 067篇文章中哪怕只言片语的读者中的一位，我都要由衷地感谢你，感谢你对我的关注。

注1：Mecurial是“水银”的意思。注2：Hg是汞的化学元素符号，而Init是“初始化”的意思。因此，HgInit可以理解成“Mecurial入门”。

]]> http://www.cn-cuckoo.com/2010/03/20/distributed-version-control-is-here-to-stay-baby-1436.html/feed 14 http://www.cn-cuckoo.com/2009/01/22/n_queens_in_javascript-366.html http://www.cn-cuckoo.com/2009/01/22/n_queens_in_javascript-366.html#comments Thu, 22 Jan 2009 03:47:04 +0000 为之漫笔 http://www.cn-cuckoo.com/?p=366 N王后问题，是一个科学谜题，指的是在把N个王后放到N*N的棋盘上，结果是任何王后之间都不会彼此威胁。换句话说，每个后继的王后既不能与前面的王后在同一行、同一列，也不能位于同一对角线上。N王后问题给出了Python代码。下面是JavaScript代码，但结果有些误差，不知何故。

function conflict(state,posX)	{
	var posY = state.length;
	for (var i=0;i<posY ;i++ )
	{
		var differ = Math.abs(state[i]-posX);
		if (differ == 0 || differ == (posY - i))
		{
			return true;
		}
	}
	return false;
}

function queens(num,state,solutions){
	for (var x=0;x<num ;x++ )
	{
		if (!conflict(state,x))
		{
			if (state.length == (num-1))
			{
				solutions.unshift(x);
				return true;
			}
			var result = queens(num,state.concat(x),solutions);
			if (result)
			{
				if (state.length==0)
				{
					solutions.unshift(x);
					continue;
				}
				solutions.unshift(x);
				return true;
			}

		}

	}
}

用法如下：

var result = [];
queens(4,[],result);
console.log(result);// [3, 1, 0, 2, 2, 0, 3, 1, 1, 3, 0, 2, 0, 3, 1, 2]

]]> http://www.cn-cuckoo.com/2009/01/22/n_queens_in_javascript-366.html/feed 1 http://www.cn-cuckoo.com/2009/01/16/n-queens-in-python-284.html http://www.cn-cuckoo.com/2009/01/16/n-queens-in-python-284.html#comments Fri, 16 Jan 2009 02:59:40 +0000 为之漫笔 http://www.cn-cuckoo.com/2009/01/16/n-queens-in-python-284.html 关于N王后问题
模块代码：

#nqueens.py
#coding=UTF-8

# n王后问题解决方案
# 检查当前王后位置（可能是多个）与下一个王后位置是否冲突
def conflict(state,posX):
	posY = len(state)
	for i in range(posY):
		if abs(state[i]-posX) in (0,posY-i):
			return True
		return False

# 采用回溯递归算法，结合生成器特性，计算可能的解决方案
def find(num=4,state=()):
	for pos in range(num):
		if not conflict(state,pos):
			if len(state)==num-1:
				yield (pos,)
		else:
			for result in find(num,state+(pos,)):
				yield (pos,)+result

# 形象地表示每个解决方案
def show(solutions):
	def printSolution(index,solution):
		print "\n方案"+str(index)+" "+str(solution)+"\n"
		for pos in solution:
			length=len(solution)
			print ". "*(pos)+"Q "+". "*(length-pos-1)+"("+str(pos)+")"
			list_solutions = list(solutions)
		if not len(list_solutions)==0:
			enum_solutions = enumerate(list_solutions)
			n_solutions = len(list_solutions)
			n_queens = len(list_solutions[0])
			print str(n_queens)+"王后问题有"+str(n_solutions)+"种方案："
		for index,solution in enum_solutions:
			printSolution(index+1,solution)

# 调用方法：
# nqueens.show(nqueens.find())
# 或
# nqueens.show(nqueens.find(5))

将以上代码复制到nqueens.py中，把nqueens.py保存在“你的路径”下。

以4王后问题（默认）为例。首先设置系统路径，以便Python解析器能在该路径中找到相应模块：

>>> import sys
>>> sys.path.append("你的路径")

然后，导入模块，并采用默认值调用show方法：

>>> import nqueens
>>> nqueens.show(nqueens.find())
4王后问题有2种方案：

方案1 (1, 3, 0, 2)

. Q . . (1)
. . . Q (3)
Q . . . (0)
. . Q . (2)

方案2 (2, 0, 3, 1)

. . Q . (2)
Q . . . (0)
. . . Q (3)
. Q . . (1)

另外，如果不需要看图，可以直接调用find方法：

>>> list(nqueens.find())
[(1, 3, 0, 2), (2, 0, 3, 1)]
>>> list(nqueens.find(6))
[(1, 3, 5, 0, 2, 4), (2, 5, 1, 4, 0, 3), (3, 0, 4, 1, 5, 2), (4, 2, 0, 5, 3, 1)]

或者，为查看方便，可以使用pprint模块的pprint（pretty-print）方法：

>>> import pprint
>>> pprint.pprint(list(nqueens.find(5)))
[(0, 2, 4, 1, 3),
(0, 3, 1, 4, 2),
(1, 3, 0, 2, 4),
(1, 4, 2, 0, 3),
(2, 0, 3, 1, 4),
(2, 4, 1, 3, 0),
(3, 0, 2, 4, 1),
(3, 1, 4, 2, 0),
(4, 1, 3, 0, 2),
(4, 2, 0, 3, 1)]

如果王后多于6个（7王后问题有40种解决方案，8王后问题有92种解决方案），则可以只查看方案数量：

>>> len(list(nqueens.find(7)))
40
>>> len(list(nqueens.find(8)))
92
>>> len(list(nqueens.find(9)))
352
>>> len(list(nqueens.find(10)))
724
>>> len(list(nqueens.find(11)))
2680

注意：求解12个以上的王后时要小心。在俺的P4 2.4G电脑中，求解11王后问题，上面算法费时10秒。而12王后的解决方案是14200……，小心啊！
参见“目前最快的算法”。

]]> http://www.cn-cuckoo.com/2009/01/16/n-queens-in-python-284.html/feed 1 http://www.cn-cuckoo.com/2009/01/04/the-enhancement-of-closure-281.html http://www.cn-cuckoo.com/2009/01/04/the-enhancement-of-closure-281.html#comments Sun, 04 Jan 2009 01:54:04 +0000 为之漫笔 http://www.cn-cuckoo.com/2009/01/04/the-enhancement-of-closure-281.html Python也支持闭包，但在Python3.0以前，闭包不能访问外部函数中的局部变量。Python3.0为此引入了nonlocal关键字，从而完善了闭包访问外部变量的机制。

在Python2.6中，如果像下面这样定义函数：

>>> def outerFun():
    outerVar = 0
    def innerFun():
        outerVar += 1
	print outerVar
    return innerFun

然后，调用outerFun返回的闭包，会导致错误：

>>> f = outerFun()
>>> f()

Traceback (most recent call last):
  File "<pyshell#15>", line 1, in <module>
    f()
  File "<pyshell#12>", line 4, in innerFun
    outerVar += 1
UnboundLocalError: local variable 'outerVar' referenced before assignment

把错误消息“UnboundLocalError: local variable ‘outerVar’ referenced before assignment”翻译成中文，就是“未绑定局部变量：引用局部变量’outerVar’之前没有赋值”。啥意思呢？在内部函数innerFun中，outerVar被Python解释器看成是内部函数innerFun中的局部变量，并不是我们认为的外部（函数outerFun中的）变量。即在innerFun中，outerVar只是一个尚未赋值的变量——尽管与外部的outerVar同名，因此不能执行加法计算。Python3.0以前的版本提供了global关键字，通过这个关键字能够在函数内部引用并重新绑定（修改）全局变量：

>>> x = 1
>>> def c():
	global x
	x += 1
	print x

>>> c()
2

这里通过global关键字在函数c的局部作用域中引用了全局变量x，因此就可以重新绑定（修改）全局变量了。虽然能访问和修改全局变量，但还是不能解决闭包访问外部函数变量的问题。为此，Python3.0增加了一个新关键字——nonlocal，用于在嵌套函数中访问外部变量：

>>> def outerFun():
	outerVar = 0
	def innerFun():
		nonlocal outerVar	# 使用nonlocal引用外部函数变量
		outerVar += 1
		print(outerVar)	# 注意，print在Python3.0中是函数，不是语句
	return innerFun

>>> f = outerFun()
>>> f()
1
>>> f()
2

而且，此时的外部变量对于内部的函数而言是共享的：

>>> def outerFun():
	outerVar = 0
	def innerFun():
		nonlocal outerVar
		outerVar += 1
		print(outerVar)
	def innerFun2():
		nonlocal outerVar
		outerVar *= 2
		print(outerVar)
	return [innerFun,innerFun2] # 通过列表返回两个函数

>>> ff = outerFun()
>>> ff[0]()
1
>>> ff[1]()
2
>>> ff[1]()	# 连续调用两次innerFun2
4
>>> ff[0]()	# 结果表明，两个闭包共享同一个变量
5

关于这一点改进的详细内容，请参见PEP（Python Enhancement Proposals，Python改进建议）3104：Access to Names in Outer Scopes。

]]> http://www.cn-cuckoo.com/2009/01/04/the-enhancement-of-closure-281.html/feed 4 http://www.cn-cuckoo.com/2008/12/30/short-circuit-logic-and-conditional-operators-276.html http://www.cn-cuckoo.com/2008/12/30/short-circuit-logic-and-conditional-operators-276.html#comments Tue, 30 Dec 2008 06:01:20 +0000 为之漫笔 http://www.cn-cuckoo.com/2008/12/30/short-circuit-logic-and-conditional-operators-276.html 逻辑运算符包括逻辑与、逻辑或、逻辑非，英文分别对应：（logical）and、or、not。由于逻辑运算返回的是布尔值true（真）或false（假），因此逻辑运算符也叫布尔运算符。（英文operator在程序设计的语境下有两种译为：运算符、操作符。）

Python中的逻辑运算符有一个非常有意思的特性——“短路”，即不做无用功、选择最短路线。具体来说，逻辑运算中的短路表现在逻辑运算符只对有必要求值的表达式求值。例如，表达式x and y（x和y都有可能是表达式），只在x和y同时为真的情况下才会返回True。显然，如果x为假，那么就没有再对y求值的必要了——即使y为真，整个表达式仍然会返回False。因此，and运算符的行为就是：如果x为假，返回x；否则，返回y。

and运算符的这种行为就叫“短路逻辑”（或者懒惰求值）。可见，逻辑运算符的右运算数（如这里的y）有可能不会被求值——原因就是“短路”。

同样，or运算符也有短路行为。例如，对于表达式x or y，如果x是真，则返回x；否则，返回y。

设计短路逻辑有目的何在呢？主要是为了减少不必要的计算。但是，在短路逻辑的基础上，还可以实现一些巧妙的结构。例如：

name = raw_input('Enter name:') or '<unknow>'

这个赋值语句就利用逻辑运算符or实现了在用户输入为空的情况下为name设置默认值的操作。另外，利用短路逻辑还可以实现另一种运算符，即条件运算符，或者叫三元运算符：

b if a else c # 如果a为真，则返回b；否则，返回c

短路逻辑与条件运算符同样也存在于JavaScript中。即，x && y的行为是：如果x可以转换false，则返回x；否则，计算并返回y的值。x || y的行为是：如果x可以转换为true，则返回x；否则，计算并返回y的值。显示，如果&&、||运算符分别在x可转换为false、true的情况下，会执行短路操作——忽略右运算数y。

而利用or运算符的短路行为，JavaScript也实现了为变量赋默认值：

//如果name可以转换为false，则不能短路，必须对右运算符求值，从而实现赋默认值
var name = name || 'unprovided';

以及另一种表现形式的条件表达式——?:：

x > 0 ? x * y : -x * y

]]> http://www.cn-cuckoo.com/2008/12/30/short-circuit-logic-and-conditional-operators-276.html/feed 0 http://www.cn-cuckoo.com/2008/12/26/on-javascript-function-271.html http://www.cn-cuckoo.com/2008/12/26/on-javascript-function-271.html#comments Fri, 26 Dec 2008 01:57:45 +0000 为之漫笔 http://www.cn-cuckoo.com/2008/12/26/on-javascript-function-271.html JavaScript中的Function对象是函数，函数的用途分为3类：

1. 作为普通逻辑代码容器；
2. 作为对象方法；
3. 作为构造函数。

1.作为普通逻辑代码容器

function multiply(x, y){
    return x*y;
}

函数multiply封装了两位数的乘法运算公式：

var product = multiply(128,128); // product = 16384

创建函数实例的方式有3种。第一种是声明式，即像声明变量一样，将通过function(){}标识符创建的匿名函数直接赋值给变量，以该变量作为调用时的函数名称：

var multiply = function(x, y){
    return x*y;
}

第二种是定义式，即以function关键字后跟函数名称及(){}来直接定义命名函数，前面第一个multiply函数就是通过定义式创建的。

第三种是构造函数式，即通过new运算符调用构造函数Function来创建函数。这种方式极不常用，因此就不作介绍了。

在创建函数的3种方式中，声明式和定义式还存在细微的差别。比如下列代码中的函数采用声明式：

var example = function(){
    return 1;
}
example();

var example = function(){
    return 2;
}
example();

执行结果如下：
1
2

而如果采用定义式，即：

function example(){
     return 1;
}
example();

function example(){
    return 2;
}
example();

那么会得到另一种结果：
2
2

即，在采用定义式创建同名函数时，后创建的函数会覆盖先创建的函数。这种差别是由于JavaScript解释引擎的工作机制所导致的。JavaScript解释引擎在执行任何函数调用之前，首先会在全局作用域中注册以定义式创建的函数，然后再依次执行函数调用。由于注册函数时，后定义的函数重写了先定义的函数，因此无论调用语句位于何处，执行的都是后定义的函数。相反，对于声明式创建的函数，JavaScript解释引擎会像对待任何声明的变量一样，等到执行调用该变量的代码时才会对变量求值。由于JavaScript代码是从上到下顺序执行的，因此当执行第一个example()调用时，example函数的代码就是首先定义代码；而当执行第二个example()调用时，example函数的代码又变成了后来定义的代码。

2.作为对象方法

JavaScript在解析代码时，会为声明或定义的函数指定调用对象。所谓调用对象，就是函数的执行环境。如果函数体内有以关键字this声明的变量，则this引用的就是调用对象。

事实上，在普通的函数中，也存在调用对象，只不过这个调用对象是默认的全局window对象而已。例如：

var product = window.multiply(128,128); // product = 16384

这说明，默认情况下，在全局作用域中定义或声明的函数的调用对象就是window。

在面向对象编程中，通常将作为对象成员的函数称为方法。例如：

var dog = {};
dog.name = "heibao";
dog.age = "3 months";
dog.shout = function(){
    return "Hello, My name is "+ this.name + " and I am " + this.age + " old!";
}
dog.shout(); // "Hello, My name is heibao and I am 3 months old!"

有意思的是，对象也可以借用其他对象的方法：

var cat = {};
cat.name = "xiaohua";
cat.age = "2 years";
cat.greet = dog.shout;
cat.greet(); // "Hello, My name is xiaohua and I am 2 years old!"

另外，使用函数对象的call和apply方法，还可以动态指定函数或方法的调用对象：

dog.shout.call(cat); // "Hello, My name is xiaohua and I am 2 years old!"

或者

dog.shout.apply(cat); // "Hello, My name is xiaohua and I am 2 years old!"

3.作为构造函数

JavaScript是通过构造函数来模拟面向对象语言中的类的。例如：

function Animal(sort, character){
    this.sort = sort;
    this.character = character;
}

以Animal作为构造函数，就可以像下面这样创建一个新对象：

var dog = new Animal("mammal","four legs");

创建dog的对象的过程如下：首先，new运算符创建一个空对象（{}），然后以这个空对象为调用对象调用函数Animal，为这个空对象添加两个属性sort和character，接着，再将这个空对象的默认constructor属性修改为构造函数的名称（即Animal；空对象创建时默认的constructor属性值是Object），并且将空对象的__proto__属性设置为指向Animal.prototype——这就是所谓的对象初始化。最后，返回初始化完毕的对象。这里将返回的新对象赋值给了变量dog。

dog.sort; // mammal
dog.character; // four legs
dog.constructor; // Animal

聪明的读者结合前面介绍的内容，可能会认为使用new运算符调用构造函数创建对象的过程也可以像下面这样来实现：

var dog = {};
Animal.call(dog, "mammal","four legs");

表面上看，这两行代码与var dog = new Animal(“mammal”,”four legs”);是等价的，其实却不是。虽然通过指定函数的执行环境能够部分达到初始化对象的目的，例如空对象dog确实获得了sort和character这两个属性：

dog.sort; // mammal
dog.character; // four legs
dog.constructor; // Object —— 注意，没有修改dog对象默认的constructor属性

但是，最关键的是新创建的dog对象失去了通过Animal.prototype属性继承其他对象的能力。只要与前面采用new运算符调用构造函数创建对象的过程对比一下，就会发现，new运算符在初始化新对象期间，除了为新对象添加显式声明的属性外，还会对新对象进行了一番“暗箱操作”——即将新对象的constructor属性重写为Animal，将新对象的__proto__属性设置为指向Animal.prototype。虽然手工“初始化对象”也可以将dog.constructor重写为Animal，但根据ECMA262规范，对象的__proto__属性对开发人员是只读的，对它的设置只能在通过new运算符创建对象时由JavaScript解释引擎替我们完成。
JavaScript是基于原型继承的，如果不能正确设置对象的__proto__属性，那么就意味着默认的继承机制会失效：

Animal.prototype.greet = "Hi, good lucky!";
dog.greet; // undefined

事实上，在Firefox中，__proto__属性也是可写的：

Animal.prototype.greet = "Hi, good lucky!";
dog.__proto__ = Animal.prototype;
dog.greet; // Hi, good lucky!

但这样做只能在Firefox中行得通。考虑到在兼容多浏览器，必须依赖于new运算符，才能实现基于原型的继承。

]]> http://www.cn-cuckoo.com/2008/12/26/on-javascript-function-271.html/feed 15 http://www.cn-cuckoo.com/2008/12/24/shallow-or-deep-copy-and-pass-by-value-or-reference-270.html http://www.cn-cuckoo.com/2008/12/24/shallow-or-deep-copy-and-pass-by-value-or-reference-270.html#comments Wed, 24 Dec 2008 07:29:45 +0000 为之漫笔 http://www.cn-cuckoo.com/2008/12/24/shallow-or-deep-copy-and-pass-by-value-or-reference-270.html 这个标题念起来有点拗口，但却是理解数据结构的关键。标题中的4个术语，对应的英文分别是：shallow copy（注意，不是shadow copy）、deep copy、pass by value、pass by reference（或pass by address）。传址和传引用是一回事。

一门编程语言的核心是数据结构，粗略来讲，可以把数据结构分成不可变类型（immutable）和可变类型（mutable）。为什么这么分呢？这涉及到内存分配问题。对于不可变类型，只要分配有限的内存空间即可，而对于可变类型，理论上则要分配没有大小限制的空间。因此，这么分是出于合理利用系统资源的考虑。实际上，栈内存和堆内存分别用于保存不可变类型值和可变类型值。

什么是不可变类型？就是该值一旦赋予某个变量，就只属于某个变量，不能同属于其他变量。如：

var stringValue = "I'm immutable data structure, mean you can't modify me!";
var anotherStringValue = stringValue;
stringValue = "I have changed";

此时，anotherStringValue中保存的值会不会也变成“I have changed”？不会。因为

var anotherStringValue = stringValue;

照stringValue中保存的字符串的原样，复制一个字符串（相应地，在内存中分配一块新空间），并将该字符串赋给anotherStringValue。换句话说，这两个变量虽然保存的值相同，但它们的值并不在一块内存中。因此，修改任何一个变量，都不会影响另一个变量。即

stringValue = "I have changed";

只会影响stringValue的值。但是，确切来讲，stringValue = “I have changed”;并不是修改stringValue，而是创建了一个新字符串（相应地，在内存中分配一块新空间），然后让stringValue引用该字符串——更像是替换变量的值；原来的字符串呢？因为没有变量引用它，也就成为垃圾了（当然，垃圾所占用的内存会被回收）。

由此可见，赋值操作对于不变类型而言，传递的是内存中的值本身。那么，对于可变类型呢？当然，传递的是内存中值的引用（或者说地址），而且无论传递多少次，内存中始终都只有一份原始值——毕竟可变类型大小莫测，只保存一份原始值能最大限度节省内存空间。例如：

var objectValue = {1:1,'s':'string','innerObject':{'innerArray' : [1,2,3]}};
var anotherObjectValue = objectValue;
objectValue[1] = 100;
anotherObjectValue[1]; //100

不言自明，这里的anotherObjectValue通过赋值操作，从objectValue那里只获得了对原始对象（ {1:1,’s':’string’,'innerObject’:{‘innerArray’ : [1,2,3]}}）的引用，也就是该对象在内存中的地址，或者说“门牌号码”。因此，通过objectValue修改原始对象的第一个元素（objectValue[1] = 100;），结果同样会在anotherObjectValue[1]那里得到反映——因为这两个变量共享同一份原始值。

在JavaScript中，给函数传递参数是按照上述默认约定——即对不可变类型，传值；对可变类型，传址——进行的。如：

function example(str, obj){
……
}
example(stringValue,objectValue);

调用example函数时，第一个参数传递的是实际的字符串值，第二参数传递的是对象的引用（内存地址）。

在PHP中，定义函数时可以指定相应参数是传值还是传址——通常是传值。其实，这也很容易理解：假如函数要求为某个可变类型参数传值，而不是传址，那么也就意味着内存中会因此多出一份该类型值的副本。相应地，在函数中修改这份新副本，不会影响函数外的原副本。因为新旧副本在内存中就不是同一个地址。

说到这，也就引出了浅复制和深复制的概念。事实上，浅复制和深复制的区别恰恰在于复制可变类型时，是传值还是传址。如果是像往常一样传址（传引用），那么就是浅复制。如果是传值，那么就是深复制。浅复制和深复制到底有什么区别呢？以下面的Python代码为例：

>>> x = {'username': 'admin', 'machines': ['foo', 'bar', 'baz']}
>>> y = x.copy()
>>> y['username'] = 'mlh'
>>> y['machines'].remove('bar')
>>> y
{'username': 'mlh', 'machines': ['foo', 'baz']}
>>> x
{'username': 'admin', 'machines': ['foo', 'baz']}

调用字典x的copy方法返回一个新字典并赋值给y，新字典中带有与原字典相同的键－值对。注意，copy方法采用浅复制创建的新字典，与原字典有区别也有联系。区别体现在，对于原字典中不可变的值，如数字、字符串、元组等，会在新字典中重新生成一份新副本；因此，修改（实际上是替换，或者说是重新赋值）这些键的值（y['username'] = ‘mlh’）不会影响原字典。联系体现在，对于原字典中可变的值，如列表、字典，不会在新字典中生成新副本，而只复制值的引用，即新字典中相应的键保存的是引用，当然，原字典中相应的键保存的也是引用，而且这两个引用都指向同一块内存地址。这就是所谓的浅复制。因此，如果修改的是可变类型的值（y['machines'].remove(‘bar’)），就意味着修改了新、旧字典共享的值（即本例中的列表['foo', 'bar', 'baz']），因此一定会影响引用该值的原字典。

深复制则不然。深复制是实实在在地把原字典中所有的值全都照原样子重新创建一遍，无论是不变类型值，还是可变类型值。执行深复制后，内存中会存在两份完全一样的数据段，但分别处于不同内存空间中，即地址不同。而且，分别由不同变量（原字典、新字典）引用。因此，经过深复制后修改一个字典，不会影响另一个字典。Python的copy模块中的deepcopy函数可以实现深复制：

>>> from copy import deepcopy
>>> d = {}
>>> d['names'] = ['Alfred', 'Bertrand']
>>> c = d.copy()
>>> dc = deepcopy(d)
>>> d['names'].append('Clive')
>>> c
{'names': ['Alfred', 'Bertrand', 'Clive']}
>>> dc
{'names': ['Alfred', 'Bertrand']}

显然，修改深复制得到的新值不会影响原值；而修改浅复制得到的“新”值，在某种程度上仍然会影响原值。

]]> http://www.cn-cuckoo.com/2008/12/24/shallow-or-deep-copy-and-pass-by-value-or-reference-270.html/feed 11