Javascript:如何理解所有的框架和设计理念？

Question

我曾经是jQuery (以及它的一些小插件)的用户。这些年来我开发的Javascript代码最好描述为..。凌乱。它到处使用大量的全局变量和函数，没有使用标准的代码组织方式，也没有使用任何设计模式。

我目前正在构建一个新版本的网站，我已经完成了后端的PEAR::MDB2 2和马蒂模板。剩下的只是带有一些类的自制PHP。

现在，我将在网站顶部添加Javascript层，以提高某些功能的用户友好性。(在确保每件事情都优雅地退化的同时)，我想写得比以前更好、更干净、更有条理，所以我做了一些研究。我阅读了Stefanov的面向对象Javascript，以便更好地掌握一些我只知道的概念(原型、构造函数等)。也是。现在，我陷入了这样的境地:我想知道我应该使用哪个Javascript框架，以及如何组织它。

在进行了我的研究之后，我明白了卡布奇诺&目标-J和空间核心并不是我想要的。引用Cappucino的“关于页面”的话：

卡布奇诺不是为建设网站而设计的，也不是为了使现有的网站更加“动态”。我们认为，这些目标与应用程序开发的目标相去甚远，单个框架无法很好地实现这些目标。像Prototype和jQuery这样的项目在这些任务上非常出色

就是这样。然后我发现了咖啡剧本，它更像是一对一的“编译器”，对我的代码的实际组织没有帮助。

我还偶然发现了一些给出指导方针的文章：

• 使用继承模式组织大型jQuery应用程序
• 一种JavaScript模块模式

我还发现了Backbone.js，鞋带，JavaScriptMVC，谷歌装载机，jQuery工具，jQuery UI。我真的不知道该怎么做.我知道的是：

• 我不想把太多的时间花在学习一些太复杂的东西上，我希望尽可能地保持简单和灵活(例如，这就是为什么我不在后端使用塞福尼 )，但是整洁和有条理。
• 我想使用jQuery，问题是，我应该对它使用什么？(这也是兼容的)

现在，我将使用jQuery和jQuery工具，并用简单的属性和方法在一个简单的命名空间/对象文本中“组织”所有这些，而且，由于站点是本地化的，所以我计划使用由后端提供的对象文本加载的键:值对来使用简单的vsprintf (就像在后端那样)。JavaScriptMVC看起来很有趣，但我担心它会给一个相当小的项目带来太多的复杂性。那就是我需要你建议的地方！先谢谢你。

Answer 1

好吧，我的回答是：

没有最好的方法去做这件事。你现在知道那里是什么了，我想你可能对你自己有一个偏好，你想要什么。在这种情况下，选择一个框架并从中学习它。(很抱歉打破了你的泡沫，但每个框架都有一个学习曲线，有些陡峭，有些很容易，但最终要好好利用它，你必须投资于它。就这么做吧，你不会后悔的。

当然，您倾向于使用干净的代码，因此您可能会考虑一些考虑因素。您还可以说您喜欢jQuery，这很好，但是也有一些限制(正如eskimoblood提供的链接中所指出的那样)。

有一些很好的讲座/教程和关于如何用jQuery:构造您的代码的建议

• 如何管理大型jquery应用程序
• 大型jQuery应用程序
• 必需的Javascript和jQuery模式(免费电子书)

一些样式指南：

• Jquery核心UI样式指南
• Google闭包Javascript样式指南

用于检查代码的工具

• JSLint
• JSHint (更宽容/实用的叉子)
• 关闭Linter (还没有尝试过，但打算)

标准工程(javascript)

• 道格拉斯·克罗克福德的一切
• 克斯默德

可能还有更多..。也许更多的人可以做出贡献，但我也认为，在弄脏你的手之前，你几乎已经到了你能学到的东西的尽头。这些指南中有许多是以非常通用的方式编写的，但有趣的是，javascript在许多特定情况下被调用。仅仅发布一些您认为“杂乱无章”的代码可能是有用的，我们可以帮助您找到更好的方法。祝好运!

Answer 2

您应该使用观看视频并阅读本文中的链接，然后再次问自己，jquery是否是正确的工具。也许您将使用dojo，这对于较大的项目来说要好得多，或者您可以查看主干以及您可以使用jquery的位置。毕竟，它们都更像"javascriptish“，而不是像sproutcore、cappuciono甚至GWT这样的东西。当您来自jquery时，也更容易理解。

Answer 3

要考虑的一个框架是来自Facebook的ReactJS。这个框架在许多方面都相当巧妙。

首先要知道的是，它是一个视图框架。它可以使用服务器端来进行页面的预呈现，但是它确实在客户端发光。因为它是一个视图框架，所以它可以与主干或任何其他“后端”-end框架一起使用。

反应的重点之一是反应的快速性。它在内存中保存一个虚拟DOM，并虚拟化所有的网页事件。因此，虚拟事件被用来保持事件浏览器不可知论。

虚拟DOM使编程成为一个动态站点，就像您正在编写一个旧的静态网站一样。您可以直接将整个HTML呈现给视图引擎(就像您在“重新呈现”整个页面一样)，它将管理DOM操作。它区分新的虚拟DOM和当前的虚拟DOM，只插入需要插入的节点。这样可以减少DOM操作的数量，从而大大提高渲染速度。

一个很好的起点是本教程，它展示了如何使用"Flux“(由Facebook为其站点设计的web流)来实现Todo应用程序！