你把你的javascript放在哪里?

时间:2008-11-18 22:08:54

标签: javascript

您是否将您的javascript本地化到该页面,或者拥有主“application.js”或类似内容?

如果是后者,那么确保你的.js没有在错误的页面上执行的最佳做法是什么?

编辑:通过javascript我的意思是你作为开发人员编写的自定义javascript,而不是js库。我无法想象有人会将jQuery源复制/粘贴到他们的页面中,但你永远不会知道。

8 个答案:

答案 0 :(得分:10)

将所有j放在一个文件中可以帮助提高性能(只有一个请求而不是几个)。如果您使用的是像Akamai这样的内容分发网络,它可以提高您的缓存命中率。此外,始终在页面的最底部(正文标签上方)抛出内联js,因为它是同步执行的,可能会使页面延迟渲染。

是的,如果您使用的其中一个js文件也在谷歌托管,请确保使用该文件。

答案 1 :(得分:5)

这是我的“指南”。请注意,这些都不是正式的,它们似乎是正确的做法。

所有共享的JS代码都存在于SITE/javascripts目录中,但它已加载到“层”

对于站点范围内的东西(如jquery或我的站点范围的application.js),站点范围的布局(这将是ASP.net中的母版页)包含该文件。 script标记位于页面顶部。

还有'区域范围'的东西(例如:js代码,只在网站的管理部分需要)。这些区域要么具有公共布局(可以包含脚本标记),要么呈现公共部分,而部分可以包含脚本标记)

对于分享较少的内容(比如我的图书馆只在少数地方需要),我会在这些HTML页面中单独添加script标记。脚本标签位于页面顶部。

对于仅与单页相关的内容,我只是编写内联javascript。我尽量让它尽可能接近它的“目标”。例如,如果我有按钮的某些onclick js,script标记将位于按钮下方。

对于没有目标的内联JS(例如:onload事件),它位于页面底部。


那么,如何进入本地化的库或站点范围的库?

  • 第一次需要时,将其写入内联
  • 下次需要时,将内联代码拉到本地化库
  • 如果您从(大约)3个或更多位置引用本地化库中的某些代码,请将代码拉到区域范围的库中
  • 如果需要来自多个地区,请将其拉​​到站点范围的库中。

关于这样的系统的一个常见抱怨是你最终得到10或20个小型JS文件,其中2或3个大型JS文件从网络角度来看会表现得更好。 但是,rails和ASP.NET都具有处理将多个JS文件组合和缓存到一个或多个“超级”js文件中的功能,以用于生产环境。

我建议使用这样的功能,而不是影响实际源代码的质量/可读性。

答案 2 :(得分:2)

Yahoo!'s Exceptional Performance Team为JavaScript提供了一些很棒的性能建议。 Steve Souders曾经是该团队的成员(他现在在谷歌)并且他写了一些interesting tools,可以帮助您决定将JavaScript放在哪里。

答案 3 :(得分:1)

我尽量避免在渲染页面上放置javascript函数。一般来说,我有一个application.js(或root.js),它具有菜单操作等通用功能。如果给定页面具有特定的javascript功能,我将创建一个.js文件来处理该代码,并模仿dir结构如何获取该文件(也使用与呈现文件相同的名称)。

换句话说,如果呈现的页面在public / dir1 / dir2 / mypage.html中,则js文件将位于public / js / dir1 / dir2 / mypage.js中。我发现这种风格适合我,尤其是在网站上进行模板操作时。我通过获取请求路径并在根目录上的css和js目录中检查css和js等效项来构建模板引擎以“自动加载”我的资源(css和js)。

答案 4 :(得分:0)

就个人而言,我尝试包含几个按模块排序的Javascript文件(like YUI does)。但有一段时间,当我写的基本上是单行时,我会把它放在页面上。

答案 5 :(得分:0)

最佳做法可能是on Google's servers

(取决于你的“你的”javascript的意思,虽然我想:)

答案 6 :(得分:0)

这也是我一直在努力解决的问题。我最终使用我的后端PHP脚本根据用户请求的内容智能地构建所需的JS文件列表。

通过将我的JS文件组织到一个存储库中,该存储库包含按目的组织的多个文件(一般用途,专注于单个页面,单个部分等),我可以使用在后面构建页面的事件链 - 结束有选择地根据需要选择包含哪些JS文件(参见下面的例子)。

这是在实现我的网络应用程序之后,没有充分考虑这方面的代码。现在,我还应该添加我使用增强的javascript,但不构成我网站的基础。如果您正在使用SproutCore或Ext之类的东西,我想解决方案会有所不同。


以下是PHP驱动网站的示例: 如果您的网站分为多个部分,其中一个部分是日历。用户导航到“index.phhp?module = calendar& action = view”。如果PHP代码是基于类的,则路由算法实例化CalendarModule类,该类基于“模块”并具有虚拟方法“getJavascript”。这将返回在'calendar'模块上执行操作'view'所需的那些javascript类。它还可以考虑任何其他特殊要求,并为这些要求返回js文件。当为最终页面构建javascript包含列表时,呈现代码可以验证js文件没有重复。所以getJavascript方法返回一个像这样的数组

return array('prototype.js','mycalendar.js');

请注意,这或其某种形式并不是一个新想法。但我花了一些时间才认为重要的是解决问题。

答案 7 :(得分:0)

如果它只有几百字节或更少,并且不需要在其他地方使用,我可能会内联它。另一个http请求的网络开销可能会超过通过将其拉出页面而获得的任何性能提升。

如果需要在一些地方使用,我会将函数放入一个公共的外部文件中,并根据需要从内联脚本中调用它。

如果您的目标是iphone,请尝试将您想要缓存的任何内容保存在25k以下。

确实没有严格的规则,每种方法都有利弊,强烈建议您查看可以在雅虎开发者部分找到的文章,这样您就可以根据具体情况做出明智的决定。