When jQuery meets CoffeeScript, use sharing_jquery

When I first came across jQuery many years ago I felt like I was in a programmer's paradise. It greatly simplifies DOM manipulation. Functional programming has become so easy. Although more frameworks suitable for RIA development have emerged in recent years, I still can’t imagine how sinful it is to live a program without jQuery. I believe you feel the same~
I came to CoffeeScript World, the same wonderful story is happening again. After writing a few lines of code I'm sure you won't miss native Javascript anymore. CoffeeScript contains many new features, and when you combine it with jQuery, you will discover a new world.
The purpose of this article is to show the wonderful scene when CoffeeScript and jQuery work together.
Command your code like a boss
CoffeeScript provides a bunch of cool array iteration methods. The best thing is that this not only works with arrays, but also with jQuery objects. Let’s write a poetic code:
formValues ​​= (elem.value for elem in $('.input'))
This line of code will be translated into the following Javascript:

Copy code The code is as follows:

var elem, formValues;
formValues ​​= (function() {
var _i, _len, _ref, _results;
_ref = $('.input');
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i ) {
elem = _ref[_i];
_results.push(elem.value);
}
return _results;
})();

To be honest, writing code like this is really scary at first, but once you start embracing the magic of CoffeeScript, you will fall in love with it.
General method binding
Using "=>" in jQuery's callback will greatly save you the trouble of manually binding methods to objects. Let’s look at a piece of code:

Copy code The code is as follows:

object = func: -> $ ('#div').click => @element.css color: 'red'

The following is the compiled output Javascript:

Copy code The code is as follows:

var object;
var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments ); }; };
object = {
func: function() {
return $('#div').click(__bind(function() {
return this.element.css ({
color: 'red'
});
}, this));
}
};

The @element in the code points to A jQuery object that is specified elsewhere - such as object.element = $('#some_div').
Any callback function specified using "=>" will automatically be bound to the original Object-wise, yeah, that's cool.
This is how the function was called in 2011
Take a look at this:

Copy the code The code is as follows:

$.post(
"/posts/update_title"
new_title: input.val()
id: something
-> alert('done')
'json'
)

Using CoffeeScript, multiple parameters can be written in multiple lines to call. Commas and curly brackets are optional, which makes some methods with longer signatures in jQuery such as $ .post() and $.animate() etc. are more readable. Here is another example:

Copy code The code is as follows:

$('#thing' ).animate
width: ' 20px'
opacity: '0.5'
2000
'easeOutQuad'

Delicious coffee, isn't it? Note that the first parameter is an anonymous object, and you can even omit the meta-brackets in the function call.
Make initialization sexier
When I first started using jQuery I initialized the page like this:

Copy code The code is as follows:

$(document).ready(function() {
some();
init();
calls();
})

CoffeeScript and the new version of jQuery make the above code evolve so sexy:

Copy code The code is as follows:

$->
some()
init()
calls()

The function definition syntax in CoffeeScript is already very cool, and being able to use it in these situations makes it even cooler. You will find that all function calls that require callbacks are so simple in CoffeeScript.
For more information about CoffeeScript, please visit its official website

Note: There is already a book about CoffeeScript released in July, which has an entire chapter on jQuery.