淺談dojox中的一些小工具

不知道大家在使用dojo各種空間的同時，有沒有關注一下dojo裡面的各種工具包？有些工具包可能並不顯眼，但是對我們的軟體產品或者項目可能協助甚 大，今天我簡單說說dojo extension（dojox）控制項陳列庫裡面的兩個非常有用的工具包 --- dojox.timing 和 dojox.string.

首先來談談timing。可能很多同學聽都沒有聽過，不過我不得不說，他已經存在很久了。今天，我們分兩部分來給大家講解一下：dojox.timingdoLater

其實通過名字我們就能看出點大概 -- “晚點再做”。事實上，他就是這個意思，我們來看看這個代碼：

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中文站，著作權，原文為《淺談dojox中的一些小工具》，如需轉載，請務必附帶本聲明，謝謝。  
InfoQ中文站是一個面向中高端技術人員的線上獨立社區，為Java、.NET、Ruby、SOA、敏捷、架構等領域提供及時而有深度的資訊、高端技術大會如QCon 、線下技術交流活動QClub、免費迷你書下載如《架構師》等。