0

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

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

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>
4

3 回答 3

3

对表单标识使用数组：

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();

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

于 2012-08-27T20:24:25.293 回答
0

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

$.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

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

于 2012-08-28T17:53:56.133 回答
-1

我假设您将多次针对同一元素调用插件，并希望在这些调用之间关联数据。如果不是这种情况，那么您根本就不需要“全局变量”。正如@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 元素关联的对象。如果在同一元素上对插件进行后续调用，则将在该后续调用中使用相同的全局对象。

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

于 2012-08-27T20:27:22.430 回答