Talking about some gadgets in dojox

Original: http://www.infoq.com/cn/articles/zx-dojox-gadgets

I wonder if you have paid attention to the various toolkits in dojo while using the various spaces of dojo? Some toolkits may not be conspicuous, but they may be of great help to our software products or projects. Today I will briefly talk about two very useful toolkits in the dojo extension (dojox) control library — dojox.timing and dojox. string.

dojox.timing

Let’s talk about timing first. Maybe many students have never heard of it, but I have to say that he has been around for a long time. Today, we will explain to you in two parts:

doLater

In fact, by the name, we can tell something about it—”do it later”. In fact, this is what he means. Let’s take a look at this code:

initCustomerWidget: function(){​
if(dojox.timing.doLater(dojo.isObject(main.customerInfo), this, 200)){return;}
//TODO Code
this.jsondata = main.customerInfo;
……. this.jsondata ……
…………. ……………
}

This is part of the program code in the actual project: when the page is initialized, it will call “initCustom erWidget” method, and then initialize some areas and content on the page, but these contents need to be obtained from a variable “main.customerInfo”, but the initial value of the variable “main.customerInfo” is empty, and its value needs to be in the previous You can get it only after you return to the background asynchronous ajax request. Of course: we don’t know when this asynchronous request will return.

OK, there is a problem, how to solve it? At this time “doLater” comes in handy. After adding “if(dojox.timing.doLater(dojo.isObject(main.customerInfo), this, 200)){return;}” this code, the execution rule of “initCustomerWidget” becomes as follows:

< div id="lowerFullwidthVCR" style="margin:0px; padding:0px; border:0px; font-family:Arial,sans-serif; font-size:14px; line-height:21px">

Step 1. If “dojo.isObject(main.customerInfo)” is false, “initCustomerWidget” will not be executed, but it will be executed again after “200” milliseconds “InitCustomerWidget”, and judge the true or false of “dojo.isObject(main.customerInfo)”: If false, go back to “Step 2”, if it is true, go to “Step 2″  

Step 2. When “dojo.isObject(main.customerInfo)” is true, the following code will be executed: “TODO Code”

Sequence

I believe you will often encounter the need to delay the execution of some code in web development In order to meet the needs of users, we usually use the “setTimeout” method. However, if there is more than one piece of code that needs to be delayed, and there is a delay in the delayed code, you will find that if we still use “setTimeout”, our The readability of the code will be greatly reduced. Don’t worry, dojox’s Sequence tool is to solve this problem, see the following code:

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') }); 

As you can see, we only need to define a “seq” object to implement complex delayed functions, where “func” is used to pass in functions that need to be delayed in execution [function, scope (scope), Arguments]. “PauseAfter” represents the delay time, and “repeat” represents the number of repeated executions. It can be seen that our code is very clear now, if we use “setTimeout” to write, how difficult it will be to read.

dojox.string

Let’s talk about the string toolkit of dojox again. As the name suggests, this is definitely a string manipulation. Many people may still remember the method of string manipulation in java, and many people are familiar with the string manipulation method of C++. Here, the dojox.string package will take you back to that era.

builder

Let’s Let’s take a look at the builder. Everyone should be aware of the new tool previously introduced by Java-StringBuilder, which can almost replace the StringBuffer we are familiar with before. The same here, see the following code:

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); 

In fact, these codes should be able to guess what he is doing based on the name. It is almost a simulation of Java’s StringBuilder. “AppendArray” will connect the elements of the array with “”, and then on the string before append, the first parameter of insert is the position to insert, the first parameter of remove is also the position, and the second parameter is to delete the element The number of characters.

sprintf

Look again Looking at the builder, people who have learned C are familiar with this. Dojo can give you the same experience of writing C when developing the web. Refer to the following code:

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"

Is it back to the university era? The usage of sprintf here is almost the same as the writing of the C language we learned before. “0” means that the missing digit is filled with 0, “-” means that the space is filled to the right, “%.10f” means that 10 digits are reserved after the decimal point, if it is not enough, it is filled with 0, etc… You can even write the original in C Copy the good code directly and run it on the web page.

Let’s take a look at the follow-up usage of dojox’s 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) ---'$' 

It seems a bit complicated, but it’s not. The first two I believe everyone can understand that it is a simple order replacement, you can compare them with the third example. In the third example, we can see that sprintf here can pass json objects as actual parameters, and its replacement rules are also very simple, that is, simple matching: (temperature) matches the key value “temperature”.

For “sprintf(“%0*.*f”, 3.14159265, 10, 2)”, here are the 2nd and 3rd This parameter is used to indicate the two “*” signs in front, so the translation is “sprintf(“%010.2f”, 3.14159265)”, so his output is “0000003.14”.

Finally, for 36, the number of characters is’$’. This should not be surprising to everyone.

By the way, these methods in dojox.string have been optimized in terms of performance, so I strongly recommend you to use them.

dojox.validate

Let’s talk about dojox’s validate toolkit. I don’t know if you sometimes go to great lengths to write certain javascript verification scripts, worrying about not covering all situations? If so, then dojox’s verification kit will be your first choice. This toolkit contains almost all of the more popular and commonly used verification methods, such as email, ip, phone number, zip code, etc. You no longer need to spend time and code for some verification, you only need to add a line of code.

validate

This is The basis of the validate toolkit, including many of the most basic validation tools:

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 .va lidate.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'));

Let’s introduce one by one:

  1. “isValidIsbn” Determine whether it is an ISBN. The International Standard Book Number (International Standard Book Number) is referred to as ISBN.
  2. “isText” determines whether it is a qualified string, Note: All spaces are unqualified
  3. “isIpAddress “, “isUrl”, “isEmailAddress”, and “isPhoneNumber” are all simple, so I won’t introduce too much.
  4. “isSocialSecurityNumber”, “isZipCode”, “isPostalCode “And so on are social security number, zip code, note that they all have country restrictions, some are US “us.isSocialSecurityNumber”, and some are Canada “ca.isPostalCode(‘1AZ 3F3’)”.

creditcard

This is a verification for credit cards:

tests.t(dojox.validate.isValidLuhn('5105105105105100')); //test string input//Visa card cvv verification tests.t(dojox.validate.isValidCvv(421 ,'vi'));//American Express card cvv verification tests.t(dojox.validate.isValidCvv('1234','ax')); tests.f(dojox.vali date.isValidCvv(43215,'ax')); //Visa card number verification tests.t(dojox.validate.isValidCreditCard('4111111111111111','vi')); tests.t(dojox.validate.isValidCreditCard('4111111111010' ,'vi'));//American Express card number verification tests.t(dojox.validate.isValidCreditCard('378 2822 4631 0005','ax')); tests.t(dojox.validate.isValidCreditCard('341-1111 -1111-1111','ax')); 

Please refer to the above note, where

  1. “CVV”, namely Card Verification Value, is composed of card number, validity period and service The 3-digit or 4-digit number generated by the constraint code is generally written in the 2-track user-defined data area of ​​the magnetic stripe of the card, usually for verification purposes.
  2. “isValidCreditCard” and “isValidCreditCardNumber” have similar interface functions , Can be universal.

There are some verifications specifically for Brazil and other countries, so I won’t introduce them here.

Leave a Comment

Your email address will not be published.