如何构建一个基于 jquery 的大型网站？ [关闭]答案

【问题标题】：How do I build a large jquery-based website? [closed]如何构建一个基于 jquery 的大型网站？ [关闭]
【发布时间】：2012-01-09 19:56:39
【问题描述】：

我想开始一个新项目，一个大型 jquery 应用程序/网站。我希望该网站的功能很像 twitter 或 github，非常动态、非常流畅/流畅等...

我的问题是我不知道从哪里开始。我阅读了无数博客文章，研究了许多 JS 框架/模板和 MVC 类型系统。

当我写 JS 代码时，我应该把所有东西都放在一个文件中吗？还是应该将我编写的每个插件拆分成单独的文件，然后使用像 Respond.JS 这样的 JS 加载器？

我认为我需要一个模板系统才能让主题标签导航工作，所以我正在查看 Backbone.JS 或 Mustache/Handlebars.JS

有人对此有一个起点吗？也许是我可以遵循的样板解决方案/开发模式？

谢谢！

【问题讨论】：

很抱歉，但我怀疑任何使用都无法告诉您在不了解项目本身的情况下应该使用哪些 JavaScript 框架。
好吧...也许我们可以解决一些问题。我希望一般来说应用程序本身并不重要。很高兴知道更多，但我想在这里泛泛而谈。我认为基于功能/目的来处理一个应用程序与另一个应用程序没有多大意义。给定我提供的约束（JS 框架）的每个应用程序至少应该有相似的起点。为了方便交谈，想象一下我要构建一个 GMail 克隆.... :)

【解决方案1】：

这在很大程度上取决于您对“大型”的定义以及您要部署的组件类型。我非常怀疑我们是否能够充分了解您的环境以告诉您该怎么做，但我可以给您一些一般性建议：

如果您需要页面上的组件（例如，数据的交互式可视化），请尝试找到现成的插件。
如果现成的插件不可用，则以插件的形式编写组件。这与 jQuery 的设计非常吻合，并确保了高度的可重用性。
尝试将 Javascript 与 HTML 分开。通常，您的 HTML 是一个充满 id 或类的页面，可用作 Javascript 链接的“挂载点”。 Javascript 文件通常如下所示：

$(document).ready(function() {

//开始进行AJAX调用，设置页面

// 元素，以及您需要的任何其他内容。

});
鉴于 Javascript 与页面绑定，请尽量减少页面数量，同时为每个页面提供自己的 Javascript 文件。如果页面特别复杂或使用可重用的包含文件，请将 Javascript 分成较小的文件，仅控制页面的一部分。可以根据需要调用任意数量的 $(document).ready()。

祝你好运！

【讨论】：

感谢您的帮助，您的建议很有意义。我试图避免编写零散的 JS 代码……这意味着它具有可重复的模式（一般来说）。我不想养成只调用方法并将它们分配给选择器的习惯。我想知道在初始化函数中构建所有 HTML 挂载点是否有意义。然后，一旦所有元素都存在，开始加载应用程序的各个部分：菜单、数据表、详细信息视图等......你对“脚手架”JS 项目有什么建议吗？
这会涉及到您的具体情况的一些困难。如果您正在尝试创建一个类似桌面的应用程序，那么您可能希望将您的 JS 代码分成每个主要组件的文件。如果您正在查看在页面之间重复的组件，请将可重复的内容放在其自己的 JS 文件中，而不是页面的 JS 文件中。如果您的架构面向插入式组件，请将您的 JS 与插入式组件对齐。简而言之，做对你来说最合乎逻辑的事情。如果你所做的没有意义，请重构。

【解决方案2】：

一旦你的 JS 完成，在生产中将其缩小：

此外，如果您使用多个 jquery 插件（例如 jquery UI），请将它们全部放在同一个文件中以提高性能。

【讨论】：