如何扩展 jQuery 插件？

发布于 2024-11-08 08:03:46 字数 785 浏览 0 评论 0原文

我想创建一个 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);

所以我有两个问题：

这种方法正确还是我应该以不同的方式这样做？
如何使“父级”和“子级”成为同一个实例并调用“父级”的实现？

谢谢。

原文

I want to create a jQuery plugin to wrap a chart component. It will have functions like addLineSerie or addBarsSerie. Then I want to create other plugins that extend this one to add new functionality or overwrite what's needed but still be able to call the original plugin functions.

I started with the approach below. It kind of works but, as I realized later, I can't call the original "parent" implementation (if I create an instance of myB, I can't call 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);

So I have 2 questions:

Is this approach right or I should be doing this in a different way?
How do make the "parent" and the "child" be the same instance a yet get to call the "parent's" implementation?

Thank you.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

染柒℉ 2024-11-15 08:03:46

这似乎是正确的，但要完成跨插件行为，您不能这样做：

(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 的调用并添加将进行的调用。查看工作小提琴：

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

This seems about right, but to accomplish cross-plugin behavior can't you just do this:

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

EDIT: fixed the call to myA and added the call that one would make. Check out the working fiddle:

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

回复收藏 0 原文

~没有更多了~