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

Question

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

但是在每个页面的 document.Ready 上需要发生一些 jQuery 的事情。我如何将它移动到一个通用的 .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 似乎很有前途。

Answer 1

您应该使用 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 .