Seven things to note when learning JavaScript [must read]_Basic knowledge

Knowledge description:

When learning JavaScript, pay attention to the following seven details to make our code easier to understand and more efficient while achieving the same function.

1. Simplified code

Example: Create object

It was like this 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}

For example: Create an array

It was like this before:

Var studentArray = new Array('zhangsan', 'lisi', 'zhaowu', 'wuliu');

And now it can be written like this:

Var studentArray = {‘zhangsan’, ‘ lisi’, ‘zhaowu’, ‘wuliu’};

Example: Use ternary operator to simplify code

The previous writing of

was:

Var result;

if(x > 100)

{

    Result = 1;

}else{

    Result = -1;

}

And now it can be written as:

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

2. Use 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 use the stored data generated by the above JS as the return value of the API

3. Try to use JavaScript native functions

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: Use 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(‘ ');

}

4. Event delegation

For example:

<h2 id="Great-Web-resources">Great Web resources</h2>

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

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

  }

 };

})();

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

6. Code configurable

If you want the code you write to be easier for others to use or modify, it needs to be configurable. The solution is to add a configuration object to the script you write. The key points are as follows:

1. Add an object called configuration in your script.

2. Store in the configuration object all the things that others may want to change, such as CSS ID, class name, language, etc.

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

7. Code Compatibility

Compatibility is something that beginners tend to overlook. Usually when learning Javascript, they are tested in a fixed browser, and this browser is very likely to be IE. This is very fatal, because nowadays few Among the major mainstream browsers, IE has the worst support for standards. The result seen by the end user may be that the code you wrote cannot run correctly in a certain browser. You should test your code in all major browsers. This may be time-consuming, but it should be done.

The above seven things to note when learning JavaScript [must read] are all the content shared by the editor. I hope it can give you a reference, and I also hope that everyone will support Script Home.