Summarize some programming tips for two JavaScript objects _javascript skills

Source: Internet
Author: User
I like to start from the most basic content, and then slowly in-depth, the master may have to give some patience ah.
First look at one of the simplest applications. In the following code, we need to implement a function, that is, click each button to display the corresponding URL
Copy Code code as follows:

<input type= "button" value= "Baidu" onclick= "Javascript:showurl (This)" >
<input type= "button" value= "Google" onclick= "Javascript:showurl (This)" >
<input type= "button" value= "Microsoft" onclick= "Javascript:showurl (This)" >
<input type= "button" value= "blog Park" onclick= "Javascript:showurl (This)" >
<input type= "button" value= "Asun Blog" onclick= "Javascript:showurl" (this) > so. How do you write this showurl function? I think most people might write that.
<script type= "Text/javascript" >
by Go_rush (Asun) from http://ashun.cnblogs.com/
function Showurl (Element) {
var URL;
Switch (element.value) {
Case "Baidu": Url= "http://www.baidu.com/";
Case "Google": Url= "http://www.google.com/";
Case "Microsoft": Url= "http://www.microsoft.com/";
Case "blog garden": url= "http://www.cnblogs.com/";
Case "Asun Blog": url= "http://ashun.cmblogs.com/";
Default:url= ""
}
Alert (URL)
}
</script>

This is not very good, for two reasons:
1. Write too long, very troublesome, with if, switch statements to write, if there are 100 conditions, it would not write 100 statements
2. Inconvenient to maintain and expand, if the requirements often change, those data from the database to do, each change will change the logic structure of the program
Programmers who are more experienced with JavaScript are certainly not going to write this, generally using arrays. Can be a two-dimensional array, or an even-numbered group
1. Double Group Method
Copy Code code as follows:

<script type= "Text/javascript" >
by Go_rush (Asun) from http://ashun.cnblogs.com/
var arrtext=["Baidu", "Google", "Microsoft", "blog Park", "Asun's blog"];
var arrurl=["http://www.baidu.com/", "http://www.google.com/", "http://www.microsoft.com/", "http:// www.cnblogs.com/"," http://ashun.cmblogs.com/"]
function Showurl (Element) {//double group method
var Value=element.value;
for (Var i=0;i<arrtext.length;i++) {
if (arrtext[i]===value) return alert (Arrurl[i])
}
}
</script>

2. Two-D array method
Copy Code code as follows:

<script type= "Text/javascript" >
by Go_rush (Asun) from http://ashun.cnblogs.com/
var arr=[
["Baidu", "http://www.baidu.com/"],
["Google", "http://www.google.com/"],
["Microsoft", "http://www.microsoft.com/"],
["Blog Park", "http://www.cnblogs.com/"],
["Asun's Blog", "http://ashun.cmblogs.com/"]
];
function Showurl (Element) {//two-dimensional array method
var Value=element.value;
for (Var i=0;i<arr.length;i++) {
if (arr[i][0]===value) return alert (Arr[i][1])
}
}
</script>

The above two methods use the array as the data structure, realize the function of the program request, and make full preparation for the later expansion and change.
But what about efficiency? Every time you have to enumerate the group, every time to judge ....
Next, let me introduce a method that does not use an array, loops through the loop, and does not judge the comparison.
First come a paragraph:
Copy Code code as follows:

<script type= "Text/javascript" >
by Go_rush (Asun) from http://ashun.cnblogs.com/
var hash={
"Baidu": "http://www.baidu.com/",
"Google": "http://www.google.com/",
"Microsoft": "http://www.microsoft.com/",
"Blog Park": "http://www.cnblogs.com/",
"Asun's Blog": "http://ashun.cmblogs.com/"
};
function Showurl (Element) {//Use Ha Dilute object
Alert (Hash[element.value])
}
</script>

See no, previously to use the loop, to use the function of judgment, now as long as a line of code is OK, and extensibility is still the best.
If you are familiar with JavaScript, you will certainly have a unique pair of pairs, because it is really a very convenient, very wide application
Data structure, but for the ha dilute object this green apple, even if you only chew it, you will never forget its sweetness.
As a data structure, he can simplify programming in many situations, and his performance is much higher than that of arrays in the face of massive data. (This in
My future PO will be mentioned in the text, please pay attention to)
As an object, he can implement classes in JavaScript and simulate object-oriented programming.
The above is very simple, only as a brick to introduce, we are interested in the reply to talk about their own application experience AH.
Before leaving to say an example---to determine whether the uploaded file is an image file.
<textarea id="runcode56327"><script type= "Text/javascript" >//By Go_rush (Asun) from http://ashun.cnblogs.com///Get Extension function Getext Name (URL) {if (!/\./.test (URL)) return ""; var arr=url.split ("."); return Arr[arr.length-1].tolowercase (); /********* method 1*******/function isImageFile1 (URL) {var ext=getextname (URL) return ext== "jpg" | | ext== "BMP " || ext== "GIF" | | ext== "PNG" | | ext== "JPEG"}/********* method 2********/function set () {for (Var i=0,hash={};i<arguments.length;i++) Hash[argum Ents[i]]=1 return Hash} function isImageFile2 (URL) {return getextname (URL) in set ("JPG", "gif", "PnP", "JPE G ", BMP"}/********* method 2********/var url= "go_rush.gif" alert (isImageFile1 (URL)) alert (isImageFile2 (URL)) </script></textarea>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Note that the SET function, when we implement this function, we can use the collection object like Python, is it convenient?

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.