写点什么

浅谈 dojox 中的一些小工具

  • 2011-10-10
  • 本文字数:3925 字

    阅读完需:约 13 分钟

不知道大家在使用 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 中文站用户讨论组中与我们的编辑和其他读者朋友交流。

2011-10-10 00:002751

评论

发布
暂无评论
发现更多内容

小白白也能学会的 PyQt 教程 —— 自定义组件 Switch Button

繁依Fanyi

日常开发中,程序员如何提升技术?这13个点一定要做到!

程序员小毕

Java 程序员 程序人生 后端 架构师

NoSQL 数据库架构

Andy

分布式架构-锁原语CAS与各类锁

Andy

从腾讯XR、Meta、迪士尼裁员先砍元宇宙,谈应对不确定新业务

B Impact

网易数帆汪源:低代码仍然被“误会”,市场明年会迎拐点

B Impact

浅克隆和深克隆有什么区别?

javacn.site

java面试

探究 JavaScript 前端热点面试题(三):让你在面试中游刃有余!

Immerse

PullTube for Mac使用技巧:快速导出铃声、缩略图和短片

Rose

Mac视频下载器 PullTube下载 PullTube使用教程

文心一言 VS chatgpt (17)-- 算法导论4.1 3~4题

福大大架构师每日一题

ChatGPT 文心一言

C语言编程—数据类型

芯动大师

TiKV 新架构:Partitioned Raft KV 原理解析

PingCAP

MySQL 数据库 TiDB

MySQL触发器Trigger加载以及目前局限

GreatSQL

MySQL greatsql greatsql社区

开发者反响热烈,阿里云免费试用产品增至 80 多款!

云布道师

阿里云

Session 会话

Andy

2023-05-16:给你一个 严格升序排列 的正整数数组 arr 和一个整数 k 。 请你找到这个数组里第 k 个缺失的正整数。 输入:arr = [2,3,4,7,11], k = 5。 输出:9

福大大架构师每日一题

golang 算法 rust

一不小心,穿越到未来银行

脑极体

生成式AI

一个同事喜欢查别人的BUG,截图发工作大群,还喜欢甩锅怎么办?

Java你猿哥

Java 程序员 ssm 编码 java编程

SVN管理工具Cornerstone入门教程

Rose

cornerstone 4破解 SVN管理 Cornerstone教程 Mac版Cornerstone许可证

SecureCRT中文乱码怎么办?解决 SecureCRT中文乱码方法

Rose

SecureCRT下载 SecureCRT激活版 SecureCRT许可证 SecureCRT中文乱码

CrossOver 让你在Mac上轻松运行 PC 游戏

Rose

虚拟机 CrossOver2023 Mac电脑运行win CrossOver Mac下载

NoSQL 分布式缓存架构

Andy

一不小心,穿越到未来银行

白洞计划

银行 生成式AI

依赖反转和依赖注入:提高程序的可维护性和可扩展性

Jack

AIGC背后的技术分析 | 基于规则产生式的推理

TiAmo

推理 AIGC 规则产生

新能源汽车品牌加速出海 赛力斯“硬实力”助力全球化布局

科技热闻

搜索引擎的基本架构

Andy

BitKeep崛起:千万用户的信任,终点还未到来

股市老人

日常开发中,程序员如何提升技术?这13个点一定要做到!

Java你猿哥

Java ssm java基础 日常开发 java 编程

聊一聊适配器模式

Java 设计模式 适配器模式

浅谈dojox中的一些小工具_Java_周翔_InfoQ精选文章