JavaScript Practical Tips (i) _javascript skills

The success of JavaScript is a great relish, writing JavaScript code for Web pages is the basic skill of all web designers, and this interesting language contains many things that are not well known, even for years of JavaScript programmers who have not fully understood them. This article is about 7 aspects of JavaScript that you are not familiar with but very practical techniques.

Brief statement
JavaScript can use abbreviated statements to quickly create objects and arrays, such as the following code:

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

You can use the following shorthand statements:

var car = {
Colour:'red',
Wheels:4,
Hubcaps:'spinning',
Age:4
}

Object car to create this, but you need to pay special attention to the end of the curly braces must not add ";" otherwise in IE will encounter a lot of trouble.

The traditional way to create arrays is:

var arraytest = new Array (
'test1','test2','test3','test4'
);

Use abbreviated statements:

var arraytest = ['test1','test2', ' test3 ', 'test4'];

Another place where you can use a shorthand statement is a conditional judgment statement:

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

// can be abbreviated to:
var  direction  =  x  <     ? &NBSP 1  :  - 1 ;

JSON data Format
JSON is an abbreviation for "JavaScript Object notation", designed by Douglas Crockford, which changes the plight of JavaScript in caching complex data formats, as in the following example, if You want to describe a band that can be written like this:

--> VarBand={
"Name":"My name is Test1",
"Members":[
{"Name":"Name1","Role":"Role1"},
{"Name":"Name2","Role":"Role2"},
             { Name : " name3 " , " role " : " role3 " },
             { " name " : " name4 " , " role " : " role4 " }
             ],
    year ": " "
"

You can use JSON directly in JavaScript, even as a return data object for some APIs, The following code calls an API for the famous bookmark site delicious.com, returns you all bookmarks on the site and displays it on your own site:

--> <DivId= "Delicious"></Div>
<Script>
functionDelicious (o) {
VarOut='<ul>';
For(VarI=0; I<O.length;i + + ) {
      out  + + ' <li><a  href= " ' + o[i].u + ' " "" + o[i].d + ' </a ></li> ' ;
&NBSP;&NBSP;&NBSP}
   out  + =   ' </ul> ' ;
   document.getelementbyid ( ' delicious ' ). innerhtml  =  out;
}
</ script
script  src = "http:// Feeds.delicious.com/v2/json/codepo8/javascript?count=15&callback=delicious the ></ script

JavaScript local functions (Math, Array, and String)
JavaScript has many built-in functions that can be used effectively to avoid a lot of unnecessary code, such as finding the maximum value from an array, the traditional method is:

!--

code highlighting produced by Actipro Codehighlighter (freeware)
http://www. codehighlighter.com/

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

Using built-in functions can be easier to implement:

var numbers = [3,342,124];
Numbers.sort (function(a,b) {return b - A});
Alert (numbers[0]);

Another method is to use the Math.max () method:

Math.max (123,2,3,422,4); Return 422

You can use this method to help probe the browser

var scrolltop = Math.max (doc.documentelement.scrolltop,doc.body.scrolltop);

This solves a problem with IE, in this way, you can always find the correct value, because the browser does not support that value will return to undefined.

You can also use JavaScript's built-in split () and join () functions to handle the CSS class name of an HTML object, and if the HTML object's class name is a space-separated number of names, you need to pay special attention when appending or deleting a CSS class name, if the object does not have a class name , you can give it directly to the new class name, and if you already have a class name, you must have a space before the new class name, which is done with the traditional JavaScript method:

function addclass (elm,newclass) {
var c = elm.classname;
Elm.classname = (c = = "")? Newclass:c+' +newclass;
}

Using the split and join methods is much more visually elegant:

function addclass (elm,newclass) {
var classes = elm.className.split (' );
Classes.push (Newclass);
Elm.classname = classes.join (" );
}

Event Agent
Rather than designing a bunch of events in an HTML document, it is better to design an event agent directly, for example, if you have some links, the user does not want to open the link after clicking, but executes an event, the HTML code is as follows:



The traditional event processing is traversing each link, plus the individual event handling:



Using the event agent, you can handle it directly without traversing:


Anonymous functions and Module mode
One problem with JavaScript is that any variable, function, or object, unless defined within a function, is global, meaning that other code on the same page can access and rewrite the variable (ECMA's JavaScript 5 has changed this situation-the translator), Using anonymous functions, you can bypass the problem.

For example, you have such a piece of code, obviously, variable name, age, status will become global variables



To avoid this problem, you can use an anonymous function:



If this function is not invoked, it can be more directly:



If you want to access an object or function within it, you can:



This is the so-called Module mode or single example mode (Singleton), the model is Douglas Crockford, and is widely used in Yahoo User Interface Library YUI.

If you want to call the inside method elsewhere and do not want to use the MyApplication object name before the call, you can return the methods in the anonymous function, even by simply returning:


Code configuration
It's hard to change some code when someone uses your JavaScript code, but it's difficult because it's not easy for everyone to read someone else's code, so instead of creating a code configuration object, the other person needs to change some configuration in order to make changes to the code. Here is a JavaScript configuration object detailed article, simply said:

• Create an object called configuration in your code
• Inside, save all the configurations you can change, such as CSS ID and class name, button label text, descriptive text, localized language settings
• Set the object as a global object so that others can access it directly and overwrite it

You should do the work in the last step, here is a reference to the article, the value of 5 things before delivering the code.
Interacting with the background
JavaScript is a front language, you need other languages to interact with the background, and return data, using AJAX, you can let JavaScript directly use the interaction with the background, the complex data processing to the background processing.
JavaScript Framework
It is a total waste of time to write your own code that adapts to the various browsers, and you should choose a JavaScript framework that allows these complex things to be handled by the framework.