Seven JavaScript tips I should have known (1)

I have been writing JavaScript code for a long time, and I cannot remember the beginning of my time. I am very excited about the achievements of the JavaScript language in recent years. I am lucky to be one of those achievements. I have written many articles, chapters, and a book devoted to it. However, I can still find some new knowledge about this language. The following describes the past, which makes it impossible for me to say "Ah !" You should try these skills now, instead of waiting for the future to discover them by chance.

Concise writing

One of my favorite in JavaScript is the shorthand method for generating objects and arrays.

In the past, if you want to create an object, you need:

 
 

  
  
var car = new Object();  
  
  
car.colour = 'red';  
  
  
car.wheels = 4;  
  
  
car.hubcaps = 'spinning';  
  
  
car.age = 4; 
 
 

The following statement can achieve the same effect:

 
 

  
  
var car = {  
  
  
colour:'red',  
  
  
wheels:4,  
  
  
hubcaps:'spinning',  
  
  
age:4  
  
  
} 
 
 

It's much simpler. You don't need to use the name of this object repeatedly.

In this way, the car is defined. You may encounter invalidUserInSession, which only happens when you use IE. Remember that you don't need to write a semicolon before the right braces, so you won't be in trouble.

Another convenient shorthand is for arrays.

The traditional method for defining arrays is as follows:

 
 

  
  
var moviesThatNeedBetterWriters  
  
  
= new Array(  
  
  
'Transformers','Transformers2','Avatar','Indiana  
  
  
Jones 4'  
  
  
); 
 
 

The short version is as follows:

 
 

  
  
var moviesThatNeedBetterWriters  
  
  
= [  
  
  
'Transformers','Transformers2','Avatar','Indiana  
  
  
Jones 4'  
  
  
]; 
 
 

There is a problem with arrays. In fact, there is no graph group function. But you will often find someone defining the above car, just like this

 
 

  
  
var car = new Array();  
  
  
car['colour'] = 'red';  
  
  
car['wheels'] = 4;  
  
  
car['hubcaps'] = 'spinning';  
  
  
car['age'] = 4; 
 
 

Arrays are not omnipotent; this write is incorrect and confusing. Graph groups are actually object functions, and people confuse these two concepts.

Another cool shorthand method is to use a Trielement conditional symbol.

You don't have to write the following...

 
 

  
  
var direction;  
  
  
if(x < 200){  
  
  
 direction = 1;  
  
  
} else {  
  
  
 direction = -1;  
  
  
} 
 
 

You can use the ternary conditional symbol to simplify it:

 
 

  
  
var direction  
  
  
= x < 200 ? 1 : -1; 
 
 

If the condition is true, the value following the question mark is used. Otherwise, the value following the colon is used.

Store data in JSON format

Before I found JSON, I used various crazy methods to store data in JavaScript's inherent data types, such as arrays, strings, there are symbols that are easy to split and other annoying things in the middle.

After Douglas Crockford invented JSON, everything changed.

Using JSON, you can use JavaScript's own functions to store data in complex formats, and you can directly access and use it without additional conversions.

JSON is the abbreviation of "JavaScript Object Notation". It uses the two abbreviated methods mentioned above.

So if you want to describe a band, you may write it like this:

 
 

  
  
var band = {  
  
  
 "name":"The Red Hot Chili Peppers",  
  
  
 "members":[  
  
  
 {  
  
  
 "name":"Anthony Kiedis",  
  
  
"role":"lead vocals" 
  
  
 },  
  
  
 {  
  
  
 "name":"Michael 'Flea' Balzary",  
  
  
 "role":"bass guitar, trumpet, backing vocals" 
  
  
 },  
  
  
 {  
  
  
"name":"Chad Smith",  
  
  
 "role":"drums,percussion" 
  
  
 },  
  
  
 {  
  
  
 "name":"John Frusciante",  
  
  
 "role":"Lead Guitar" 
  
  
 }  
  
  
 ],  
  
  
 "year":"2009" 
  
  
} 
 
 

You can directly use JSON in JavaScript, encapsulate it in a function, or even use it as the return value form of an API.

We call this JSON-P, and many APIs use this form.

You can call a data provider source to directly return JSON-P data in script code:

 
 

  
  
<div id="delicious"></div><script>  
  
  
function delicious(o){  
  
  
 var out = '<ul>';  
  
  
 for(var i=0;i<o.length;i++){  
  
  
 out += '<li><a  
  
  
href="' + o[i].u + '">' +  
  
  
 o[i].d + '</a></li>';  
  
  
 }  
  
  
 out += '</ul>';  
  
  
 document.getElementById('delicious').innerHTML  
  
  
= out;  
  
  
}  
  
  
</script>  
  
  
<script src="http://feeds.delicious.com/v2/json/codepo8/javascript?count=15&callback=delicious"></script> 
 
 

This is to call the Web service function provided by the Delicious website to obtain the list of recent unordered bookmarks in JSON format.

Basically, JSON is the easiest way to describe complex data structures, and it can run in a browser.

You can even use the json_decode () function in PHP to run it.

Built-in functions of JavaScript (Math, Array, and String)

One thing that surprised me was that when I studied math and String functions in JavaScript, I found they greatly simplified my programming work.

With them, you can save complex loop processing and condition judgment.

For example, when I need to implement a function to find the largest number in the number array, I used to write this loop like this:

 
 

  
  
var numbers =  
  
  
[3,342,23,22,124];  
  
  
var max = 0;  
  
  
for(var i=0;i<numbers.length;i++){  
  
  
 if(numbers[i]  
  
  
> max){  
  
  
max = numbers[i];  
  
  
}  
  
  
}  
  
  
alert(max); 
 
 

We can achieve this without loops:

 
 

  
  
var numbers =[3,342,23,22,124];  
  
  
numbers.sort(function(a,b){return b -a});  
  
  
alert(numbers[0]); 
 
 

Note that you cannot perform sort () on an array of numeric characters, because in this case it will only be sorted alphabetically.

If you want to know more usage, read this good sort () Article.

Another interesting function is Math. max ().

This function returns the largest number in the parameter:

 
 

  
  
Math.max(12,123,3,2,433,4); // returns 433 
 
 

Because this function can verify the number and return the largest one, you can use it to test the browser's support for a feature:

 
 

  
  
var scrollTop=Math.max(  
  
  
doc.documentElement.scrollTop,  
  
  
doc.body.scrollTop  
  
  
); 
 
 

This is used to solve the IE problem. You can get the scrollTop value of the current page, but according to the DOCTYPE on the page, only one of the above two attributes will store this value, and the other attribute will be undefined, so you can use Math. max () gets this number.

Read this article to learn more about how to use mathematical functions to simplify JavaScript.

In addition, a pair of very useful functions for operating strings are split () and join (). I think the most representative example is to write a function to add CSS styles to page elements.

Yes. When you attach a CSS class to a page element, either it is the first CSS class of the element, or it already has some class

, Add a space after the existing class, and then append the class. When you want to remove this class, you also need to remove the spaces in front of this class (this is very important in the past, because some old browsers do not know the class followed by spaces ).

The original writing method is as follows:

 
 

  
  
function addclass(elm,newclass){  
  
  
 var c =elm.className;  
  
  
elm.className = (c === '') ? newclass : c+' '+newclass;  
  
  
} 
 
 

You can use the split () and join () functions to automatically complete this task:

 
 

  
  
function addclass(elm,newclass){  
  
  
 var classes =elm.className.split(' ');  
  
  
classes.push(newclass);  
  
  
 elm.className = classes.join(' ');  
  
  
} 
 
 

This ensures that all classes are separated by spaces, and the class you want to append is placed at the end.

Event Delegate

Web applications are all event-driven. I like event processing, and especially I like to define events myself.

It makes your product scalable without modifying the core code.

There is a big problem (it can be said that it is a powerful performance), it is about the removal of events on the page. You can install an event listener for an element to start running.

But there is no indication on the page that there is a listener. This kind of non-performance problem (this is especially a headache for some new users), as well as "browsers like IE6" may encounter various memory problems when too many event listening requests are used, you have to admit that it is wise to use event programming as little as possible.

Therefore, event delegation emerged.

When an event is triggered on an element on the page, and in the DOM inheritance relationship, all the child elements of this element can also receive this event, in this case, you can use an event processor on the parent element to process the event, instead of using a bunch of event listeners on each child element.

What exactly does it mean? In this case, there are many hyperlinks on the page. You don't want to use these links directly and want to use a function to call this link,

The HTML code is as follows:

 
 

  
  
 
  
<ul id="resources">  
  
  
<li><a href="http://opera.com/wsc">Opera Web Standards  
  
  
Curriculum</a></li>  
  
  
<li><a href="http://sitepoint.com">Sitepoint</a></li>  
  
  
<li><a href="http://alistapart.com">A List Apart</a></li>  
  
  
<li><a href="http://yuiblog.com">YUI Blog</a></li>  
  
  
<li><a href="http://blameitonthevoices.com">Blame it on the voices</a></li>  
  
  
<li><a href="http://oddlyspecific.com">Oddly specific</a></li>  
  
  
</ul> 
 
 

A common practice is to loop through these links and attach an event processor to each link:

 
 

  
  
// Typical event handling example
  
  
(Function (){
  
  
Var resources
  
  
= Document. getElementById ('resources ');
  
  
Var links =
  
  
Resources. getElementsByTagName ('A ');
  
  
Var all =
  
  
Links. length;
  
  
For (var I = 0; I <all; I ++ ){
  
  
// Attach a listener to each link
  
  
Links [I]. addEventListener ('click', handler, false );
  
  
};
  
  
Function handler (e ){
  
  
Var x =
  
  
E.tar get; // Get the link that was
  
  
Clicked
  
  
Alert (x );
  
  
E. preventDefault ();
  
  
};
  
  
})();
 
 

We can also complete this task with an event processor:

 
 

  
  
(function(){  
  
  
 var resources= document.getElementById('resources');  
  
  
 resources.addEventListener('click',handler,false);  
  
  
function handler(e){  
  
  
 var x =e.target; // get the link tha  
  
  
 if(x.nodeName.toLowerCase()  
  
  
=== 'a'){  
  
  
 alert('Event  
  
  
delegation:' + x);  
  
  
 e.preventDefault();  
  
  
 }  
  
  
 };  
  
  
})(); 
 
 

Because click events occur in these page elements, all you need to do is compare their nodeName to find the element that should respond to this event.

Disclaimer: The two event examples mentioned above can run in all browsers. Except for IE6, you need to use an event model on IE6, it is not a simple W3C standard implementation. This is why we recommend some toolkit.

The benefit of this method is not limited to reducing multiple event processors to one. For example, you need to dynamically append more links to the chain table. After event delegation, you do not need to make other modifications. Otherwise, you need to recycle the chain table and re-install the event processor for each link.