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 相关文章推荐
Javascript 实用小技巧
Apr 07 Javascript
通过判断JavaScript的版本实现执行不同的代码
May 11 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
Feb 08 Javascript
js操作模态窗口及父子窗口间相互传值示例
Jun 09 Javascript
告诉你什么是javascript的回调函数
Sep 04 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
Oct 25 Javascript
Validform+layer实现漂亮的表单验证特效
Jan 17 Javascript
jQuery实现简单的tab标签页效果
Sep 12 Javascript
微信小程序 实例应用(记账)详解
Sep 28 Javascript
jQuery多选框选择数量限制方法
Feb 08 Javascript
Vue2.0设置全局样式(less/sass和css)
Nov 18 Javascript
vuex入门最详细整理
Mar 04 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
Yii视图操作之自定义分页实现方法
2016/07/14 PHP
php加密解密字符串示例
2016/10/13 PHP
你所要知道JS(DHTML)中的一些技巧
2007/01/09 Javascript
YUI 读码日记之 YAHOO.util.Dom - Part.1
2008/03/22 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
2013/11/25 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
2014/07/30 Javascript
JS判断字符串包含的方法
2015/05/05 Javascript
jquery判断单选按钮radio是否选中的方法
2015/05/05 Javascript
高性能JavaScript DOM编程(1)
2015/08/11 Javascript
谈谈Jquery中的children find 的区别有哪些
2015/10/19 Javascript
javascript适合移动端的日期时间拾取器
2015/11/10 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
2016/05/09 Javascript
微信小程序本地缓存数据增删改查实例详解
2017/05/24 Javascript
VueJs 搭建Axios接口请求工具
2017/11/20 Javascript
Angular脚手架开发的实现步骤
2019/04/09 Javascript
python使用calendar输出指定年份全年日历的方法
2015/04/04 Python
Python创建模块及模块导入的方法
2015/05/27 Python
Python写一个基于MD5的文件监听程序
2019/03/11 Python
Python参数解析模块sys、getopt、argparse使用与对比分析
2019/04/02 Python
Dlib+OpenCV深度学习人脸识别的方法示例
2019/05/14 Python
python如何实现异步调用函数执行
2019/07/08 Python
Python Opencv图像处理基本操作代码详解
2020/08/31 Python
windows下python 3.9 Numpy scipy和matlabplot的安装教程详解
2020/11/28 Python
Html5实现移动端、PC端 刮刮卡效果
2016/06/30 HTML / CSS
HTML5 textarea高度自适应的两种方案
2020/04/08 HTML / CSS
Ootori在线按摩椅店:一家专业的按摩椅制造商
2019/04/10 全球购物
网络编程中设计并发服务器,使用多进程与多线程,请问有什么区别?
2016/03/27 面试题
什么是抽象
2015/12/13 面试题
2014年办公室文员工作总结
2014/11/12 职场文书
通报表扬范文
2015/01/17 职场文书
毕业生党员个人总结
2015/02/14 职场文书
2015年超市工作总结
2015/04/09 职场文书
全国助残日活动总结
2015/05/11 职场文书
2015年党务公开工作总结
2015/05/19 职场文书
Python利用folium实现地图可视化
2021/05/23 Python
使用Djongo模块在Django中使用MongoDB数据库
2021/06/20 Python