Cat's Collection

让 JavaScript 轻松支持函数重载 (Part 2 - 实现)

noreply@blogger.com — Thu, 02 Jul 2009 07:28:00 GMT

noreply@blogger.com Thu, 02 Jul 2009 07:28:00 GMT http://xfruits.com/cathsfz/Collection/?clic=388985318&url=http%3A%2F%2Ffeedproxy.google.com%2F%7Er%2FCatChen%2FChinese%2F%7E3%2FBEQ8BYearII%2Fjavascript-part-2.html 上一篇文章里，我们设计了一套能在JavaScript中描述函数重载的方法，这套方法依赖于一个叫做Overload的静态类，现在我们就来看看如何实现这个静态类。

识别文本签名

我们先来回顾一下上一篇文章中提到的Overload用例：

 var extend = Overload
  .add("*, ...",
    function(target) { })
  .add("Boolean, *, ...",
    function(deep, target) { });

我们允许用户输入一个字符串，表示某一个重载的签名。在用户调用函数时，我们需要拿着用户输入的参数实例去跟签名上的每一个参数类型作比较，因此我们需要先把这个字符串转换为类型数组。也就是说，字符串"Boolean, Number, Array"应该转换为数组[Boolean, Number, Array]。

在进行转换之前，我们先要考虑处理两个特殊类型，就是代表任意类型的"*"，和代表任意数量的"..."。我们可以为它们定义两个专有的类型，以便在Overload内对它们做出特殊的兼容性处理：

Overload.Any = function() {};
Overload.More = function() {};

在有了这两个类型之后，字符串"Boolean, *, ..."就会被正确转换为数组[Boolean, Overload.Any, Overload.More]。由于Overload.Any和Overload.More都是函数，自然也都可以看做类型。

在这两个类型得到正确处理后，我们就可以开始编写识别文本签名的转换函数了：

if (signature.replace(/(^\s+|\s+$)/ig, "") == "") {
  signature = [];
} else {
  signature = signature.split(",");
  for (var i = 0; i < signature.length; i++) {
    var typeExpression =
      signature[i].replace(/(^\s+|\s+$)/ig, "");
    var type = null;
    if (typeExpression == "*") {
      type = Overload.Any;
    } else if (typeExpression == "...") {
      type = Overload.More;
    } else {
      type = eval("(" + typeExpression + ")");
    }
    signature[i] = type;
  }
}

我想这段代码相当容易理解，因此就不再解释了。我第一次写这段代码时忘记写上面的第一个if了，导致空白签名字符串""无法被正确识别为空白签名数组[]，幸好我的unit test代码第一时间发现了这个缺陷。看来编写unit test代码还是十分重要的。

匹配函数签名

在我们得到函数签名的类型数组后，我们就可以用它和输入参数的实例数组做匹配了，以此找出正确的重载。在讨论具体如何匹配函数签名以前，我们先来看看C#或VB.NET这样的语言是如何处理函数重载匹配的。一般语言进行函数重载匹配的流程都是这样子的：

参数个数 - 参数个数不对的重载会被排除掉
参数类型 - 参数类型无法隐式转换为签名类型的会被排除掉
匹配个数 - 排除完毕后，剩下匹配的签名个数不同处理方法也不同
- 0个匹配 - 没有命中的匹配
- 1个匹配 - 这个就是命中的匹配
- 2个或以上的匹配 - 如果能在这些匹配中找出一个最佳匹配，那就命中最佳匹配；否则不命中任何匹配

在这一节里面，我们先处理流程中的前两个步骤，把参数个数或参数类型不一致的签名去掉：

var matchSignature = function(argumentsArray, signature) {
  if (argumentsArray.length < signature.length) {
    return false;
  } else if (argumentsArray.length > signature.length
      && !signature.more) {
        return false;
  }
  for (var i = 0; i < signature.length; i++) {
    if (!(signature[i] == Overload.Any
      || argumentsArray[i] instanceof signature[i]
      || argumentsArray[i].constructor
        == signature[i])) {
          return false;
    }
  }
  return true;
};

为了作长度对比，我们需要在这个函数外对表示任何参数个数的"..."作一下特殊处理：

if (signature[signature.length - 1] == Overload.More) {
  signature.length = signature.length - 1;
  signature.more = true;
}

这一段代码将会整合到第一节的转换函数末端，以便matchSignature函数能够轻易判断出参数与签名是否匹配。在最理想的情况下，我们对输入参数类型匹配到0个或1个重载，这样我们很容易就判断出命中哪个重载了。但如果有2个或以上的重载匹配，那么我们就要从中挑选一个最优的了，这正是下一节要讨论的内容。

处理多重匹配

关于C#是如何从多重匹配中选出较为匹配的重载，可以看C# Language Specification中的有关章节。我觉得通过三个简单的例子就能说明问题：

 long Sum(int x, int y) { return x + y; }
 long Sum(long x, long y) { return x + y; }
Sum(0, 1);

由于0和1这两个参数会被编译器理解为int类型，对于第1个重载它们都不用进行类型转换，都与第2个重载它们都要进行类型转换，因此第1个重载较优。

 long Sum(int x, long y) { return x + y; }
 long Sum(long x, int y) { return x + y; }
Sum(0, 1);

在第1个参数上，第1个重载较优；在第2个参数上，第2个重载较优。在这种情况下，任何一个重载都不优于另一个，找不到较优重载编译器就报错。

 long Sum(int x, int y) { return x + y; }
 long Sum(int x, long y) { return x + y; }
 long Sum(long x, int y) { return x + y; }
Sum(0, 1);

在第1个参数上，第1个重载优于第3个重载，于第2个重载无异；在第2个参数上，第1个重载优于第2个重载，于第3个重载无异。尽管第2个重载于第3个重载分不出个优劣来，但我们可以确定第1个重载比它们都要好，因此编译器选择了第1个重载。

假设我们有一个overloadComparator的比较函数，可以比较任意两个签名之间的优劣，我们需要对签名仅仅两两比较，以找出最优重载吗？事实上是不需要的，我们可以利用Array的sort方法，让它调用overloadComparator进行排序，排序后再验证前两名的关系就可以了——如果并列，则不命中任何一个；如果有先后之分，则命中第一个。

具体的overloadComparator代码就不在这里给出了，它依赖于另一个名为inheritanceComparator的比较函数来对比两个签名的参数类型哪一个更贴实际传入的参数类型，里面用到了一种比较巧妙的方法来判断两个类型是否为继承关系，以及是谁继承自谁。

小结

现在我们有了一个JavaScript的函数重载库，完整代码请看这里：函数重载库Overload。希望这个库能有效帮助大家提升JavaScript代码的可读性，降低大型Ajax项目的维护成本。如果大家希望将来继续读到类似的JavaScript开发模式相关的文章，不妨考虑订阅我的博客：

Cat in Chinese (feed)
Cat in dotNET (feed)

]]>

让 JavaScript 轻松支持函数重载 (Part 1 - 设计)

noreply@blogger.com — Thu, 02 Jul 2009 01:16:00 GMT

