Question

我只想说，我想分支我的插件，并决定我能够“命名”它们。到目前为止，将$.method重写为$.namespace.method一直很容易。

我遇到的问题是制作元素方法，例如$('element').method()，但要使用命名空间;例如$('element').namespace.method()。我尝试了一些解决方法并且可以创建$.fn.namespace.method，但是，当我从该方法中调用this时，我只获得$.fn.namespace而不是我'element'我想得到。

示例：如果我拨打$('body').namespace.test()，然后在方法test内，我希望this成为元素<body></body>

任何帮助，如何解决这个问题非常感激。可能只是像往常一样过度思考。

目前为$('body').namespace().method()这样的事情尝试可能的解决办法，到目前为止，工作效果不佳......：P

Answer 1

如果您不需要与IE8兼容，则可以使用Object.defineProperty。

工作示例：

 Object.defineProperty($.fn, 'namespace', {
  get: function(){
    var t = this;
    return {
      lowercasehtml: function(){
         return t.html(function(_,h){ return h.toLowerCase() }); 
      }
    }
  }
});

$('#a').namespace.lowercasehtml(); // changes the html of #a to lowercase (yes, it's stupid, I know)

<强> Demonstration

但我不相信像这样的命名空间是个好主意。我会简单地定义

$.fn.namespace_lowercasehtml = function() ...

这就是我个人为jQuery的应用程序特定扩展做的事情。

Answer 2

虽然我不推荐它，但您可以为每次调用namespace()生成一个新对象：

(function($){

    var plugin = {
        test: function (){
            console.log(this);
        }
    };

    var methods = Object.keys( plugin );

    $.fn.namespace = function (){

        var self = this,
            localMethods = {};

        $.each(methods, function () {
            localMethods[ this ] = plugin[ this ].bind(self);
        });

        return localMethods;
    };

}(jQuery));

这是小提琴：http://jsfiddle.net/WaXzL/

您可以polyfill Object.keys for older browsers，也可以手动创建methods数组。

bind也是如此：要么将其填充，要么手动填充call。

这是一个适用于旧版浏览器的版本：

(function($){

    var plugin = {
        test: function (){
            console.log(this);
        }
    };

    var methods = [];

    for ( var i in plugin ) {
        if ( plugin.hasOwnProperty(i) ) {
            methods.push(i);
        }
    }

    $.fn.namespace = function (){

        var self = this,
            localMethods = {};

        $.each(methods, function (i, method) {
            localMethods[ method ] = function () {
                plugin[ method ].call( self );
            };
        });

        return localMethods;
    };

}(jQuery));

这是小提琴：http://jsfiddle.net/WaXzL/1/

Answer 3

怎么样而不是做：

$('element').namespace.method()

你简化它并做

$('element').namespace('method')

代替？这更简单：

(function($){
    var methods = {
        test: function(a, b){
            console.log(this, a, b);
        }
    };

    $.fn.namespace = function(method){
        var params = Array.prototype.slice.call(arguments, 1);
        return methods[method].apply(this, params);
    };
}(jQuery));

然后您会执行以下操作：$('body').namespace('test', 1, 2);

Answer 4

更好的解决方案是只有一个main方法，并将方法名称作为字符串传递：

(function($){

    var plugin = {
        test: function (){
            console.log(this);
        },
        otherTest: function (){
            console.log(this);
        }
    };

    $.fn.namespace = function (method){
        var args = Array.prototype.slice.call(arguments, 1);
        return plugin[ method ].call(this, args);
    };

}(jQuery));

这是小提琴：http://jsfiddle.net/yYNDH/

如何使用NameSpace创建jQuery元素方法

4 个答案: