JavaScript:最好有一个大文件或多个光文件？

Question

在同一页面上包含许多javascript文件可能会导致性能低下.我想问的是:最好保留单独的文件或将所有文件包含在一个javascript文件中吗？

如果将所有内容都包含在同一个文件Javascript中更好,我怎样才能避免不同脚本之间的冲突？

Answer 1

最好保留单独的文件或将所有文件包含在一个文件Javascript中？

为避免多个服务器请求,最好将所有JavaScript文件分组为一个.

如果您使用的是C#.Net + ASP.Net,则可以捆绑文件 - 这是压缩脚本的一种非常好的方法.

如何避免不同脚本之间的冲突？

你可以使用RequireJS ; 不同的名字也是个好主意; 每次插件/脚本结束时,都用它;来确定它的结束.

性能考虑

为了保持脚本的生产力,您应该将它们缩小.

单页应用程序的解决方案

在缩小脚本之后,将它们全部分组 - 无论它们是插件还是您自己的代码 - 放在一个文件中并在应用程序中调用它.

多页面应用程序的解决方案

在这种情况下,您应该为每个页面调用必要的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. */ });