Seven important things to learn about JavaScript

Knowledge Description:

Beginner JavaScript, pay attention to the following seven big details, in the case of the same function, make our code more understandable, more efficient.

First, Simplifying Code

Example: Creating an Object

This is the way it was before:

Var car = new Object ();

Car.color = "Red";

Car.wheels = 4;

Car.age = 8;

And now it can be written like this:

Var car = {color: ' Red ', Wheels:4, Age:8}

Example: Creating an array

This is the way it was before:

Var Studentarray = new Array (' Zhangsan ', ' Lisi ', ' Zhaowu ', ' Wuliu ');

And now it can be written like this:

Var Studentarray = {' Zhangsan ', ' Lisi ', ' Zhaowu ', ' Wuliu '};

Example: Using ternary operators to simplify code

The previous wording was:

Var result;

if (x > 100)

{

Result = 1;

}else{

Result =-1;

}

And now it can be written as:

Var result = x >100? 1:-1;

Second, using JSON as the data format

Use JSON format to store data:

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 also use JS to store data, the code is as follows:

<div id = "Datadiv" ></div>

<script>

Function SaveData (data)

{

Var out = "<ul>";

for (var i=0; i<data.length; i++)

{

Out + = "<li><a href =" ' +data[i].url+ ' ">+

Data[i].d+</a></li> ";

}

Out + = ' </ul> ';

document.getElementById (' Datadiv '). InnerHTML = out;

}

</script>

You can even add the stored data generated by the above JS as the return value of the API

<script src= "http://feeds.delicious.com/v2/json/codepo8/javascript?count=15&callback=delicious" >

</script>

Third, use JavaScript native functions as much as possible

For example, get the maximum value in a set of data

var maxData = Math.max (0,20,50,10);

alert (maxData); The maximum value returned is 50

For example: Using JS to add a class style to an element, the code snippet is as follows:

Function addclass (Elm, Newclass)

{

Var classes = Elm.className.split (");

Classes.push (Newclass);

Elm.classname = Classes.join (");

}

Four, Event Delegate

For example:

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

The best way to write scripts:

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

}

};

})();

Five, Anonymous Functions

var myapplication = function () {

var name = ' Chris ';

var age = ' 34 ';

var status = ' single ';

function Createmember () {

// [...]

}

function Getmemberdetails () {

// [...]

}

return{

Create:createmember, Get:getmemberdetails

}

}();

Myapplication.get () and myapplication.create () now work.

Six, code can be configured

The code you write is configurable if you want to make it easier for others to use or modify, and the solution is to add a configuration object to the script you write. Key points are as follows:

1. Add a new object called configuration to your script.

2, in the configuration object to store all other people may want to change things, such as the CSS ID, class name, language and so on.

3. Return this object as a public property so that others can rewrite it.

Seven, Code Compatibility

Compatibility is easy for beginners to ignore, usually learning JavaScript is in a fixed browser to test, and this browser is likely to be IE, this is very deadly, because the current few major browsers, IE is the worst of the standard support. The end user may see the result that the code you write does not work correctly in a browser. You should test your code in a mainstream browser, which may be time-consuming, but should do so.

Seven important things to learn about JavaScript