Question

我发现这个CoffeeScript boilerplate for jQuery plugins我一直在研究 [试图] 在插件中使用我 [试图] 写。我在其他几个问题中引用了相同的样板/模板。我是JavaScript的业余爱好者，也是CoffeeScript的新手。我正在努力学习和学习，但当有什么事情困扰我而我无法通过Google找到满意的答案时，我来到这里......原谅我在这里写的任何代码中缺乏知识和潜在错误

CoffeeScript代码编译为：

(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);

从here和here我了解(function(){...}).call(this)包装器是CoffeeScript功能，用于本地化未明确声明为全局的变量。 我后来才知道它可以在编译期间被抑制。我还了解到，我不需要将window和document作为参数包含在jQuery闭包中。

当我研究它（并尝试编辑它）时，我看到在编译的代码中，闭包（它是一个函数）在它定义它的地方返回$.fn.foobar。由于该函数是匿名的，无论如何都不会被调用，我认为返回的值无关紧要。但是，如果我在CoffeeScript代码中添加return语句，如下所示：

$.fn.foobar = (method) ->
  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
# --

它不再编译为return $.fn.foobar = ...，而只编译$.fn.foobar = ...。我认为这没有任何区别，相反它会使JS输出更多... clean ...如果你愿意的话。但我需要确认一下。这会如何影响脚本的执行？

此外，在CoffeeScript代码中，作者说在methods.init()内我需要对$this.each执行所有操作，但是，如果我这样做

  init: (options) ->
    $.extend _settings, (options or {})
    return $(@).each () -> # 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()

所以就是这样......以下是我的问题：

有没有理由不从CoffeeScript代码中的匿名函数return？这与原始的CoffeeScript代码有何不同？
在保持可链接性的同时，迭代调用插件的jQuery数组中的所有项目的正确方法。

注意：我没有包含CoffeeScript代码以避免帖子过长。但我提供了一个链接到列出代码的页面。但是，如果这是一个麻烦，请在评论中告诉我，我也会编辑帖子以包含CoffeeScipt代码。谢谢你的时间。

Answer 1

这是更复杂的锅炉板之一。他谈到了遵循这些准则，但随后通过实施一个foobar插件使事情复杂化，并将代理事项转换为多个methods。这会模糊返回的内容以及链接应该如何工作。我没有在他引用的“高级插件”页面中看到这种复杂程度（http://learn.jquery.com/plugins/advanced-plugin-concepts/）

将它与简单的

进行比较可能会有所帮助

http://coffeescriptcookbook.com/chapters/jquery/plugin

https://github.com/jquery-boilerplate/jquery-boilerplate/blob/master/src/jquery.boilerplate.coffee

https://stackoverflow.com/a/18049128/901925 一个coffeescript脚本，创建2个插件，并将它们连接到flot图。它是flot javascript示例的改编版。请注意使用$ ->，$.fn.pluginname ->和$('element').plugin()。这些是jQuery的关键部分。

coffeescript函数只返回最后一项。如果调用者不使用返回值，则返回函数的事实并不重要。创建插件时最重要的是$ .fn获取一个新属性（有些人使用extend来添加几个属性）。

如果插件使用@each，并使用类似$("li").myplugin()的内容调用，则使用每个元素

$.fn.myplugin = (options) ->
  @each ()->
    console.log 'adding plugin to ',@

样板文件在评论中提到了这一点

#  $this.each (index, el) ->
#    # do something with el

整合这些想法的更好方法可能是浏览learn.jquery页面，并在Coffeescript中编写脚本。它们足够短，您可以使用基于浏览器的解释器并排显示coffeescript和javascript。

Answer 2

这是我如何做到的（see the whole source in GitHub包括如何使用QUnit对Coffeescript jQuery插件进行单元测试的示例，以及如何使用sourceMap将其构建为缩小版本。）

throw "Expected jQuery to have been loaded before this script."  if typeof jQuery isnt "function"
(($) ->

  # Main jQuery Collection method.
  $.fn.myPlugin = (options) ->
    self = this
    opts = $.extend true, {}, $.fn.myPlugin.options
    @options = if typeof options is "object"
      $.extend(true, opts, options)
    else
      opts
    @each ->
      $this = $(this)

      # TODO: do pluginy stuff with $this

      return $this # because it's chainable.

  # defaults
  $.fn.myPlugin.options =
    whatever: true
) jQuery

相应的QUnit测试看起来像

(($) ->

  module "basic tests",

    setup: ->
      this.elems = $("#qunit-fixture").children(".qunit-container")

  # all jQuery plugins must be chainable.
  test "is chainable", ->
    expect(1)
    strictEqual(this.elems.myPlugin(), this.elems, "should be chainable")

) jQuery

我希望有所帮助。

Coffeescript＆＃34;返回＆＃34;和jQuery插件创作 - 使用模板

2 个答案: