是这种方法的条件javascript加载的任何值

Is this method of conditional javascript loading of any value?

本文关键字：javascript 加载 任何值 条件 方法      更新时间：2023-09-26

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

我想有条件地同步执行javascript，同时只使用一个缩小的js文件。我有一些全局函数，但大多数代码都是特定于页面的。每个页面在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也是如此（我测试过）。我想这是我最喜欢的方式。我读到的是真的吗？和/或，我所做的有用吗？

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

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

如果你真的在每页的基础上执行非基于事件的代码，

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

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

相关文章：