JavaScript Functional Programming Practice (from IBM)

Listing 15. jQuery selector

Copy the codeThe code is as follows:

 
var cons = $("");// Find all divs with note class
var con = $("div#con");// Find the div element with id con
var links = $("a");// Find all link elements on the page

Of course, jQuery selector rules are very rich. What I want to say here is: the jQuery object selected with the jQuery selector is essentially a List. Just like the LISP language, all functions are based on List.
With this List, we can do something like this:

Listing 16. jQuery Operation jQuery Object (List)

Copy the codeThe code is as follows:

 
( function (index){ 
$( this ).click( function (){ 
//do something with the node 
}); 
}); 

Want to use map with cons for all elements in this List (remember the map we mentioned earlier?), and the result is still a List. We can expand/shrink this list arbitrarily, for example:

Listing 17. Expand/reduce jQuery collection

Copy the codeThe code is as follows:

 
("");// Perform a finer filter in
("");// Merge and
(0, 5);// Get a subset of cons

Now let's look at a small example, suppose there is a page like this:

Listing 18. HTML structure of the page

Copy the codeThe code is as follows:

 
<div class="note"> 
<span class="title">Hello, world</span> 
</div> 
<div class="note"> 
<span class="title">345</span> 
</div> 
<div class="note"> 
<span class="title">Hello, world</span> 
</div> 
<div class="note"> 
<span class="title">67</span> 
</div> 
<div class="note"> 
<span class="title">483</span> 
</div> 

The effects are as follows:

Figure 1. Effects before filtering

We filter the wrapper set once through jQuery. The filtering function of jQuery can make the selected list object retain only those that meet the conditions. In this example, we retain such a div if and only if the div contains a span with the class name title, and the content of this span is a number:

Listing 19. Filter collections

Copy the codeThe code is as follows:

 
var cons = $("").hide();// Select the div of the note class and hide it
( function (){ 
return $( this ).find("").html().match(/^\d+$/); 
}).show(); 

The effect is shown in the figure below:

Figure 2. Effect after filtering

Let’s take a look at the operation of arrays in jQuery (essentially, arrays in JavaScript are very similar to List), such as the map functions, filters, etc. we mentioned in the previous example:

Listing 20. jQuery functional operations on arrays

Copy the codeThe code is as follows:

 
var mapped = $.map([1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 
function (n){ 
return n + 1; 
}); 
var greped = $.grep([1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 
function (n){ 
return n % 2 == 0; 
}); 

mapped will be assigned as:
[2, 3, 4, 5, 6, 7, 8, 9, 10, 11]

And greped is:
[2, 4, 6, 8, 10]

Let's look at another example that is closer to reality:

Listing 21. An example of a page refresh

Copy the codeThe code is as follows:

 
function update(item){ 
return 
function (text){ 
$("div#"+item).html(text); 
} 
} 
function refresh(url, callback){ 
var params = { 
type : "echo", 
data : "" 
}; 
$.ajax({ 
type:"post", 
url:url, 
cache: false , 
async: true , 
dataType:"json", 
data:params, 
success: function (data, status){ 
callback(data); 
}, 
error: function (err){ 
alert("error : "+err); 
} 
}); 
} 
refresh("/op=1", update("content1")); 
refresh("/op=2", update("content2")); 
refresh("/op=3", update("content3")); 

First declare a curry function update, which will take the passed parameter as the id of the selector and update the content of this div (innerHTML). Then declare a function refresh, refresh accepts two parameters, the first parameter is the url on the server side, and the second parameter is a callback function. When the server side successfully returns, the function is called.
Then we call refresh three times in succession, and the url and id are different each time, so that the contents of content1, content2, and conetent3 can be updated asynchronously. This pattern is quite effective in actual programming, because about how to communicate with the server and if the part of the selected page content is well abstracted into a function, now all we need to do is pass the url and id to refresh to complete the required actions. Functional programming greatly reduces the complexity of this process, which is the ultimate reason why we choose to use this idea.
Conclusion
In actual applications, they will not be limited to functional or object-oriented, and are usually mixed. In fact, many mainstream object-oriented languages are constantly improving themselves, such as adding some functional programming language features. In JavaScript, the two have been well combined. The code can not only be very simple and beautiful, but also easier to debug.
The article only mentions a small part of the features of jQuery. If you are interested, you can find more links in the reference materials. jQuery is very popular, so you can find many articles discussing how to use it.

References

jQueryThe address of the official website can be downloaded to the latest jQuery library.
Closures in JavaScript: An excellent discussion on JavaScript closures.
The article mentioned The roots of LISPThe translation of LISP describes the basic primitives in detail and explains LISP's Programmability。
Basic concepts of functional programming: An article about the basic concepts of JavaScript functional programming.
“JavaScript framework comparison”: In this article, you will learn how to create highly interactive and responsive web sites and web applications easier and faster with the JavaScript framework.
“JavaScript Development Toolkit”: This topic has collected some resources related to the most popular JavaScript development toolkits in the industry, from a preliminary introduction to advanced usage and content integrating with other development languages and software.
developerWorks Technical ActivitiesandInternet Broadcast: Stay tuned for developerWorks technical activities and webcasts.
developerWorks Web development zone: Expand your skills in website development with articles and tutorials specifically on web technology.
developerWorks Ajax Resource Center: This is a one-stop center for information about Ajax programming models, including many documents, tutorials, forums, blogs, wikis and news. Any new information about Ajax can be found here.
developerWorks Web 2.0 Resource Center, This is a one-stop center for information about Web 2.0, including a large number of Web 2.0 technical articles, tutorials, downloads and related technical resources. You can also pass Getting started with newbies in Web 2.0 Column, quickly understand the relevant concepts of Web 2.0.