浅谈dojox中的一些小工具

快来打我* 2022-04-17 06:17 264阅读 0赞

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

##    首先来谈谈timing。可能很多同学听都没有听过，不过我不得不说，他已经存在很久了。今天，我们分两部分来给大家讲解一下：dojox.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), this, 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工具就是来解决这个问题的，见如下代码：

大家可以看到，我们只用定义一个“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, "Hot", "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", 3.14159265, 10, 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” 接口功能类似，可通用。

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

本文已经首发于[InfoQ中文站][InfoQ]，版权所有，原文为《[浅谈dojox中的一些小工具][dojox]》，如需转载，请务必附带本声明，谢谢。  
[InfoQ中文站][InfoQ]是一个面向中高端技术人员的在线独立社区，为Java、.NET、Ruby、SOA、敏捷、架构等领域提供及时而有深度的资讯、高端技术大会如[QCon][]、线下技术交流活动[QClub][]、免费迷你书下载如[《][Link 1][架构师][Link 1]》等。

[InfoQ]: http://www.infoq.com/cn
[dojox]: http://www.infoq.com/cn/articles/zx-dojox-gadgets
[QCon]: http://www.qconbeijing.com/
[QClub]: http://www.infoq.com/cn/qclub
[Link 1]: http://www.infoq.com/cn/architect