使用附加功能/覆盖功能扩展 jQuery 插件答案

【问题标题】：Extend jQuery Plugin with additional function / override function使用附加功能/覆盖功能扩展 jQuery 插件
【发布时间】：2015-10-29 18:41:19
【问题描述】：

我需要扩展一个 jQuery 插件 (https://github.com/idiot/unslider) 以便使用另一个公共方法添加额外的行为。

(function(){
    // Store a reference to the original remove method.
    var originalMethod = $.fn.unslider;
    // Define overriding method.
    $.fn.unslider = function(){

        // Execute the original method.
        originalMethod.apply( this, arguments );

        console.log( "Override method" );

        function test() {
            console.log("test called");
        }

        this.each(function() {
            // Operations for each DOM element
            console.log("each dom element?");

        }).data('unslider', {
            // Make test accessible from data instance
            test: test
        });

        return this;
    }
})(jQuery);

我已经设法让公共方法在调用时可以访问

var slider = $('#slider');
slider.data('unslider').test();

但是，无论如何，我想保留 unslider 的旧行为，但使用另一个功能扩展插件。有人有想法吗？

我创建了一个小提琴，所以你可以检查发生了什么：我的新函数被调用，但旧函数不见了： http://jsfiddle.net/b2os4s7e/1/

【问题讨论】：

标签： javascript jquery plugins extend unslider

【解决方案1】：

如果你查看 unslider 的来源，你可以看到它在数据中存储了 Unslider 实例：

    //  Enable multiple-slider support
    return this.each(function(index) {
        //  Cache a copy of $(this), so it
        var me = $(this),
            key = 'unslider' + (len > 1 ? '-' + ++index : ''),
            instance = (new Unslider).init(me, o);

        //  Invoke an Unslider instance
        me.data(key, instance).data('key', key);
    });

在您的代码中，您正在用您自己的对象覆盖该对象。但是，滑块期望有一个 Unslider 实例。所以你要做的是获取这个实例，然后用你自己的函数扩展它：

var key = $(this).data('key');
var obj = $(this).data(key);
obj.test = function() { console.log('Working!'); };

见http://jsfiddle.net/b2os4s7e/2/

【讨论】：

【解决方案2】：

只要定义：

$fn.unslider2 = function() { ... }

任何你喜欢的名字和行为。

【讨论】：

不明白。你说我应该复制 unslider 的内容并创建一个名为 unslider2 的自己的插件，并具有额外的行为？

【解决方案3】：

对于扩展 JQuery 应该使用.fn.extend

(function($){ 
    $.fn.extend({
        helloworld: function(message){
            return this.each(function(){
                $(this).click(function(){
                    alert(message);
                });
            });
        }
    });
})(jQuery)

对象.fn.extend用于扩展jQuery的功能

【讨论】：

嘿，我也相信这是理想的方式，但我不知道如何将它应用于 unslider。该插件通过为滑块的数据元素设置一个实例来向外部公开其功能。但是，如果我使用 $.fn.extend，则无法访问核心脚本中的函数。我想念什么？

【解决方案4】：

感谢您的回答！我是这样做的：

(function($){
    var originalMethod = $.fn.unslider;

    $.fn.extend({
        unslider: function(o) {
            var len = this.length;

            var applyMethod = originalMethod.apply( this, arguments );

            var key = applyMethod.data('key');
            var instance = applyMethod.data(key);

            //  Cache a copy of $(this), so it
            var me = $(this);

            if (instance) {
                instance.movenext = function (callback) {
                    return instance.stop().to(instance.i + 1, callback);
                };
                instance.moveprev = function (callback) {
                    return instance.stop().to(instance.i - 1, callback);
                };
            }

            return applyMethod.data(key, instance);

        }
    });
})(jQuery)

关键是按照 sroes 的建议处理数据属性。

此外，我需要应用原始方法，因为我需要旧方法。

【讨论】：