CoffeeScript 和 jQuery 插件创作

Question

我习惯于通过包含离题和无用的咆哮来使问题变得不必要地冗长。这次我尽量不做。 对于缺少更好、更具描述性的标题，我深表歉意。

所以，这里有一个CoffeeScript 代码。

(($, window, document) ->

  # Conventionally 'private' variables
  _name     = 'aPlugin'
  _defaults =
    property: 'value'

  _debug    = (args) ->
    console.log args
    return

  # Plugin constructor
  Plugin = (element, options) ->
    @element = element
    @options = $.extend true, {}, _defaults, options

    @init()
    return

  # Initialization
  Plugin.prototype.init = () ->
    # Initialization logic here
    _debug(@element) unless typeof(@element)=='undefined'
    return

  # Plugin wrapper, allowing for multiple instances
  # and chainability
  $.fn[_name] = (options) ->
    return @.each (idx) ->
      ($.data @, 'plugin_' + _name
      new Plugin @, options
      ) unless $.data @, 'plugin_' + _name
  return

) jQuery, window, document

这是相同的代码，当编译（或转编译）为 JavaScript 时。

(function() {
  (function($, window, document) {
    var Plugin, _debug, _defaults, _name;
    _name = 'aPlugin';
    _defaults = {
      property: 'value'
    };
    _debug = function(args) {
      console.log(args);
    };
    Plugin = function(element, options) {
      this.element = element;
      this.options = $.extend(true, {}, _defaults, options);
      this.init();
    };
    Plugin.prototype.init = function() {
      if (typeof this.element !== 'undefined') {
        _debug(this.element);
      }
    };
    $.fn[_name] = function(options) {
      return this.each(function(idx) {
        if (!$.data(this, 'plugin_' + _name)) {
          $.data(this, 'plugin_' + _name);
          return new Plugin(this, options);
        }
      });
    };
  })(jQuery, window, document);

}).call(this);

而且，为了清楚起见，我这样称呼这个插件：

jQuery(document).ready(function($) {
    $('#specialDiv').aPlugin({ aString: 'Hello world!', aNumber: 62742, aObject: { aString: 'Hello aPlugin!', aNumber: 6274210 } });
});

插件调用中的options 参数无关紧要。这是为了测试。

我有两个问题：

1. 在翻译后的 JavaScript 中，预期的代码已自动包装在 (function(){}).call(this) 中。我以前从未见过。它有什么作用？安全吗？更重要的是，它在某种程度上是一种编码标准吗（因为 CoffeeScript 正在这样做）。 这里要补充一点：我是 CoffeeScript 的新手，所以它可能是括号放错或其他什么的副产品。不过，它似乎并没有阻碍操作。
2. 当代码执行时，我得到<div id="specialDiv"> </div>。在代码中，您可以看到我调用了console.log()，调用者（应该是一个jQuery 对象）作为参数。它在哪里解开？

非常感谢您的宝贵时间。

Answer 1

1. CoffeeScript 会自动执行此操作，以确保每个非显式全局变量都被限定为包装函数范围内的局部变量。显式全局变量仍然可以使用window.myGlobal = 3 完成，或者在CoffeeScript 的顶层使用@myGlobal = 3。这也是编写 JavaScript 的好方法。因此，当您在 CoffeeScript 中编写 x = 3 或 window = { } 时，它们会被视为对局部变量的赋值，而不是对全局变量的赋值。

2. 由于 console 不是局部变量 - 它不在任何封闭词法范围的局部变量表中 - JavaScript 后备是尝试将其作为全局变量，实际上是 window.console。

在使用 CoffeeScript 时，您不需要自己隐藏 jQuery、window 和 document。在 CoffeeScript 中，所有非显式全局变量都是局部变量：CoffeeScript 将保护您，就像在 JavaScript 中隐藏这些变量会保护您一样。