I don't always write CoffeeScript, but when I do, I'm probably using jQuery too; I always forget the syntax for stuff. So I'm going to write it all down here so I can reference it until I memorize it.
So you can use the $ safely (common in WordPress): (($) -> ) jQuery (function($) { })(jQuery); DOM Ready $ -> console.log("DOM software is ready") $(function() { return console.log("DOM is ready"); }); Call Method with No Params $(".submit").click -> console.log("submitted!") $(".submit").click(function() { return console.log("submitted!"); }); Call Method with One Param $(".button").on "click", -> console.log("button clicked!") $(".button").on("click", function() { return console.log("button clicked!"); }); Call Method With Multiple Params $(document).on "click", software ".button2", -> console.log("delegated button click!") $(document).on("click", ".button2", function() { return console.log("delegated button click!"); }); Params in the Anonymous Function $(".button").on "click", (event) -> console.log("button clicked!") event.preventDefault() $(".button").on("click", function(event) { console.log("button clicked!"); return event.preventDefault(); }); Returning False $(".button").on "click", -> false $(".button").on("click", function() { return false; }); A Simple Plugin $.fn.extend makeColor: (options) -> settings = option1: "red" settings = $.extend settings, options return @each () -> $(this).css color: settings.color $.fn.extend({ makeColor: function(options) { var settings; settings = { option1: "red" }; settings = $.extend(settings, options); return this.each(function() { return $(this).css({ color: settings.color }); }); } }); Using Plugin $("a").makeColor color: "green" $("a").makeColor({ color: "green" }); Ajax
Note the string interpolation in there too, that's software nice. $.ajax url: "some.html" dataType: "html" error: (jqXHR, textStatus, errorThrown) -> $('body').append "AJAX Error: #{textStatus}" success: (data, textStatus, jqXHR) -> $('body').append "Successful AJAX call: #{data}" $.ajax({ url: "some.html", dataType: "html", error: function(jqXHR, textStatus, errorThrown) { return $('body').append("AJAX Error: " + textStatus); }, success: function(data, textStatus, jqXHR) { return $('body').append("Successful AJAX call: " + data); } }); Animation
Two software ways. div.animate {width: 200}, 2000 div.animate width: 200 height: 200 2000 div.animate({ width: software 200 }, 2000); div.animate({ width: 200, height: 200 }, 2000); Animation with Callback div.animate color: red 2000 -> doSomething() div.animate({ color: red }, 2000, function() { return doSomething(); }); Chaining
The last line gets returned here when it doesn't really need to but whatever. $.when( $.get("/feature/", (html) -> globalStore.html = html; ), $.get("/style.css", (css) -> globalStore.css = css; ) ).then -> $("<style />").html(globalStore.css).appendTo("head") $("body").append(globalStore.html) $.when($.get("/feature/", function(html) { return globalStore.html = html; }), $.get("/style.css", function(css) { return globalStore.css = css; })).then(function() { $("<style />").html(globalStore.css).appendTo("head"); return $("body").append(globalStore.html); }); Fat Arrow to Retain `this`
Otherwise inside the setTimeout you wouldn't have a reference to the button. $(".button").click -> setTimeout ( => $(@).slideUp() ), 500 $(".button").click(function() { return setTimeout(((function(_this) { return function() { return $(_this).slideUp(); }; })(this)), 500); });
I’m curious to hear what your thoughts are on Coffee script compared to writing JS. I listened to your talk at Front End Design Conference about SASS and it’s necessary abstraction. Do you feel the same with Coffee Script?
I write code faster, and have more time to ensure it is of good quality Some complain it makes people sloppy Javascript coders. I don’t think any language can prevent that. Quality code is a discipline, and you can do it with Coffeescript as well as with Javascript. I still spend a lot of time in Javascript, software and usually check the generated output. I now find the lack of curly braces a benefit. The indentation is easier to see, and I find the syntax more readable than javascript in many situations. The only annoyance I have is when I switch languages; I sometimes code one in the other. software But I do that with other languages anyway. The setup is really not hard. And if you are preprocessing Sass, it is a very small step to add Coffeescript. Nearly nothing if you use Grunt or Gulp or Codekit. software
I don’t feel like CoffeeScript is as useful to JavaScript as Sass is to CSS. With Sass, that is the primary abstraction. Sass gives you those basic tools of abstraction that are (usually) needed. Those primary abstractions already exist in JavaScript (variables, functions, etc).
I don’t software have very strong feelings software about CoffeeScript overall. If you like it and are productive i
