web应用程序的Javascript/jQuery最佳实践：集中与规范

假设一个web应用程序有几十个页面组（pg1、pg2，…），其中一些页面组需要一些特定于它们的JavaScript代码，而不是整个应用程序。例如，window.resize（）上的某些视觉修复可能仅与pg2相关，而与其他地方无关

以下是一些可能的解决方案：

1/集中式：为处理所有页面组的整个应用程序提供一个脚本文件。很容易知道是否存在相关的DOM对象，因此所有不相关的页面只需执行少量额外的if（）。 最大的优点是，整个web应用程序只需加载一次所有JS，无需修改HTML代码。缺点是在不相关的页面中添加了额外的检查

2/混合：集中式脚本检查页面上是否存在特定函数，如果存在，则启动该函数。例如，我们可以添加一个

if (typeof page_specific_resize === 'function') page_specific_resize();

在这种情况下，特定页面组将具有：

<script>
function page_specific_resize() {
    //....
}
</script>

功能页_特定_调整大小（）{
//....
}

优点是代码只存在于相关页面，因此不会在每个页面上进行测试。缺点是整个页面组中HTML结果的额外大小。如果有多行代码，页面组可能能够加载一个特定于它的附加脚本，但是我们将在那里添加一个http调用，以便在集中式脚本中节省几公斤

---

哪一个是最佳实践？请评论这些解决方案或建议您自己的解决方案。添加一些资源来支持您关于更好（考虑性能和易维护性）的主张将是非常好的。将选择最详细的答案。谢谢。

通常，HTTP请求越少越好，但这取决于您的web应用程序

我通常使用在每个文件中包含所需的正确模型和视图

在开发过程中，它为我节省了大量调试时间（因为我知道存在哪些文件），但在生产过程中，考虑到请求的数量，这可能会有问题

因此，我使用，这是专为requirejs设计的，在部署时编译我的JS文件

---

希望这有帮助

这是JS的圣杯，希望ECMA6/7中的模块能够解决这个问题

客户端上有模块加载器，如JSPM，现在node.JS中有热插拔JS代码编译器，可以通过webpack在客户端上使用块

去年，我成功地创建了一个简单的应用程序，在运行时只加载所需的代码/文件块：

这是一个简单的测试项目，我在github上称为praetor.js:github.com/magnumjs/praetor.js

gh pages代码分支可以向您展示其工作原理：

在主js文件中，您可以看到webpackJsonp在编译后是如何实现的：

JS:

要查看它的实时工作，请转到并打开网络面板，并在通过左侧的选择菜单导航时查看运行时加载的块

---

希望有帮助

要想找到一个最佳的解决方案有点困难，因为这是一个假设的场景，而且我们没有数据来处理：什么是加载最多的页面、有多少页面、脚本的总大小等等

也就是说，我没有找到具体的答案，最佳实践TM，而是人们一致同意的一般观点

1）缓存：

据此：

“在现实世界中使用外部文件通常会产生更快的效果 页面，因为JavaScript和CSS文件由浏览器缓存“

2）缩小

仍然根据雅虎链接：

“[缩小]提高了响应时间性能，因为下载文件的大小减小了”

3）HTTP请求

最好减少HTTP调用（基于社区应答）

4）您是否需要特定的纸条？

根据：

“应使用JavaScript以附加功能装饰您的站点，并且不应要求您的站点运行。”

这取决于您必须加载的资源。取决于加载特定页面组的频率或您希望请求该页面组的频率。web应用程序是单页的吗？每个特定脚本都做什么

如果脚本加载表单，用户将不需要多次访问该页面。用户稍后仍需要internet连接才能发布数据

但是，如果是一个调整页面大小的脚本，而用户在连接上遇到了一些问题（例如：在乘坐地铁时通过手机访问web应用程序），那么最好已经加载代码，以便用户可以自由导航。根据我之前发布的Github链接：

一直被触发的事件（例如，调整大小/滚动）

这是一件应该优化的事情，因为它与性能相关

提前将一个JS文件中的所有代码缩小以进行缓存将减少请求数量。此外，建立连接可能需要几秒钟，但处理一组“if”语句需要几毫秒

但是，如果你有一个重JS文件，用于一个不是你应用程序核心的功能（比如说，这一个文件的大小几乎是其他脚本总和的n%），那么就不需要让用户等待特定的功能

“如果您的页面是媒体密集型页面，我们建议您调查JavaScript技术，以便仅在需要时加载媒体资产。”

我更喜欢你所给出的“混合”解决方案，但是还有一些事情要考虑：如果你的几个<代码> PG1，<代码> PG2不需要大量的JavaScript代码，你可能想要集中这两个，以减少JavaScript文件的数量。这可以使应用程序更容易调试，因为您不需要导航

 module.exports = {
    getPage: function (name, callback) {
        // no better way to do this with webpack for chunk files ?
        if (name.indexOf("demo") !== -1) {
            require(["./modules/demo/app.js"], function (require) {
                callback(name, require("./modules/demo/app.js"));
            });
        }
 .....