Question

我正在扩展jquery.contentcarousel plugin，我已经达到了一个特定点，即我通过__prototype__定义新功能。我缩小了代码以证明其重要部分：

(function($) {
    var   aux      = {
    navigate : function(){
        //...
      },
    }
    methods = {
        init     : function( options ) {

            return this.each(function() {

                var $el        = $(this);

                //THIS IS THE SLIPPERY LINE:
                $el.__proto__.scrollOneLeft = function() {
                    aux.navigate( -1, $el, $wrapper, $.extend(settings, {sliderSpeed: 10, sliderEasing: ''}), cache );
                };
            });

        }
    }

    $.fn.contentcarousel = function(method) {
        if ( methods[method] ) {
            return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof method === 'object' || ! method ) {
            return methods.init.apply( this, arguments );
        } else {
            $.error( 'Method ' +  method + ' does not exist on jQuery.contentcarousel' );
        }
    }; 

})(jQuery);

这适用于现代浏览器，但问题是$el.__proto__在IE9和IE10中尚未运行。我不是jQuery Ninja，所以我想这不是正确的解决方案。

所以我的问题是，在这种情况下你将如何正确定义一种新方法？

Answer 1

是的，这不是正确的方式。 jQuery具有很强的可扩展性，并且已经以跨浏览器的方式介绍了这种情况。

您可以通过以下方式在jQuery数组对象上定义新函数：

jQuery.fn.asdfize = function () {
    this.html('asdf');
    return this; // for chainability
}

您可以使用$('div').asdfize();将所有div的innerHTML替换为asdf。

这基本上是你需要的，因为$(this)有jQuery数组对象（jQuery.fn），因为它是原型。

旧的jQuery wiki有一篇关于plugin authoring的好文章，其中涵盖了这一点。

修改：

您已使用$.fn.contentcarousel在代码中完成此操作。这个案例有何不同？

<强> EDIT2 ：

在这部分代码中：

return this.each(function() { var $el = $(this); $el.__proto__.scrollOneLeft = function() { ... }; });

在每次迭代中覆盖scrollOneLeft函数。这可能不是你想要的！

您可能只希望定义一次该函数，但在其中使用this，因为它将是您调用它的jQuery对象。

添加函数到$（this）的原型

1 个答案: