Use sharing when jquery encounters Coffeescript _jquery

When I first contacted jquery years ago, I felt like I was in the programmer's paradise. It greatly simplifies the DOM operation. Functional programming has become so easy, although more frameworks for RIA development have surfaced in recent years, but I still can't imagine a program without jquery. Life is a sin, I believe you feel the same
and came to the Coffeescript world, the same wonderful story again staged. After writing a few lines of code, I'm sure you won't miss the native JavaScript anymore. Coffeescript contains a lot of new features, and when you combine it with jquery, you'll find a new world.
The purpose of this article is to showcase the wonderful scenes of Coffeescript and jquery working together.
Command your code like a boss.
Coffeescript provides a bunch of cool array iteration methods. The best thing to do is not just to work on arrays, but to work with jquery objects. To do the poetic code:
Formvalues = (Elem.value for Elem in $ ('. Input '))
This line of code will be translated into JavaScript as follows:

Copy Code code 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, it's scary at first to write code, but once you start embracing Coffeescript's magic, you'll love it.
Fly the general method binding
Using the "=>" in the jquery callback will greatly reduce the hassle of manually binding methods to objects. Let's take a look at the code:

Copy Code code as follows:

Object = Func:-> $ (' #div '). Click => @element. CSS color: ' Red '

The following is the JavaScript for compiling output:

Copy Code code 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 "=>" is automatically bound to the original object, yes, that's cool.
In the 2011 the function is called like this
Have a look at this:

Copy Code code as follows:

$.post (
"/posts/update_title"
New_title:input.val ()
Id:something
-> alert (' Done ')
' JSON '
)

With Coffeescript, multiple arguments can be written as multiple lines, and commas and braces are optional, making it easier to read some of the more lengthy methods of signing in jquery such as $.post () and $.animate (). Here's another example:

Copy Code code as follows:

$ (' #thing '). Animate
Width: ' +20px '
Opacity: ' 0.5 '
2000
' Easeoutquad '

It's a delicious coffee, isn't it? Note that the first parameter is an anonymous object, and you can even omit the parentheses of the calling function.
Make the initialization more sexy.
When I first started using jquery, I did this. Page initialization:

Copy Code code as follows:

$ (document). Ready (function () {
Some ();
Init ();
Calls ();
})

Coffeescript and the new version of jquery make the above code evolve so sexy:

Copy Code code as follows:

$->
Some ()
Init ()
Calls ()

The function definition syntax is already very cool in Coffeescript itself, and can be used on these occasions to make it cooler. You will find that all function calls that require callbacks are so simple in coffeescript.
More about Coffeescript please visit its website

Note: A book on Coffeescript has been published in July, with a whole chapter on jquery.