基于javascript的Web应用程序的文件结构

Question

我打算编写一个基于javascript的Web应用程序。我想知道在文件结构方面实现它的最佳方法是什么。

有一个主页面（main.html）包含一个菜单和一个主div部分。它的工作方式很简单：当用户单击菜单中的一个链接（例如“Page 1”）时，div部分的内容将使用page1.html文件的内容进行刷新。这是使用javascript（jquery）完成的。如果用户点击“第2页”，则page2.html文件的内容将加载到div部分等。

每个页面都有自己的javascript代码，因为我更喜欢将它保持独立，我在asp.net中实现了一种“代码隐藏”：

page1.html ：
＆LT; script type =“text / javascript”src =“ page1.js”＆gt;＆lt; /脚本＆GT;
＆lt; ... html code ...＆gt;

page2.html ：
＆LT; script type =“text / javascript”src =“ page2.js”＆gt;＆lt; / script＆gt;
＆lt; ... html code ...＆gt;

当用户点击“第1页”时，page1.html文件的内容将加载到main.html的主div部分。当page1.html引用page1.js时，page1.js中的javascript代码也会被加载。

这似乎工作正常，但我想知道这是否是实现这一目标的最佳方式。在某些时候，我正在考虑引用main.html中的所有javascript文件。这也可以正常工作，但这意味着所有的javascript文件都必须加载到内存中，即使它们不会被使用。使用第一种方法，javascript文件仅在实际使用之前加载到内存中。

有什么想法吗？这方面的“最佳实践”是什么？请记住，这是一个Web应用程序（而不是网站）。它将通过互联网提供，但仅限于一些用户（并且它将受密码保护），所以我不关心SEO等。

Answer 1

对你来说可能没有任何意义，但你知道从SEO的角度来看，这是一个糟糕的主意。您的网站将是Flash网站的Javascript版本。就搜索引擎而言，只有一页。

这就是为什么基于框架的网站，这些框架在很多年里非常流行，但几乎都消失了。

Answer 2

加载JavaScript文件是同步的，这会对页面加载时间/感知响应性产生负面影响。

由于这个原因，我认为最好将所有脚本合并到一个文件中，用YUI压缩器压缩它并发送gzip压缩文件。通过这种方式，您将获得最佳压缩和最少的HTTP开销，缓存的JS不会暂停加载其他页面。

对于特定于页面的动态脚本，使用内联<script>…</script>。

Answer 3

@porneL

有方法和手段让JS加载异步（专门创建脚本标签）但这些可能被视为不安全

@OP

我同意其他人的观点，从搜索引擎优化和可访问性的角度来看，这听起来是一个糟糕的主意，从实际角度来看是一个性能问题（在代码中有一些引导方式，但我认为这是为了获得最小的收益而付出很多努力），以及从应用程序开发的角度来看，有效的问题。作为一个假设的练习，我认为porneL的gzip解决方案是最好的。

基本上，我认为你很难找到一些很少会练习的最佳实践。