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

时间:2011-02-12 07:07:58

标签: javascript code-reuse

通过阅读许多文章,例如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代码重用方面做了什么 - 而不是在模块之间共享“巨大”文件。

1 个答案:

答案 0 :(得分:11)

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

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

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

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

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