0

我找到了这个用于 jQuery 插件的 CoffeeScript 样板,我一直在研究并[试图]在我[试图]编写的插件中使用它。我在其他几个问题中引用了相同的样板/模板。我是 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);

这里这里我了解到,(function(){...}).call(this)包装器是 CoffeeScript 的一项功能,旨在本地化未明确声明为全局的变量。后来我才知道它也可以在编译过程中被抑制。我还了解到我不需要包含windowdocument作为 jQuery 闭包的参数。

当我更多地研究它(并尝试编辑它)时,我看到在编译的代码中,闭包(它是一个函数)$.fn.foobar在它定义它的地方返回。由于该函数是匿名的并且无论如何都不会被调用,我想返回的值并不重要。但是,如果我return在 CoffeeScript 代码中添加这样的语句会怎样:

$.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 输出更...干净...如果您愿意的话。但我需要确认这一点。这对脚本的执行有何影响?

此外,在 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()

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

  1. 是否有理由不return使用 CoffeeScript 代码中的匿名函数?这与原始 CoffeeScript 代码有何不同?
  2. 什么是迭代调用插件的jQuery数组中所有项目的正确方法,同时保持可链接性。

注意:我没有包含 CoffeeScript 代码以避免帖子太长。但是我提供了一个链接到列出代码的页面。但是,如果有问题,请在评论中告诉我,我也会编辑帖子以包含 CoffeeScipt 代码。感谢您的时间。

4

2 回答 2

0

这是更复杂的样板之一。他谈到遵循指南,但随后通过实现一个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 一个咖啡脚本脚本,它创建 2 个插件,并将它们连接到一个flot情节。它是对flotjavascript 示例的改编。注意$ ->$.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 中编写脚本。它们足够短,您可以使用基于浏览器的解释器,并排显示咖啡脚本和 javascript。

于 2013-08-13T17:02:02.137 回答
0

以下是我的做法(请参阅 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

我希望这会有所帮助。

于 2014-05-29T05:44:55.947 回答