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


Posted in Javascript onOctober 28, 2009

首先,我们要考虑一下它的源文件布局,也就是决定代码如何拆分到独立的文件中去。为什么要这么做呢?还记得上期结尾处我提到这个组件会使用“外部代码”吗?为了区分代码的用途,决定将代码至少分成两部分:外部代码文件和 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.

经典的 JavaScript 对象三段式是什么?

  1. 定义对象的构造函数
  2. 在原型上定义属性和方法
  3. new 对象,拿来用

所以,下面要为 SmartQueue.Task 对象的原型定义属性和方法。上期分析过 Task (任务)有几个属性和方法,部分属性我们已经在 _setupTask 中定义了,下面是原型提供的属性和方法:

T.prototype = {
    enabled: true,
    register: function() {
      var queue = Q[this.level];
      if(_findTask(queue, this.name) !== -1) {
        throw new Error('Specified name exists: ' + this.name);
      }
      queue.push(this);
    },
    changeTo: function(level) {
      if(!_validateLevel(level)) {
        throw new Error('Invalid argument: level');
      }
      level = parseInt(level, 10);
      if(this.level === level) {
        return;
      }
      Q[this.level].remove(this);
      this.level = level;
      this.register();
    },
    execute: function() {
      if(this.enabled) {
        // pass context and data
        this.fn.call(this.context, this.data);
      }
    },
    toString: function() {
      var str = this.name;
      if(this.dependencies.length) {
        str += ' depends on: [' + this.dependencies.join(', ') + ']';
      }
      return str;
    }
  };

如你所见,逻辑非常简单,也许你已经在一分钟内扫过了代码,嘴角不经意间露出一丝心领神会。不过,这里要说的是简单而且通常最不被重视的 toString 方法。在一些高级语言中,为自定义对象实现 toString 方法被作为最佳实践准则而推荐,为什么呢?因为 toString 可以很方便地在调试器中提供有用的信息,可以方便地将对象基本信息写入日志;在统一的编程模式中,实现 toString 可以让你少写一些代码。

嗯,我们继续推进,我们要实现 SmartQueue 的具体功能。上期分析过,SmartQueue 只有一个实例,因此我们决定直接在 SmartQueue 下面创建方法:

SmartQueue.init = function() {
    Q.forEach(function(queue) {
      queue.length = 0;
    });
  };

这里用到 JavaScript 1.6 为 Array 对象提供的遍历方法 forEach. 之所以这样写是因为我们假定“外部代码”已经在前面运行过了。设置 Array 对象的 length 属性为 0 导致,它被清空并且释放所有的项(数组单元)。

最后一个方法 fire, 是整个组件最主要的方法,它负责对所有任务队列进行排序,并逐个执行。由于代码稍长了一点,这里只介绍排序使用的算法和实现方式,完整代码在这里

var _dirty = true, // A flag indicates weather the Queue need to be fired.
  _sorted = [], index;
// Sort all Queues.
// ref: http://en.wikipedia.org/wiki/Topological_sorting
var _visit = function(queue, task) {
    if(task._visited >= 1) {
      task._visited++;
      return;
    }
    task._visited = 1;
    // find out and visit all dependencies.
    var dependencies = [], i;
    task.dependencies.forEach(function(dependency) {
      i = _findTask(queue, dependency);
      if(i != -1) {
        dependencies.push(queue[i]);
      }
    });
    dependencies.forEach(function(t) {
      _visit(queue, t);
    });
    if(task._visited === 1) {
      _sorted[index].push(task);
    }
  },
  _start = function(queue) {
    queue.forEach(function(task) {
      _visit(queue, task);
    });
  },
  _sort = function(suppress) {
    for(index = LEVEL_LOW; index <= LEVEL_HIGH; index++) {
      var queue = Q[index];
      _sorted[index] = [];
      _start(queue);
      if(!suppress && queue.length > _sorted[index].length) {
        throw new Error('Cycle found in queue: ' + queue);
      }
    }
  };

我们将按任务指定的依赖关系对同一优先级内的任务进行排序,确保被依赖的任务在设置依赖的任务之前运行。这是一个典型的深度优先的拓扑排序问题,维基百科提供了一个深度优先排序算法,大致描述如下:

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

图片来自维基百科

  1. 访问待排序的每一个节点
    1. 如果已经访问过了,则返回
    2. 否则标记为已访问
    3. 找出它连接(在这里是依赖)的每个节点
    4. 跳到内层1递归访问这些节点
    5. 访问完了就把当前节点加入已排序列表
  2. 继续访问下一个

如果 A 依赖 B, B 依赖 C, C 依赖 A, 那么这 3 个节点形成了循环依赖。 文中指出这个算法并不能检测出循环依赖。通过标记节点是否已访问,可以解决循环依赖造成的递归死循环。我们来分析一下循环依赖的场景:

从节点 A 出发的时候,它被标记为已访问,当从节点 C 再回到节点 A 的时候,它已经被访问过了。不过这个时候 C 并不知道 A 是否在自己的上游链上,所以不能直接判定发生了循环依赖,因为 A 可能是其他已“处理”(跑完了内层递归)过的节点。如果我们知道节点是不是第一次被访问过,就可以判断是哪一种情况。

改造一下上面的算法,将“是否已访问”改成“访问计数” (task._visited++)。仅当节点被访问过 1 次的时候 (task._visited === 1),才将其加入到已排序列表,全部遍历完之后,如果待排序的节点数比已排序的多 (queue.length > _sorted[index].length),则表明待排序中多出的节点发生了循环依赖。

至此,队列管理组件的编码实现已经完成。什么?怎么使用?很简单啦:

var t1 = new SmartQueue.Task(function() {
    alert("Hello, world!");
  }), t2 = new SmartQueue.Task(function() {
    alert("High level task has name");
  }, 2, 'myname');
t1.register(); t2.register();
SmartQueue.fire();

更多功能,如任务的依赖,等待你去发掘哦。

本期贴出的代码都是一些局部片段,部分 helper 方法代码没有贴出来。查看完整的代码请访问这里。后面我们将介绍如何管理组件文件,以及构建组件,下期不见不散哦。

Javascript 相关文章推荐
动态改变textbox的宽高的js
Oct 26 Javascript
常见的原始JS选择器使用方法总结
Apr 09 Javascript
node.js入门教程之querystring模块的使用方法
Feb 27 Javascript
详解前后端分离之VueJS前端
May 24 Javascript
AngularJS 验证码60秒倒计时功能的实现
Jun 05 Javascript
原生js封装运动框架的示例讲解
Oct 01 Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
Sep 21 Javascript
详解如何创建并发布一个 vue 组件
Nov 08 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
Nov 12 Javascript
JS实现的合并两个有序链表算法示例
Feb 25 Javascript
ES6如何用一句代码实现函数的柯里化
Jan 18 Javascript
Vue使用轮询定时发送请求代码
Aug 10 Javascript
JavaScript 组件之旅(一)分析和设计
Oct 28 #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
You might like
Laravel 5框架学习之表单验证
2015/04/08 PHP
PHP基于单例模式实现的mysql类
2016/01/09 PHP
php each 返回数组中当前的键值对并将数组指针向前移动一步实例
2016/11/22 PHP
PHP实现针对日期,月数,天数,周数,小时,分,秒等的加减运算示例【基于strtotime】
2017/04/19 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
2010/11/20 Javascript
详解参数传递四种形式
2015/07/21 Javascript
AngularJS手动表单验证
2016/02/01 Javascript
JavaScript中子对象访问父对象的方式详解
2016/09/01 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
2017/01/04 Javascript
Angular2使用jQuery的方法教程
2017/05/28 jQuery
教你如何用node连接redis的示例代码
2018/07/12 Javascript
详解基于electron制作一个node压缩图片的桌面应用
2019/01/29 Javascript
vue+elementUI实现图片上传功能
2019/08/20 Javascript
Vue Router的手写实现方法实现
2020/03/02 Javascript
深入了解JS之作用域和闭包
2020/06/16 Javascript
[01:30:55]VG vs Mineski Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
Python实现的Kmeans++算法实例
2014/04/26 Python
Python读取mp3中ID3信息的方法
2015/03/05 Python
在Python的web框架中编写创建日志的程序的教程
2015/04/30 Python
python机器学习之神经网络(一)
2017/12/20 Python
django传值给模板, 再用JS接收并进行操作的实例
2018/05/28 Python
Django中ajax发送post请求 报403错误CSRF验证失败解决方案
2019/08/13 Python
Python openpyxl读取单元格字体颜色过程解析
2019/09/03 Python
详解Python3迁移接口变化采坑记
2019/10/11 Python
Python测试Kafka集群(pykafka)实例
2019/12/23 Python
python 串口读取+存储+输出处理实例
2019/12/26 Python
python with (as)语句实例详解
2020/02/04 Python
Python用户自定义异常的实现
2020/12/25 Python
俄罗斯童装网上商店:BebaKids
2020/06/06 全球购物
Fanatics官网:运动服装、球衣、运动装备
2020/10/12 全球购物
小班评语大全
2014/05/04 职场文书
服务承诺口号
2014/05/22 职场文书
先进工作者申报材料
2014/12/23 职场文书
特岗教师个人总结
2015/02/10 职场文书
团拜会主持词
2015/07/04 职场文书