JavaScript 组件之旅(二):编码实现和算法
作者:太伯 来源:alipay UED 发布时间:2009-10-09 14:24:00
目录:
话说上期我们讨论了队列管理组件的设计,并且给它取了个响亮而独特的名字:Smart Queue. 这次,我们要将之前的设计成果付诸实践,用代码来实现它。
首先,我们要考虑一下它的源文件布局,也就是决定代码如何拆分到独立的文件中去。为什么要这么做呢?还记得上期结尾处我提到这个组件会使用“外部代码”吗?为了区分代码的用途,决定将代码至少分成两部分:外部代码文件和 Smart Queue 文件。
区分用途只是其一,其二,分散到独立文件有利于代码的维护。试想,以后的某一天你决定要在现有的队列管理基本功能之上,添加一些新的扩展功能,或是把它包装成某个实现特定任务的组件,而又希望保持现有功能(内部实现)和调用方式(对外接口)不变,那么将新的代码写到单独的文件是最好的选择。
嗯,下期会重点谈谈文件布局的话题,现在要开始切入正题了。第一步,当然是要为组件创建自己的命名空间,组件所有的代码都将限制在这个顶层命名空间内:
var SmartQueue = window.SmartQueue || {};
SmartQueue.version = '0.1';
初始化的时候,如果碰到命名空间冲突就把它拉过来用。通常这个冲突是由重复引用组件代码导致的,因此“拉过来用”会将对象以同样的实现重写一次;最坏的情况下,如果碰巧页面上另一个对象也叫 SmartQueue, 那不好意思了,我会覆盖你的实现——如果没有进一步的命名冲突,基本上两个组件可以相安无事地运行。同时顺便给它一个版本号。
接着,按三个优先级为 SmartQueue 创建三个队列:
var Q = SmartQueue.Queue = [[], [], []];
每个都是空数组,因为还没有任务加进去嘛。又顺便给它建个“快捷方式”,后面要访问数组直接写 Q[n] 就可以啦。
接下来,我们的主角 Task 隆重登场——怎么 new 一个 Task, 定义在这里:
var T = SmartQueue.Task = function(fn, level, name, dependencies) {
if(typeof fn !== FUNCTION) {
throw new Error('Invalid argument type: fn.');
}
this.fn = fn;
this.level = _validateLevel(level) ? level : LEVEL_NORMAL;
// detect type of name
this.name = typeof name === STRING && name ? name : 't' + _id++;
// dependencies could be retrieved as an 'Object', so use instanceof instead.
this.dependencies = dependencies instanceof Array ? dependencies : [];
};
里面的具体细节就不说了,有必要的注释,一般我们的代码也能做到自我描述,后面代码也是这样。这里告诉客户(使用者):你想新建一个 SmartQueue.Task 实例,就要至少传一个参数给这个构造函数(后 3 个都可以省略进行缺省处理),否则抛出异常伺候。
但是这还不够,有时候,客户希望从已有 Task 克隆一个新实例,或是从一个“残废体”(具有部分 Task 属性的对象)修复出“健康体”(真正的 Task 对象实例),通过上面的构造方式就有点不爽了——客户得这样写:
var task1 = new SmartQueue.Task(obj.fn, 1, '', obj.dependencies);
我很懒,我只想传 fn 和 dependencies 两个属性,不想做额外的事情。好吧,我们来重构一下构造函数:
var _setupTask = function(fn, level, name, dependencies) {
if(typeof fn !== FUNCTION) {
throw new Error('Invalid argument type: fn.');
}
this.fn = fn;
this.level = _validateLevel(level) ? level : LEVEL_NORMAL;
// detect type of name
this.name = typeof name === STRING && name ? name : 't' + _id++;
// dependencies could be retrieved as an 'Object', so use instanceof instead.
this.dependencies = dependencies instanceof Array ? dependencies : [];
};
var T = SmartQueue.Task = function(task) {
if(arguments.length > 1) {
_setupTask.apply(this, arguments);
} else {
_setupTask.call(this, task.fn, task.level, task.name, task.dependencies);
}
// init context/scope and data for the task.
this.context = task.context || window;
this.data = task.data || {};
};
如此一来,原来的构造方式可以继续工作,而上面的懒人可以这样传入一个“残废体”:
var task1 = new SmartQueue.Task({fn: obj.fn, dependencies: obj.dependencies});
当构造函数收到多个参数时,按之前的方案等同处理;否则,视唯一的参数为 Task 对象或“残废体”。这里通过 JavaScript 中的 apply
/call
方法将新实例传给重构出来的 _setupTask
方法,作为该方法的上下文 (context, 也有称为 scope), apply
/call
是 JavaScript 在方法之间传递上下文的法宝,要用心体会哦。同时,允许用户定义 task.fn
在执行时的上下文,并将自定义的数据传递给执行中的 fn.
猜你喜欢
- 我们可使用Haskeys属性判别每个条目是否为一个集合,遍历完整的Request.Cookies集合,以来取得所有cookie的列表及其值:
- 代码如下:use tempdb if object_id('tempdb..#table') is not null dro
- 用asp程序进行网页设计,大多因为需要访问数据库,然后再将数据显示到页面,如果数据很多的话,页面的访问速度也就变慢了,为了解决这个问题,可以
- '****'函数名称: strReplace(Str)'函数功能: 过滤单引号'参数说明: Str 
- 我一直不很明白在中国国内流行的设计风格,象在国外的很多地方都有鲜明的设计大方向,比如韩国站点设计一般比较花哨,所以动画很多,我们常常看到韩国
- ------谁正在访问数据库?Select c.sid, c.serial#,c.username,a.object_id,b.
- aspjpeg组件官方下载地址:http://www.persits.com/说明: 1、aspjpeg能对图片水印进行透明度调整
- 一、介绍这篇文档旨在介绍如何安装配置基于2台服务器的MySQL集群。并且实现任意一台服务器出现问题或宕机时MySQL依然能够继续运行。虽然这
- 和大多数的语言脚本一样,学习ASP最好的方法就是亲身尝试ASP,使用你自己的系统安装PWS或者IIS。你可以边学习边在你自己的服务器上测试A
- 代码如下:<% Rem xml缓存类 '----------------------------
- 安全性问题一直DBA是比较关心的问题,因为建立数据库的目的就是让相关的的客户端来进行访问,所以很难避免不出现安全隐患,例如客户端链接的权限、
- 近段时间看了一些论坛上面关于分页的ASP程序依然有许多的关注者,但里面只有代码,没有详细的解释,对于初学者来说,这样总是得不到真正的掌握,此
- 利用FSO取得BMP,JPG,PNG,GIF文件信息:大小,宽、高尺寸等 ’:::::::::::::::::::::::::::
- 一、利用外键约束更新MySQL中的数据现在,最流行的开源关系型数据库管理系统非MySQL莫属,而MySQL又支持多个存储引擎,其中默认的也是
- 迄今为止,导出/导入工具集仍是跨多个平台转移数据所需劳动强度最小的首选实用工具,尽管人们常常抱怨它速度太慢。导入只是将每条记录从导出转储文件
- 错误号 错误信息5 &n
- Asp定时执行操作、Asp定时读取数据库(网页定时操作详解)'----------------------版权信息---------
- 说明:本函数作用是截取指定英汉混合字符串,并保持显示长度一至。就是将一个汉字当两英文来截取。用途:一般会用在标题显示列表,可以避免截取的字符
- Mysql的安装方法 安装mysql的步骤如下:请注意按图中所示,有些选项和默认是不一样的。同时,如果您是重新安装mysql的话,要注意先备
- 这篇文章介绍了 5 个实用的 CSS 属性。你应该很熟悉,但很可能很少会使用到。我并不是在谈论展望全新的 CSS3 属性,我指的是旧的 CS