Shulou(Shulou.com)06/02 Report--

This article is to share with you about the details that beginners of JavaScript should pay attention to. The editor thinks it is very practical, so I share it with you. I hope you can get something after reading this article. Without saying much, follow the editor to have a look.

Each language has its special features. For JavaScript, you can declare variables of any type using var. This scripting language looks simple, but it takes a lot of experience to write elegant code. The editor lists seven details that JavaScript beginners should pay attention to and share with you.

(1) simplify the code

JavaScript is very simple to define objects and arrays. We want to create an object, which is generally written like this:

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

The following writing methods can achieve the same effect:

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

The latter is much shorter, and you don't have to repeat the object name.

In addition, there is also a concise way to write arrays. In the past, we declared that arrays were written like this:

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

A more concise way of writing is:

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

For arrays, there is also something special about concatenated arrays. You will find that a lot of code defines objects like this:

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

This is crazy, don't be confused, "associative array" is just an alias for the object.

Another way to simplify code is to use ternary operators, for example:

Var direction; if (x

< 200){ direction = 1; } else { direction = -1; } 我们可以使用如下的代码替换这种写法： var direction = x < 200 ? 1 : -1; （2）使用JSON作为数据格式 伟大的Douglas Crockford发明了JSON数据格式来存储数据，你可以使用原生的javascript方法来存储复杂的数据而不需要进行任何额外的转换，例如： 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" } 你可以使用在JavaScript中直接使用JSON，甚至作为API返回的一种格式，这就是所谓的JSON – P，在许多的API中被应用，例如： div>

Function delicious (o) {var out ='; for (var item0) I script >'

Here, the Web service of delicious is called to get the * * bookmarks, return them in JSON format, and then display them as an unordered list.

In essence, JSON is the lightest way to describe complex data, and it runs directly in the browser. You can even call the json_decode () function in PHP to use it.

(3) use JavaScript native functions as much as possible

To find the number of * in a set of numbers, we might write a loop, such as:

Var numbers = [331, 342, 23, 22, 124]; var max = 0; for (var item0, max) {max = numbers [I];}} alert (max)

In fact, the same function can be achieved without a loop:

Var numbers = [3 return 342]; numbers.sort (function (arecom b) {return b-a}); alert (numbers [0])

And the simplest way to write it is:

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

You can even use Math.max to detect which attributes the browser supports:

Var scrollTop= Math.max (doc.documentElement.scrollTop, doc.body.scrollTop)

If you want to add a class style to an element, it may be written in the original way:

Function addclass (elm,newclass) {var c = elm.className; elm.className = (c = ='')? Newclass: centering'+ newclass

And the more elegant way to write it is:

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

(4) event delegation

Events are a very important part of JavaScript. We want to bind click events to links in a list. The general practice is to write a loop to bind events to each link object. The HTML code is as follows:

Great Web resourcesh3 > Opera Web Standards Curriculuma > li > Sitepointa > li > A List Aparta > li > YUI Bloga > li > Blame it on the voicesa > li > Oddly specifica > li > ul >

The script is as follows:

/ / Classic event handling example (function () {var resources = document.getElementById ('resources'); var links = resources.getElementsByTagName (' a'); var all = links.length; for (var item0)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.