必威官网组件之旅,插件开发方法小结

必威官网 1
本期,我们要讨论的话题是 JavaScript
的测试,以检查组件的状态和工作方式是否符合预期,还会介绍一个可以方便编写测试用例的测试方法。这里说的测试当然是使用自动化的测试手段,这是软件质量保证(QA)的重要环节。就本系列文章介绍的
Smart Queue 来说,我们的测试目标包括:

1. Farbtastic

必威官网 2

Farbtastic是一个color
picker插件。它能够在一个页面中加入多个颜色选择控件,然后每个控件关联到页面中的一个元素比如:文本输入框。

jQuery为开发插件提拱了两个方法,分别是:
jQuery.fn.extend(object);
jQuery.extend(object);
jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。
jQuery.fn.extend(object);给jQuery对象添加方法。
fn 是什么东西呢。查看jQuery代码,就不难发现。

  • Task
    对象的创建
    :第二期的代码提供了多种创建方式,需要测试对象创建后的状态。
  • Queue
    内的任务运行次序
    :我们提供了两种改变运行次序的方式:优先级和依赖配置,同样也要测试各种配置对次序的影响。

2. Color Picker Control (演示地址)

必威官网 3

Yahoo! UI Library中的颜色选择器。

复制代码 代码如下:

对于第一个目标,只需检查对象创建后的属性是否符合预期即可。我们已经多次提到“符合预期”,断言(Assert)正是为此而设计的。简单的说,断言就是确保所测试的表达式结果为“真”,否则,以某种方式通知测试人员,并帮助其定位断言失败的测试用例。
第二个目标稍稍有点复杂。由于我们在组件编码实现的时候,将排序后的队列(_sorted)隐藏在了闭包中,所以外部是无法访问的。有两种方法可以考虑:(1)重构代码,增加代码的可测试性,又有两种重构方法:(a)设置
debug 开关,打开时将 _sorted
暴露给外部;(b)增加独立文件,以构建的方式拼接代码最终生成一个测试版本。(2)测试行为的结果而不是过程,前一种方法实质上是深入到组件的运行时状态,而这个方法只是检查组件的运行结果。本期选用后一种种测试方式,第一种测试方式留给有兴趣的读者练习:)

3. jQuery Color Picker

必威官网 4

一个简单的颜色选择控件。操作方式与Adobe photoshop中颜色选择操作置。

jQuery.fn = jQuery.prototype = {
   init: function( selector, context ) {//…. 
   //……
};

需要说明的是,我个人不赞成第一种的方法a.
为什么呢?我先说一下这个任务队列的设计理念:

4. iColorPicker

必威官网 5

iColorPicker是一个只有6KB大小的jQuery Color
Picker。只要将输入框的class属性设置为

原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦。
虽然 javascript 没有明确的类的概念,但是用类来理解它,会更方便。
jQuery便是一个封装得非常好的类,比如我们用 语句 $(“#btn1”) 会生成一个
jQuery类的实例。
jQuery.extend(object); 为jQuery类添加添加类方法,可以理解为添加静态方法。如:

  • 它只是一个队列,只负责“按需”调整任务的运行次序,不关注任务的个体细节。换句话说,它操作整体的任务,而不关心任务具体的行为和表现。
  • 它是个安全的队列,使用者(第一期提到的“客户”)可以放心把任务添加进去,不用担心这个任务信息会被其他客户看到。需要说明的是,第二期实现代码中有
    SmartQueue.Queue = [[], [], []],
    结果是外部可以访问到队列项。代码仅供介绍之用,你可以安全地删除
    SmartQueue.Queue =来达成安全控制。

5. dhtmlxColorPicker (演示地址)

必威官网 6

dHTMLxColorPicker是一个功能强大的颜色选择控件。能够处理RGB、HSL和hex三种颜色格式。

复制代码 代码如下:

回到刚才讨论的话题,设置 debug
开关后,任务信息就潜在的泄漏可能性。进一步地,继续改造代码也可以达成在使用
debug 开关时的安全性,做法是将开关的控制放在 SmartQueue
的构造函数中,这样要求 SmartQueue 实现 Singleton
模式(见上一篇文章);一旦创建对象后,不允许修改闭包内的
debug 标记。

您可能感兴趣的文章:

  • JS实现的RGB网页颜色在线取色器完整实例
  • js从10种颜色中随机取色实现每次取出不同的颜色
  • js
    颜色选择器(兼容firefox)
  • javascript使用onclick事件改变选中行的颜色
  • JS小功能(button选择颜色)简单实例
  • js实现的简单radio背景颜色选择器代码
  • JavaScript获取系统自带的颜色选择器功能(图)
  • 原生Javascript封装的一个AJAX函数分享
  • Javascript中的匿名函数与封装介绍
  • javascript编程开发中取色器及封装$函数用法示例

$.extend({
  add:function(a,b){return a+b;}
});

发表评论