javascript 最佳实践 - 管理脚本/代码重用答案

【问题标题】：javascript BEST PRACTICE - managing scripts / code reusejavascript 最佳实践 - 管理脚本/代码重用
【发布时间】：2011-06-25 23:57:31
【问题描述】：

通过阅读许多文章，例如 How do I include a JavaScript file in another JavaScript file? - 显然不可能将一个脚本包含到另一个脚本中。

所以这是我的问题 - 我担心 JS 膨胀。或者在不使用/不需要它的页面上加载了太多未使用的代码。但是，有时，我需要在多个页面上使用相同的功能，而不是在所有页面上。

如果我们着眼于将在线应用程序的逻辑部分制作成对象，例如“客户”或“项目”，我们可能会有一堆特定于这些“对象”的代码。

例如，我可以有一个“个人资料”代码组来管理我的个人资料，它可能有多个使用 Ajax 的 div 弹出窗口，为了这个例子，让我们说我有几个函数可以控制我的“送货地址”，它们控制 div 弹出窗口，它们处理特定于该信息的 Ajax。 - 假设我为此目的有 4 个功能。但这只是一个更大的“profile.js”文件的一部分，它处理我所有的“profile”杂物......

现在我有了应用程序的另一部分 - 例如购物车 - 我需要允许用户访问“送货地址” div-pop-up 和所有 Ajax 功能。

我想我只想重用 profile.js 中的那些函数——因为“重新编写”做同样事情的代码似乎是“糟糕的形式”——因为那样我就会有很长时间术语代码维护问题 - 如果我进行了更改 - 我必须记住我使用该代码的任何地方。

所以如果让我推断“最佳实践”——考虑到这些技术工作方式的局限性——我不能像在服务器端那样“嵌套”和重用 js包括 OR CSS。

我的代码将不得不分解成单独的文件，并且（理论上）将使用许多较小的 .js 文件

所以我的<head> 看起来像这样

<head>
<script src='smallfile_1.js'...>
<script src='smallfile_2.js'...>
...
<script src='smallfile_10.js'...>
<head>

和“如果”我需要另一个页面中的部分

<head>
<script src='that_other_object_/smallfile_3.js'...>
</head>

...对这些较小文件的重复 TTP 调用不会成为开销吗？在流量大的应用程序中 - 似乎网络和服务器开销可能会开始成为一个问题，或者只是在鼹鼠山上造山？

100k 请求对 10 个 5k 文件是否真的相等 - 100k 请求对 1 个 50k 文件？

现在我把它写出来了——仔细想想——页面上的每一个图像也是对服务器的单独调用——所以也许我是在用一些不是' t 一个问题。

我能否获得一些关于其他人在跨模块重用 JS 代码方面所做的反馈 - 无需跨模块共享“巨大”文件。

【问题讨论】：

7 个问题，总共有 15 个答案，而您无法接受一个答案？

标签： javascript code-reuse

【解决方案1】：

这个问题的答案很简单——您创建一个库或一个包含所有实用功能的框架，然后将该库加载到您的所有页面上。由于浏览器缓存，客户端必须在初始加载时检索该文件的唯一时间，因此即使文件相当大，客户端也只需加载一次。

这意味着某些网站（例如 Stack Overflow）仅使用一个主 JavaScript 文件，其中包含网站上所有页面运行所需的大部分代码。尽管每个页面可能只需要几个功能，但浏览器缓存意味着这种方法会更有效。

防止这种情况发生的另一种方法是创建一个小的服务器端文件，它将动态组合服务器上的多个 JavaScript，并在客户端请求它们时为它们提供服务，例如：

<script src="/resource/js?load=file1,file2,file3" type="text/javascript></script>

但是，不推荐使用此方法，因为它会破坏浏览器缓存。因此，最佳实践通常是维护一个包含网站运行所需的所有代码的大型主 JavaScript 文件，该文件在初始页面加载时缓存。

【讨论】：

thx...有没有办法“测试”看看缓存是否真的发生了？从请求中“查看”kb 或传入文件的某种方式...？？