创建可重用 javascript web-app 的最佳实践答案

【问题标题】：Best practices for creating a reusable javascript web-app创建可重用 javascript web-app 的最佳实践
【发布时间】：2012-04-28 04:49:49
【问题描述】：

我第一次使用 javascript 编写网络应用程序。

我想知道使网络应用程序易于重用的最佳方法是什么，即制作一个包含 js 文件、html 和 css 的“包”，然后像 "load webapp"->launch it. 一样加载它们

目前我有一个index.html，其中包含两个 div：

在主页中完成初始选择后，我会启动应用程序并调用 js 方法。

我想让这个更通用，我想知道使用 jquery load() 是否是一个干净的解决方案（我目前正在使用 jquery）。这将加载 html，但我认为我仍然应该使用 lib/app.xml 手动加载页面中的 css。

任何想法都值得赞赏。

【问题讨论】：

【解决方案1】：

只要确保您没有将任何 CSS 或 JS 嵌入到您的 ASPX 页面中尽可能，始终将它们保存在单独的文件中，这样可以更轻松地重用某些方面而无需四处挖掘对于代码。我什至见过用于封装一系列功能的 JavaScript 类，如果您愿意，这也是一种选择：)。

在您所说的示例中，您最好在准备好文档时调用外部 JS 文件中的函数。

【讨论】：

你是对的，我正在按照你的建议做。但是我怎样才能“打包”应用程序，即我怎样才能加载应用程序，比如说，用一个 js 调用？我认为这是可能的，但现在我必须至少包含应用程序使用的 css
那么你可以用一个 JavaScript 类来做到这一点，这样每当你在你的文档中创建一个新的类实例时，类构造器就会做你需要做的所有事情来“打包”信息。如果你是 JS 类的新手，这里列出了基础知识：javascript.about.com/library/bltut35.htm
我大量使用类......但我不知道加载应用程序所有组件的最佳方式是什么：我有 css、js 文件和 html，我会喜欢建立单页站点，即在主页中完成选择后，应显示应用程序。例如，如何按需加载 CSS？
你甚至可以使用 JQuery 按需加载 CSS，使用 $("", { rel: "stylesheet", type: "text/css", href: "/styles/yourcss .css" }).appendTo("head");
呵呵，总是这样，有时试图想出复杂的解决方案却忽略了更简单的方法，这发生在我们所有人身上:)

【解决方案2】：

将您的 JS 组织为 JQuery 插件也可能是您的一个选择。将所有的 JS 放到一个插件中可能没有意义，但如果你将工作拆分成小组件，这可能是有意义的。我不会提及任何特定的资源，因为资源太多，我不想看起来像垃圾邮件发送者。

希望这会有所帮助！

【讨论】：

【解决方案3】：

jQuery load 不会帮你组织代码，或者动态加载 js，它还有一个完整的功能（注册到 onLoad 事件，或者加载一个 html 页面，或者通过 ajax 加载部分页面）

如果您正在寻找动态加载 js 库，请使用 lab.js（http://labjs.com）或 require.js（http://requirejs.org）。但请记住，也可以只拥有一个大的 js 文件，它会被缓存并立即加载。

就组织 js 而言，这取决于应用程序。有时jQuery插件是要走的路。我已经开发了一个我在项目中使用的解决方案，我只是在这里与您分享：http://thebeast.heroku.com

【讨论】：