在同一页面上包含许多javascript文件可能会导致性能下降。 我想问的是： 最好保留单独的文件或将所有文件包含在一个javascript文件中吗？
如果将所有内容都包含在同一个文件Javascript中更好，我怎样才能避免不同脚本之间的冲突？
答案 0 :(得分：9)
最好保留单独的文件或将所有文件包含在一个文件Javascript中？
为避免多个服务器请求，最好将所有JavaScript文件分组为一个。
如果你正在使用C＃.Net + ASP.Net，你可以bundle your files - 这是压缩脚本的一种非常好的方法。
如何避免不同脚本之间的冲突？
您可以使用RequireJS;不同的名字也是个好主意;每次插件/脚本结束时，使用;确定其结束。
为了保持脚本的效率，您应该 minify 。
在缩小脚本之后，将它们全部分组 - 无论它们是插件还是您自己的代码 - 放在一个文件中并在您的应用程序中调用它。
在这种情况下，您应该为每个页面调用必要的JavaScript。 你怎么做？
在缩小所有脚本之后，将它们分隔在类别中。看看是否有这个想法：
/assets/js/core.js - 在这里，您需要您的所有网页所需的JavaScript代码。这是你的核心;你的内核;
/assets/js/plugins.js - 在这里你把你所有页面运行的所有插件（即jquery，backbone，knockout等）。
/assets/js/home/bootstrap.js - 这就是魔法：在此文件中，您必须填写您的家庭将要拨打的代码;
/assets/js/contact/bootstrap.js - 与以前相同：您应该将此文件与您的联系页面将调用的代码放在一起。
提示： core.js 和 plugins.js 在部署应用程序时可能占用相同的文件。为了更好地理解和发展，最好将它们保存为单独的文件。
为了给你一个想法，插件的文件应该是这样的：
/* PlaceHolder plugin | http://www.placeholderjs.com/ | by @phowner */
; $(function(){ /* the placeholder's plugin goes here. */ });
/* Masked Inputs plugin | http://www.maskedjs.com/ | by @maskedowner */
; $(function(){ /* the masked input's plugin goes here. */ });
/* Mousewheel plugin | http://www.mousewheeljs.com/ | by @mousewheelowner */
; $(function(){ /* the mousewheel's plugin goes here. */ });
答案 1 :(得分：1)
提供一个大单个vs服务多个小文件取决于很多因素：
可以通过为每个脚本引入自己的范围来减少/消除冲突。一种常见的方法是使用IIFE / SIAF并注入所需的变量。
IIFE的简单快速示例：
(function () { // IIFE
var undefined = true;
})();
if (document.querySelectorAll === undefined) {
// polyfill
}
如果IIFE中的内容将在全球范围内执行，则可能会使您的polyfill崩溃。由于它是在本地（函数）范围内执行的，因此您可以避免冲突。
注意：通常，您的polyfill也不应在全局范围内实现。
答案 2 :(得分：0)
冲突代码与组合JavaScript无关或将其放在单独的文件中，但它需要下降编程。
结合或不结合取决于多种内容，例如：
答案 3 :(得分：0)
捆绑通常更好。如果您使用的是Visual Studio，则可以将Web Essentials捆绑用于JS，CSS甚至图像精灵。