0

我正在为 Web 应用程序构建一个多页前端。UI 的 javascript 很少，但我知道会有大量的 javascript 来处理后端，所以我尽我所能保持它尽可能稀疏和有限。

我想在只使用一个缩小的 js 文件时有条件地同步执行 javascript。我有一些全局函数，但大部分代码都是特定于页面的。每个页面在 body 元素中都有页面的 id。例如，about.html 有以下代码<html>...<body id="about">...</body></html>。

我知道加载 javascript 的各种异步方法，例如require.js或什至$.getScript，但由于各种原因，我试图避免使用这种方法。因为我正在预处理 HTML，所以我也不想将脚本分解为每页（尽管我可以），因为它是一个小文件，我不想创建一堆不同的 <script>标签。我目前的解决方案是有条件地执行每页所需的 javascript，我正在这样做，如下例所示：

    $(document).ready(function(){
         //global.js code
        if(document.body.id==='about'){
           // about.js code
        } 
       if(document.body.id==='home'){
           //home.js code
       } 
        // etc.

  });

在构建过程中，所有的 js 都存储在单独的文件中，因此它看起来不像这里看起来那么笨拙，因为include filename.js条件的主体内部只有一个。

条件可防止在每一页上执行不必要的代码。但是，当我这样做时，我突然意识到这样做实际上可能没有任何好处。我读到$(window).load或者$('body').load 事件可能会导致与 冲突$(document).ready，并且它们都肯定更慢 - 就像window.onload（我测试过的）一样。我想这将是我解决这个问题的首选方式。我读的是真的吗？和/或，我在做什么有用吗？

4

1 回答 1

1

对于页面特定的事件，为什么不在元素引用中添加正文 ID？

$( '#about .do-something' ).on()...

如果你实际上是在每页的基础上执行非基于事件的代码

if( $( '#about' ).length ) { // trigger your code here }

它与您的解决方案并没有太大的不同，只是它不需要您保留有关在何处执行哪些代码的清单。无论哪种方式，两种解决方案都会被缓存。

于 2014-08-27T23:15:17.300 回答