jQuery 插件选项

Question

首先，我知道这是一个基本的 JS 问题，而不是 jQuery。我正处于学习阶段，我似乎无法完全解决一些范围问题。所以我需要一些解释。

我一直在阅读我能找到的每一篇文章/教程，但只需要一些答案。我设置了这个基本代码来进行实验（因为实际代码太大，无法在此处发布）。

在下面的实验中，当点击 selector1-change 按钮时，'cmd' 变量显示正确，但是 this.options 的引用是 'undefined'，因为它是 MySelector() 的不同实例，除非我我很遥远。

那么如何调用这样的对象的实例。

例子：

你可以通过创建它来使用 jQueryUI 的对话框，然后你可以像 $('#mydiv').dialog('close'); 这样向它传递命令。这将访问附加到该元素的实例。这是如何实现的？

JQUERY_MYSELECTOR.JS

(function($){
    $.fn.MySelector = function(incoming) {

        if (typeof(incoming) != 'object') {
            return runCommand(incoming);
        }

        var options = $.extend({},{
            id: false,
            backgroundColor: false
        },incoming);

        function runCommand(cmd) {
            alert('blah:'+this.options.backgroundColor+"\n"+'cmd:'+cmd);
        }
    }
})(jQuery);

脚本

<script type="text/javascript" src="jquery_myselector.js"></script>
<script type="text/javascript">
    $j(document).ready(function() {
        $j('#selector1).MySelector({ backgroundColor: '#000000' });
        $j('#selector1-change').click(function() {
            $j('#selector1').MySelector('mooocow');
        });
    });
</script>

风格

<input type="button" value="selector1" id="selector1" />
<br/>
<input type="button" value="selector1-change" id="selector1-change" />

更新 忘记在 selector1 上使用插件（duh）

Answer 1

options 是在您的主体范围内使用 var 语句声明的，您不需要在 runCommand 函数中使用 this 关键字，因为在该函数中您可以访问外部闭包：

    function runCommand(cmd) {
        alert('blah:'+options.backgroundColor+"\n"+'cmd:'+cmd);
    }

Answer 2

你可以试试这样的：

(function($){
    $.myPlugin = {
        foo: function () {...},
        bar: function () {...},
        foobar: function () {...}
    };

    $.fn.MySelector = function (operation) {
        if (typeof operation === 'string') {
            switch(operation) {
                'open':
                    $.myPlugin.foo();
                    break;
                'destroy':
                    $.myPlugin.bar();
                    break;
                default:
                    $.myPlugin.foobar();
                    break;
            }
        }
    }
}(jQuery));

Answer 3

您在为选项分配值之前调用 runCommand - options 在 runCommand 的主体内具有值 undefined。不要问我js怎么能在你声明之前看到runCommand的主体，但是它可以。

另外，在 MySelector 的第一层，this 绑定到运行$j('#selector1-change') 的结果，这是一个数组。您将需要迭代该数组。

试试这样的：

(function ($) {
    function runCommand(e, cmd) {
        alert('blah:' + e.options.backgroundColor + "\n" + 'cmd:' + cmd);
    }

    $.fn.MySelector = function (incoming) {
        this.each(function () {
            if (typeof (incoming) != 'object') {
                return runCommand(this, incoming);
            } else {
                this.options = $.extend(this.options || {
                    id: false,
                    backgroundColor: false
                }, incoming);
            }
        });
    }
})(jQuery);