javascript - 创建一个基于 HTML 类和名称初始化自身的 jQuery 插件

Question

我是编写 jQuery 插件的新手，但我在使用它们方面有丰富的经验。我使用过的一些插件只能以编程方式初始化，即

$("input[name='blah']").fancyPants();

我觉得这很烦人，但我已经设法从教程和查看其他插件的代码中弄清楚如何编写这样的基本插件。

其他的，比如Bootstrap的模态组件，可以纯粹通过标记来初始化，即

<input type='text' name='blah' class='fancy-pants'>

然后只需包含插件 .js 文件，任何具有 fancy-pants 类的输入都会自动初始化为 fancyPants 插件。我喜欢这种行为，尽管我知道它占用了一个特定的类名。

问题 1:他们是怎么做到的？我查看了 bootstrap.js，但是里面似乎有很多我不明白的地方。

问题 2:假设我有一个包含 DOM 中多个元素的插件。例如，

<button class="bootstrapradio" name="primary_group" value="epicurist"><i class='fa fa-cutlery'></i></button>
<button class="bootstrapradio" name="primary_group" value="futurist"><i class='fa fa-space-shuttle'></i></button>
<button class="bootstrapradio" name="primary_group" value="stoic"><i class='fa fa-tree'></i></button>        

<button class="bootstrapradio" name="beverage" value="beer"><i class='fa fa-beer'></i></button>
<button class="bootstrapradio" name="beverage" value="martini"><i class='fa fa-glass'></i></button>

在不更改标记结构(例如添加包装器容器)的情况下，我如何自动初始化我的插件的两个实例，其中一个覆盖了所有带有 bootstrapradio 类的按钮> 并命名为 primary_group，另一个覆盖所有按钮的类为 bootstrapradio 并命名为 beverage?

编辑:这是我现在正在处理的内容。

(function ( $ ) {

    var methods = {
        init : function(options) {
            // Initialization method, adds classes to elements and binds events
            ...
            return this;
        },
        value : function( new_val ) {
            // Method to get/set value
            ...
        }
    };

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

我希望这个插件如何转换 DOM 的示例:

在 document.ready 之前:

    <button class="bootstrapradio" name="primary_group" value="epicurist" title='Epicurist' disabled><i class='fa fa-cutlery'></i></button>
    <button class="bootstrapradio" name="primary_group" value="futurist" title='Futurist'><i class='fa fa-space-shuttle'></i></button>
    <button class="bootstrapradio" name="primary_group" value="stoic" title='Stoic'><i class='fa fa-tree'></i></button>        

    <button class="bootstrapradio" name="beverage" value="beer" title='Beer'><i class='fa fa-beer'></i></button>
    <button class="bootstrapradio" name="beverage" value="martini" title='Martini'><i class='fa fa-glass'></i></button>

在 document.ready 之后:

    <button class="btn btn-xs bootstrapradio" name="primary_group" value="epicurist" title='Epicurist' disabled><i class='fa fa-cutlery'></i></button>
    <button class="btn btn-xs bootstrapradio" name="primary_group" value="futurist" title='Futurist'><i class='fa fa-space-shuttle'></i></button>
    <button class="btn btn-xs bootstrapradio" name="primary_group" value="stoic" title='Stoic'><i class='fa fa-tree'></i></button>
    <input type="hidden" name="primary_group">

    <button class="btn btn-xs bootstrapradio" name="beverage" value="beer" title='Beer'><i class='fa fa-beer'></i></button>
    <button class="btn btn-xs bootstrapradio" name="beverage" value="martini" title='Martini'><i class='fa fa-glass'></i></button>
    <input type="hidden" name="beverage">

Answer 1

您可以通过这种方式使用 jQuery 选择属性

$("[data-role='modal']");

因此，在您的示例中，您会有类似的内容

$(".bootstrapradio[name='primary_group']").myPlugin();
$(".bootstrapradio[name='beverage']").myPlugin();

许多插件在没有类的情况下通过具有插件特定的属性名称来执行此操作。

一个例子是 Lightbox2 ，它使用 $("[data-lightbox]") 找到所有可能的元素，然后根据这些属性的值将它们分成单独的灯箱组。

如果您希望它自动执行，您只需将相同的功能包装在插件文件中准备好的文档中即可。

例如，对于这个 HTML:

<div data-bootstrapradio='type1'></div>
<div data-bootstrapradio='type1'></div>
<div data-bootstrapradio='type2'></div>

还有这个 Javascript:

$(function(){

    $.fn.bootstrapradio = function(params) {
        return $(this).each(function() {
            // Your code
        });
    }

    // Get all the radios on the page currently
    var $radios = $("[data-bootstrapradio]");

    // Get the groupings of them
    var radioTypes = [];
    $radios.each(function(i,el){
        var type = $(this).attr("data-bootstrapradio");
        if (radioTypes.indexOf(type) === -1){
            radioTypes.push(type);
        }
    });

    // Initialize the plugin using all radios of each type
    for (var i=0; i<radioTypes.length; i++){

        var type = radioTypes[i];

        var radioGroup = $radios.filter(function(i,el){
            return $(el).is("[data-bootstrapradio="+type+"]");
        }).bootstrapradio();

        // Do whatever else with radioGroup you want for initialization
    }

});

您最终得到 2 个 bootstrapradio，第一个用两个元素初始化，第二个用一个元素初始化。