CoffeeScript和jQuery插件创作 [英] CoffeeScript and jQuery plugin authoring

问题描述

我有一个习惯，不必要地提出问题，包括偏离主题和无用的咆哮。我这次尝试不要这样做。

I have a habit of making questions unnecessarily long by including off-topic and useless rants. I'll try not to do it this time. I apologize for the lack of a better and more descriptive title.

因此，这里有一个 CoffeeScript 代码。

So, here's a CoffeeScript code.

(($, 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

这里是相同的代码，当编译（或transcompiled） JavaScript。

Here's the same code, when compiled (or transcompiled) to 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);

并且，为了清楚，我调用这个插件：

And, just to be clear, I am calling this plugin like this:

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

插件调用中的选项 。这是为了测试。

The options argument in plugin call is irrelevant. That's for testing purposes.

我有两个问题：

1. ，所需的代码已被自动包装在（function（）{}）。call（this）。我从来没有见过这样。它有什么作用？它是安全吗？更重要的是，它是一个编码标准（因为CoffeeScript正在做）。 这里添加的东西：我是CoffeeScript的新手，所以它可能是一个错位的支架或东西的副产品。


2. 执行代码时，我会获得< div id =specialDiv> ; < / div> 。在代码中，你可以看到我已经调用 console.log（）与调用者（应该是一个jQuery对象）作为参数。

1. In translated JavaScript, the intended code has been automatically wrapped in (function(){}).call(this). I have never seen that before. What does it do? Is it safe? More yet, is it somewhat of a coding standard (since CoffeeScript is doing it). Something to add here: I am new to CoffeeScript so it might be a byproduct of a misplaced bracket or something. Still, it doesn't seem to hinder the operation.
2. When the code is executed, I get <div id="specialDiv"> </div>. In the code, you can see that I have called console.log() with caller (which should be a jQuery object) as argument. Where does it get unwrapped?

非常感谢您的时间。

推荐答案

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

1. CoffeeScript does it automatically to ensure that every non-explicitly-global variable is scoped as a local variable inside the scope of the wrapper function. An explicitly global variable may still be done with window.myGlobal = 3 or, at the top level in CoffeeScript, with @myGlobal = 3. This is a good way to write JavaScript too. So when you write x = 3 or window = { } in CoffeeScript, these are treated as assignments to local variables rather than to global variables.

由于控制台不是本地变量 - 任何包含词法作用域的变量表 - JavaScript回退是尝试作为一个全局变量，有效地 window.console 。

Since console is not a local variable - it is not in the local-variables table of any enclosing lexical scope - the JavaScript fallback is to try it as a global variable, effectively window.console.

您不需要遮蔽 jQuery ，视窗和文档自己使用CoffeeScript。在CoffeeScript中，所有非显式全局变量都是局部的：CoffeeScript将保护你，就像在JavaScript中隐藏这些变量一样保护你。

You do not need to shadow jQuery, window, and document yourself when using CoffeeScript. In CoffeeScript, all non-explicitly-global variables are local: CoffeeScript will protect you in the same way that shadowing these variables in JavaScript would protect you.

这篇关于CoffeeScript和jQuery插件创作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！