原文: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), 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工具就是来解决这个问题的,见如下代码:
var seq = [ { func: [showMessage, window, "i am first"], pauseAfter: 1000 }, { func: [showMessage, window, "after 1000ms pause this should be seen"], pauseAfter: 2000 }, { func: [showMessage, window, "another 2000ms pause and 1000ms pause before"], pauseAfter: 1000 }, { func: [showMessage, window, "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, "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'));
我们来一一介绍:
- “isValidIsbn” 判断是否为国际标准书号。国际标准书号(International Standard Book Number)简称ISBN。
- “isText” 判断是否是合格字符串, 注:全为空格则不合格
- “isIpAddress”, “isUrl”,“isEmailAddress”, “isPhoneNumber”都很简单,不做过多介绍。
- “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'));
可以参见上述注释,其中
- “CVV”,即 Card Verification Value,是由卡号、有效期和服务约束代码生成的3位或4位数字,一般写在卡片磁条的2磁道用户自定义数据区里面,通常作验证用途。
- “isValidCreditCard” 与 “isValidCreditCardNumber” 接口功能类似,可通用。
还有一些验证专门用于巴西等国家,这里不做介绍。