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

jpm*_*yob 7 javascript code-reuse

阅读许多文章,例如如何在另一个JavaScript文件中包含JavaScript文件?- 显然不可能将一个脚本包含在另一个脚本中.

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

如果我们将在线应用程序的逻辑部分放入对象(例如"客户"或"项目")中,我们可能会有一堆特定于每个"对象"的代码.

作为一个例子,我可以有一个"配置文件"代码组,允许我管理我的配置文件,它可能有多个使用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>
Run Code Online (Sandbox Code Playgroud)

和"IF"我需要另一页的一节

<head>
<script src='that_other_object_/smallfile_3.js'...>
</head>
Run Code Online (Sandbox Code Playgroud)

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

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

现在我把它写出来 - 并考虑一下 - 页面上的每个图像也是对服务器的单独调用 - 所以也许我正在用一些不是问题的问题来解决问题.

我是否可以获得一些反馈,了解其他人在跨模块的JS代码重用方面做了什么 - 没有在模块之间共享"巨大"文件.

Yi *_*ang 12

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

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

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

<script src="/resource/js?load=file1,file2,file3" type="text/javascript></script>
Run Code Online (Sandbox Code Playgroud)

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