Javascript 插件方法-什么'；这里有什么魔力？_Javascript_Jquery_Jquery Plugins

Javascript 插件方法-什么'；这里有什么魔力？

javascript jquery jquery-plugins

Javascript 插件方法-什么'；这里有什么魔力？,javascript,jquery,jquery-plugins,Javascript,Jquery,Jquery Plugins,我挣扎着，终于找到了工作。现在，我想打破它，如下所示，但它不工作。。。这里有我不懂的巫术吗 <!DOCTYPE html> <html> <head>  <script type="text/javascript" src="http://goo.gl/XQPhA"></script> <script type="text/javascript"> (function($) {

我挣扎着，终于找到了工作。现在，我想打破它，如下所示，但它不工作。。。这里有我不懂的巫术吗

<!DOCTYPE html>
<html>
<head>
<!-- jQuery -->
<script type="text/javascript" src="http://goo.gl/XQPhA"></script>
<script type="text/javascript">
(function($) {
    $.test = function(options) {
        options = $.extend({}, $.test.settings, options);

        this.whiten = function() {
            $(this).css('background-color', options.bg);
        };
    };
    $.test.settings = { bg: 'white' };

    $.fn.test = function(options) {
        return this.each(function(index, el) {
            $.test(options);
        });
    };
})(jQuery);

$(document).ready(function() {
    $('ul').test().css('background-color', 'wheat');
    $('#go').click(function() {
        $('ul').whiten();
    });
});
</script>
</head>

<body>
<button id="go">whiten</button>
<ul id="list1">
<li>Aloe</li>
<li>Bergamot</li>
<li>Calendula</li>
<li>Damiana</li>
<li>Elderflower</li>
<li>Feverfew</li>
</ul>
<ul id="list2">
<li>Ginger</li>
<li>Hops</li>
<li>Iris</li>
<li>Juniper</li>
<li>Kavakava</li>
<li>Lavender</li>
<li>Marjoram</li>
<li>Nutmeg</li>
<li>Oregano</li>
<li>Pennroyal</li>
</ul>
</body>
</html>


（函数（$）{
$.test=功能（选项）{
options=$.extend（{}，$.test.settings，options）；
this.whiten=函数（）{
$（this.css（'background-color'，options.bg））；
};
};
$.test.settings={bg:'white'}；
$.fn.test=功能（选项）{
返回此。每个函数（索引，el）{
$测试（选项）；
});
};
})（jQuery）；
$（文档）.ready（函数（）{
$（'ul'）.test（）.css（'background-color'，'smeat'）；
$（'#go'）。单击（函数（）{
$（'ul'）.whiten（）；
});
});
变白

芦荟
佛手柑
金盏花
达米亚纳
接骨木
发烧


生姜
啤酒花
虹膜
杜松
卡瓦卡瓦
薰衣草
马乔拉姆
肉豆蔻
牛至
彭罗亚尔

与前面的代码相比，在

each（）

循环中，我现在调用

$.test（options）

而不是

$.fn.test（options）

-那么为什么一个可以工作而另一个不能工作（实际上，第一个为什么/如何工作）？

我将按照，最值得注意的是，使用

.data（）

存储小部件设置的数据，并使用

.test（“方法”）

对插件进行方法调用：

用法：

$（“elem”）.test（）

，

$（“elem”）.test（“whiten”）

下面是一个工作示例：

插件编写指南的另一个资源是jQueryUI源代码（以示例为例）。这些小部件是如何创建可重用、可读的jQuery插件的非常好的例子。

我不明白为什么不将test定义为$.fn.test中的一个函数，并保持标准化的jQuery样式（它已经就位，所以您不会接触任何其他名称空间）@djlumley，您的意思是像我前面的问题一样？因为就我所知，能够进行$.test（…）是有价值的字面上是jQuery对象（一旦用$传递），而$.fn是jQuery原型，允许您扩展方法，因此允许您调用$（'object'）.method，因此，如果出于任何原因，您希望能够使用该语法调用方法，它需要使用$.fn.method_name=function（）扩展原型，我想我真正不明白的是为什么/如何使用我的第一个案例我知道这个界面，但我觉得编码$（'whatever'）.myMethod（）比$（'whatever'）更自然。myPlugin（'myMethod'）@ekkis：如果是这样，只需调用插件

whiten

，并传递适当的设置对象。调用

$（“选择器”）.myMethod（）

似乎更自然，但大多数主要插件都使用jQuery推荐的模式。考虑在大型JS代码库上维护使用插件的代码。初始化插件，然后在数十行之后调用一个方法真的比调用方法时总是引用插件名更直观吗？

(function($) {
    /* Default plugin settings: */
    var settings = {
        bg: 'white'
    };

    /* Method definitions: */
    var methods = {
        init: function(options) {
            options = $.extend({}, options, settings);
            return this.each(function () {
                $(this).data("test", options);
            });
        },
        whiten: function() {
            var options = this.data("test");
            this.css('background-color', options.bg);
        }
    };

    /* Plugin definition and method calling logic: */
    $.fn.test = 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');
        }
    }
})(jQuery);