javascript - 开发拖放插件

Question

我开始成为插件创建者，但并没有完全掌握它。一个问题是我想在你有两个数字的地方设置一个默认值。我需要能够将它们应用到代码中。

我的意思是这样的：

var defaults = {
numbers: [1, 2]
}

我喜欢 jquery 团队是如何使用可拖动的：

$('#drag').draggable({
grid: [1, 100]
});

这是我想做的事情。有什么想法吗？

Answer 1

一个很好的方法是使用$.extend，它将两个或多个对象的内容合并到第一个对象中：

(function($) {
    $.fn.foobar = function(options) {
        var settings = {
            numbers: [1, 2]
        };
        $.extend(settings, options);

        /* continue with plugin code. */           

        alert(settings.numbers[0] + " " + settings.numbers[1]);
    };
})(jQuery);

现在settings是用户指定选项和“默认”选项的组合。有关更多信息，请参阅插件创作教程的这一部分。

示例：http: //jsfiddle.net/2Djya/

PS：了解插件如何工作的一个很好的资源是jQueryUI 源代码本身。

Answer 2

简化插件代码：

$.fn.yourPlugin = function( conf ){
    var config = $.extend({
        someVar : 'default'
        ,   foo : 'anotherDefault'
    }, conf );

    return this.each( function(){
        // do stuff with $( this ) and config
    } );
};

会将传入的$.extend任何参数复制conf到您创建的设置默认值的对象上。