CoffeeScript和jQuery插件创作

时间:2013-08-07 14:52:24

标签: jquery jquery-plugins coffeescript

我习惯于通过包含偏离主题和无用的咆哮来不必要地长时间地提出问题。我这次不会这样做。 我为缺乏更好的更具描述性的标题而道歉。

所以,这是一个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>。在代码中,您可以看到我使用调用者(应该是jQuery对象)调用console.log()作为参数。它在哪里被打开?
  3. 非常感谢你的时间。

1 个答案:

答案 0 :(得分:1)

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

  2. 由于console不是局部变量 - 它不在任何封闭词法范围的局部变量表中 - JavaScript后备是将其作为全局变量进行尝试,有效{{1} }。

  3. 使用CoffeeScript时,您不需要自己隐藏window.consolejQuerywindow。在CoffeeScript中,所有非显式全局变量都是本地变量:CoffeeScript将保护您,就像在JavaScript中隐藏这些变量可以保护您一样。