2010-09-20 83 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。訣竅是使用適當的命名空間,這將允許您輕鬆地重構,擴展和共享代碼。