开源 Web 应用程序中的优秀 JavaScript 代码示例

Examples of good JavaScript code in open source web apps

提问by Juliusz Gonera

I'm struggling to find a way of writing good JavaScript code that would be efficient, widely accepted by other developers and not very ugly.

我正在努力寻找一种编写好的 JavaScript 代码的方法，该方法将高效、被其他开发人员广泛接受并且不是很丑陋。

Until recently, what I used were just literal objects and bits of jQuery but after reading Douglas Crockford's "JavaScript: The Good Parts" I now fully realize that there's more to JavaScript than AJAX, DOM modifications and simple animation.

直到最近，我使用的只是文字对象和一些 jQuery，但在阅读了 Douglas Crockford 的“JavaScript: The Good Parts”之后，我现在完全意识到 JavaScript 不仅仅是 AJAX、DOM 修改和简单的动画。

The problem is that JavaScript seems not much standarized. The amount of OOP/inheritance patterns available overwhelms me. I'm not used to every framework/library providing its own impementation of inheritance. I also don't want to make a wrong decision regarding such things because this would mean rewriting all the code in case of some problems.

问题是 JavaScript 似乎没有多少标准化。可用的 OOP/继承模式的数量让我不知所措。我不习惯每个框架/库都提供自己的继承实现。我也不想在这些事情上做出错误的决定，因为这意味着在出现某些问题时重写所有代码。

So what I'm looking for are existing open source web applications that use JavaScript heavily, if possible on the client side, to see what patterns are used in real projects. I would like to see the code of web applications, not frameworks or libraries. I don't mind though if those web apps are based on some framework (and if it's Dojo or RequireJS it'll be even better because I'm using them ;)

所以我正在寻找的是现有的大量使用 JavaScript 的开源 Web 应用程序，如果可能的话，在客户端，看看实际项目中使用了哪些模式。我希望看到 Web 应用程序的代码，而不是框架或库。我不介意这些 Web 应用程序是否基于某个框架（如果它是 Dojo 或 RequireJS，它会更好，因为我正在使用它们；）

回答by Ferrerira

What I always recommend to anyone who is interested in this kind of thing is: STICK TO WHAT YOUR TEAM DOES. If they use camelCasefor methods, you use it. If they use snake_casefor variables, you do it. If your team prefers spaces over tabs; use them.

我总是向对这种事情感兴趣的任何人推荐的是：坚持你的团队所做的。如果他们使用camelCasefor 方法，你就使用它。如果他们使用snake_casefor 变量，你就这样做。如果您的团队更喜欢空格而不是制表符；使用它们。

Never go into a stablished team with standardized style changing things because it looks better unless it's causing heavy problems.

永远不要进入一个具有标准化风格改变事物的稳定团队，因为它看起来更好，除非它引起严重问题。

If you're not working on a team and you're interested on using a coding style; then use the style of the libraries you use the most.

如果您不是在团队中工作并且对使用编码风格感兴趣；然后使用您最常用的库的样式。

• If you use jQuerystick to jQuery Coding Style Guidelines
• If you use ClosureLibrary use JavaScript Google Coding Style
• If you use MooToolsLibrary use MooTools Coding Style Guideline

• 如果你使用jQuery坚持jQuery 编码风格指南
• 如果您使用Closure库，请使用JavaScript Google Coding Style
• 如果您使用MooTools图书馆，请使用MooTools 编码风格指南

Organization wise, Closure is the best.. but to me somehow it feels like I'm reading JAVA instead of javascript. Go figure.

在组织方面，Closure 是最好的。但对我来说，感觉就像我在阅读 JAVA 而不是 javascript。去搞清楚。

回答by filipemgs

Yep. There are a few JavaScript gurus that have written alot about how to write JavaScript, about prototype based OOP with JavaScript, even about how indenting and naming variables should be done.

是的。有一些 JavaScript 大师写了很多关于如何编写 JavaScript，关于使用 JavaScript 的基于原型的 OOP，甚至关于应该如何完成缩进和命名变量的文章。

However, if you are looking for a large implementation of JavaScript to study as an example, I would look for HTML5 game implementations. It's practically guaranteed that you will find a large enough, well written example that is not minified.

但是，如果您正在寻找 JavaScript 的大型实现作为示例进行研究，我会寻找 HTML5 游戏实现。实际上可以保证您会找到一个足够大、编写良好且未缩小的示例。

回答by babsher

If you are interested in JavaScript standards I would check out commonJS. They have a lot of good ideas about how JavaScript should be done.

如果您对 JavaScript 标准感兴趣，我会查看commonJS。他们有很多关于 JavaScript 应该如何完成的好主意。

BravoJSis a good module implementation for the browser.

BravoJS是一个很好的浏览器模块实现。

As for examples jQuery's source code was mentioned in the comments. jQuery does a good job but it is I would also check out Narwhal JSfor examples of how things should be done.

至于示例，评论中提到了 jQuery 的源代码。jQuery 做得很好，但我也会查看Narwhal JS以获取有关如何完成工作的示例。

Here is a good free design patterns book that I found helpful Essential JavaScript And jQuery Design Patterns.

这是一本很好的免费设计模式书，我发现它很有帮助Essential JavaScript And jQuery Design Patterns。

You wont find one solution to your problem and that is how JavaScript is designed. I would recommended experimenting. I find that Douglas Crockford has a lot of great ideas but that does not mean you have to follow him to the letter.

你不会找到一种解决问题的方法，这就是 JavaScript 的设计方式。我会建议尝试。我发现道格拉斯·克罗克福德 (Douglas Crockford) 有很多很棒的想法，但这并不意味着您必须完全按照他的意思去做。

回答by standup75

A good project is : http://impactjs.com/A good reading is : http://addyosmani.com/blog/essentialjsdesignpatterns/

一个好的项目是：http: //impactjs.com/一个好的阅读是：http: //addyosmani.com/blog/essentialjsdesignpatterns/

回答by davidjnelson

Great question. I couldn't find one example of a well written object oriented open source application. Tiny MCE was so-so, but I wouldn't consider it well written: http://www.tinymce.com/

很好的问题。我找不到一个写得很好的面向对象的开源应用程序的例子。Tiny MCE 马马虎虎，但我不会认为它写得很好：http: //www.tinymce.com/

However, I have written clean, well factored object oriented javascript at work. It's proprietary so I can't share it, but I can explain what worked for me to learn how to do that:

但是，我已经在工作中编写了干净、分解良好的面向对象的 javascript。它是专有的，所以我不能分享它，但我可以解释什么对我学习如何做到这一点有用：

1) Read the mozilla javascript object oriented programming tutorial. Their explanation of javascript inheritance is exactly what google closure uses. Personally I think what Crockford calls pseudo classical is easiest to read and maintain since 4 of the 5 other programming languages I know use classes (java, c#, python, and php. perl's the oddball here with no classes either).

1) 阅读 mozilla javascript 面向对象编程教程。他们对 javascript 继承的解释正是谷歌闭包所使用的。就我个人而言，我认为 Crockford 所说的伪经典最容易阅读和维护，因为我知道的其他 5 种编程语言中有 4 种使用类（java、c#、python 和 php。perl 是这里的古怪，也没有类）。

https://developer.mozilla.org/en/Introduction_to_Object-Oriented_JavaScript

https://developer.mozilla.org/en/Introduction_to_Object-Oriented_JavaScript

2) Read the book 'Object Oriented Javascript' by Stoyan Stefanov.

2) 阅读 Stoyan Stefanov 所著的“Object Oriented Javascript”一书。

3) Take an existing procedural javascript code base and refactor it to objects. Use the tips in 'Clean Code' by Robert C. Martin as they apply to any programming language.

3) 采用现有的程序化 javascript 代码库并将其重构为对象。使用 Robert C. Martin 的“清洁代码”中的技巧，因为它们适用于任何编程语言。

4) Structure your code so it has many different files similar to how you'd use classes in a language with classes.

4) 构建您的代码，使其具有许多不同的文件，类似于您在带有类的语言中使用类的方式。

5) Implement dependency injection without an IOC container by creating all your objects at a top level and feeding them down into the objects that depend on them.

5) 在没有 IOC 容器的情况下实现依赖注入，方法是在顶层创建所有对象并将它们馈送到依赖它们的对象中。

There's a lot more, but hopefully this is a helpful start.

还有很多，但希望这是一个有用的开始。

Here is what I feel is the correct way to implement inheritance in javascript. this is from the google closure library:

这是我认为在 javascript 中实现继承的正确方法。这是来自谷歌关闭库：

goog.inherits = function(childCtor, parentCtor) {
  /** @constructor */
  function tempCtor() {};
  tempCtor.prototype = parentCtor.prototype;
  childCtor.superClass_ = parentCtor.prototype;
  childCtor.prototype = new tempCtor();
  childCtor.prototype.constructor = childCtor;
};

回答by Bronwen

A kind person in irc suggested this eBook and I found it verry helpful.

irc 的一个好心人推荐了这本电子书，我发现它非常有帮助。

Learning JavaScript Design Patterns

学习 JavaScript 设计模式

A book by Addy Osmani

阿迪·奥斯曼尼 (Addy Osmani) 的一本书

http://addyosmani.com/resources/essentialjsdesignpatterns/book/

http://addyosmani.com/resources/essentialjsdesignpatterns/book/

回答by DOK

Coincidentally, today on SlashDot there is a reviewof the 6th edition of Javascript: The Definitive Guide, which the reviewer there says "retains its crown as the ultimate reference resource for JavaScript programmers." It's 1,100 pages.

巧合的是，今天在 SlashDot 上有一篇关于Javascript: The Definitive Guide的第 6 版的评论，那里的评论者说“保留了它作为 JavaScript 程序员最终参考资源的桂冠”。它有 1,100 页。

Yes, this isn't the sample app you were seeking, but the book does have a lot of examples and advice about best practices.

是的，这不是您正在寻找的示例应用程序，但本书确实有很多关于最佳实践的示例和建议。

回答by bjornd

There are several ways to learn how to write good JS code.

有几种方法可以学习如何编写好的 JS 代码。

You can read books. The best one about organization of JS code and about common patterns including inheritance is JavaScript Patterns by Stoyan Stefanov.

你可以看书。关于 JS 代码的组织和包括继承在内的常见模式的最好的一篇是 Stoyan Stefanov 的 JavaScript Patterns。

Another good way to learn is just look through the excellent code of other developers and using it. The best library I've seen from the point of code organization and using of patterns is Google Closure Library. It is used internally by Google in the RIA like Gmail Google Docs.

另一个学习的好方法是浏览其他开发人员的优秀代码并使用它。从代码组织和模式使用的角度来看，我见过的最好的库是Google Closure Library。它由 Google 在 RIA 内部使用，如 Gmail Google Docs。