Note that there are some explanatory texts on larger screens.

plurals
  1. POCoffeescript "return" and jQuery plugin authoring - with templates
    primarykey
    data
    text
    <p>I found this <a href="http://kaibun.net/blog/2013/04/19/a-fully-fledged-coffeescript-boilerplate-for-jquery-plugins/" rel="nofollow noreferrer">CoffeeScript boilerplate for jQuery plugins</a> which I have been studying and <em>[trying to]</em> use in a plugin that I'm <em>[trying to]</em> write. I have referenced the same boilerplate/template in a few other questions. I am an amateur at JavaScript and a complete new-comer to CoffeeScript. I'm trying to study and learn, but when something bothers me and I can't find a satisfactory answer through Google, I come here... So forgive my lack of knowledge and potential mistakes in any code that I write and present here.</p> <p>The CoffeeScript code compiles to this:</p> <pre><code>(function() { (function($, window, document) { var $this, methods, _anotherState, _flag, _internals, _settings; $this = void 0; _settings = { "default": 'cool!' }; _flag = false; _anotherState = null; methods = { init: function(options) { $this = $(this); $.extend(_settings, options || {}); return $this; }, doSomething: function(what) { return $this; }, destroy: function() { return $this; } }; _internals = { toggleFlag: function() { return _flag = !_flag; }, computeSomething: function(state, flag) { return flag != null ? flag : { state: "No, that's not right." }; } }; return $.fn.foobar = function(method) { if (methods[method]) { return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); } else if (typeof method === "object" || !method) { return methods.init.apply(this, arguments); } else { return $.error("Method " + method + " does not exist on jquery.foobar"); } }; })(jQuery, window, document); }).call(this); </code></pre> <p>From <a href="https://stackoverflow.com/questions/18106686/coffeescript-and-jquery-plugin-authoring">here</a> and <a href="https://stackoverflow.com/questions/18148261/jquery-plugin-authoring-in-coffeescript-with-conventionally-private-objects-a">here</a> I understand that the <code>(function(){...}).call(this)</code> wrapper, is a CoffeeScript feature and is meant to localize variables that are not explicitly declared to be global. <em>I later learnt that it can be suppressed during compilation too</em>. I also learned that I did not need to include <code>window</code> and <code>document</code> as arguments to the jQuery closure.</p> <p>As I studied it more (and tried to edit it), I saw that in the compiled code, the closure (which is a function) returns <code>$.fn.foobar</code> right where it defines it. Since that function is anonymous and isn't gonna be called anyway, I suppose the returned value doesn't matter. But still, what if I put a <code>return</code> statement in the CoffeeScript code like this:</p> <pre><code>$.fn.foobar = (method) -&gt; if methods[method] methods[method].apply this, Array::slice.call(arguments, 1) else if typeof method is "object" or not method methods.init.apply this, arguments else $.error "Method " + method + " does not exist on jquery.foobar" # -- This, right here... return # -- </code></pre> <p>It no longer compiles to <code>return $.fn.foobar = ...</code> but instead just <code>$.fn.foobar = ...</code>. I think that doesn't make any difference, rather it makes the JS output more... <em>clean</em>... if you will. But I need to confirm that. How does that effect the execution of the script?</p> <p>Moreover, in the CoffeeScript code, the author says that inside <code>methods.init()</code> I need to perform all operations on <code>$this.each</code> but instead, if I do</p> <pre><code> init: (options) -&gt; $.extend _settings, (options or {}) return $(@).each () -&gt; # I don't really need return, do I? # In here @ is one element (out of the array of elements) return # This is to suppress any returns inside .each() </code></pre> <p>So this is it... Here are my <strong>questions</strong>:</p> <ol> <li>Is there a reason not to <code>return</code> from the anonymous function in the CoffeeScript code? How exactly does that differ from the original CoffeeScript code?</li> <li>What would be a proper way to iterate over all items in the jQuery array on which the plugin is called, while maintaining chainability.</li> </ol> <hr> <p><strong>NOTE</strong>: I did not include the CoffeeScript code to avoid the post getting too long. But I have provided a link to the page where the code is listed. However, if it's a trouble, do let me know in comments and I shall edit the post to contain the CoffeeScipt code, too. Thank you for your time.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload