AICon 上海站|日程100%上线,解锁Al未来! 了解详情
写点什么

浅谈 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:002911

评论

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

C站专家圈分享-低代码构建WebAPI的原理与体验

葡萄城技术团队

架构 低代码 开发 WebApi 前后端

直播预告 | 在 CurveBS 上部署跨机 PolarDB for PostgreSQL 集群

阿里云数据库开源

数据库 postgresql 阿里云 开源 polarDB

BNBChain NFTScan 与 SpaceID 达成合作,在浏览器内支持 .bnb 域名搜索!

NFT Research

区块链 域名 bnb

【SSM】Mybatis系列——多对一和一对多的处理、动态SQL

胖虎不秃头

mybatis SSM框架 9月月更

官宣 | 极狐(GitLab) 公司成立一年完成 4 轮融资,夯实中国开源市场信心

极狐GitLab

开源 DevOps 融资 自主可控 极狐GitLab

跟着卷卷龙一起学Camera--Binder

卷卷龙

ISP 9月月更

TiDB Hackathon 2022丨总奖金池超 35 万!邀你唤醒代码世界的更多可能性!

TiDB 社区干货传送门

黑客马拉松

云原生数据库前世今生

亚马逊云科技 (Amazon Web Services)

数据库 云原生

MediaTek MT7915 Module 2T2R DR7915/Wallys Wi-Fi 6 Wave 1+ chipset

wallys-wifi6

MT7975 MT7915

资深专家亮相华为云快成长直播间CDN专场,助力企业体验升级!

神奇视野

如何写成高性能的代码(一):巧用Canvas绘制电子表格

葡萄城技术团队

html 前端 canvas html2canvas 纯前端表格技术

云原生数据库 Amazon DynamoDB 十年创新回顾

亚马逊云科技 (Amazon Web Services)

数据库 云原生

降本增效的利器——组件化开发

力软低代码开发平台

一文读懂,硬核 Apache DolphinScheduler3.0 源码解析

白鲸开源

源码阅读 Apache DolphinScheduler 工作流编排 大数据 开源 大数据调度

给网站加个速,原来很简单

科技怪咖

经验分享|企业搭建帮助中心步骤

Baklib

select多路选择

飞翔

Go

精讲数据归档分析 |Data Infra 研究社第四期

Databend

大数据 开源 活动预告 #开源 数据归档

降本增效两不误——云原生赋能航空业数字化转型

York

容器 云原生 数字化转型 开发运维 智慧航空

【spring-kafka】@KafkaListener详解与使用

石臻臻的杂货铺

kafka 9月月更

企业在SaaS时代如何玩转帮助中心?

Baklib

【SSM】Spring系列——Spring概述、第一个Spring程序、容器接口和实现类

胖虎不秃头

spring ssm 9月月更

深度学习+大规模计算+大数据,谁才是未来的算力之王

Finovy Cloud

人工智能 云渲染

专家亮相华为云快成长直播间云安全专场,“未雨绸缪”化解数据风险

创意时空

主流开源APM:Zipkin/Pinpoint/SkyWalking全面对比

穿过生命散发芬芳

APM 9月月更

企业做好知识管理的方法:文档管理

Baklib

Java 设置 Word 中的段落缩进方式

Geek_249eec

Java word 段落缩进

腾讯云Crane获国家级科技奖,助力企业降本增效节能减排

科技热闻

数字孪生智慧校园三维可视化管理系统解决方案

数据可视化平台

智慧校园 智慧学校 智慧校园解决方案 智慧校园管理系统 校园三维可视化

和我一起入JavaScript

楠羽

JavaScript 笔记 知识 9月月更

给网站加个速,原来很简单!

sofiya

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