Knowledge description:
When learning JavaScript, pay attention to the following seven details to make our code easier to understand and more efficient when implementing the same function.
1. Simplify the code
For example: Create an 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'};
For example: simplify code using ternary operators
The previous writing method 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 storage data generated by JS above as the return value of the API
<script src="http://feeds.delicious.com/v2/json/codepo8/javascript?count=15&callback=delicious">
</script>
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 returned is 50
For example: Use JS to add 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 entrustment
For example:
<h2>Great Web resources</h2><ul id="resources"> <li><a href="http://opera.com/wsc">Opera Web StandardsCurriculum</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 thevoices</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(); } };})();V. 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. The code can be configured
If the code you write wants to make it 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 a new object called configuration to your script.
2. Store all things that other people may want to change in the configuration object, such as the CSS ID, class name, language, etc.
3. Return this object as a public property so that others can rewrite it.
7. Code compatibility
Compatibility is a part that beginners are likely to ignore. Usually, when learning Javascript, they are tested in a fixed browser, and this browser is likely to be IE, which is very fatal, because among the major mainstream browsers, IE has the worst support for standards. The result that end users see is that the code you wrote does not run correctly in a browser. You should test your code in mainstream browsers, which may be time-consuming, but you should do it.
The above seven precautions for learning JavaScript [must-read] are all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.