基于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解决方案是最好的。

基本上，我觉得你很难找到一些少数人会练习的最佳实践。