Question

一个通常具有一些动态部分的形式，需要初始化onload。例如。 datepickers，增强选择，部分切换，隐藏/显示条件元素等。

示例：

<form>
    <input type="text" name="date">
    <select name="selection"></select>
</form>

我希望在日期元素上使用datepicker，在选择元素上使用Select2。

表单初始化的位置？

我的想法：

通过全局选择器初始化：
```
$(function() {
    $('input[name=date]').datepicker();
    $('select[name=selection]').select2(); 
})`. 
```
但是我有一个整个网络的js文件，所以这会导致在每个页面加载时抓取整个DOM，即使该元素不在当前页面上。
某种条件选择器。例如。给<body>和id添加到我的全局js文件中：$(function() { $('input[name=date]', 'body#foo').datepicker(); })
将每个表单的init封装到一个函数（或类方法）中，并从HTML调用该函数：
```
<script type="text/javascript">
    $(document).ready(initMyForm());
</script>
```

但我猜，是不是有更好的方法？您会建议什么，特别是对于需要不同javascript初始化的许多不同形式的大型项目？

Answer 1

如果您当前的项目正在运行一个JS文件，或者甚至是适用于“通用”表单设置功能的中型项目，则使用您所描述的功能是合适的。

请参阅下面的示例，该函数包装为一个小型jQuery插件，因此您可以根据需要在特定选择器上调用它，以避免遍历整个DOM。

;(function($){
    $.extend({
        initMyForm : function(){
            $(this).find('input[name=date]').datepicker();
            $(this).find('select[name=selection]').select2(); 
        }
    });
})(jQuery);

所以你可以这样使用：

$(document).ready(function(){
    $(body).find(form).initMyForm();
});

$("#my-form").initMyForm();

$(".page-content .form").initMyForm();

调用javascript初始化表单的有效方法是什么？

1 个答案: