2010-09-20 97 views
3

我想知道是否有一个很好的参考如何最好地格式化.js文件?.js文件格式

你是否像对待类文件一样对待它们,或者是否将基于它所处理页面的功能分开?您是否创建了可用于多个页面的.js函数,或者是为每个页面编写自定义的.js文件?

我只是好奇,如果有一种正式的方式,而不是只写一堆功能,可能会或可能不会组在一起的特定页面或一组页面。现在我尝试按页面的功能进行分组,但我的.js文件对于该页面是非常自定义的,不确定它们是否可以在不同的页面上使用。

::更新::

有些答案具有相同的主题,主要是关于你打算在这个项目做什么。现在这个项目对我来说真的是新鲜事物,而且需求迟缓。所以我正在逐页建立它。未来可能会有跨功能或类似的功能。尽管大多数功能对特定页面都非常具体。

将AJAX调用分组为.js是明智的做法,但也有一个custompage .js包含页面的所有自定义功能。

回答

3

通常情况下,您会希望减少包含在页面上的单独JavaScript文件的数量,以减少HTTP请求。

+0

你有参考指出吗?我的意思是我相信你,但我只是想阅读。 – webdad3 2010-09-20 21:07:14

+1

@Jeff V - 阅读yslow(http://developer.yahoo.com/performance/rules.html)或谷歌网页速度文档http://code.google.com/speed/page-speed/docs/rules_intro。 html – redsquare 2010-09-20 21:15:21

+0

edit-哦已经被打败了,检查上面。 – Okeydoke 2010-09-20 21:18:32

0

这真的取决于你在做什么。

如果每个页面具有完全不同的功能,那么将每个页面的功能分解成不同的文件可能是有意义的。如果你有一些重用,那么你可以在一个util类中使用通用函数。你可能会尝试使所有的东西都是面向对象的(我个人的方法)。

所以基本上我会说做什么对你有意义。

2

这真的取决于你想要完成什么。你是否试图建立一个图书馆在你的网站上的不同页面上使用?那么你在js中将所有东西组合在一起,并在masterpage或每个需要该库的页面中引用它。

你想分隔代码并保持整洁吗?然后为特定页面创建一个单独的js文件。

0

我不知道是否存在这样的标准,但也许像jQuery,Dojo,YUI Library(雅虎等)这样的大型项目可以向您展示一些良好的实践。我特别在JavaScript中使用面向对象的方法,因此我习惯于将不同的js文件中的每个类分开,然后使用“cat”将所有内容放在一起,然后YUI Compressor缩小。我对这个不完整的答案感到抱歉,我也将继续观看这个主题!

1

它真的依赖于你喜欢什么,但我会做什么nico说。 (在一个文件中用于整个网站上的功能,或者为每个页面分割功能)。在一个页面上加载许多JavaScript文件会增加http流量。

3

一个伟大的起点将是你观看丽贝卡墨菲利用jQuery构建应用程序presentation并阅读她的blog post关于使用对象来组织你的js。

+0

她的演讲很有意思。感谢您的分享。 – webdad3 2010-09-22 15:06:29

+0

发现这非常有用。谢谢。 – 2011-09-25 00:51:11

+0

博客文章URL应为http://rmurphey.com/blog/2009/10/15/using-objects-to-organize-your-code/ – Ian 2013-09-21 13:16:46

1

在每个页面的基础上处理自定义事件的方法之一是为每个页面定义一个Object持有回调函数。您可以使用<body>的ID或其他类似的ID。

您可以使用类似,

my_app.page_handlers = { 
    foo: function() { /* ... */ }, 
    bar: function() { /* ... */ } 
    /* ... */ 
} 

所以与<body id="foo">载入页面将执行功能my_app.page_handlers.foo()

您可以将所有函数转储到一个文件中(例如page_handlers.js),然后在您看到需要时将它们移动到它们自己的文件中。

我喜欢复制Python的模块结构。所以我可以选择将page_handlers.js分成page_handlers/foo.jspage_handlers/bar.js。诀窍是使用适当的命名空间,这将允许您轻松地重构,扩展和共享代码。