0

一个经常有一些动态部分的表单，需要在加载时初始化。例如日期选择器、增强选择、部分切换、隐藏/显示条件元素等。

例子：

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

我想在日期元素上初始化 datepicker，在选择元素上初始化 Select2。

表单初始化放在哪里？

我的想法：

  • 通过全局选择器初始化：

    $(function() {
    $('input[name=date]').datepicker();
    $('select[name=selection]').select2(); 
})`.

    但是我有一个用于整个 web 的 js 文件，因此这将导致在每次页面加载时抓取整个 DOM，即使该元素不存在于当前页面上也是如此。

  • 某种条件选择器。例如，给<body>和 id 并添加到我的全局 js 文件中，如下所示：$(function() { $('input[name=date]', 'body#foo').datepicker(); })

  • 将每个表单的 init 封装成一个函数（或类方法），并从 HTML 中调用该函数：

    <script type="text/javascript">
    $(document).ready(initMyForm());
</script>

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

4

1 回答 1

0

如果对于您当前的项目，您正在运行一个 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();
于 2013-02-17T22:28:07.683 回答