noreply@blogger.com Thu, 02 Jul 2009 01:16:00 GMT http://xfruits.com/cathsfz/Collection/?clic=388985319&url=http%3A%2F%2Ffeedproxy.google.com%2F%7Er%2FCatChen%2FChinese%2F%7E3%2Fl_8SobnbiaY%2Fjavascript-part-1.html JavaScript支持重载吗？JavaScript支持函数重载吗？可以说不支持，也可以说支持。说不支持，是因为JavaScript不能好像其它原生支持函数重载的语言一样，直接写多个同名函数，让编译器来判断某个调用对应的是哪一个重载。说支持，是因为JavaScript函数对参数列表不作任何限制，可以在函数内部模拟对函数重载的支持。

实际上，在很多著名的开源库当中，我们都可以看到函数内部模拟重载支持的设计。例如说jQuery的jQuery.extend方法，就是通过参数类型判断出可选参数是否存在，如果不存在的话就对参数进行移位以确保后面的逻辑正确运行。我相信很多人在写JavaScript时也写过类似的代码，以求为功能丰富的函数提供一个（或多个）简单的调用入口。

不过做种做法一个根本的问题，那就是违反了DRY原则。每个支持重载的函数内部都多出来一段代码，用于根据参数个数和参数类型处理重载，这些代码暗含着重复的逻辑，写出来却又每一段都不一样。此外，这些代码要维护起来也不容易，因为阅读代码时你并不能一眼看出函数支持的几种重载方式是什么，要对重载做出维护自然也困难。

描述重载入口的DSL

我希望能够在JavaScript中以一种简单的方式来描述重载入口。最好就如同在其它语言中一样，使用函数签名来区分重载入口，因为我认为函数签名就是这方面最好的DSL。我假想中最符合JavaScript语法的重载入口描述DSL应该是这样子的：

var sum = new Overload();
sum.add("Number, Number",
  function(x, y) { return x + y; });
sum.add("Number, Number, Number",
  function(x, y, z) { return x + y + z; });

在描述好重载入口与对应函数体后，对sum函数的调用应该是这样子的：

sum(1, 2);
sum(1, 2, 3);

上述代码在我看来非常清晰，也非常容易维护——你可以一眼看得出重载入口的签名，并且要修改或者增加重载入口都是很容易的事情。但是我们遇到了一个问题，那就是JavaScript里面的函数是不能new出来的，通过new Overload()获得的对象一定不能被调用，为此我们只能把Overload做成一个静态类，静态方法返回的是Function实例：

var sum = Overload
  .add("Number, Number",
    function(x, y) { return x + y; })
  .add("Number, Number, Number",
    function(x, y, z) { return x + y + z; });

必要的重载入口支持

想象一下，有哪些常见的JavaScript函数入口是用上述DSL无法描述的？我所知道的有两种：

任意类型参数

假想我们要写一个each函数，对于Array就迭代它的下标，对于其它类型就迭代它的所有成员，这两个函数入口的参数列表如何声明？如果用C#，我们会如此描述两个函数入口：

void Each(IEnumerable iterator) { }
void Each(object iterator) { }

然而在JavaScript当中，Object不是一切类型的基类，(100) instanceof Object的结果为false，所以我们不能用Object来指代任意类型，必须引入一个新的符号来指代任意类型。考虑到这个符号不应该与任何可能存在的类名冲突，所以我选择了用"*"来表示任意类型。上述C#代码对应的JavaScript应该是这样子的：

var each = Overload
  .add("Array",
    function(array) { })
  .add("*",
    function(object) { });

任意数量参数

在JavaScript的函数里面，要求支持任意数量参数是很常见的需求，相信使用率比C#里面的params关键字要多得多。在我们之前制定的规则当中，这也无法描述的，因此我们要引入一个不和类名冲突的符号来表示C#中的params。我选择了用"..."表示params，意思是这里出现任意多个参数都是可以接受的。让我们看看jQuery.extend的重载应该如何描述：

 var extend = Overload
  .add("*, ...",
    function(target) { })
  .add("Boolean, *, ...",
    function(deep, target) { });

小结

在这篇文章当中，我们尝试设计出一种适用于JavaScript且易读易维护的函数重载写法。在下一篇文章当中，我们将会尝试编写Overload类，以实现这一设计。如果你不希望错过的话，欢迎订阅：

Cat in Chinese (feed)
Cat in dotNET (feed)

]]>

写个 JavaScript 异步调用框架 (Part 6 - 实例 & 模式)

noreply@blogger.com — Wed, 01 Jul 2009 13:17:00 GMT

noreply@blogger.com Wed, 01 Jul 2009 13:17:00 GMT http://xfruits.com/cathsfz/Collection/?clic=388985320&url=http%3A%2F%2Ffeedproxy.google.com%2F%7Er%2FCatChen%2FChinese%2F%7E3%2F4YwEgAzOKZQ%2Fjavascript-part-6.html 问题 & 场景、用例设计、代码实现、链式调用、链式实现），现在是时候让我们看一下在各种常见开发情景中如何使用它了。

封装Ajax

设计Async.Operation的最初目的就是解决Ajax调用需要传递callback参数的问题，为此我们先把Ajax请求封装为Async.Operation。我在这里使用的是jQuery，当然无论你用什么基础库，在使用Async.Operation时都可以做这种简单的封装。

var Ajax = {};

Ajax.get = function(url, data) {
  var operation = new Async.Operation();
  $.get(url, data, function(result) {
    operation.yield(result);
  }, "json");
  return operation;
};

Ajax.post = function(url, data) {
  var operation = new Async.Operation();
  $.post(url, data, function(result) {
    operation.yield(result);
  }, "json");
  return operation;
};

在我所调用的服务器端API中，只需要GET和POST，且数据都为JSON，所以我就直接把jQuery提供的其它Ajax选项屏蔽掉了，并设置数据类型为JSON。在你的项目当中，也可以用类似的方式将Ajax封装为若干仅仅返回Async.Operation的方法，将jQuery提供的选项都封装在Ajax这一层内，不再向上层暴露这些选项。

调用Ajax

把Ajax封装好后，我们就可以开始专心写业务逻辑了。

假设我们有一个Friend对象，它的get方法用于返回单个好友对象，而getAll方法用于返回所有好友对象。于此对应的是两个服务器端API，friend接口会返回单个好友JSON，而friendlist接口会返回所有好友名称组成的JSON。

首先我们看看较为基础的get方法怎么写：

function get(name) {
  return Ajax.get("/friend",
    "name=" + encodeURIComponent(name));
}

就这么简单？对的，假如服务器端API返回的JSON结构正好就是你要的好友对象结构的话。如果JSON结构和好友对象结构是异构的，或许你还要加点代码来把JSON映射为对象：

function get(name) {
  var operation = new Async.Operation()
  Ajax.get("/friend", "name=" + encodeURIComponent(name))
    .addCallback(function(json) {
      operation.yield(createFriendFromJson(json));
    });
  return operation;
}

Ajax队列

接下来我们要编写的是getAll方法。因为friendlist接口只返回好友名称列表，因此在取得这份列表后我们还要逐一调用get方法获取具体的好友对象。考虑到在同时进行多个friend接口调用可能触发服务器的防攻击策略，导致被关小黑屋一段时间，所以对friend接口的调用必须排队。

function getAll(){
  var operation = new Async.Operation();
  var friends = [];
  var chain = Async.chain();
  Ajax.get("/friendlist", "")
    .addCallback(function(json) {
      for (var i = 0; i < json.length; i++) {
        chain.next(function() {
          return get(json.shift())
            .addCallback(function(friend) {
              friends.push(friend);
            });
        });
      }
      chain
        .next(function() { operation.yield(friends); })
        .go();
    })
  return operation;
}

在这里，我们假设friendlist接口返回的JSON就是一个Array，在获取到这个Array后构造一个等长的异步调用队列，其中每一个调用的逻辑都是一样的——取出Array中首个好友的名称，用get方法获取对应的好友对象，再将好友对象放入另一个Array中。在调用队列的末端，我们再追加了一个调用，用于返回保存好友对象的Array。

在这个例子当中，我们没有利用调用队列会把上一个函数的结果传递给下一个函数的特性，不过也足够展示调用队列的用途了——让多个底层为Ajax请求的异步操作按照固定的顺序阻塞式执行。

由于底层异步函数返回的就是Async.Operation，你可以直接把它传递给next方法，也可以用匿名函数包装后传递给next方法，而匿名函数内部只需要一个return。

延时函数

在上面的例子中，使用队列是为了避免触发服务器的防攻击策略，但有时候这还是不够的。例如说，服务器要求两个请求之间至少间隔500毫秒，否则就认为是攻击，那么我们就要在队列里面插入这个间隔了。

在原本next方法调用的匿名函数中手动加入setTimeout是一个办法，但为什么我们不写一个辅助函数来解决这类问题呢？让我们来写一个辅助方法并让它和Async.Operation无缝结合起来。

Async.wait = function(delay, context) {
  var operation = new Async.Operation();
  setTimeout(function() {
    operation.yield(context);
  }, delay);
  return operation;
};

Async.Operation.prototype.wait = function(delay, context) {
  this.next(function(context) {
    return Async.wait(delay, context);
  });
}

在有了这个辅助方法后，我们就可以在上述getAll方法中轻松实现在每个Ajax请求之间间隔500毫秒。在for循环内的加上对wait的调用就可以了。

for (var i = 0; i < json.length; i++) {
  chain
    .wait(500)
    .next(function() {
      return get(json.shift())
        .addCallback(function(friend) {
          friends.push(friend);
        });
  });
}

小结

通过一些简单的例子，我们了解到了Async.Operation常见的使用方式，以及在有需要的时候如何扩展它的功能。希望Async.Operation能够有效帮助大家提高Ajax应用的代码可读性。

最后，如果大家希望将来继续读到类似的JavaScript开发模式相关的文章，不妨考虑订阅我的博客：

Cat in Chinese (feed)
Cat in dotNET (feed)

]]>

写个 JavaScript 异步调用框架 (Part 5 - 链式实现)

noreply@blogger.com — Tue, 30 Jun 2009 15:33:00 GMT

noreply@blogger.com Tue, 30 Jun 2009 15:33:00 GMT http://xfruits.com/cathsfz/Collection/?clic=388985321&url=http%3A%2F%2Ffeedproxy.google.com%2F%7Er%2FCatChen%2FChinese%2F%7E3%2F1MrEFik6yUo%2Fjavascript-part-5.html 调用入口链式调用存在Async.go方法和Async.chain方法两个入口，这两个入口本质上是一致的，只是Async.chain方法在调用时先不提供初始参数，而Async.go方法在调用时提供了初始参数并启动异步调用链。

Async.chain = function() {
  var chain = new Async.Operation({ chain: true });
  return chain;
};

Async.go = function(initialArgument) {
  return Async.chain().go(initialArgument);
}

在这里我们可以看到，链式调用本身也是一个Async.Operation，链式调用所需的go方法和next方法都是在Async.Operation上面做的扩展，并且这个扩展不会很难，这将在下一小节说明。

扩展方法

我们都知道，通过addCallback方法添加的回调函数是会被逐一执行的，至少同步函数如此，因此我们可以用Async.Operation的这一特性来维护异步调用队列，前提是我们为它加上对异步调用进行队列的支持。

对于异步调用进行队列的支持，我们稍后再来处理，首先我们利用现成的addCallback方法和yield方法扩展出go方法和next方法。

this.go = function(initialArgument) {
  return this.yield(initialArgument);
}

this.next = function(nextFunction) {
  return this.addCallback(nextFunction);
};

实际上，go方法和next方法直接调用的正是yield方法和addCallback方法。go方法的语义与yield方法一样，传递一个参数给Async.Operation实例，并且启动调用队列。同时，next方法的语义和addCallback方法，添加一个调用到队列的末端。

异步队列

如何才能让原本仅支持同步的队列变得也支持异步？这需要检测队列中的每一个调用的返回，如果返回类型为Async.Operation，我们知道是异步调用，从而使用特殊的方法等它执行完后再执行下去。

callbackResult = callback(self.result);
self.result = callbackResult;
if (callbackResult && callbackResult instanceof Async.Operation) {
  innerChain = Async.chain();
  while (callbackQueue.length > 0) {
    innerChain.next(callbackQueue.shift());
  }
  innerChain.next(function(result) {
    self.result = result;
    self.state = "completed";
    self.completed = true;
    return result;
  });
  callbackResult.addCallback(function(result) {
    self.result = result;
    innerChain.go(result);
  });
}

如果调用返回了一个Async.Operation实例，我们就利用它自身的addCallback方法帮我们执行队列中余下的调用。准确来说，是我们构造了一个新的调用链，把队列余下的调用都转移到新的调用链上，然后让当前异步调用在回调中启动这个新的调用链。

此外还有一些地方我们需要略作修改，以兼容新的异步调用队列的。例如result、state、completed的状态变更，在链式调用中是有所不同的。

小结

我们在原有的Async.Operation上略作修改，使得它支持异步调用队列，完整的代码看这里：支持链式调用的异步调用框架Async.Operation。

现在我们已经拥有了一个功能强大的Async.Operation，接下来我们就要看看如何将它投入到更多常见的使用模式中去，如果你不希望错过相关讨论的话，欢迎订阅我的博客：

Cat in Chinese (feed)
Cat in dotNET (feed)

]]>

写个 JavaScript 异步调用框架 (Part 4 - 链式调用)

noreply@blogger.com — Fri, 08 May 2009 07:29:00 GMT

noreply@blogger.com Fri, 08 May 2009 07:29:00 GMT http://xfruits.com/cathsfz/Collection/?clic=388985323&url=http%3A%2F%2Ffeedproxy.google.com%2F%7Er%2FCatChen%2FChinese%2F%7E3%2FlYHMXSEMJJU%2Fjavascript-part-4.html
现实开发中，要按顺序执行一系列的同步异步操作又是很常见的。还是用百度Hi网页版中的例子，我们先要异步获取联系人列表，然后再异步获取每一个联系人的具体信息，而且后者是分页获取的，每次请求发送10个联系人的名称然后取回对应的具体信息。这就是多个需要顺序执行的异步请求。

为此，我们需要设计一种新的操作方式来优化代码可读性，让顺序异步操作代码看起来和传统的顺序同步操作代码一样优雅。

传统做法

大多数程序员都能够很好的理解顺序执行的代码，例如这样子的：

var firstResult = firstOperation(initialArgument);
var secondResult = secondOperation(firstResult);
var finalResult = thirdOperation(secondResult);
alert(finalResult);

其中先执行的函数为后执行的函数提供所需的数据。然而使用我们的异步调用框架后，同样的逻辑必须变成这样子：

firstAsyncOperation(initialArgument)
  .addCallback(function(firstResult) {
    secondAsyncOperation(firstResult)
      .addCallback(function(secondResult) {
        thirdAsyncOperation(secondResult)
          .addCallback(function(finalResult) {
            alert(finalResult);
        });
    });
});

链式写法

我认为上面的代码实在是太不美观了，并且希望能够改造为jQuery风格的链式写法。为此，我们先构造一个用例：

Async.go(initialArgument)
  .next(firstAsyncOperation)
  .next(secondAsyncOperation)
  .next(thirdAsyncOperation)
  .next(function(finalResult) { alert(finalResult); })

在这个用例当中，我们在go传入初始化数据，然后每一个next后面传入一个数据处理函数，这些处理函数按顺序对数据进行处理。

同步并存

上面的用例调用到的全部都是异步函数，不过我们最好能够兼容同步函数，让使用者无需关心函数的具体实现，也能使用这项功能。为此我们再写一个这样的用例：

Async.go(0)
  .next(function(i) { alert(i); return i + 1; })
  .next(function(i) {
    alert(i);
    var operation = new Async.Operation();
    setTimeout(function() { operation.yield(i + 1); }, 1000);
    return operation;
  })
  .next(function(i) { alert(i); return i + 1; })
  .next(function(i) { alert(i); return i; });

在上述用例中，我们期待能够看到0, 1, 2, 3的提示信息序列，并且1和2之间间隔为1000毫秒。

异步本质

一个链式调用，本质上也是一个异步调用，所以它返回的也是一个Operation实例。这个实例自然也有result、state和completed这几个字段，并且当整个链式调用完成时，result等于最后一个调用返回的结果，而completed自然是等于true。

我们可以扩展一下上一个用例，得到如下用例代码：

var chainOperation = Async.go(0)
  .next(function(i) { alert(i); return i + 1; })
  .next(function(i) {
    alert(i);
    var operation = new Async.Operation();
    setTimeout(function() { operation.yield(i + 1); }, 1000);
    return operation;
  })
  .next(function(i) { alert(i); return i + 1; })
  .next(function(i) { alert(i); return i; });

setTiemout(function() { alert(chainOperation.result; }, 2000);

把链式调用的返回保存下来，在链式调用完成时，它的result应该与最后一个操作的返回一致。在上述用例中，也就是3。

调用时机

尽管我们提供了一种链式调用方式，但是用户不一定会按照这种固定的方式来调用，所以我们仍然要考虑兼容用户的各种可能用法，例如说异步地用next往调用链添加操作：

var chainOperation = Async.go(0);
chainOperation.next(function(i) { alert(i); return i + 1; });
setTimeout(function() {
  chainOperation.next(function(i) {
    alert(i);
    var operation = new Async.Operation();
    setTimeout(function() { operation.yield(i + 1); }, 2000);
    return operation;
  })
}, 1000);
setTimeout(function() {
  chainOperation.next(function(i) { alert(i); return i + 1; });
}, 2000);

在这个用例当中，用户每隔1000毫秒添加一个操作，而其中第二个操作耗时2000毫秒。也就是说，添加第三个操作时第二个操作还没返回。作为一个健壮的框架，必须要能兼容这样的使用方式。

此外我们还要考虑，用户可能想要先构造调用链，然后再执行调用链。这时候用户就会先使用next方法添加操作，再使用go方法执行。

var chainOperation = Async
  .chain(function(i) { alert(i); return i + 1; })
  .next(function(i) {
    alert(i);
    var operation = new Async.Operation();
    setTimeout(function() { operation.yield(i + 1); }, 2000);
    return operation;
  })
  .go(0)
setTimeout(function() {
  chainOperation.next(function(i) { alert(i); return i + 1; })
}, 1000);

在上述用例中，用户通过chain和next添加了头同步操作和异步操作各一个，然后用go执行调用链，在调用链执行完毕之前又用next异步追加了一个操作。一个健壮的框架，在这样的用例当中应该能够如同用户所期望的那样提示0, 1, 2。

小结

针对链式调用的需求，我们设计了如此多的用例，包括各种奇怪的异步调用方式。最终如何实现这样的功能呢？如果你想知道的话，欢迎订阅我的博客：

Cat in Chinese (feed)
Cat in dotNET (feed)

]]>

写个 JavaScript 异步调用框架 (Part 3 - 代码实现)

noreply@blogger.com — Thu, 07 May 2009 06:51:00 GMT

noreply@blogger.com Thu, 07 May 2009 06:51:00 GMT http://xfruits.com/cathsfz/Collection/?clic=388985324&url=http%3A%2F%2Ffeedproxy.google.com%2F%7Er%2FCatChen%2FChinese%2F%7E3%2FpXr-aOpgf5s%2Fjavascript-part-3.html 类结构首先我们来搭一个架子，把需要用到的似有变量都列出来。我们需要一个数组，来保存回调函数列表；需要一个标志位，来表示异步操作是否已完成；还可以学IAsyncResult，加一个state，允许异步操作的实现者对外暴露自定义的执行状态；最后加一个变量保存异步操作结果。

var Cat = {};

Async = {
  Operation: {
    var callbackQueue = [];
    this.result = undefined;
    this.state = "waiting";
    this.completed = false;
  }
}

addCallback方法

接下来，我们要实现addCallback方法，它的工作职责很简单，就是把回调函数放到callbackQueue中。此外，如果此时completed为true，说明异步操作已经yield过了，则立即调用此回调。

this.yield = function(callback) {
  callbackQueue.push(callback);
  if (this.completed) {
    this.yield(this.result);
  }
  return this;
}

我们假设yield方法会把callbackQueue中的回调函数逐个取出来然后调用，因此如果compeleted为true，则使用已有的result再调用一次yield就可以了，这样yield自然会调用这次添加到callbackQueue的回调函数。

至于最后的return this;，只是为了方便jQuery风格的链式写法，可以通过点号分隔连续添加多个回调函数：

asyncOperation(argument)
  .addCallback(firstCallback)
  .addCallback(secondCallback);

yield方法

最后，我们要实现yield方法。它需要将callbackQueue中的回调函数逐个取出来，然后都调用一遍，并且保证这个操作是异步吧。

this.yield = function(result) {
  var self = this;
  setTimeout(function() {
    self.result = result;
    self.state = "completed";
    self.completed = true;
    while (callbackQueue.length > 0) {
      var callback = callbackQueue.shift();
      callback(self.result);
    }
  }, 1);
  return this;
}

通过使用setTimeout，我们确保了yield的实际操作是异步进行的。然后我们把用户传入yield的结果及相关状态更新到对象属性之上，最后遍历callbackQueue调用所有的回调函数。

小结

这样我们就做好了一个简单的JavaScript异步调用框架，完整的代码可以看这里：异步调用框架Async.Operation。

这个框架能够很好的解决调用栈中出现同步异步操作并存的情况，假设所有函数都返回Async.Operation，框架的使用者可以使用一种统一的模式来编写代码，处理函数返回，而无需关心这个函数实际上是同步返回了还是异步返回了。

对于串行调用多个异步函数的情况，我们现在可以用嵌套addCallback的方式来书写，但随着嵌套层数的增多，代码会变得越来越不美观：

firstAsyncOperation().addCallback(function() {
  secondAsyncOperation().addCallback(function() {
    thirdAsyncOperation().addCallback(function() {
      finalSyncOperation();
    });
  });
});

我们能否把嵌套形式改为jQuery风格的链式写法呢？这是我们接下来要思考的问题，如果你不希望错过相关讨论的话，欢迎订阅我的博客：

Cat in Chinese (feed)
Cat in dotNET (feed)

]]>

写个 JavaScript 异步调用框架 (Part 2 - 用例设计)

noreply@blogger.com — Thu, 01 Jan 1970 00:00:00 GMT

noreply@blogger.com Thu, 01 Jan 1970 00:00:00 GMT http://xfruits.com/cathsfz/Collection/?clic=388985325&url=http%3A%2F%2Ffeedproxy.google.com%2F%7Er%2FCatChen%2FChinese%2F%7E3%2FmRzM2pWFSwU%2Fjavascript-part-2.html 传递回调我们首先要考虑的一个问题是，如何传递回调入口。在最传统的XHR调用当中，回调函数会被作为最后一个参数传递给异步函数：

function asyncOperation(argument, callback)

在参数相当多的时候，我们可以把参数放到一个JSON里面，这样参数就如同具名参数一样，可以通过参数名选择性的传递参数，不传递的参数相当于使用默认值。这是从Prototype开始就流行起来的做法：

function asyncOperation(argument, options)

然而这两种做法都有一个坏处，就是把同步函数改为异步函数（或同步异步混合函数）时，必须显式地修改函数签名，在最后增加一个（或多个）参数。

由于在调用栈的底层引入异步函数对我们来说太常见了，为此可能要更改一大堆上层调用函数签名的成本实在是太高了，所以我们还是想一个不用修改函数签名的做法吧。

在这里我参考了.NET Framework的IAsyncResult设计，把异步操作有关的一切信息集中到一个对象上来，从而避免了对函数签名的修改。在此，我们假设一个异步函数的调用原型是这样子的：

function asyncOperation(argument) {
  operation = new Async.Operation();
  setTimeout(function() { operation.yield("hello world"); }, 1000);
  return operation;
}

在这段代码里，我们返回了一个Operation对象，用于将来传递回调函数。同时，我们通过setTimeout模拟了异步返回结果，而具体的返回方式就是yield方法。

接着，我们还要设计传递回调函数的方法。由于我们不能好像C#那样重载+=运算符，所以只能用函数传递回调函数：

var operation = asyncOperation(argument);
operation.addCallback(function(result) { alert(result); });

在C#里面做这样的设计是不安全的，因为在异步操作可能在添加回调之前就完成了。但在JavaScript里面这样写是安全的，因为JavaScript是单线程的，紧接着asyncOperation的同步addCallback必然先执行，asyncOperation中的异步yield必然后执行。

调用顺序

可能有人要问，如果用户使用同步的方式来调用yield，这时候执行顺序不一样依赖于yield的实现吗？没错，不过yeild是在框架中一次性实现的，我们只要把它做成异步的就可以了，这样即使对它进行同步调用，也不影响执行顺序：

function psudoAsyncOperation(argument) {
  operation = new Async.Operation();
  operation.yield("hello world");
  return operation;
}
var operation = asyncOperation(argument);
operation.addCallback(function(result) { alert(result); });

就算把代码写成这个样子，我们也能确保addCallback先于yield的实际逻辑执行。

事后回调

有时候，框架的使用者可能真的写出了先yield后addCallback的代码。这时候，我认为必须保证addCallback中添加的回调函数会被立即触发。因为用户添加这个回调函数，意味着他期望当异步操作有结果时通知这个回调函数，而这与添加回调函数时异步操作是否完成无关。为此，我们再添加一个用例：

function psudoAsyncOperation(argument) {
  operation = new Async.Operation();
  operation.yield("hello world");
  return operation;
}
var operation = asyncOperation(argument);
setTimeout(function() {
  operation.addCallback(function(result) { alert(result); });
}, 1000);

小结

到这里，我们就设计好了一个名为Async.Operation的异步操作对象，具体如何实现关键的yield方法和addCallback方法将在下一篇文章讲述如果。你不希望错过的话，欢迎订阅我的博客：

Cat in Chinese (feed)
Cat in dotNET (feed)

]]>

豆瓣的『请勿联系我们』页面

noreply@blogger.com — Sun, 12 Apr 2009 06:13:00 GMT

noreply@blogger.com Sun, 12 Apr 2009 06:13:00 GMT http://xfruits.com/cathsfz/Collection/?clic=388985327&url=http%3A%2F%2Ffeedproxy.google.com%2F%7Er%2FCatChen%2FChinese%2F%7E3%2FKOS2BTszuC8%2Fblog-post.html Don't Make Me Think的基本思想是让用户凭直觉都能找到他们需要的东西，那么豆瓣的联系我们页面就做了一个绝佳的例子，或者说是绝佳的反例，这视乎你怎么看这个问题。

联系我们

还是用Don't Make Me Think里面的比喻，在网站上寻找内容就如同在商店里寻找商品，最理想的情况自然是一抬头就看到导向牌说你想要的商品在哪一行的哪一个货架上。在这方面，豆瓣的联系我们页面是做得非常好的，通过清晰的分类说明了不同情况应该联系不同的邮件地址。就如同清晰的导向牌一样，你能够径直走到摆满你想要的商品的货架前。

接着搞笑的事情发生了，你发现这个货架其实是个锁上了的玻璃橱窗，上面有一个牌子写着『如需取商品，请找售货员』。这时候你会想，这不是一家便利店吗？还是有什么我理解错了？这就是豆瓣的联系我们页面给我的感觉，因为那些邮件地址不仅仅不可以点击，还刻意设计为图片使得不能够复制。

如果你跟我一样，习惯有什么想法直接点击网站的联系我们链接，你应该明白常见的联系我们页面是怎样的。网站往往为了保护邮件地址免受垃圾邮件骚扰而不会直接公开邮件地址，为此他们会设计一个专门的表单让你提交反馈信息并留下你的联系方式。随后如果你提交的信息确实有价值，网站会主动联系你，之后的通信就都可以在邮件里进行了。

这是用户对联系我们页面的印象，就如同对便利店的印象一样——自由地在货架前选取商品然后再去埋单。然而豆瓣选择了在便利店里放置锁上了的玻璃橱窗，这就会导致用户迷失方向，他们会想『这是一家便利店吗？还是说我走进了一家「珠宝便利店」？那算了，我就不买了，或者到附近的便利店买吧。』

帮助中心

这个联系我们页面上面，只有一个链接可点击（除去全局链接外），那就是帮助中心链接了。用户找不到熟悉的反馈表单，自然会凭直觉沿着链接点击下去，而这个链接是唯一的选择。进去之后仍然是一个清晰分类的页面，不过就是没有用户需要的反馈表单。或许用户会浏览一下分类列表，然后发现他要反馈的问题不能算是严格属于某个特定分类。这时候就如同顾客根据导向牌走进了唯一一行他认为正确的货架，但是货架上的分类标识他想要的东西不属于这里的任何一个货架。

