Question

我写了一个插件来验证我工作的网络中的表单。这里的问题是我们的一些页面有多种形式，全局变量被覆盖。我会尝试尽我所能给出一个例子。代码本身太长而无法粘贴。

我知道这段代码非常错误，但我正在尝试衡量使用此代码的多个实例的最佳方法，而不会让事情变得太复杂。

jquery插件：

(function($){

    methods = { 
        'method1': function(){
            alert('form: ' + globals.form_name ); 
        }
    }

    $.fn.validationplugin = function() {
        globals.form_id = $(this).attr('id');
    }(jQuery);

    var globals = {}


}(jQuery);

html电话：

<form id="form1"></form>
<form id="form2"></form>

<script type="text/javascript">
    $('#form1').validationplugin();
    $('#form2').validationplugin();
</script>

Answer 1

使用数组作为表单标识：

var globals = {
  form_id: []
};

可以使用单个元素或多个元素调用插件，因此您必须获取每个元素的标识。还要从函数返回this，以便可以链接插件。此外，您最后不需要(jQuery)，因为它将调用该函数并将返回值指定为插件：

$.fn.validationplugin = function() {
  return this.each(function(i, el){
    globals.form_id.push($(el).attr('id'));
  });
};

现在，当呼叫中有多个元素时，它也可以工作：

$('#form1,#form2').validationplugin();

考虑一下你是否可以使用对元素的引用而不是它们的身份，那么它也适用于没有身份的表单。

Answer 2

我最终这样做了......

$.fn.validate = function(){

    var formnametest = $(this).attr('id');

    if( !($.validate.globals[ formnametest ]) ){
        globals(formnametest);
    }
}

function globals(formnametemp){
    $.validate.globals[ formnametemp ]  = {
        'mobile': false,
        'mobileoffset': -115,
        'bubbleanimationtime': 500,
        'bindblur': true,
        'zindex': null
    }
}

$.validate = { 
    globals:{}
};

我创建了一个函数globals（），它将添加我的默认全局变量的新实例，并为其指定与表单相同的名称。唯一的结果是我必须通过我所有的功能传递当前表格的名称，我试图避免，但这一切都很好。谢谢@Guffa，你的意见帮助我把事情放到了一边。

要在以后引用任何这些全局变量，它只是： $ .validate.globals [currentform] .propertynamehere

似乎啰嗦，但这正是我需要的结果。：）

Answer 3

我假设您将多次针对同一元素调用您的插件，并希望在这些调用之间关联数据。如果不是这样，那么你真的根本不需要“全局”。正如@Felix Kling在评论中所说，只需使用局部变量。

但是如果您需要跟踪可以在多个插件调用之间保留的数据，您可以这样做：

(function($){

    var globals=[],
        instances=[];

    $.fn.validationplugin = function() {
        this.each(function() {
            var current,
                index = $.inArray(this,instances));

            if (index!==-1) {
                current = globals[index];
            } else {
                instances.push(this);
                current = {};
                globals.push(current);
            }
            current.form_id = $(this).attr('id');
            ... 
        }
    };
}(jQuery);

这将缓存与传递给插件的每个DOM元素关联的对象。如果对同一元素上的插件进行后续调用，则该后续调用将使用相同的全局对象。

你也可以使用jquery data将数据与任何DOM元素相关联，尽管它可能不如自己缓存它有效。

在jQuery插件中存储实例化变量

3 个答案: