Javascript：如何理解所有框架和设计理念？
我使用 jQuery （及其一些小插件）已经有一段时间了。我多年来开发的 Javascript 代码可以用“混乱”来形容。它到处使用了大量的全局变量和函数，没有使用组织代码的标准方法，也没有任何设计模式。
我目前正在构建网站的新版本，并且我已经使用 PEAR::MDB2 完成了后端工作 和 Smarty 模板。其余的只是带有一些类的自制 PHP。
现在我将在网站顶部添加 Javascript 层，以提高某些功能的用户友好性。 （同时确保一切正常降级）我想编写比以前更好、更干净、更有组织的 Javascript，所以我做了一些研究。我阅读了 Stefanov 的 面向对象的 Javascript，以便更好地掌握我所知道的一些概念也只是松散地涉及（原型、构造函数等）。现在我陷入了一个困境，我想知道我应该使用哪些 Javascript 框架，以及如何组织它们。
经过研究后，我了解了卡布奇诺和卡布奇诺。 Objective-J 和 Sproutcore 不是我想要的。引用 Cappucino 的关于页面：
卡布奇诺并不是为了构建网站或使现有网站更加“动态”而设计的。我们认为这些目标与应用程序开发的目标相距太远，单个框架无法很好地满足这些目标。像 Prototype 和 jQuery 这样的项目非常适合这些任务
，就是这样。然后我发现了 Coffee Script，它更像是一个一对一的“编译器” “并且不会帮助我实际组织代码。
我还偶然发现了一些提供指导的文章：
我还发现了Backbone.js，鞋带 , JavaScriptMVC, Google 加载器、jQuery 工具、jQuery UI。我真的不知道该怎么办这一切......我知道的事情：
- 我不想投入太多时间来学习太复杂的东西，我想让事情尽可能简单和灵活（即这就是为什么我不在后端使用 Symfony 的原因，例如），但干净且有组织。
- 我想使用 jQuery，问题是，我应该用它做什么？ （这也是兼容的）
现在，我会使用 jQuery 和 jQuery 工具，并使用简单的属性和方法将所有内容“组织”在一个简单的命名空间/对象文字中，而且，由于该网站是本地化的，我只是计划使用简单的 vsprintf （正如我在后端所做的那样），其中键：值对从提供的对象文字加载由后端。 JavaScriptMVC 看起来很有趣，但我担心它会给一个相当小的项目带来太多的复杂性。这就是我需要你的建议的地方！预先非常感谢您。
I have been a user of jQuery (and some of its minor plugins) for a while. The Javascript code I've developed over the years could be described best as... messy. It used a ton of global variables and functions here and there, didn't use standard ways of organizing the code, nor any design patterns whatsoever.
I am currently building the new version of a website, and I have completed doing the backend with PEAR::MDB2 and Smarty templates. The rest is just homebrew PHP with some classes.
Now I am at the point where I'll add the Javascript layer on top of the website to improve the user-friendliness of some features. (while making sure everything degrades gracefully) I want to write better, cleaner, more organized Javascript than I used to, so I did a little research. I read Stefanov's Object-Oriented Javascript to have a better grasp on some concepts I knew only loosely about (prototypes, constructors, etc.) as well. Now I'm stuck at a point where I wonder which Javascript frameworks I should use, and how to organize it all.
After conducting my research, I understood Cappuccino & Objective-J, and Sproutcore were not what I was looking for. To quote Cappucino's about page:
Cappuccino is not designed for building web sites, or making existing sites more "dynamic". We think these goals are too far removed from those of application development to be served well by a single framework. Projects like Prototype and jQuery are excellent at those tasks
So there's that. Then I found out about Coffee Script, which is more of a one-to-one "compiler" and wouldn't help me with the actual organization of my code.
I also stumbled on some articles that give guidelines:
I also found out about Backbone.js, Shoestring, JavaScriptMVC, Google Loader, jQuery Tools, jQuery UI. I don't really know what to do of all this... The things I know:
- I don't want to invest too much time in learning something too complex, I want to keep things simple and flexible as much as possible (that is why I don't use Symfony on the backend, for example), yet clean and organized.
- I want to use jQuery, the question is, what should I use with it? (that is compatible too)
Right now, I'd use jQuery and jQuery Tools and "organize" all that in a simple namespace/object literal with simple properties and methods and also, since the site is localized, I just plan on using the simple vsprintf (as I do on the backend) with key:value pairs loaded from an object literal provided by the backend. JavaScriptMVC seems interesting, but I fear it would bring way too much complexity for a project that is fairly small sized. That is where I need your advice! Thank you very much in advance.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
好吧，我尝试回答：
没有“最好”的方法。您现在知道那里有什么，我认为您可能对自己想要的东西有偏好。在这种情况下，选择一个框架并从内到外地学习它。 （抱歉戳破了你的幻想，但是每个框架都有一个学习曲线，有些很陡，有些很容易，但最终要很好地使用它，你必须对其进行投资。只要这样做，你就不会后悔）。
您当然偏爱干净的代码，因此您可能会考虑一些注意事项。您还说您偏爱 jQuery，这很好，但有一些限制（正如 eskimoblood 提供的链接中也指出的那样）。
有一些不错的讲座/和教程，其中提供了有关如何在 jQuery 中构建代码的建议：
一些样式指南：
检查代码的工具
标准作品 (javascript)
可能还有更多..也许更多的人可以贡献，但我也认为你已经快结束了在动手之前你可以学到什么。其中许多指南都是以非常通用的方式编写的，但有趣的是，在许多特定情况下都会调用 javascript。仅发布一些您认为“混乱”的代码可能会很有用，我们可以帮助您找出更好的方法。祝你好运！
Ok, my attempt at an answer:
There is no 'best' to way to do it. You now know what's there and I think you might have a preference for yourself for what you want. In that case, pick a framework and learn it inside-out. (sorry to burst your bubble, but each framework has a learning curve, some steep, some very easy, but in the end to use it well you have to invest in it. Just do it, you won't be sorry).
You of course have an preference for clean code, so you might take some considerations into account. You also say you have a preference for jQuery, which is fine, but there are some limitations (as also pointed out in the link provided by eskimoblood).
There are some nice lectures / and tutorials with advice on how to structure your code in jQuery:
Some style guides:
Tools for checking your code
Standard works (javascript)
There might be more.. perhaps more people can contribute, but I also think that you've almost reached the end of what you can learn before getting your hands dirty. Many of these guides are written in a very generic way, but the interesting thing is that javascript is called upon in many specific situations. It might be useful to just post some of the code that you regard as "messy" and we can help you figure out how to do it better. Good luck!
您应该观看视频并阅读本文中的链接，然后您应该再次问自己如果 jquery 是正确的工具。也许您会使用 dojo，这对于较大的项目来说要好得多，或者您看一下主干以及可以在哪里使用 jquery。毕竟，它们都比 sproutcore、cappuciono 甚至 GWT 更“javascriptish”。当你来自 jquery 时也更容易理解。
You should watch the video and read the links in this article and then you should ask yourself again if jquery is the right tool. Maybe you will use dojo, that is much better for larger projects or you take a look at backbone and where you can stay with jquery. After all both of them are more "javascriptish" then something like sproutcore, cappuciono or even GWT. And also much easier to understand when you come from jquery.
值得考虑的一个框架肯定是 Facebook 的 ReactJS。这个框架在很多方面都非常巧妙。
首先你必须知道它是一个视图框架。它可以在服务器端用于页面的预渲染，但它在客户端才真正发挥作用。由于它是一个视图框架，因此它可以与主干框架或任何其他“后端-前端”框架一起使用。
React 的要点之一是它的快速性。它将虚拟 DOM 保留在内存中并虚拟化所有网页事件。因此，虚拟事件用于保持事件与浏览器无关。
虚拟 DOM 使得对动态网站进行编程就像对旧的静态网站进行编程一样。您只需拍摄整个 HTML 即可渲染到视图引擎（就像您“重新渲染”整个页面一样），它将管理 DOM 操作。它对新的虚拟 DOM 和当前的虚拟 DOM 进行比较，并仅插入需要插入的节点。通过这种方式，您可以减少 DOM 操作的数量，从而大大提高渲染速度。
本教程是一个很好的起点，它展示了如何使用“Flux”（ Facebook 为其网站设计的 Web 流程），以实现 Todo 应用程序！
One framework that is to consider is definitely ReactJS from Facebook. This framework is pretty slick in many ways.
First thing you have to know is that it is a view framework. It can be used server-side to do the pre-rendering of pages, but it really shines on client side. Since it's a view framework, it can be used with backbone or any other "back-front"-end framework.
One of the main point of React is its rapidity. It keeps a virtual DOM in memory and virtualize all the webpages events. So the virtuals event are used to keep events browser agnostics.
The virtual DOM kind of make programming a dynamic site as if you were programming an old static website. You can just shoot the whole HTML to render to the view engine (as if you were "re-rendering" the whole page) and it will manage the DOM operations. It does a diff between the new virtual DOM and the current virtual DOM and only inserts nodes that needs to be inserted. This way you reduce the number of DOM ops and thus increase your render speed by a lot.
A good place to start is this tutorial which shows how to use "Flux" (the web flow designed by Facebook for its site) in order to realize a Todo application!