如何扩展jQuery插件？

Question

我想创建一个jQuery插件来包装图表组件。它将具有像addLineSerie或addBarsSerie这样的函数。然后，我想创建其他插件来扩展此插件以添加新功能或覆盖所需的内容，但仍能调用原始插件函数。

我从下面的方法开始。它有点起作用，但是后来我意识到，我无法调用原始的“父”实现（如果我创建myB的实例，则无法调用myA.goA2）。

(function($){
    $.fn.myA = function(settings) {
        this.goA = function() {alert("goA: "+settings);};
        this.goA2 = function() {alert("goA2: "+settings);};
        return this;
    };
})(jQuery);

(function($){
    $.fn.myB = function(settings) {
        this.myA(settings);
        this.goA2 = function() {alert("goA2B: "+settings);};
        this.goB = function() {alert("goB: "+settings);};
        return this;
    };
})(jQuery);

我有两个问题：

1. 这种方法是否正确，还是我应该用不同的方式来实现？
2. 如何使“父级”和“子级”成为同一个实例，并调用“父级”的实现？

谢谢。

- Xay

Answer 1

这看起来没错，但要实现跨插件行为，你不是可以这样做吗：

(function($) {
    $.fn.myA = function(settings) {
        this.goA = function() {
            alert("goA: " + settings);
        };
        this.goA2 = function() {
            alert("goA2: " + settings);
        };
        return this;
    };
})(jQuery);

(function($) {
    $.fn.myB = function(settings) {
        this.myA = $.fn.myA(settings);
        this.goA2fromA = function() {
            this.myA.goA2();
        };
        this.goA2 = function() {
            alert("goA2B: " + settings);
        };
        this.goB = function() {
            alert("goB: " + settings);
        };
        return this;
    };
})(jQuery);

$(document).ready(function() {
    var a = $('#one').myA({});
    var b = $('#one').myB({});
    a.goA2();
    b.goA2fromA();
});

编辑：修正了对 myA 的调用并添加了一个通常的调用。请查看这个可工作的 fiddle：

http://jsfiddle.net/PqQgs/4/

- Milimetric

---

糟糕，已修复，我错误地实例化了myA（在开会期间尝试这样做是个坏主意 :) - Milimetric

当然，您在接受后仍然可以评论。我认为您有点过于复杂了。a被赋予了myA插件的实例，用于#one div。b被分配到同一div的myB插件的实例。myB插件还保留着myA插件的内部实例，因此myB可以调用myA方法。这不是继承，而只是对“类型”为myA的对象的引用。我加上引号是因为所有这些面向对象的东西都是在JS中模拟的。好文章: http://www.klauskomenda.com/code/javascript-programming-patterns/ - Milimetric

是的。但你可以直接调用b.goA(); 如果从myB到myA的引用只是内部的，那么这怎么可能呢？（我假设被调用的实例不是为变量a创建的那个，尽管它是同一个div，因为我尝试使用一些本地公共变量，但没有值覆盖） - Xay

b.goA2只是调用了myB中的goA2函数，与myA中的goA2函数无关。然而，通过使用myB内部的myA实例，您可以访问myA的goA2函数。 - Milimetric

不，我没有提到goA2，你可以调用goA --> b.goA(); - Xay