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实现的检测浏览器和系统的函数
Apr 09 Javascript
Jquery多选框互相内容交换的实例代码
Jul 04 Javascript
js 高效去除数组重复元素示例代码
Dec 19 Javascript
javascript创建数组之联合数组的使用方法示例
Dec 26 Javascript
深入理解javascript构造函数和原型对象
Sep 23 Javascript
Node.js 的异步 IO 性能探讨
Oct 08 Javascript
js获取及修改网页背景色和字体色的方法
Dec 29 Javascript
JS随机打乱数组的方法小结
Jun 22 Javascript
AngularJS入门教程之数据绑定用法示例
Nov 01 Javascript
bootstrap基础知识学习笔记
Nov 02 Javascript
JavaScript设计模式之调停者模式实例详解
Feb 03 Javascript
uniapp实现横向滚动选择日期
Oct 21 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
深入理解PHP原理之异常机制
2010/08/21 PHP
php获取数组长度的方法(有实例)
2013/10/27 PHP
Linux下手动编译安装PHP扩展的例子分享
2014/07/15 PHP
php实现数组中索引关联数据转换成json对象的方法
2015/07/08 PHP
Laravel框架实现的上传图片到七牛功能详解
2019/09/06 PHP
php使用Swoole实现毫秒级定时任务的方法
2020/09/04 PHP
页面中body onload 和 window.onload 冲突的问题的解决
2009/07/01 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
2013/09/29 Javascript
javascript loadScript异步加载脚本示例讲解
2013/11/14 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
2015/06/12 Javascript
js编写当天简单日历效果【实现代码】
2016/05/03 Javascript
基于Angularjs实现分页功能
2016/05/30 Javascript
JS从一组数据中找到指定的单条数据的方法
2016/06/02 Javascript
浅谈Node异步编程的机制
2017/10/18 Javascript
使用classList来实现两个按钮样式的切换方法
2018/01/24 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
2019/04/25 Javascript
layUI实现三级导航菜单效果
2019/07/26 Javascript
微信小程序前端promise封装代码实例
2019/08/24 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
2019/11/11 Javascript
Angular封装表单控件及思想总结
2019/12/11 Javascript
jQuery实现简单飞机大战
2020/07/05 jQuery
python计算最大优先级队列实例
2013/12/18 Python
详解Python各大聊天系统的屏蔽脏话功能原理
2016/12/01 Python
关于Python中Inf与Nan的判断问题详解
2017/02/08 Python
python如何创建TCP服务端和客户端
2018/08/26 Python
python 画出使用分类器得到的决策边界
2019/08/21 Python
python连接PostgreSQL数据库的过程详解
2019/09/18 Python
Python中pyecharts安装及安装失败的解决方法
2020/02/18 Python
HTML5在canvas中绘制复杂形状附效果截图
2014/06/23 HTML / CSS
创建索引时需要注意的事项
2013/05/13 面试题
高等教育学自荐书范文
2014/02/10 职场文书
音乐兴趣小组活动总结
2014/07/07 职场文书
银行保安拾金不昧表扬稿
2015/05/05 职场文书
Nginx解决前端访问资源跨域问题的方法详解
2021/03/31 Servers
jquery插件实现代码雨特效
2021/04/24 jQuery
如何解决.cuda()加载用时很长的问题
2021/05/24 Python