如何扩展jQuery插件?

Xay*_*Xay 5 jquery jquery-plugins

我想创建一个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);
Run Code Online (Sandbox Code Playgroud)

所以我有两个问题:

  1. 这种方法是正确的还是我应该以不同的方式做到这一点?
  2. 如何让"父母"和"孩子"成为同一个实例,然后称之为"父母"的实施?

谢谢.

Mil*_*ric 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();
});
Run Code Online (Sandbox Code Playgroud)

编辑:修复了对 myA 的呼叫并添加了将进行的呼叫。查看工作小提琴:

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