捆绑脚本中的$(document).ready()

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

假设您有多个特定于页面的外部.js文件,每个文件都有自己的页面特定的$(document).ready()函数。 假设第1页的文档就绪function将样式应用于正文中的每个

  • ,而第2页中准备好的文档仅为 s样式。 只是一个简单的例子。

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

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

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

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

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

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

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

    对于其他页面(如配置文件页面),您可以捆绑所需的脚本并引用它

    我认为你要实现的目标存在相互冲突的目标:其中一些是常见的,其中一些是针对单个页面的。 如果是后者,为什么它在共同模块中?

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

    单个页面可能具有localready()函数, $(document).ready()的最后一步是运行它(如果存在):

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

    在附近的文件中:

        

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

    希望有所帮助。

    通过“捆绑”你的意思是缝合 ?

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

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

    我已经看到它只是动态完成,例如或使用缓存引擎,例如 (这实际上是第一次请求样式表组合时生成的文件,现在是直接的CSS [不再动态])

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

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

    编辑

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

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

      

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