Question

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

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

如果我们考虑将在线应用程序的逻辑部分放入对象（例如“客户”或“项目”）中，我们可能会有一堆特定于每个“对象”的代码。

作为一个例子，我可以有一个'profile'代码组，允许我管理我的个人资料，它可能有多个使用Ajax的div-pop-up，为了这个例子，让我们说我有一些控制我的“送货地址”的功能，他们控制div-pop-up，他们处理特定于该信息的Ajax。 - 假设我有4个功能用于此目的。但这只是一个更大的'profile.js'文件的一部分，它可以处理我所有的“个人资料”...

现在我有了应用程序的另一部分 - 例如购物车 - 我需要允许用户访问“送货地址”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>

和“IF”我需要另一页的部分

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

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

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

现在我把它写出来 - 想一想 - 页面上的每个图像也是对服务器的单独调用 - 所以也许我正在用一些东西来解决问题一个问题。

我是否可以获得一些反馈，了解其他人在跨模块的JS代码重用方面做了什么 - 而不是在模块之间共享“巨大”文件。

Answer 1

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

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

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

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

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

javascript BEST PRACTICE - 管理脚本/代码重用

1 个答案: