Question

我喜欢使用对象文字表示法编写我的大部分功能，并想知道与jQuery.fn插件表示法相比，其他人对它的看法是什么？

我发现将代码编写为jquery'插件'的问题是，您无法使用公共'API'。拿这个粗略的弹出框示例：

$.fn.popup = function() {

  // insert #popupContainer

  this.each(function() {

    $(this).click(function() {
      $('#popupContainer').show();
    });
  });

});

// DOM ready
$('a.showPopup').popup();

单击a.showPopup锚点时将显示弹出窗口。没有其他界面显示弹出窗口而不查询#popupContainer的DOM并手动显示它。

这就是我喜欢对象文字的原因，因为它们提供了可以随时调用的公共方法。举个例子：

var popup = {
   init: function() { 
        // insert #popupContainer
        // bind this.show to $(a.showPopup)
   }
   show: function() { $('#popupContainer').show(); }
}

这很好，因为它允许我随时调用popup.show（），我不必依赖我之前制作的绑定。

这个例子有点垃圾，但我希望你能看到我正在考虑的想法以及当功能更复杂时它的影响。

那你更喜欢什么？是否有任何我在jQuery插件中缺少的东西？

我有兴趣听到任何想法吗？

Answer 1

首次在第一个示例中调用popup()时，是否可以简单地插入“#popupContainer”元素？这样您根本不必致电init。

此外，在jQuery中，添加“全局”API函数的标准方法是直接将它们添加到$ object：

(function($) {

    $.myPlugin = function() {
        alert("1");
    }

    $.fn.myPlugin = function() {
        alert(2);
    }

})(jQuery);

现在您可以执行以下操作：

$.myPlugin(); // pops up "1"

$("whatever").myPlugin(); // pops up "2"

Answer 2

另一个未充分利用的选项是自定义事件，例如：

$.fn.popup = function() {    
  // insert #popupContainer    
  return this.each(function() {    
    $(this).bind({
      "open.popup": function() { $('#popupContainer').show(); },
      "click": function() { $(this).triggerHandler("open.popup"); }          
    });
  });    
});

这可能不是一个好例子，但你可以这样做：

$('a.showPopup').popup(); //initialize plugin
$('a.showPopup').trigger("open.popup"); //open the popup
$('a.showPopup').click(); //less explicit, but works...no need for the open bind

jQuery对象文字vs jQuery插件表示法

2 个答案: