Javascript jQuery插件:如果我想调用$(';选择器';).plugin.group.method()之类的东西,我该如何实现呢?

Javascript jQuery插件:如果我想调用$(';选择器';).plugin.group.method()之类的东西,我该如何实现呢?,javascript,jquery,Javascript,Jquery,我已经编写了一些相对简单的jQuery插件,但我正在考虑编写一些更高级的插件,以使站点上常用的方法易于访问和干燥 例如,对于一个结构,我可能会有如下内容: plugin - popup - element ... === popup === - login - product ... === element === - shoppingCart - loginStatus ... 插件 -弹出窗口 -元素 ... ==弹出窗口=== -登录 -产品 ... ==元素=== -购物车 -罗吉斯

我已经编写了一些相对简单的jQuery插件,但我正在考虑编写一些更高级的插件,以使站点上常用的方法易于访问和干燥

例如,对于一个结构,我可能会有如下内容:

plugin - popup - element ... === popup === - login - product ... === element === - shoppingCart - loginStatus ... 插件 -弹出窗口 -元素 ... ==弹出窗口=== -登录 -产品 ... ==元素=== -购物车 -罗吉斯塔斯 ... 因此,要绑定一个弹出登录弹出事件,我希望能够: $(“#登录按钮”).plugin.popup.login()

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

干杯

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');
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
            }
         }
}

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

farhan Ahmad的做法非常正确。。。它只需要更深层的层次来满足您的需要您的实现如下所示:

$('p').messagePlugin().saySomething('I am a Paragraph').css('color', 'red');
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()结果将与预期一致。我希望这能有所帮助。

谢谢你的建议,但我已经找到了,我要寻找的是能够传递具有原型属性的对象,以便实现上述语法。对此有什么想法吗?为什么使用插件名称空间?仅仅说
$(“#login_按钮”).popup.login()
,难道还不够吗?名称空间在许多语言中都很好,但在js中却不是很好,因为范围遍历很慢。我需要确信,有名称空间的插件是值得的,而不仅仅是调用
$(“#login_按钮”).loginPopup()
$(“#其他东西”).shoppingCart()
。从编程的角度进行构建可能很有趣,但我不相信它的实用性。不过,别让我阻止你玩得开心!:)好吧,如果您有单独的插件用于“loginPopup”以及“ProductPopup”和“infoPopup”,那么代码就变成了unDRY。如果能够抽象出“弹出”的基本功能,那么速度方面的任何相对较小的缺点都不会被抵消吗?您仍然可以在不使用名称空间的情况下抽象出基本功能<代码>(函数($){function commonMethod(){…}$.fn.loginPopup=function(){commonMethod();};$.fn.infoPopup=function(){commonMethod();};)(jQuery);