面向对象的Javascript最佳实践?

时间:2009-05-25 15:52:52

标签: javascript oop

我发现自己在Javascript编写了一个大项目。我记得最后一次冒险很冒险,因为hacky JS很快变得难以理解,我希望这段代码干净。

好吧,我正在使用对象构建一个lib,但有几种方法可以在JS中定义东西,这意味着在范围,内存管理,名称空间等方面会产生重要影响.EG:

  • 使用var或不使用
  • 在文件中定义内容,或以(function(){...})(),jquery样式定义;
  • 使用this,不是;
  • 使用function myname()myname = function();
  • 在对象主体中定义方法或使用“prototype”;

那么在JS中用OO编码时,最佳实践是什么?

学术解释在这里真的很期待。只要他们处理质量和稳健性,热烈欢迎链接到书籍。

编辑:

得到了一些阅读材料,但我对上述问题的答案和任何最佳实践仍然非常感兴趣。

6 个答案:

答案 0 :(得分:286)

使用`var`或不使用

您应该使用var语句引入任何变量,否则它将进入全局范围。

值得一提的是,在严格模式下("use strict";undeclared variable assignments throws ReferenceError

目前JavaScript没有块范围。 Crockford学校教你put var statements at the beginning of the function body,而Dojo的风格指南则读all variables should be declared in the smallest scope possible。 (JavaScript 1.7中引入的let statement and definition不是ECMAScript标准的一部分。)

将常规使用的对象属性绑定到局部变量是一种好习惯,因为它比查找整个范围链更快。 (见Optimizing JavaScript for extreme performance and low memory consumption。)

定义文件或`(function(){...})()`

中的内容

如果您不需要在代码之外访问对象,则可以将整个代码包装在函数表达式中 - 它称为模块模式。它具有性能优势,并且还允许您的代码在高级别上缩小和模糊。您还可以确保它不会污染全局命名空间。 Wrapping Functions in JavaScript还允许您添加面向方面的行为。 Ben Cherry有一个in-depth article on module pattern

使用`this`或不使用

如果在JavaScript中使用伪经典继承,则很难避免使用this。这是你使用的继承模式的品味问题。对于其他情况,请查看Peter Michaux关于JavaScript Widgets Without "this"的文章。

使用`function myname()`或`myname = function();`

function myname()是函数声明,myname = function();是分配给变量myname的函数表达式。后一种形式表明函数是第一类对象,你可以对它们做任何事情,就像变量一样。它们之间的唯一区别是所有函数声明都被提升到范围的顶部,这在某些情况下可能很重要。否则他们是平等的。 function foo()是一种速记形式。有关提升的更多详细信息,请参阅JavaScript Scoping and Hoisting文章。

在对象主体中定义方法或使用“prototype”

这取决于你。 JavaScript有四种对象创建模式:伪古典,原型,功能和部分(Crockford, 2008)。每个都有其优点和缺点,请参阅Crockford in his video talks或将他的书 The Good Parts 改为Anon already suggested

框架

我建议您选择一些JavaScript框架,研究它们的约定和风格,并找到最适合您的实践和模式。例如,Dojo Toolkit提供了一个强大的框架来编写面向对象的JavaScript代码,甚至支持多重继承。

模式

最后,有一个专门讨论explore common JavaScript patterns and anti-patterns的博客。另请查看Stack Overflow中的问题 Are there any coding standards for JavaScript?

答案 1 :(得分:13)

自从我提出这个问题以来,我将写下我阅读或提交的一些内容。因此阅读它的人不会感到沮丧,因为大多数答案都是RTMF的伪装(即使我必须承认,建议的书很好)。

Var用法

任何变量都应该在JS的较高范围内声明。因此,当您需要一个新变量时,请声明它以避免在不注意它的情况下操纵全局变量等意外情况。 因此,请始终使用var关键字。

在对象make中,将变量设为var。如果您只想声明一个公共变量,请使用this.my_var = my_value来执行此操作。

声明方法

在JS中,它们有很多方法来声明方法。对于OO程序员,最自然而有效的方法是使用以下语法:

在对象体内

this.methodName = function(param) {

/* bla */

};

有一个缺点:由于有趣的JS范围,内部函数将无法访问“this”。 Douglas Crockford建议使用名为“that”的传统局部变量来绕过此限制。所以它变成

function MyObject() {

    var that = this;

    this.myMethod = function() {

        jQuery.doSomethingCrazy(that.callbackMethod);

    };

};

不要依赖自动行结束

如果忘了,JS会尝试在该行的末尾自动添加;。不要依赖这种行为,因为你会得到一些乱七八糟的错误。

答案 2 :(得分:8)

首先应该阅读有关prototype-based programming的内容,以便了解您正在处理的是什么样的野兽,然后查看JavaScript style guide at MDCJavaScript page at MDC。我也发现最好用工具强制代码质量,即。 JavaScript Lint或其他变体。

使用OO的最佳做法听起来更像是想要找到模式,而不是专注于代码质量,因此请查看Google search: javascript patternsjQuery patterns

答案 3 :(得分:5)

您可能想查看John Resig(jQuery)的Secrets of the JavaScript Ninja。 “本书旨在培养一名中级JavaScript开发人员,并为他提供从现场开始创建跨浏览器JavaScript库所需的知识。”

该草案可通过出版商获取: http://www.manning.com/resig/

Douglas Crockford在他的主页上也有一些不错的JavaScript文章: http://www.crockford.com/

答案 4 :(得分:5)

我经常觉得这里唯一一个将MooTools用于我的javascript的人。

它代表 M y O bject O 面向工具,mootools。

我真的很喜欢他们在javascript中使用OOP。您也可以将它们的类实现与jquery一起使用,因此您不必抛弃jquery(尽管mootools也是如此)。

无论如何,给第一个链接一个很好的阅读,看看你的想法,第二个链接是mootools文档。

MooTools & Inheritance

MooTools Classes

答案 5 :(得分:0)