BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

浅谈dojox中的一些小工具

| 作者 周翔 关注 0 他的粉丝 发布于 2011年10月11日. 估计阅读时间: 18 分钟 | QCon上海2018 关注大数据平台技术选型、搭建、系统迁移和优化的经验。

不知道大家在使用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'));

我们来一一介绍:

  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中文站投稿或者参与内容翻译工作,请邮件至editors@cn.infoq.com。也欢迎大家加入到InfoQ中文站用户讨论组中与我们的编辑和其他读者朋友交流。

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

"空间" == ”控件“? by Han Meng

错别字哦

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

1 讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT