javascript - document.ready 用于使用单个 JavaScript 文件的多种形式

Question

我在 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

Answer 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
    } 
})();