这又是一个让用户感受挫折的地方，然而这还不是最后一个。如果用户坚信反馈表单存在，就如同顾客坚信这是每一家便利店都卖的东西一样，那么他们自然会继续找下去。在点击进入任何一个分类链接后，用户会看到又一个清晰的Q&A列表，然后他必须再一次经历同样的挫折，最后才在一个不显眼的地方找到他想要的东西，一个写着『没搞定？给管理员捎个话』的链接。

为什么说这个链接不显眼？因为特殊链接往往会放在页头、页脚或侧栏这类视觉上与内容分离开来的区域，而这个链接放在问题列表和解答列表之间的狭缝。这处的留白本应只用于表示两个列表互相对立的关系，在两个块区元素之间插入一个行内元素只会让人以为那也是分隔符的一部分而已。

小结

这就是为什么我说豆瓣的『联系我们』页面应该叫做『请勿联系我们』页面。它在向用户传达一种意思，那就是『我们豆瓣是刻意增加你联系我们的成本的，因为我们就是不欢迎你联系我们。』这就好比说，我们都知道每一家7-11都会在cashier前有一个放满了condom的架子，而豆瓣是一家和特别的7-11，它在那里放了一个牌子然后写上『我们就是不卖condom，你就不要找了，也不要问我们的售货员』。

]]>

Graduation & MVP

noreply@blogger.com — Thu, 01 Jan 1970 00:00:00 GMT

noreply@blogger.com Thu, 01 Jan 1970 00:00:00 GMT http://xfruits.com/cathsfz/Collection/?clic=383835277&url=http%3A%2F%2Ffeedproxy.google.com%2F%7Er%2FCatChen%2FEnglish%2F%7E3%2FXxrsVcx7H8g%2Fgraduation-mvp.html
I was so nervous on June 30th, because I knew that there's an important day coming. I was ready for the ceremony, but I was not sure about the MVP award. I didn't know whether I could get it for a second time. I knew that one certificate from my university was coming, and I was still looking forward to receive another one from Microsoft.

My dad came to my commencement, with a Sony H7 camera, but he didn't manage to take picture of me, because I was too nervous and walking too fast while I was on the stage. After the ceremony, we started taking picture all around the campus. I just kept pulling out my phone from time to time, to check whether I received email from Microsoft.

That email came really on time. It was around 11:00 at night, the same as what happened last year. I was watching TV with my parents, and I told them that I managed to get it twice. They all felt happy and proud.

]]>

Atteding the Microsoft MVP Global Summit 2008

noreply@blogger.com — Sat, 12 Apr 2008 04:03:00 GMT

noreply@blogger.com Sat, 12 Apr 2008 04:03:00 GMT http://xfruits.com/cathsfz/Collection/?clic=383835278&url=http%3A%2F%2Ffeedproxy.google.com%2F%7Er%2FCatChen%2FEnglish%2F%7E3%2FjnZ1LH1Z5Pw%2Fatteding-microsoft-mvp-global-summit.html
Getting a visa seems easy to me. I don't know why. Maybe because I'm in the last year of my university study, and there's no reason for me to give up my degree at this point. During the interview, the visa officer just read my invitation letter and MVP recognition letter, and asked only 5 questions, then said "have a nice trip" to me.

The airline tickets from Beijing to Seattle and then back to Guangzhou cost me about 800 dollars, and that seems cheap enough to me. Since Microsoft will cover accommodation and transportation fees, I just need to spend around 1000 dollars for the whole trip.

Anyway, I got to sleep now, for I need to rush to the airport tomorrow morning. Good night guys.

]]>

Unlocking My iPhone

noreply@blogger.com — Mon, 11 Feb 2008 13:09:00 GMT

noreply@blogger.com Mon, 11 Feb 2008 13:09:00 GMT http://xfruits.com/cathsfz/Collection/?clic=383835279&url=http%3A%2F%2Ffeedproxy.google.com%2F%7Er%2FCatChen%2FEnglish%2F%7E3%2FCHFVFTEIQpQ%2Funlocking-my-iphone.html
I have spent a whole night on unlocking my iPhone. I had my iPhone worked in 1.1.1 as an iPod Touch before unlocking it. So I installed the unlocking software, and wanted to continue using 1.1.1. But then, I found that it had no signal. I read through the unlock tutorial, and found that I must upgrade it to 1.1.2 in order to fix the no signal problem.

I upgraded my iPhone to 1.1.2 for three times. The first time, I forgot to install OktoPrep, so I had to downgrade it again. The second time, jailbreak.jar failed to kick my iPhone out of recovery mode, so I considered that as a failure and downgraded it again. The third time, I used AppTappInstaller.exe to kict my iPhone out of recovery mode, and finally got it done.

]]>

Chinese New Year in Beijing

noreply@blogger.com — Wed, 06 Feb 2008 08:03:00 GMT

noreply@blogger.com Wed, 06 Feb 2008 08:03:00 GMT http://xfruits.com/cathsfz/Collection/?clic=383835280&url=http%3A%2F%2Ffeedproxy.google.com%2F%7Er%2FCatChen%2FEnglish%2F%7E3%2Fh0j2uX1i2KQ%2Fchinese-new-year-in-beijing.html Chinese New Year. This let me avoid the horrible Chunyun. I had decided to stay before I came here. It has proven that I made a wise choice, since the storm made all kind of transportation stuck.

]]>

Internship at Baidu.com, Inc

noreply@blogger.com — Sat, 08 Dec 2007 05:40:00 GMT

noreply@blogger.com Sat, 08 Dec 2007 05:40:00 GMT http://xfruits.com/cathsfz/Collection/?clic=383835281&url=http%3A%2F%2Ffeedproxy.google.com%2F%7Er%2FCatChen%2FEnglish%2F%7E3%2FtKMQVWMmrEs%2Finternship-at-baiducom-inc.html My web development engineer internship in Baidu.com officially started last Wednesday. So far, I have been in this city for 12 days. Right! 12 busy days!

I flew to Beijing last Tuesday morning, took a lunch at McDonald's, and visited the company as a guest at the afternoon. Process of checking in was scheduled on Wednesday, and it took the whole morning. And then, I became a member of technical support group of service operation division under technical department. A web development engineer under technical support group sounds weird, right? At least I think so.

That is caused by a so-called historical problem. Before the company has a portal search, which means when it was still a search solution provider to other portals, technical support group wrote web pages for consumers and helped them consuming the core search service. The group played the role as consumer technical support, and ran under service operation division.

Nowadays, technical support group mostly acts as template support, which means writing templates for all kind of products. We also do front-end researches, in fields like web standards and JavaScript programming. There are many talented people in our group, and we share all information and knowledge we have freely via emails, blogs, and internal magazines.

So far, I enjoy working here, as I can take projects that I feel passionate with. I think Baidu.com would be a passionate start of my career.

P.S. My CV has been updated, for my TOEFL score was out and my internship started.

]]>

Exactly 300!

noreply@blogger.com — Sat, 03 Nov 2007 14:34:00 GMT

noreply@blogger.com Sat, 03 Nov 2007 14:34:00 GMT http://xfruits.com/cathsfz/Collection/?clic=383835282&url=http%3A%2F%2Ffeedproxy.google.com%2F%7Er%2FCatChen%2FEnglish%2F%7E3%2FWZMAIFSR61Y%2Fexactly-300.html I wrote exactly 300 words in my TOEFL writing test second essay! It just reaches the minimum word count of so-called qualified essay.

In fact, I have done little preparation for my TOEFL test. From time to time, I think I need to do something about my TOEFL test, but I just don't want to do anything around it. So, I didn't use any strategy during the test, and spoke and wrote without any so-called pattern. I don't know what kind of score I might get for doing this. Anyway, it will just reflect my true level, I think.

]]>

Tired of filling application forms!

noreply@blogger.com — Wed, 31 Oct 2007 12:59:00 GMT

noreply@blogger.com Wed, 31 Oct 2007 12:59:00 GMT http://xfruits.com/cathsfz/Collection/?clic=383835283&url=http%3A%2F%2Ffeedproxy.google.com%2F%7Er%2FCatChen%2FEnglish%2F%7E3%2FChZHbF_p0Xo%2Ftired-of-filling-application-forms.html I'm applying jobs now. In fact, I hate filling out all those kind of forms online. They look familiar, and I still need to copy information from my profile and paste them into forms. Why they don't apply some open standards and APIs? For example, they can use hResume, which is a microformat.

I really want to implement my own open resume standards, and let those job application sites just crawl my website in order to get my information. Then I might have my resume done once for all.

]]>

Joining IfGoGo.com

noreply@blogger.com — Sat, 27 Oct 2007 15:36:00 GMT

noreply@blogger.com Sat, 27 Oct 2007 15:36:00 GMT http://xfruits.com/cathsfz/Collection/?clic=383835284&url=http%3A%2F%2Ffeedproxy.google.com%2F%7Er%2FCatChen%2FEnglish%2F%7E3%2F8gqio-DIGVY%2Fjoining-ifgogocom.html Ok. I haven't written anything in this blog for a long time, but recently I have joint an English team blog. That is IfGoGo.com, which is an English blog written by Chinese.

I still have no idea about what I should post here and what I should post there. There's no theme for both blogs, so maybe I'll just post English stuffs randomly. Anyway, remember to check out what's on IfGoGo.com, because it has a wonderful team, and great posts will appear soon.

]]>

Translation Job

noreply@blogger.com — Tue, 21 Aug 2007 09:55:00 GMT

noreply@blogger.com Tue, 21 Aug 2007 09:55:00 GMT http://xfruits.com/cathsfz/Collection/?clic=383835285&url=http%3A%2F%2Ffeedproxy.google.com%2F%7Er%2FCatChen%2FEnglish%2F%7E3%2Fsn1w6e9epDc%2Ftranslation-job.html I've started translating Prototype and Scriptaculous in Action into Simplified Chinese since this month. It's a contract with Turing Book Company, Posts and Telecommunications Press. The book is more than 500 pages, and I'm going to finish it in 4 months, with my partner Junyu Wang.

I've finished first two chapters of the book in 2 weeks, and start feeling that the job is quite interesting. At first, I've found some phrases and clauses hard to translate, and asked the translation support group for help, or just try to see what Google Translate might offer me. Then, I started getting used to those phrases and knowing how to break down complex clauses. Google Translate did offer me a lot, more than translation results. It lets you know how to write translated sentences more like natural Chinese sentences.

The side effect of doing translation job is that, after reading every perfect phrase or complex clause in English, I would try to think about how to translate it, totally naturally, even if I have no intention to translate it. When I'm reading a book in English, I'll keep trying analysing what I've read, just like a parser, and this makes me feel weird.

]]>

Microsoft MVP Award received

noreply@blogger.com — Tue, 31 Jul 2007 13:33:00 GMT

noreply@blogger.com Tue, 31 Jul 2007 13:33:00 GMT http://xfruits.com/cathsfz/Collection/?clic=383835286&url=http%3A%2F%2Ffeedproxy.google.com%2F%7Er%2FCatChen%2FEnglish%2F%7E3%2FZrALNlnMl4Y%2Fmicrosoft-mvp-award-received.html This is the last day of the month, and I have to post something to keep the pace, which means at least 1 post per month. In fact, I received the MVP Award at the first day of the month, but I totally forgot to write it down in this blog.

There are around 200 active MVPs in mainland China, and about 2000 active MVPs all over the world. And I'm so proud to be one of these 2000. As an MVP, I received an Award Pack from Microsoft, which included a laser pen, a USB drive, and a $150 coupon from Microsoft Company Store.

I have chosen a camera, a headset and a keyboard in the Company Store, and had $60 left. Then I picked some gifts for my parents and friends. Sharing the value of the award with people who supported me makes me feel quite happy, as I think their support is also some kind of contribution to the community and they deserve it.

]]>

中国程序员有美国梦吗？

noreply@blogger.com — Thu, 01 Jan 1970 00:00:00 GMT

noreply@blogger.com Thu, 01 Jan 1970 00:00:00 GMT http://xfruits.com/cathsfz/Collection/?clic=388985322&url=http%3A%2F%2Ffeedproxy.google.com%2F%7Er%2FCatChen%2FChinese%2F%7E3%2FVd8y37ZJ_kU%2Fblog-post.html Jeff最近转载了一篇名为《贺计算机成“就业最困难专业”》的文章，然后抛出了一个问题来，问大家对此看法如何，接着自然又引起了新一轮博客园首页发文热潮。对此，我站在我的角度说说我的看法。

大浪淘沙，金子难寻

1848年，美国爆发了加州淘金热潮，大量人口涌到加州进行淘金，其直接后果就是让一个叫旧金山小村庄的转眼间变成了一座大城市。在淘金热潮之初，你拿个筛子在河床里筛泥沙也能找到金子，这是何其容易的事情。但我们假想一下，如果当时一个淘金者拿着他的筛子跑到中国来，他能够淘到金子吗？我觉得是不可以的。这不是说中国的黄金矿藏量就比不上美国的一个州，而是中国没有如此高浓度而且可以进行露天开采的金矿。

1971年，旧金山湾区南端由于“淘沙子”出了名，因而被大家叫做硅谷。1998年，Google在硅谷诞生了，然后开始疯狂地吸收硅谷乃至全球的技术人才。2006至2007年，Google在中国进行大规模招聘，这时候他们遇到了跟淘金者中国之行一样的难题……

中国是第一个成功迫使Google进行笔试的国家。这句话说出来可能会让大家觉得十分搞笑，国内哪家公司招聘一线工程师不是先笔试再面试的。在人力资源供求相当的国家里，确实不需要笔试这轮筛选。有资质并且自信有资格来应聘的人，一般都能够得到充分的沟通，然后再确定这份工作是否适合。但这在人力资源明显供过于求的中国来说，就一点也不现实。

Google中国也有高层承认，以ACM/ICPC竞赛成绩来挑人确实有所缺陷，很多适合这份工作的人会被直接淘汰掉，连面对面或电话沟通的机会也没有。但假如你去看一下Google中国的校园招聘场面，看一下在各省重点大学里连开多个大教室进行笔试的情景，你不得不承认，要跟所有这些学生进行沟通的成本实在是连Google中国也支付不起。

总结一下，中国不是没有人才，也不是培养人才的方法有严重缺陷，至少这些都不是根本问题。根本问题是，在如此庞大的人口基数下，再好的企业都只能选用一套折中的人才选拔方案。你不能怪企业，说假如能生在美国你就能被Google美国所挖掘，而现在则被Google中国拒之门外。

人人都会发光的时候你该怎么办？

有时候用“是金子早晚会发光”的说法来自我安慰一下，也不是什么坏事。但当你发现人人都会发光的时候，你就知道事情有多不好了。

我们来做个数学建模，假设美国计算机人才中的top 100, top 1,000, top 10,000分别叫做A类、B类、C类。那么美国的人力资源供需关系大概是这样的：

需求：100人；供应：100人。
需求：1,000人；供应：1,000人。
需求：10,000人；供应：10,000人。

在保持A类、B类、C类界线不变的情况下，放到中国来很可能就是这样子的：

需求：500人；供应：1,000人。
需求：5,000人；供应：100,000人。
需求：50,000人；供应：10,000,000人。

就算中国的人才需求是美国的5倍，但依然供过于求。就算顶级人才的供求矛盾不明显，人才结构上的不合理也会给底层造成巨大的压力。

在A类里面，只有500人做不了自己应做的工作，被迫降级去做B类的工作。对于人口如此众多的一个国家来说，让500人屈就一下不是什么大问题。在B类里面，会有95,000人做不了自己应做的工作。而到了C类里面，会有9,950,000人做不了自己应做的工作，这时候问题就很严重了。

如果你搞不懂上面那堆数字说的是什么，那么我尝试换用浅白一些的语言来再说一次。如果你在美国，并且你达到了Microsoft美国招聘的要求，那么你成功加入Microsoft的概率就相当高了，因为你和Microsoft相互需要对方。

但如果你在中国，并且你达到了Microsoft中国招聘的要求，那么你成功加入Microsoft的概率并不怎么高，因为跟你一样符合这一条件的人数要远多于Microsoft的需求。如果你想要确保一个较高的应聘成功率，那么你必须远高于Microsoft的招聘要求。

没有压力的都跳槽了

假如我们把胜任某个职位的人简单分为两类：刚刚好胜任的，以及过度胜任的。那么，我们可以得到一个有趣的推论。

刚刚好胜任的人，是一定很有压力的。如果上面的分析没错的话，你之所以能够获得这个职位，一定程度上依赖于运气。好几个拥有同等实力的人跟你抢这个职位，尽管他们没能抢到，但依旧对此虎视眈眈，时刻准备着抢你饭碗。企业没理由对此坐视不理，一定会让你一直处于失业的边缘，以此作为筹码逼你好好干活，这时候你没压力才怪。

过度胜任的人，忠诚度一定会打折扣。总有更好的职位在对你招手，尽管你知道那些职位你只能凭运气获得，尽管你知道得到了你也站到了失业的边缘上，但你就不心动吗？肯定还是会心动的。

知足常乐者？估计在顶端会多一些。我和Jeff这样的，属于在国内少数算是享有American Dream的人，也就是能够通过自己的奋斗来获得应有的财富与社会地位。Jeff倾向于认为这对广大程序员普遍适用，并且鼓励大家都去追求自己的梦想。然而我得到的结论却并非如此。对于这事情，你怎么看？

]]>

写个 JavaScript 异步调用框架 (Part 1 - 问题 & 场景)

noreply@blogger.com — Thu, 01 Jan 1970 00:00:00 GMT

noreply@blogger.com Thu, 01 Jan 1970 00:00:00 GMT http://xfruits.com/cathsfz/Collection/?clic=388985326&url=http%3A%2F%2Ffeedproxy.google.com%2F%7Er%2FCatChen%2FChinese%2F%7E3%2Fpw75-lXPdIU%2Fjavascript-part-1.html 问题在Ajax应用中，调用XMLHttpRequest是很常见的情况。特别是以客户端为中心的Ajax应用，各种需要从服务器端获取数据的操作都通过XHR异步调用完成。然而在单线程的JavaScript编程中，XHR异步调用的代码风格实在是与一般的JavaScript代码格格不入。

额外参数

考虑一个除法函数，如果它是纯客户端的同步函数，那么签名会是这样的：

function divide(operand1, operand2)

然而假设我们对客户端除法的精度不满意，于是把除法转移到服务器端来执行，那么它是个需要调用XHR的异步函数，签名也就可能会是以下几种之一：

function divide(operand1, operand2, callback)
function divide(operand1, operand2, successCallback, failureCallback)
function divide(operand1, operand2, options)

我们必须在签名中引入新的参数来传递回调函数，不能选择让函数变成阻塞式的同步调用。

可传递性

不仅仅直接操作XHR的函数需要引入新的参数，这种复杂性还会顺着调用栈向外传递。例如说，我们对加减乘除四则运算作了封装，只向外暴露一个运算接口：

function calculate(operand1, operand2, operator)

这个calculate函数根据operator参数来调用内部的plus, subtract, multiply, divide函数。然而，因为divide函数变成了异步函数，所以整个calculate函数不得不也转变为异步函数：

function calculate(operand1, operand2, operator, callback)

同时，在调用栈之上凡是需要调用到calculate的函数，都必须变成异步的，除非它并不需要向上一级调用函数返回结果。

同步并存

尽管calculate函数变成了一个异步函数，它所调用的plus, subtract, multiply函数还是同步函数，只有调用divide时是异步的，这时候calculate就是一个异步同步并存函数。

这会带来什么问题？calculate的调用者看到函数签名自然会认为calculate是个异步函数，因为它需要传递回调函数，然而calculate的执行方式却是不确定的。考虑如下调用：

calculate(operand1, operand2, operator, callback);
next();

这里涉及到callback和next两个函数，它们哪个先执行哪个后执行是不确定的，或者说是依赖于calculate具体实现的。

如果calculate的实现是，当不需要进行异步操作时，直接调用callback。那么，在执行加减乘法时callback会在next之前被调用；在执行除法时next会在callback之前调用。

如果我们不喜欢这种不确定性，我们可以改变一下calculate的实现，把同步调用也都改为setTimeout形式的，这样在任何情况下next都一定会在callback之前被调用。

然而后面一种做法依赖于成本较高的实现方式，开发者一个不小心（或者摆明偷懒）就会漏掉setTimeout，导致函数调用顺序变得不确定，所以我们会希望这是框架帮助实现的功能，在使用框架时无法把这绕过。

场景

在这里，我举一个关于上述问题的具体应用场景。（为简化问题，描述已略作修改，与实际应用并不一致。）

在百度Hi网页版里面，我们会在客户端保存一个用户对象列表，在打开和这个用户的聊天窗口时，我们需要从中读取这个用户的信息。这个操作就涉及很多可能同步又可能异步的分支：

用户对象未缓存
- 异步读取用户信息
用户对象已缓存
- 用户是好友（信息更新会由服务器端推送）
  - 同步读取用户信息
- 用户不是好友（信息更新需要由客户端拉取）
  - 可以接受缓存信息
    - 同步读取用户信息
  - 必须获取最新信息
    - 异步读取用户信息

可以看到，分支的结果最终既有同步的，也有异步的。并且这些分支还不是在一个函数里完成，而是在几个函数里实现。也就是说，按照传统的模式，这些函数一部分是同步的，一部分是异步的，由于异步的传递性，最终调用栈顶层的函数都是异步的。

为了解决这个问题，我们需要写一个异步调用框架，用一种统一的方式来进行调用，把同步和异步调用都合并为一种返回方式。

具体的解决方案会在下一篇文章中给出，如果你不希望错过的话，欢迎订阅我的博客：

Cat in Chinese (feed)
Cat in dotNET (feed)

]]>