太伯 « Alipay UED

2010.1.1

第四届D2分享回顾

团队活动 | 太伯

第四届 D2 前端技术论坛已于 12 月 19 日在杭州举办。这份回顾之所以现在才和大家见面，实在是因为年底太忙，呵呵，大家见谅。

第四届 D2 由阿里巴巴公司提供场地和其他资源。(via)
More »

2009.12.17

响应浏览器地址栏#(hash/fragment)变化

前端技术 | 太伯

Gmail 作为一个经典的 Web 2.0 应用，在带来革命性的邮件管理体验的同时，以其完整、快速的 AJAX 操作方式，深受用户的推崇和技术人员的追捧。

技术上，Gmail 通过将用户的操作以 #op1/op2 这样的形式（即 hash 或 fragment, 这里称之为 hash）反映在浏览器地址栏，最后得到一个类似这样的 URL: https://mail.google.com/mail/#inbox. 它还允许用户直接粘贴这样的地址到达相同的操作界面，并可以通过浏览器的前进/后退按钮在操作步骤之间跳转。

也想尝试一下？先分析一下，通过获取 hash 的值，执行一些操作，即可恢复到该值表示的场景——非常简单。但是，要处理浏览器前进/后退按钮，跳转到相应场景，则有一定困难。因为浏览器不会告诉你 hash 发生变化了。因此，需要实现一个 JavaScript 浏览器导航按钮处理模块。

网上有些代码实现了类似功能，大多感觉冗长复杂。这里，我们介绍支付宝实际应用中开发的一段代码，它的功能简单实用——允许用户指定 hash 发生变化时要做的事情（回调），也可以随时停止它。简单地说，这个代码的原理是，每隔一段时间检查 hash 有没有发生变化，如果有，就运行用户指定的回调方法。代码如下：
More »

2009.10.12

JavaScript 组件之旅（四）：测试 JavaScript 组件

前端技术 | 太伯

smart-queue-test
本期，我们要讨论的话题是 JavaScript 的测试，以检查组件的状态和工作方式是否符合预期，还会介绍一个可以方便编写测试用例的测试方法。这里说的测试当然是使用自动化的测试手段，这是软件质量保证(QA)的重要环节。就本系列文章介绍的 Smart Queue 来说，我们的测试目标包括：

Task 对象的创建：第二期的代码提供了多种创建方式，需要测试对象创建后的状态。
Queue 内的任务运行次序：我们提供了两种改变运行次序的方式：优先级和依赖配置，同样也要测试各种配置对次序的影响。

对于第一个目标，只需检查对象创建后的属性是否符合预期即可。我们已经多次提到“符合预期”，断言(Assert)正是为此而设计的。简单的说，断言就是确保所测试的表达式结果为“真”，否则，以某种方式通知测试人员，并帮助其定位断言失败的测试用例。
第二个目标稍稍有点复杂。由于我们在组件编码实现的时候，将排序后的队列( [/cci]_sorted [/cci])隐藏在了闭包中，所以外部是无法访问的。有两种方法可以考虑：(1)重构代码，增加代码的可测试性，又有两种重构方法：(a)设置 debug 开关，打开时将 _sorted 暴露给外部；(b)增加独立文件，以构建的方式拼接代码最终生成一个测试版本。(2)测试行为的结果而不是过程，前一种方法实质上是深入到组件的运行时状态，而这个方法只是检查组件的运行结果。本期选用后一种种测试方式，第一种测试方式留给有兴趣的读者练习:)

需要说明的是，我个人不赞成第一种的方法a. 为什么呢？我先说一下这个任务队列的设计理念：
More »

2009.10.4

JavaScript 组件之旅（三）：用 Ant 构建组件

前端技术 | 太伯

我们走到哪儿了？前两期思考了太多东西，你是否已有倦意？别担心，本期的话题很轻松，你只需要简单了解一些语法，写几行配置，就能驱使系统按你预设的方式自动完成一些工作。听起来是不是很惬意？Let’s go! 我们出发啦～

这期，我们会使用 Ant 将上期编写、整理的代码文件按指定的先后顺序合并成单一的源文件，然后压缩这个文件。这是构建 JavaScript 项目的基本步骤。Ant 是 Apache 的一个顶级开源项目，网上对它的介绍和安装，已经有很多文章，这里就不再赘述了。在构建之前，我们先来看看已有的文件布局：

  smart-queue  // 组件的根目录
    +--- src  // JavaScript源文件目录
        +--- lang.js  // 前文提到的“外部文件”
        +--- smart-queue.js  // Smart Queue 主文件

现在，我们要让它“丰满”起来：
More »

2009.9.27

JavaScript 组件之旅（二）：编码实现和算法

前端技术 | 太伯

首先，我们要考虑一下它的源文件布局，也就是决定代码如何拆分到独立的文件中去。为什么要这么做呢？还记得上期结尾处我提到这个组件会使用“外部代码”吗？为了区分代码的用途，决定将代码至少分成两部分：外部代码文件和 Smart Queue 文件。
区分用途只是其一，其二，分散到独立文件有利于代码的维护。试想，以后的某一天你决定要在现有的队列管理基本功能之上，添加一些新的扩展功能，或是把它包装成某个实现特定任务的组件，而又希望保持现有功能（内部实现）和调用方式（对外接口）不变，那么将新的代码写到单独的文件是最好的选择。

嗯，下期会重点谈谈文件布局的话题，现在要开始切入正题了。第一步，当然是要为组件创建自己的命名空间，组件所有的代码都将限制在这个顶层命名空间内：

1 2	var SmartQueue = window.SmartQueue \|\| {}; SmartQueue.version = '0.1';

初始化的时候，如果碰到命名空间冲突就把它拉过来用。通常这个冲突是由重复引用组件代码导致的，因此“拉过来用”会将对象以同样的实现重写一次；最坏的情况下，如果碰巧页面上另一个对象也叫 SmartQueue, 那不好意思了，我会覆盖你的实现——如果没有进一步的命名冲突，基本上两个组件可以相安无事地运行。同时顺便给它一个版本号。

接着，按三个优先级为 SmartQueue 创建三个队列：

1	var Q = SmartQueue.Queue = [[], [], []];

每个都是空数组，因为还没有任务加进去嘛。又顺便给它建个“快捷方式”，后面要访问数组直接写 Q[n] 就可以啦。

接下来，我们的主角 Task 隆重登场——怎么 new 一个 Task, 定义在这里：

1
2
3
4
5
6
7
8
9
10
11
12
13

var T = SmartQueue.Task = function(fn, level, name, dependencies) {
if(typeof fn !== FUNCTION) {
throw new Error('Invalid argument type: fn.');
}
this.fn = fn;
this.level = _validateLevel(level) ? level : LEVEL_NORMAL;

// detect type of name
this.name = typeof name === STRING && name ? name : 't' + _id++;

// dependencies could be retrieved as an 'Object', so use instanceof instead.
this.dependencies = dependencies instanceof Array ? dependencies : [];
};

More »

第四届D2分享回顾

响应浏览器地址栏#(hash/fragment)变化

JavaScript 组件之旅（四）：测试 JavaScript 组件

目录：

JavaScript 组件之旅（三）：用 Ant 构建组件

目录：

JavaScript 组件之旅（二）：编码实现和算法

目录：

alipay ued

文章分类

链接

Feed