Home > Web Front-end > JS Tutorial > Seven JavaScript skills (2)_javascript skills

Seven JavaScript skills (2)_javascript skills

WBOY
Release: 2016-05-16 15:25:48
Original
1163 people have browsed it

The last article introduced you to the Seven JavaScript Skills (2). I have been writing JavaScript code for a long time, and I can’t even remember when I started. I'm very excited about what JavaScript has accomplished in recent years; I've been lucky enough to be a beneficiary of these achievements. I've written quite a few articles, chapters, and a book dedicated to it, and yet I'm still discovering new things about the language. What follows is a description of programming techniques that have made me say "Ah!" in the past, techniques that you should try now rather than wait to stumble upon them sometime in the future.

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":""
   }
Copy after login

You can use JSON directly in JavaScript, encapsulate it in a function, or even use it as the return value of an API. We call this JSON-P, and many APIs use this form. You can call a data provider and return JSON-P data directly in the script code:

01 
12 

This is to call the Web service function provided by the Delicious website to obtain the recent unordered bookmark list in JSON format. ​

Basically, JSON is the most portable way to describe complex data structures, and it can run in the browser. ​

You can even run it in PHP using the json_decode() function. ​

JavaScript’s built-in functions (Math, Array and String) 

One thing that surprised me is that when I studied the math and String functions in JavaScript, I found that they can greatly simplify my programming work. ​

Using them, you can save complex loop processing and conditional judgment. ​

For example, when I need to implement a function to find the largest number in an array of numbers, I used to write the loop like this:

 var numbers =
  [,,,,];
   var max = ;
   for(var i=;i
   if(numbers[i]
  > max){
   max = numbers[i];
   }
   }
   alert(max);
Copy after login

We can achieve this without looping:

 var numbers =

  [,,,,];
   numbers.sort(function(a,b){return b -
  a});
   alert(numbers[]);
Copy after login

It should be noted that you cannot sort() an array of numeric characters, because in this case it will only be sorted in alphabetical order. ​
If you want to know more usage, you can read this good article about sort(). ​

Another interesting function is Math.max(). ​

This function returns the largest number among the numbers in the parameter:

Math.max(12,123,3,2,433,4); // returns 433 
Copy after login

Because this function checks numbers and returns the largest one, you can use it to test browser support for a feature:

 var scrollTop=
  Math.max(
   doc.documentElement.scrollTop,
   doc.body.scrollTop
   );
Copy after login

This is used to solve IE problems. You can get the scrollTop value of the current page, but depending on the DOCTYPE on the page, only one of the above two properties will store this value, and the other property will be undefined, so you can get this by using Math.max() number. ​

Read this article and you will get more knowledge about using mathematical functions to simplify JavaScript. ​

Another pair of very useful functions for manipulating strings are split() and join(). I think the most representative example is writing a function to attach CSS styles to page elements. ​

This is the case. When you attach a CSS class to a page element, it is either the first CSS class of this element, or it already has some classes. You need to add a space after the existing classes. , and then append this class. And when you want to remove this class, you also need to remove the space in front of the class (this was very important in the past, because some old browsers did not recognize classes followed by spaces).

So, the original writing would be like this:

 function addclass(elm,newclass){
   var c =
  elm.className;
   elm.className = (c === '') ? newclass : c+' '+newclass;
   }  你可以使用 split() 和 join() 函数自动完成这个任务: function addclass(elm,newclass){
   var classes =
  elm.className.split(' ');
   classes.push(newclass);
   elm.className = classes.join(' ');
   }  
Copy after login

This will ensure that all classes are separated by spaces, and the class you want to append is placed at the end.

This is short-sighted behavior. Toolkits can help you develop quickly, but if you don't understand JavaScript deeply, you can also do things wrong.

Storing data in JSON format

Before I discovered JSON, I used all kinds of crazy methods to store data in JavaScript’s native data types, such as arrays, strings, mixed with easy-to-split symbols and other confusing Nasty stuff.

After Douglas Crockford invented JSON, everything changed.

Using JSON, you can use JavaScript's own functions to store data into complex formats, and you don't need to do other additional conversions, and you can access and use them directly.

JSON is the abbreviation of “JavaScript Object Notation”, which uses the two abbreviation methods mentioned above.

The above content is the seven JavaScript skills that the editor has shared with you. I hope you like it.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template