我想用配置创建 jQuery 插件(例如插件 myplugin)。 比调用 $(elem).myplugin(config); 之后我想从这个插件调用方法，比如 $(elem).myplugin().method() 与已存储的配置。

我的报价是这样的:

(function($) {
    $.fn.myplugin = function(options) { 
        var $this = $(this);

        var getOptions = function() {
            return $this.data('myplugin');
        };

        var initOptions = function(opt) {
            $this.data('myplugin', opt);
        };

        var setOption = function(key, value) {
            $this.data('myplugin')[key] = value;
        }

        var updateBorderWidth = function() {  
            $this.css('border-width', 
                      getOptions().borderWidth * getOptions().coeficient);
        };

        var init = function(opt) {
            initOptions(opt);
            updateBorderWidth();
        }        

        function changeBorder(width) {            
            setOption('borderWidth', width)
            updateBorderWidth();
        }

        if(options) {
            init(options);            
        }        

        return {
            changeBorder : changeBorder
        };
    }        
})(jQuery);

和用法:

 $(function() {
     var item1 = $('#test1').myplugin({ coeficient: 1, borderWidth: 1 });
     var item1 = $('#test2').myplugin({ coeficient: 2, borderWidth: 1 });

     $('#btn').click(updateBorder);     
});

function updateBorder() {
    $('#test1').myplugin().changeBorder($('#inpt').val());
    $('#test2').myplugin().changeBorder($('#inpt').val());
}

示例:http://jsfiddle.net/inser/zQumX/4/

我的问题:这样做是个好习惯吗？

可能是方法不正确。你能提供更好的解决方案吗？

最佳答案

编辑:

在 jQuery plugin template 上搜索话题后我找到了这些 Boilerplate templates (更新)比我在下面提供的设计更通用、更广泛的设计。最终您选择什么取决于您的需求。 Boilerplate 模板涵盖的用例比我提供的更多，但每个都有自己的优点和注意事项，具体取决于要求。

通常 jQuery 插件会在传递给它们的值时返回一个 jQuery 对象，如下所示:

.wrap(html) // returns a jQuery object

或者当没有传入参数时返回一个值

.width() // returns a value

.height() // also returns a value

要阅读您的示例调用约定:

$('#test1').myplugin().changeBorder($('#inpt').val());

对于任何使用 jQuery 的开发人员来说，似乎两个独立的插件是串联使用的，第一个是 .myplugin()，人们会假设它会返回一个带有一些默认 DOM 的 jQuery 对象在 #test1 上执行操作，然后是 .changeBorder($('#inpt').val())，它也可能返回一个 jQuery 对象，但在您的示例整行未分配给变量，因此未使用任何返回值-再次看起来像 DOM 操作。但是您的设计不遵循我所描述的标准调用约定，因此如果不熟悉您的插件，任何查看您的代码的人可能会对代码的实际作用感到困惑。

在过去，我考虑过一个与您所描述的问题和用例类似的问题和用例，我喜欢使用方便的约定来调用与插件关联的单独函数的想法。选择完全取决于你——它是你的插件，你需要根据谁将使用它来决定，但我已经确定的方式是简单地传递函数的名称和它的参数，或者作为一个单独的.myplugin(name, parameters) 或在对象中作为 .myplugin(object)。

我通常这样做:

(function($) {
    $.fn.myplugin = function(fn, o) { // both fn and o are [optional]
        return this.each(function(){ // each() allows you to keep internal data separate for each DOM object that's being manipulated in case the jQuery object (from the original selector that generated this jQuery) is being referenced for later use
            var $this = $(this); // in case $this is referenced in the short cuts
            
            // short cut methods
            if(fn==="method1") {
                if ($this.data("method1"))  // if not initialized method invocation fails
                    $this.data("method1")() // the () invokes the method passing user options
            } else if(fn==="method2") {
                if ($this.data("method2"))
                    $this.data("method2")()
            } else if(fn==="method3") {
                if ($this.data("method3"))
                    $this.data("method3")(o) // passing the user options to the method
            } else if(fn==="destroy") {
                if ($this.data("destroy"))
                    $this.data("destroy")()
            }
            // continue with initial configuration
            
            var _data1,
                _data2,
                _default = { // contains all default parameters for any functions that may be called
                    param1: "value #1",
                    param2: "value #2",
                },
                _options = {
                    param1: (o===undefined) ? _default.param1 : (o.param1===undefined) ? _default.param1 : o.param1,
                    param2: (o===undefined) ? _default.param2 : (o.param2===undefined) ? _default.param2 : o.param2,
                    
                }
                method1 = function(){
                    // do something that requires no parameters
                    return;
                },
                method2 = function(){
                    // do some other thing that requires no parameters
                    return;
                },
                method3 = function(){
                    // does something with param1
                    // _options can be reset from the user options parameter - (o) - from within any of these methods as is done above
                    return;
                },
                initialize = function(){
                    // may or may not use data1, data2, param1 and param2
                    $this
                        .data("method1", method1)
                        .data("method2", method2)
                        .data("method3", method3)
                        .data("destroy", destroy);
                },
                destroy = function(){
                    // be sure to unbind any events that were bound in initialize(), then:
                    $this
                        .removeData("method1", method1)
                        .removeData("method2", method2)
                        .removeData("method3", method3)
                        .removeData("destroy", destroy);
                }
            initialize();
        }) // end of each()
    } // end of function        
})(jQuery);

以及用法:

var $test = $('#test').myplugin(false, {param1: 'first value', param2: 'second value'}); // initializes the object
$test.myplugin('method3', {param1: 'some new value', param2: 'second new value'}); // change some values (method invocation with params)

或者你可以说:

$('#test').myplugin(); // assume defaults and initialize the selector

关于javascript - 将 jquery 插件配置存储在数据中是一种好习惯吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15543795/