javascript - 在 asp.net 项目中管理常见的 jquery 脚本文件

我正在寻找在 asp.net 项目中使用 javascript/jQuery 片段的最佳实践。我知道最好将所有脚本放在一个单独的文件中，而不是内联。那挺好的。很容易将这些脚本函数移动到一个公共(public)文件中(可能是几个不同的，以平衡为小函数加载单个大文件的性能)。

但是有一些 jQuery 的东西需要在每个页面的 document.Ready 上发生。我如何将它移动到一个常见的 .js 文件中？我想避免每页一个脚本，因为它太多了。

例如，假设 Page1 需要在加载时操作几个单选按钮，并且具有以下内联脚本。 (仅供说明)

<script>
$(document).ready(function() {
 //check checkboxes
  if(true)
   call function1();
});
</script>

与 Page2 相同，但对于其他一些条件，调用不同的函数 function2 。

我可以将 function1 和 function2 移动到一个通用的 .js 文件中，但是 document ready 部分如何。应该保持内联吗？我这么认为是因为否则我不确定 common.js 如何区分不同页面的 document.ready。

那么它是否违背了没有内联 javascript 的目的？如果有人可以对此有所了解，将不胜感激。

我做了一些研究，但可能是由于关键字不正确，到目前为止我还没有找到任何好的信息。在下面的评论中，不显眼的 JavaScript 似乎很有希望。

最佳答案

您应该使用 data-* 属性指定 HTML 中应该存在哪些行为。
然后，您可以使用单个通用 Javascript 代码来读取这些属性并应用行为。

例如:

<div data-fancy-trick="trick-3">...</div>

在 JS 文件中，你可以这样写

$('[data-fancy-trick]'.each(function() {
    var trickName = $(this).data('fancy-trick');
    switch (trickName) {
        ...
    }
});

有关此技术的实际示例，请查看 Bootstrap's Javascript components 。

关于javascript - 在 asp.net 项目中管理常见的 jquery 脚本文件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18791798/