浅谈dojox中的一些小工具

原文：http://www.infoq.com/cn/articles/zx-dojox-gadgets

不知道大家在使用dojo各种空间的同时，有没有关注一下dojo里面的各种工具包？有些工具包可能并不显眼，但是对我们的软件产品或者项目可能帮助甚 大，今天我简单说说dojo extension（dojox）控件库里面的两个非常有用的工具包 --- dojox.timing 和 dojox.string.

dojox.timing

首先来谈谈timing。可能很多同学听都没有听过，不过我不得不说，他已经存在很久了。今天，我们分两部分来给大家讲解一下：

doLater

其实通过名字我们就能看出点大概 -- “晚点再做”。事实上，他就是这个意思，我们来看看这个代码：

initCustomerWidget: function(){
if(dojox.timing.doLater(dojo.isObject(main.customerInfo),this,200)){return;}
//TODO Code
this.jsondata = main.customerInfo;
....... this.jsondata ......
............................
}

这是一段实际项目中的部分程序代码：页面初始化的时候会调用“initCustomerWidget”方法，然后初始化页面上的一些区域和内容，但是，这些内容需要从一个变量中取得“main.customerInfo”，然而“main.customerInfo”这个变量初始值为空，他的值需要在之前的一次向后台的异步ajax请求返回后才能拿到，当然：我们并不知道这个异步请求何时会返回。

OK，问题出现了，如何解决这个问题？这个时候“doLater”就派上大用场了。加了 “if(dojox.timing.doLater(dojo.isObject(main.customerInfo),200)){return;}” 这段代码之后，“initCustomerWidget”的执行规则变成如下：

步骤 1. 如果“dojo.isObject(main.customerInfo)”为 false，“initCustomerWidget”便不会执行，但是 “200”毫秒以后会再次执行 “initCustomerWidget”， 并判断“dojo.isObject(main.customerInfo)” 的 true or false： 如果false， 则回到 “步骤2”，如果为 true，则到 “步骤2”　　

步骤 2. “dojo.isObject(main.customerInfo)” 为 true 时则会执行接下来的代码：“TODO Code”

Sequence

相信大家在web开发中也经常会碰到需要延迟执行某端代码的需求，通常大家会用“setTimeout”这个方法，但是，如果有不只一段的代码需要延迟，而且出现延迟的代码里面还有延迟的情况，就会发现，如果我们仍然使用“setTimeout”，我们的代码的可读性就会大打折扣了。不用急，dojox的 Sequence工具就是来解决这个问题的，见如下代码：

var seq = [ 
            { func: [showMessage,window,"i am first"],pauseAfter: 1000 },{ func: [showMessage,"after 1000ms pause this should be seen"],pauseAfter: 2000 },"another 2000ms pause and 1000ms pause before"],"repeat 10 times and pause 100ms after"],repeat: 10,pauseAfter: 100 },{ func: returnWhenDone } // no array,just a function to call 
        ]; 

seqObj = new dojox.timing.Sequence({}); 
seqObj.go(seq,function() { logMsg('done') }); 

大家可以看到，我们只用定义一个“seq”对象，即可实现复杂延迟的功能，其中“func”用于传入需要延迟执行的函数 [函数,作用域（scope）,参数（arguments）]。 “pauseAfter”表示延迟时间，“repeat”表示重复执行次数。可见，现在我们的代码是不是非常清晰，如果用“setTimeout”来写，将会是多么难读。

dojox.string

我们再来讲讲dojox的字符串（string）工具包，顾名思义，这个肯定是操作字符串的。可能有不少人对java中的操作字符串的方法记忆犹新，不少人对C++的字符串操作方式较为熟悉。这里，dojox.string包会把你带回到那个时代。

builder

我们先来看看builder，大家应该都知道之前java推出的新工具 -- StringBuilder，他几乎可以取代之前我们熟悉的StringBuffer。这里也是一样，参看如下代码：

var b = new dojox.string.Builder("foo"); 
b.append("foo"); 
b.appendArray([ "foo","bar","baz" ]); 
b.replace("foo","baz"); 
b.replace("o","a").replace("b","f"); 
b.insert(10,"awesome"); 
b.insert(0,"foo").insert(3,"bar").insert(3,"zoo"); 
b.remove(2,100); 

b.remove(5); 

其实这些代码大家根据名字应该就能猜出来他是干什么的了，他几乎是模拟java的StringBuilder的做法。“appendArray”会把数组各个元素用“”连接起来，然后在append的之前的字符串上，insert第一个参数是插入的位置，remove第一个参数也是位置，第二个参数是指删除元素的字符数。

sprintf

再来看看builder，学过C的人对这个再熟悉不过了，dojo可以让你在开发web的时候同样有在写C的体验。参考如下代码：

var sprintf = dojox.string.sprintf; 
sprintf("% d",42)    --- " 42" 
sprintf("% 15d",-42)    --- "            -42" 
sprintf("%+d",42)    --- "+42" 
sprintf("%05d",42)    --- "00042"  
sprintf("%-15d",42)    --- "42             " 
sprintf("%.2f",42.8952)    --- "42.90"  
sprintf("%.10f",42.8952)    --- "42.8952000000" 
sprintf("%06.2f",42.8952)    --- "042.90"

是不是回到了大学时代？这里的sprintf的用法与我们之前学的C语言的写法几乎一致。“0”表示缺位补0，“-”表示空格补在右，"%.10f"表示小数点后保留10位，不足则补0等等...... 你甚至可以把原先用C写好的代码直接复制过来，便可以跑在web页面上了。

我们再来看看dojox的sprintf的后续用法：

sprintf("%1$s %2$s","Hot","Pocket")             ---"Hot Pocket" 
sprintf("%1$.1f %2$s %3$ss",12,"Pocket")     ---"12.0 Hot Pockets" 
sprintf("%(temperature)s %(crevace)s",{ temperature: "Hot",crevace: "Pocket" })); ---"Hot Pocket" 
sprintf("%0*.*f",3.14159265,10,2)             ---"0000003.14" 
sprintf("%c",36)                     ---'$' 

似乎有点复杂了，其实不然，前两个相信大家都能明白，就是简单的顺序替换，可以把它们和第三个示例对比一下。有第三个示例我们可以看出，这里的 sprintf可以传递json对象作为实参，其替换规则也很简单，就是简单的匹配：(temperature)匹配key值 “temperature”。

对于“sprintf("%0*.*f",2)”， 这里的第2和第3个参数用于指明前面的两个“*”号，所以翻译过来就是 “sprintf("%010.2f",3.14159265)”，所以他的输出是"0000003.14"。

最后，对于36，其字符数出为'$'，这个大家应该不奇怪了吧。

顺便说一下，dojox.string里面的这些方法在性能上都做过优化，所以强烈推荐大家使用。

dojox.validate

我们再来讲讲dojox的验证（validate）工具包。不知道大家是不是有时候会为写某一些javascript的验证脚本而费尽心思，担心无法覆盖到所有的情况？如果有，那么dojox的验证工具包将会是您的首选。这个工具包里面包含了几乎所有的比较流行，常用的一些验证方法，如邮箱，ip，电话号码，邮编等等等等。你不再需要为某些验证花费时间和代码量了，你只需要添加一行代码即可。

validate

这是validate工具包的基础，包括很多最基本的验证工具：

tests.t(dojox.validate.isValidIsbn('0-596-00759-0')); 
tests.t(dojox.validate.isText('        x     '));
tests.f(dojox.validate.isIpAddress('024.17.155.040'));
tests.f(dojox.validate.isUrl('http://.yahoo.com'));
tests.f(dojox.validate.isEmailAddress('x@yahoo')); 
tests.t(dojox.validate.isInRange( '1',{min: 1,max: 100} ));
tests.t(dojox.validate.us.isPhoneNumber('111/111-1111'));
tests.f(dojox.validate.us.isSocialSecurityNumber('123-45 6789')); 
tests.t(dojox.validate.us.isZipCode('123456789')); 
tests.f(dojox.validate.ca.isPostalCode('1AZ 3F3'));

我们来一一介绍：

1. “isValidIsbn” 判断是否为国际标准书号。国际标准书号（International Standard Book Number）简称ISBN。
2. “isText” 判断是否是合格字符串， 注：全为空格则不合格
3. “isIpAddress”， “isUrl”，“isEmailAddress”， “isPhoneNumber”都很简单，不做过多介绍。
4. “isSocialSecurityNumber”， “isZipCode”， “isPostalCode”等等分别为社保号，邮编，注意这里他们都有国家限制，有的是美国 “us.isSocialSecurityNumber”， 有的是加拿大 “ca.isPostalCode('1AZ 3F3')”。

creditcard

这是专门针对信用卡的验证：

tests.t(dojox.validate.isValidLuhn('5105105105105100')); //test string input
//Visa 卡 cvv 验证 
tests.t(dojox.validate.isValidCvv(421,'vi'));
//American Express 卡 cvv 验证 
tests.t(dojox.validate.isValidCvv('1234','ax')); 
tests.f(dojox.validate.isValidCvv(43215,'ax')); 
//Visa 卡号验证 
tests.t(dojox.validate.isValidCreditCard('4111111111111111','vi')); 
tests.t(dojox.validate.isValidCreditCard('4111111111010','vi'));
//American Express 卡号验证 
tests.t(dojox.validate.isValidCreditCard('378 2822 4631 0005','ax')); 
tests.t(dojox.validate.isValidCreditCard('341-1111-1111-1111','ax')); 

可以参见上述注释，其中

1. “CVV”，即 Card Verification Value，是由卡号、有效期和服务约束代码生成的3位或4位数字，一般写在卡片磁条的2磁道用户自定义数据区里面，通常作验证用途。
2. “isValidCreditCard” 与 “isValidCreditCardNumber” 接口功能类似，可通用。

还有一些验证专门用于巴西等国家，这里不做介绍。