JavaScript 组件之旅(一)分析和设计_javascript技巧

另一方面,由于 JavaScript 通常会和宿主环境(比如浏览器)紧密结合,因此缺乏功能强大而简单易用的开发工具。在这样的环境中,开发组件或框架成为一项具有挑战的工作。
这次,我们将以一个简易的 JavaScript 组件开发为契机,逐步展开组件的分析、设计、实现、构建和测试等任务,探讨组件开发过程涉及的方方面面。这些探讨将分 4 篇陆续张贴出来(链接将在张贴后更新):

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

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


Queue

图片来自 Wikipedia.

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

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

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

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

然后,我们从中提炼出涉及的对象:

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

它的对象模型可以大概表示如下:


设计初期的对象图

注意到 Dependency 实际上并没有做什么事,而 Queue 的两个方法可以分别交给 TaskManager & Task 来负责。一个方法到底由哪个对象负责,是很容易引起争论的话题,不在我们的讨论范围内。这次,我们的重点是,采用 JavaScript 实现这个组件,结合 JavaScript 独特的语言特性,我们设想实现上述四个对象:

  • TaskManager 直接通过对象 (Object) 实现。在 JavaScript 的世界,对象可以作为天然的静态类来使用——你可以直接在“类” ClassObject 里面定义属性方法 property,并以静态类的方式来引用 CassObject.property.
  • Queue 以数组 (Array) 的形式体现出来,Task 则是数组中存放的每一项。对 Queue 进行操作必然要在其 prototype 中定义一些实例方法,由于每个 Queue 实例都是原生的数组,为了减少对 Array.prototype 的侵入,我们可以考虑将这些方法定义到 Task.prototype 上——将职责转移到任务上。
    将三个 Queue 数组集结在一起,形成一个“大数组”以表示三个不同优先级的队列,这个大数组可以作为 TaskManager 的属性。
  • 任务的核心是一个 function, 本来可以直接用 function 来表示一个任务,但考虑到它具有自身独特的属性(优先级、依赖等等),而且是最经常被操作的对象,以后可能还会进行扩展,所以我们决定单独将其定义成对象。
  • 依赖直接以数组的形式作为 Task 的一个属性存在——Task 将依赖的其他多个 Task 标识符放在这个数组中,不再单独定义这个对象。

分析下来,局势逐渐明朗——我们需要将四个对象简化成两个:TaskManager & Task, 另外两个对象用原生的数组来实现:


简化后的对象模型

又注意到这里多次以数组来实现,而编码过程中必然涉及到数组的遍历、查找等操作,JavaScript 1.6 已经为我们实现了这些数组操作。为了充分利用数组内置的原生方法,又能在较老的浏览器中运行,我们使用了 Eric 的代码。这样,我们可以直接使用诸如 forEach/indexOf 等方法,更关注组件的功能实现,而且在现代浏览器中获得较好的性能。

~~~~~~~~~~~~~ 八卦分割线 ~~~~~~~~~~~~~

嗯,在严肃地分析了组件设计之后,就要踏上快乐的编码实现之旅了。别急,TaskManager 似乎俗气了一点:不足以表达具有优先级、依赖管理的任务队列,而且用它做命名空间有跟其他代码冲突的可能性。好吧,这个组件就叫 Smart Queue 吧,响亮而又独特.^^

分析设计好了,名字也有了,欲知具体实现过程,且听下回分解。

时间: 2024-09-21 20:13:50

JavaScript 组件之旅(一)分析和设计_javascript技巧的相关文章

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

JavaScript支持重载吗? JavaScript支持函数重载吗?可以说不支持,也可以说支持.说不支持,是因为JavaScript不能好像其它原生支持函数重载的语言一样,直接写多个同名函数,让编译器来判断某个调用对应的是哪一个重载.说支持,是因为JavaScript函数对参数列表不作任何限制,可以在函数内部模拟对函数重载的支持. 实际上,在很多著名的开源库当中,我们都可以看到函数内部模拟重载支持的设计.例如说jQuery的jQuery.extend方法,就是通过参数类型判断出可选参数是否存在

JavaScript 组件之旅(四):测试 JavaScript 组件_javascript技巧

开发">本期,我们要讨论的话题是 JavaScript 的测试,以检查组件的状态和工作方式是否符合预期,还会介绍一个可以方便编写测试用例的测试方法.这里说的测试当然是使用自动化的测试手段,这是软件质量保证(QA)的重要环节.就本系列文章介绍的 Smart Queue 来说,我们的测试目标包括: Task 对象的创建:第二期的代码提供了多种创建方式,需要测试对象创建后的状态. Queue 内的任务运行次序:我们提供了两种改变运行次序的方式:优先级和依赖配置,同样也要测试各种配置对次序的影响.

JavaScript 组件之旅(二)编码实现和算法_javascript技巧

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

JavaScript 组件之旅(三):用 Ant 构建组件_javascript技巧

听起来是不是很惬意?Let's go! 我们出发啦- 这期,我们会使用 Ant 将上期编写.整理的代码文件按指定的先后顺序合并成单一的源文件,然后压缩这个文件.这是构建 JavaScript 项目的基本步骤.Ant 是 Apache 的一个顶级开源项目,网上对它的介绍和安装,已经有很多文章,这里就不再赘述了.在构建之前,我们先来看看已有的文件布局: smart-queue // 组件的根目录 +--- src // JavaScript源文件目录 +--- lang.js // 前文提到的"外部

JavaScript 常见安全漏洞和自动化检测技术_javascript技巧

前言 随着 Web2.0 的发展以及 Ajax 框架的普及,富客户端 Web 应用(Rich Internet Applications,RIA)日益增多,越来越多的逻辑已经开始从服务器端转移至客户端,这些逻辑通常都是使用 JavaScript 语言所编写.但遗憾的是,目前开发人员普遍不太关注 JavaScript 代码的安全性.据 IBM X-Force 2011 年中期趋势报告揭示,世界五百强的网站及常见知名网站中有 40% 存在 JavaScript 安全漏洞.本文将结合代码向读者展示常见

Javascript 数组添加一个 indexOf 方法的实现代码_javascript技巧

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 运行以上代码,即可.如果大家想看的是 javascript indexOf的使用方法,请看下面的文章javascript indexOf函数使用说明JavaScript indexOf忽略大小写_javascript技巧

javascript实现下雪效果【实例代码】_javascript技巧

原理 : 1.js动态创建DIV,指定CLASS类设置不同的背景图样式显示不同的雪花效果. 2.js获取创建的DIV并改变其top属性值,当下落的高度大于屏幕高后删除该移动div 3.好像不够完善勿喷 HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>雪花飞舞</title> <lin

基于JavaScript实现瀑布流效果(循环渐近)_javascript技巧

1.建立Html模版 想法是先用一个div container承载所有内容,然后div box用来放置图片,最后div box_border来当图片框,代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>瀑布流</title> </head> <body> <div class="container

JavaScript获取页面中超链接数量的方法_javascript技巧

本文实例讲述了JavaScript获取页面中超链接数量的方法.分享给大家供大家参考,具体如下: 这里演示JavaScript取得页面的超链接数,感兴趣的朋友可以学习借鉴一下. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-total-link-num-codes/ 具体代码如下: <html> <head> <title>JavaScript取得页面的超链接数</title> <script l