基於JavaScript的Web應用程序的文件結構

Question

我打算編寫一個基於JavaScript的Web應用程序。我想知道在文件結構方面實現它的最佳方式是什麼。

有一個主頁（main.html）包含菜單和主div部分。它的工作方式很簡單：當用戶點擊菜單中的某個鏈接（例如'第1頁'）時，div部分的內容將刷新page1.html文件的內容。這是使用JavaScript（jQuery）完成的。如果用戶點擊「頁面2」，page2.html文件的內容被加載到div部分，等等。

每個頁面都有自己的javascript代碼，因爲我更願意將它分開，所以我實現了一種的 '後面的代碼' 像在asp.net：

page1.html：
<腳本類型= 「文本/ JavaScript的」 SRC = 「page1.js」> </SCRIPT>
< ... html代碼...>

page2.html：
<腳本類型= 「文本/ JavaScript的」 SRC = 「page2.js」> </SCRIPT>
< ... HTML代碼...>

當用戶點擊'Page 1'，page1.html文件的內容被加載到main.html的main div部分。由於page1.html引用了page1.js，因此page1.js中的JavaScript代碼也會被加載。

這似乎工作正常，但我想知道如果這是最好的方式來實現這一點。在某些時候，我正在考慮引用main.html中的所有JavaScript文件。這也可以正常工作，但這意味着所有的JavaScript文件都將不得不在內存中加載，即使它們不會被使用。使用第一種方法，JavaScript文件僅在實際使用之前才​​加載到內存中。

任何想法？這有什麼「最佳實踐」？請記住，這是一個Web應用程序（而不是網站）。它可以通過互聯網，但只有一些用戶（它將被密碼保護），所以我不在乎搜索引擎優化等。

Answer 1

它可能對你沒有任何影響，但你知道，從SEO的角度這是一個可怕的想法。您的網站將成爲Flash網站的Javascript版本。就搜索引擎而言，只有一個頁面。

這就是爲什麼網站基於相當流行多年的相框幾乎都消失了。

Answer 2

加載JavaScript文件是同步的，這會對頁面加載時間/察覺到的響應速度產生負面影響。

因此，我認爲最好是將所有腳本合併到一個文件中，用YUI壓縮器壓縮併發送gzip。這樣你將獲得最佳的壓縮和最小的HTTP開銷，並且緩存的JS不會暫停加載其他頁面。

對於頁面特定的動態腳本使用內嵌的<script>…</script>。

Answer 3

@porneL

有辦法和手段，讓JS加載async'ly（特別是創建腳本標記），但這些可被視爲不安全

@OP

我同意其他人這聽起來像是一個糟糕的主意，從SEO和可訪問性的角度來看，從實際角度來看性能問題（有代碼中的引導方式，但是我認爲這是很多努力的最小收益），以及從應用程序開發角度來看問題的有效性。作爲一個假設的練習，我想像porneL的gzip解決方案是最好的。

基本上，我覺得你很難找到一些少數人會練習的最佳實踐。