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


Posted in Javascript onOctober 28, 2009

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

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

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

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

Queue

图片来自 Wikipedia.

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

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

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

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

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

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

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

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

设计初期的对象图

注意到 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 组件之旅(一)分析和设计

简化后的对象模型

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

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

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

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

Javascript 相关文章推荐
用js重建星际争霸
Dec 22 Javascript
firefox火狐浏览器与与ie兼容的2个问题总结
Jul 20 Javascript
JavaScript中prototype为对象添加属性的误区介绍
Oct 15 Javascript
Js Jquery创建一个弹出层可加载一个页面
May 08 Javascript
JavaScript多并发问题如何处理
Oct 28 Javascript
微信小程序动态显示项目倒计时效果
Jun 13 Javascript
React Native 截屏组件的示例代码
Dec 06 Javascript
element-ui 设置菜单栏展开的方法
Aug 22 Javascript
详解html-webpack-plugin插件(用法总结)
Sep 12 Javascript
JavaScript实现与使用发布/订阅模式详解
Jan 19 Javascript
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
JS自定义滚动条效果
Mar 13 Javascript
js 数组实现一个类似ruby的迭代器
Oct 27 #Javascript
jquery 操作单选框,复选框,下拉列表实现代码
Oct 27 #Javascript
javascript获得CheckBoxList选中的数量
Oct 27 #Javascript
基于jQuery的日期选择控件
html 锁定页面(js遮罩层弹出div效果)
Oct 27 #Javascript
javascript 读取XML数据,在页面中展现、编辑、保存的实现
Oct 27 #Javascript
Ajax+Json 级联菜单实现代码
Oct 27 #Javascript
You might like
福利彩票幸运号码自动生成器
2006/10/09 PHP
使用PHP接收POST数据,解析json数据
2013/06/28 PHP
以实例全面讲解PHP中多进程编程的相关函数的使用
2015/08/18 PHP
PHP实现发送邮件的方法(基于简单邮件发送类)
2015/12/17 PHP
Joomla调用系统自带编辑器的实现方法
2016/05/05 PHP
PHP获取访问设备信息的方法示例
2019/02/20 PHP
PHP加MySQL消息队列深入理解
2021/02/27 PHP
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
2013/12/05 Javascript
Javascript调用函数方法的几种方式介绍
2015/03/20 Javascript
javascript中attachEvent用法实例分析
2015/05/14 Javascript
JavaScript编写一个简易购物车功能
2016/09/17 Javascript
详解jQuery中的事件
2016/12/14 Javascript
JS简单实现表格排序功能示例
2016/12/20 Javascript
Vue中父组件向子组件通信的方法
2017/07/11 Javascript
Vue实现页面添加水印功能
2019/11/09 Javascript
js实现上下左右键盘控制div移动
2020/01/16 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
2020/04/22 Javascript
JavaScript 几种循环方式以及模块化的总结
2020/09/03 Javascript
[08:54]《一刀刀一天》之DOTA全时刻18:十九支奔赴西雅图队伍全部出炉
2014/06/04 DOTA
[59:32]Liquid vs Fnatic 2019国际邀请赛淘汰赛败者组BO1 8.20.mp4
2020/07/19 DOTA
Python 的 with 语句详解
2014/06/13 Python
python清除指定目录内所有文件中script的方法
2015/06/30 Python
python读取oracle函数返回值
2016/07/18 Python
Python连接SQLServer2000的方法详解
2017/04/19 Python
Tensorflow 自带可视化Tensorboard使用方法(附项目代码)
2018/02/10 Python
Python3.6基于正则实现的计算器示例【无优化简单注释版】
2018/06/14 Python
Django跨域请求问题的解决方法示例
2018/06/16 Python
自定义Django Form中choicefield下拉菜单选取数据库内容实例
2020/03/13 Python
django中嵌套的try-except实例
2020/05/21 Python
豪华复古化妆:Besame Cosmetics
2019/09/06 全球购物
优秀求职自荐信怎样写
2013/12/18 职场文书
英语分层教学实施方案
2014/06/15 职场文书
学前班教学反思
2016/02/24 职场文书
2016年感恩母亲节活动总结
2016/04/01 职场文书
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
2021/04/03 Javascript
Python 装饰器(decorator)常用的创建方式及解析
2022/04/24 Python