毫无疑问，JavaScript 是一种非常灵活的脚本语言，有时候它像一只难以驯服的野马——你受益于它的灵活性的同时，也要时刻提防它变得失去控制；另一方面，由于 JavaScript 通常会和宿主环境（比如浏览器）紧密结合，因此缺乏功能强大而简单易用的开发工具。在这样的环境中，开发组件或框架成为一项具有挑战的工作。
这次，我们将以一个简易的 JavaScript 组件开发为契机，逐步展开组件的分析、设计、实现、构建和测试等任务，探讨组件开发过程涉及的方方面面。这些探讨将分 4 篇陆续张贴出来（链接将在张贴后更新）：

1. JavaScript组件之旅:分析和设计 
2. JavaScript组件之旅:编码实现和算法
3. JavaScript组件之旅:用Ant构建组件
4. JavaScript组件之旅:测试组件

现在，假设我们要从头开始设计并实现一个队列管理组件，先让我们来认识一下队列：

Queue

图片来自 Wikipedia.

队列是一个“先进先出”(FIFO) 的数据结构，只能向它的尾巴追加项，项从头部取出使用，这个规则将应用到我们所探讨的组件中去。对于队列，相信学过 C 或是数据结构课程的同学已有所了解，如果你已经把它还给了老师，请使用搜索引擎简单了解一下队列的知识。

这个队列管理组件具体要实现的功能是：它是个任务管理器，按高、中、低优先级维护着三个任务队列，客户（使用者）可以在任何时候把想要执行的任务添加到某个队列，可以指定任务运行的上下文，并传给它必要的数据。客户也可以随时运行这个队列，队列里的任务按照指定的依赖关系以合理的方式依次运行。

为了不至于使组件过于简单而缺乏实用性，我们特意给它添加了一些“糖”：分优先级、传入上下文和数据、处理依赖关系。如果把上面这段理解为需求的话，那么首先，我们要从中提取出最重要的关键词，它们直接决定了这个组件应该如何设计：

• 队列
• 优先级
• 依赖关系

然后，我们从中提炼出涉及的对象：

• 任务管理器 (TaskManager): 从目前需求来看，它只需要一个实例。
• 队列 (Queue): 每个优先级对应一个队列，由 TaskManager 管理这三个 Queue 实例。
• 任务 (Task): 描述添加的任务，放在相应优先级的 Queue 里面。
• 依赖 (Dependency): 描述单一的依赖，即 Task1 依赖 Task2, 显然某个 Task 可能具有多个依赖。

出处：Alipay UED
责任编辑：bluehearts

上一页 下一页 JavaScript组件之旅:分析和设计 [2]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。