Question

我最近在网络优化方面做了很多工作，我遇到了一个有趣的问题。我想知道是否有人可能知道现有的解决方案。

假设您有多个特定于页面的外部.js文件，每个文件都有自己的特定页面 $(document).ready()功能。假设第1页的文档就绪函数将样式应用于正文中的每个<li>，而第2页中准备好的文档仅为<input type="button" />个样式。只是一个简单的例子。

现在假设您将这两个脚本以及所有库脚本捆绑在一起，以减少页面加载时的http请求数。现在，两个文档就绪了，第2页的li将使用仅适用于第1页的代码进行格式化。

我的问题是 - 有没有办法通过jQuery或第三方库将特定文档分配到特定页面，但仍然将它们全部捆绑到一个.js文件中？

Answer 1

我认为您可以使用jQuery(document).ready() - Wait Until Exists

Answer 2

您应该根据您的网页捆绑您的脚本。

让我们说你的主页需要jquery和一些自定义脚本。将它们捆绑在一起并引用此捆绑包。

对于其他页面，例如个人资料页面，您可以捆绑所需的脚本并引用它。

Answer 3

我认为你想要实现的目标存在相互冲突的目标：其中一些是常见的，有些是针对单个页面的。如果是后者，为什么它在公共模块中呢？

话说回来，我们成功使用的一种方法是将所有常用函数移动到主.js文件中，以及站点范围内的$(document).ready()内容。

单个页面可能有localready()个功能，$(document).ready()的最后一步是运行它（如果它存在）：

/* === common.js === */
$(document).ready(function(){
    // snip
    if (typeof(localready) != 'undefined') {
        localready();
    }
});

在附近的文件中：

</body>
<script>
    function localready() {
        foo();
        bar();
    }
</script>
</html>

因此，如果正在呈现的页面具有localready（）函数，则会调用它并执行它必须执行的任何操作。如果没有，则执行标准ready（），就是这样。

希望有所帮助。

Answer 4

从架构的角度来看，如果代码块仅在一个页面上有意义，为什么不将它与该页面捆绑在一起？我知道将所有HTML放在一个地方并将您的javascript放在另一个地方可能看起来更“井井有条”，但它真的可以节省您的服务器或加快您的用户体验吗？

当我们减少连接数时会出现捆绑问题，但会增加服务器上的负载，因为我们在组合文件中填充了大量未使用的垃圾。哪个更好地服务1,000个1k文件或100个100k文件。如果您有100个页面，每个页面都有一个唯一的document.ready，那么当您只访问一个页面时，您就会为用户添加很多数据。如果用户很可能使用某些捆绑内容，那么这种捆绑的好处实际上才有用。例如Google.com，它们会预先缓存结果页面中所需的实体，因为您在AT google.com的事实意味着您可以非常高度确定地进行搜索。它确实不预缓存gmail或谷歌文档。

Answer 5

我想一个简单的if可以解决这个问题：

$(document).ready(function(){
    if(location.href == page1) {
        ...
    }
});

$(document).ready(function(){
    if(location.href == page2) {
        ...
    }
});

修改

如果您不想触摸代码，则不希望仅包含每页上的.js文件。这甚至更好，因为你不会在他不会使用的代码上浪费客户端资源。

实现这一目标的一个例子是创建某种服务器代码，将所有文件粘合在一起，而不是手动完成。一个PHP示例：

<script type="text/javascript" src="<?php echo Glue::javascript($array_of_files); ?>"></script>

您可以根据需要将其扩展为“粘合”css或其他类型的文件。此外，您甚至可以包含代码来缩小它们。当然，该函数会缓存这些文件，因此不必每次都“粘合”它。

Answer 6

＆＃34;捆绑＆＃34;你的意思是suturing吗？

我自己看到并部分实现的一个策略是，应用程序在构造视图时通知视图构建器所有必需的CSS / JS;在您的示例中，正在构建第一页时，它将让视图构建器知道它需要特定的JS文件。

当页面准备好提供时，头部只引用一个JS和一个CSS文件，它们是缝合文件。

我已经看到它只是动态完成，例如<link rel="stylesheet" href="/style.css?pageOne&specialFooter&member" />或使用缓存引擎，例如<link rel="stylesheet" href="995093293da7f03f9b631e8d3ec4efc7.css" />（这实际上是第一次请求样式表组合时生成的文件，现在是直接的CSS [不再动态]）

Answer 7

您始终可以从“应用程序角度”处理页面加载。

例如，创建一个“导航器对象”，该导航器对象在用户要导航到页面时设置常量：

const navigateTo = (page) => {
    let pageName = '?';
    switch (page) {
        case 'login.html':
            pageName = 'Login';
            break;
        case 'index.html':
            pageName = 'Home';
            break;
        default:
            console.log("Unknown page: " + page);
    }
    location.href = page;
    return pageName;
}

将“ document.ready”脚本转换为函数，例如“登录页面就绪”函数：

$(function() {
   console.log( "Login page ready!" );
});

成为：

const loginReady = () {
    console.log( "Login page ready!" );
}

然后，每当用户更改页面时，通过单击链接或导航栏项目，运行如下功能：

const runReadyScripts = (page) => {
   switch (page) {
      case 'Login':
        loginReady();
        break;
      case 'Home':
        homeReady();
        break;
      default:
        console.log("Unknown page: " + page);
   }
};

捆绑脚本中的$（document）.ready（）

7 个答案:

修改