从带有命名空间的 JQuery 插件返回数据

Question

我想创建一个使用命名空间的 JQuery 插件。这就是我尝试创建一个返回 html 的简单函数：

(function($) {
    $.fn.ns = function () {
        return {
            foo1: function(){
               var element = $(this);
               $(element).html('<b>hello</b>');
               return this;
            }
       }
    };
})(jQuery);

因此命名空间应该被称为ns。

它应该填充这个简单的 div：

<div class="sayHello"></div>

这样称呼，好像不行：

$(".sayHello").ns().foo1();

我在这里做错了什么？

JSFiddle：http://jsfiddle.net/CVrFU/475/

Answer 1

这样就必须有一个closure 里面有元素。

(function($) {
    $.fn.ns = function () {
        var self = this,
            element = $(this);

        return {
            foo1: function(){
               $(element).html('<b>hello</b>');
               return self;
            }
       }
    };
})(jQuery);

在后面的运行中保存this的更薄，有几种方法：

(function($) {
    var foo1 = function(){
       $(this).html('<b>hello</b>');
       return this;
    } 


    $.fn.ns = function () {
        var self = this;

        return {
            foo1: function () {
               return foo1.apply(self, arguments);
            }
       }
    };
})(jQuery);

这样，您不必总是重新创建函数，而只能在需要的上下文中运行它。

http://jsfiddle.net/q303xwob/

但是如果你想保存 jQuery 链接，你应该在 fn 对象中传递你所有的方法（在这个例子中是 ns 和 foo1）。