Question

我有一个C＃.NET MVC3网络应用程序，我在我的网页上有一些常见的jQuery功能，并希望模块化它。我不知道该怎么做。下面是我正在使用的代码示例。您会注意到有几个控件具有分配给事件的功能。我有的每个视图都会这样做，但控件（和控件数量）会有所不同。可能有1个控件需要添加事件，或者可能有10个。

$(document).ready(function () {
    $('.datepicker').datepicker({ dateFormat: "mm/dd/yy", minDate: "12/27/2011" }); 

    $("#Description").keyup(function () {
        enableSaveAlert();
    });
    $("#DueDate").change(function () {
        enableSaveAlert();
    });
    $("#DueDate").keyup(function () {
        enableSaveAlert();
    });
});


    function enableSaveAlert() {
        document.title = document.title.replace("*", "");
        document.title = document.title + "*";
        return true;
    }

如何将此文件放入一个.js文件？

Answer 1

为什么不在每个输入元素上都有一个Id选择器，为什么不在需要调用enableSaveAlert()函数的所有元素上放一个类？

所以在你的HTML中你有

<input type="text" name="Description" class="save-alert" />
<input type="text" name="DueDate" class="save-alert" />
<input type="text" name="OtherField" />

然后在你的JS中，通过该类附加你的事件一次：

$(document).ready(function () {
    $('.datepicker').datepicker({ dateFormat: "mm/dd/yy", minDate: "12/27/2011" }); 

    $(".save-alert").bind("change keyup", function() {
        enableSaveAlert();
    });
});

function enableSaveAlert() {
    document.title = document.title.replace("*", "");
    document.title = document.title + "*";
    return true;
}

Answer 2

我建议将$(document).ready函数放在一个名为main.js的文件中，然后将该文件包含在模板视图的头部。

因此，在您的索引或布局模板视图中，您将拥有：

<html>
    <head>
        <script src="@Url.Content("~/Scripts/main.js")" type="text/javascript"></script>
    </head>
...

我认为将所有Javascript保存在组织良好的.js文件中并且从不在任何单独的视图中都是一个好主意。

jQuery文件中的常用功能

2 个答案: