javascript - jQuery 插件：如果我想调用类似 $('selector').plugin.group.method() 的东西，我该如何实现呢？

Question

我写了一些相对简单的 jQuery 插件，但我正在考虑写一些更高级的东西，以保持网站上常用的方法易于访问和干燥

例如，我可能有这样的结构：

插入
- 弹出窗口
- 元素
...

=== 弹出窗口 ===
- 登录
- 产品
...

=== 元素 ===
- 购物车
- 登录状态
...

因此，要绑定弹出登录弹出事件，我希望能够这样做： $('#login_button').plugin.popup.login();

最好的方法是什么？有没有更好的方法来实现我想做的事情？

干杯，

Answer 1

jQuery.fn.messagePlugin = function(){
    var selectedObjects = this;
    return {
         saySomething : function(message){
                          $(selectedObjects).each(function(){
                            $(this).html(message);
                          });
                          return selectedObjects; // Preserve the jQuery chainability 
                        },
         anotherAction : function(){
                        //...
                        return selectedObjects;
                        }
           };
}

我们像这样使用它：

$('p').messagePlugin().saySomething('I am a Paragraph').css('color', 'red');

选定的对象存储在 messagePlugin 闭包中，该函数返回一个包含与插件关联的函数的对象，在每个函数中，您可以对当前选定的对象执行所需的操作。

Answer 2

farhan Ahmad 的做法非常正确......它只需要更深层次来满足您的需求，您的实现将如下所示：

jQuery.fn.plugin = function(){
  //"community" (global to local methods) vars here.
  var selectedObjects = this; //-- save scope so you can use it later

  // return the objects so you can call them as necessary
  return {  
            popup: { //plugin.popup
                    login: function(){ //plugin.popup.login
                         //selectedObjects contains the original scope
                         console.log(selectedObjects);
                    },
                    product: function(){} //plugin.popup.product
            },
            element: { //plugin.element
                    shoppingCart: function() {}, //plugin.element.shoppingCart
                    loginStatus: function() {} //plugin.element.loginStatus
            }
         }
}

所以现在如果你打电话： $("#someDiv").plugin.login();结果将如预期的那样。我希望这有帮助。