javascript BEST PRACTICE - 管理脚本/代码重用 [英] javascript BEST PRACTICE - managing scripts / code reuse
问题描述
阅读许多文章，例如如何在另一个JavaScript中包含JavaScript文件文件？ - 显然不可能将一个脚本包含在另一个脚本中。
From reading many articles, such as How do I include a JavaScript file in another JavaScript file? - it is apparently not possible to include one script into another.
所以这是我的问题 - 我很担心关于JS膨胀。或者有太多未使用的代码加载不使用/不需要它的页面。但是，偶尔，我需要在多个页面上使用相同的功能，但不是所有页面。
So here's my question - I'm concerned about JS bloat. or having too much unused code loading with pages that don't use/need it. However, occasionally, I'll need the same functions on multiple pages, but not all pages.
如果我们考虑将在线应用程序的逻辑部分转换为对象，例如作为'客户'或'项目' - 我们可能有一堆特定于每个'对象'的代码。
If we look at making logical sections of an online application into objects, such as 'customers' or 'items' - we may have a bunch of code that is specific to each of these 'objects'.
作为一个例子，我可以有一个'profile'允许我管理我的个人资料的代码组，它可能有多个使用Ajax的div-pop-up，为了这个例子，我可以说我有几个函数可以控制我的发货地址，他们控制div-pop-up，他们处理特定于该信息的Ajax。 - 假设我有4个功能用于此目的。但这只是一个更大的'profile.js'文件的一部分，它处理我所有的'个人资料'... ...
As an example, I could have a 'profile' group of code that allows me to manage my profile, it may have multiple div-pop-ups that make use of Ajax, and for the sake of the example, lets say I've got a couple functions that control my "shipping address", they control the div-pop-up, they handle the Ajax specific to that information. - lets say I have 4 functions for that purpose. But that is only part of a much larger 'profile.js' file that handles ALL of my 'profile' crud...
现在我还有另一部分应用程序 - 例如购物车 - 我需要允许用户访问送货地址div-pop-up和所有Ajax功能。
Now I've got another section of the application - such as a shopping cart - where I need to allow the user access to the "shipping address" div-pop-up and all the Ajax functionality.
我想我想重新使用profile.js中的那些函数 - 因为重写代码似乎是坏形式做同样的事情 - 因为那时我会有长期的代码维护问题 - 如果我做了更改 - 我必须记住我使用过该代码的所有地方。
I think I'd like to re-use just those functions from the profile.js - because It seems like 'bad form' to 're-write' code that does the same thing - because then I'd have long term code maintenance issues - if I made a change - I have to remember everywhere I used that code.
所以如果我要推断一个'最佳实践' - 考虑到这些技术如何工作的限制 - 我不能'嵌套'并重新使用js，就像我服务器端包含OR CSS一样。
So if I'm left to deduce a 'best practice' - given the limitations of how these technologies work - I can't 'nest' and re-use js like I do server side includes OR CSS.
我的代码必须分成单独的文件，并且（理论上）将使用许多较小的.js文件
My code is going to have to be broken into separate files, and (theoretically) lots of smaller .js files will be used
所以我的< head> 将如下所示
<head>
<script src='smallfile_1.js'...>
<script src='smallfile_2.js'...>
...
<script src='smallfile_10.js'...>
<head>
和IF我需要另一页的一个部分
and "IF" I need a section in another page
<head>
<script src='that_other_object_/smallfile_3.js'...>
</head>
...对这些较小文件的重复TTP调用是否会成为开销？在交通繁忙的应用程序中 - 似乎网络和服务器开销可能开始成为一个问题，或者只是在鼹鼠山上建造一座山？
...doesn't the repeated TTP calls to these smaller files become overhead? In a heavy traffic application - it seems like the network and server overhead might start to become a concern, or am just making a mountain out of a mole hill?
100k请求10个5k文件，真的相等 - 100k请求1个50k文件？
Does 100k requests for 10 5k files, REALLY equal - 100k requests for 1 50k file?
现在我把它写出来 - 想一想 - 每个页面上的图像也是对服务器的单独调用 - 所以也许我正在解决一个不是问题的问题。
Now that I write it out - and think about it - every image on a page IS a separate call to the server too - so maybe I'm making an issue out of something that isn't an issue.
我可以得到一些反馈，了解其他人在跨模块的JS代码重用方面做了什么 - 没有在模块之间共享巨大文件。
Can I get some feedback as to what other people are doing about JS code reuse across modules - without making a "huge" file shared across modules.
推荐答案
答案很简单 - 你创建了一个库，或者包含你所有的实用工具的框架，然后加载那个库在你的所有页面上。由于浏览器缓存，客户端必须检索该文件的唯一时间是初始加载，因此即使文件相当大，客户端也只需要加载一次。
The answer to this is simple - you create a library, or a framework that contains all of the utility function you have, then you load that library on all your pages. Because of browser caching, the only time the client will have to retrieve that file is on the initial load, so even if the file is fairly large, the client will only need to load it once.
这意味着某些网站（如Stack Overflow）只使用一个主JavaScript文件，其中包含网站上所有页面所需的大部分代码。尽管每个页面上可能只需要一些功能，但浏览器缓存意味着此方法将更有效。
This means that some sites, such as Stack Overflow, uses only a single master JavaScript file that contains most of the code needed for all of the pages on the site to function. Even though only a few of the functions may be needed on every single page, browser caching means that this method will be more efficient.
防止这种情况发生的另一种方法是创建一个小的服务器端文件，它将动态地组合服务器上的多个JavaScript，并在客户端请求时提供它们对于他们，例如：
The other way to prevent this from happening is the create a small server-side file that will combine the multiple JavaScript on the server dynamically, and serve them when the client requests for them, for example:
<script src="/resource/js?load=file1,file2,file3" type="text/javascript></script>
但是，建议不要使用此方法，因为它会失败因此，最佳做法是通常来维护一个包含网站运行所需的所有代码的大型主JavaScript文件，该文件缓存在初始页面加载上。
However, this method is not recommended because it defeats browser caching. Therefore, the best practice is usually to maintain a large master JavaScript file that contains all of the code needed for the site to function, which is cached on the initial page load.
这篇关于javascript BEST PRACTICE - 管理脚本/代码重用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
