document.ready 用于具有单个 JavaScript 文件的多个表单答案

【问题标题】：document.ready for multiple forms with single JavaScript filedocument.ready 用于具有单个 JavaScript 文件的多个表单
【发布时间】：2017-12-14 17:38:12
【问题描述】：

我在 HTML 页面上引用 JavaScript，如下所示：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>    
</script>
<script type="text/javascript" src="js/application.js"></script>
<script type="text/javascript">
$('document').ready(function() {   
// call some function specific to this page 
alert("this alert will only show for this particuar page");
});
</script>

我的问题是我有很多函数，尤其是 bootstrap/jquery 插件函数可以进入 document.ready()。结果，我的所有 html 页面中都有很多 javascript 代码。如何将需要在 document.ready 中执行的所有函数移植到共享文件 application.js？我知道我可以在 application.js 中编写一个巨大的 document.ready 来为其中的所有 html 文件提供所有 dom 就绪功能。有没有更好的选择？谢谢您的帮助。

编辑：

对不起，如果我不清楚。我的意思是：如果有两个 html 页面：html1、html2 我如何告诉我的共享 JavaScript 文件为 html1 而不是为 html2 执行 document.ready 函数。如果我理解正确的话，document.ready 中的所有函数都会在每次页面加载时执行。

和我的情况类似here

【问题讨论】：

UM，你可以在外部JS文件中调用document.ready，可以有多个ready调用。有什么问题？
您应该删除所有document.ready 包装器，将代码移动到application.js 并在关闭</body> 标记之前放置此脚本。
签出requirejs.org
对不起，如果我不清楚。我的意思是：如果有两个 html 页面：html1、html2 我如何告诉我的共享 javascript 文件为 html1 而不是 html2 执行 document.ready 函数。如果我理解正确的话，document.ready 中的所有函数都会在每次页面加载时执行。
仅供参考，没有document dom 节点，document 是一个窗口对象：$(document).ready(...); 即使$().ready(...); 也可以，但它并不总是可靠的

标签： javascript jquery html

【解决方案1】：

最好的办法是将你所有的 JS 移到 application.js，然后让它找出它在哪个页面上。

最简单的解决方法是查看当前页面的URL：

// jQuery
$(document).ready(function() {  
    if(document.location.pathname.matches(/your-page\.html/)) {
          // do someting
    }
});

但更优雅和可重用的解决方案是寻找您想要与之交互的特定元素：

// jQuery
$(document).ready(function() {  
    var someSpecialElement = $('#some-special-element');
    if (someSpecialElement.length) {
          // do someting
    } 
    var someOtherSpecialElement = $('#some-other-special-element');
    if (someOtherSpecialElement.length) {
          // do someting
    } 
});

或者……

// Shiny Javascript
(function(){
    const someSpecialElement = document.querySelector('#some-special-element');
    if (someSpecialElement.length) {
          // do someting
    } 
    const someOtherSpecialElement = document.querySelector('#some-other-special-element');
    if (someOtherSpecialElement.length) {
          // do someting
    }
})();

或者你可以在你的 body-Tag 上放置类并在 HTML 加载后进行测试

// jQuery
$(document).ready(function() {  
    var body = $('body');
    if (body.hasClass('edit-some-stuff')) {
          // do someting
    } 
    if (body.hasClass('delete-some-stuff')) {
          // do someting
    } 
});

或者……

// Shiny Javascript
(function(){
    const body = document.querySelector('body');
    if (body.classList.contains('edit-some-stuff')) {
          // do someting
    } 
    if (body.classList.contains('delete-some-stuff')) {
          // do someting
    } 
})();

【讨论】：

$('document') 应该是$(document)

【解决方案2】：

你可以使用 script defer 属性，它会让你所有的脚本在 html 是渲染器之后加载。所以等于把所有的脚本都放在document ready下。这是链接：

http://www.w3schools.com/tags/att_script_defer.asp

【讨论】：