如何扩展小部件以包含新功能？

Question

让我们想象自己创建了一个 jQuery 小部件。我们正在使用 jquery.ui.widget 来完成任务。我们想创建一个带有红色边框的简单方形 div。好吧，让它成为我们未来扩展小部件的框架。

(function ($) {
    $.widget('ns.redsquare', {
        _create: function () {
            var elem = this.element;

            elem.css({
                width: 100,
                height: 100,
                border: 'solid 1px red'
            });

            $(this.element).appendTo('body');
        }

        // probably a lot of other functionality follows
    }

    $(document).ready(function () {
        $('<div/>').redsquare();
    });
})(jQuery);

所以，未来来了。我们想要扩展我们的红色方块，使其包含一个带有绿色边框的方形 div。当然，孩子应该比父母小一点。问题是“如何扩展小部件以包含新功能？”。也就是说，我们如何扩展（不改变的源代码）我们的红色方块以帮助我们的绿色方块拥有父级？红色方块的代码应保持不变；绿色方块应该有自己的代码，但包含红色方块可能提供的所有功能。

注意：此处提供的小部件示例不是真实的；这只是我的另一个不幸的例子。

Answer 1

使用子类化过程解释here。