关于面向对象的JavaScript最佳实践？


Object Oriented Javascript best practices?

我发现自己正在用JavaScript编写一个大项目。我记得上一次是一次非常冒险的经历，因为黑客JS很快就会变得不可读，我希望这段代码是干净的。

好吧，我正在使用对象构建一个lib，但是有几种方法可以在JS中定义事物，这意味着范围、内存管理、名称空间等方面的重要后果：

  • 是否使用var；
  • 在文件中定义事物，或者在(function(){...})()jquery样式中定义事物；
  • 是否使用this；
  • 使用function myname()或myname = function()；
  • 在对象的主体中定义方法或使用"原型"；
  • 等。

那么，在JS中用OO编码时，真正的最佳实践是什么？

这里真的需要学术解释。链接到图书热烈欢迎，只要他们处理质量和稳健性。

编辑：

有一些阅读资料，但我仍然对以上问题的答案和任何最佳实践很感兴趣。

相关讨论

是否使用"var"

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

值得一提的是，在严格模式("use strict";)中，未声明的变量赋值会抛出ReferenceError。

目前，javascript没有块范围。Crockford学派教您将var语句放在函数体的开头，而Dojo的样式指南则说明所有变量都应尽可能在最小的范围内声明。(javascript1.7中引入的let语句和定义不属于ecmascript标准的一部分。)

将经常使用的对象属性绑定到局部变量是一个很好的实践，因为它比查找整个范围链更快。(请参阅优化javascript以获得最佳性能和较低的内存消耗。)

在文件或`(function()…)()中定义内容`

如果您不需要访问代码之外的对象，那么可以将整个代码包装在一个函数表达式中——它被称为模块模式。它具有性能优势，而且还允许您的代码在高级别上被缩小和隐藏。您还可以确保它不会污染全局命名空间。在JavaScript中包装函数还允许您添加面向方面的行为。BenCherry有一篇关于模块模式的深入文章。

是否使用"this"

如果在javascript中使用伪经典继承，那么很难避免使用this。你使用哪种继承模式是一种品味问题。对于其他情况，请查看PeterMichaux关于javascript小部件的文章，不要使用"this"。

使用"function myname()"或"myname=function()；"`

function myname()是函数声明，myname = function();是赋给变量myname的函数表达式。后一种形式表示函数是第一类对象，您可以对它们做任何事情，比如对变量。它们之间唯一的区别是，所有函数声明都被提升到范围的顶部，这在某些情况下可能很重要。否则它们是相等的。function foo()是一种速记形式。有关提升的更多详细信息，请参阅javascript范围界定和提升文章。

在对象体中定义方法或使用"原型"

这取决于你。JavaScript有四种对象创建模式：伪经典、原型、功能和部件(Crockford，2008)。每个人都有自己的利弊，可以在视频中看到克罗克福德的演讲，也可以像安侬已经建议的那样，从书中得到好的部分。

框架

我建议您学习一些JavaScript框架，研究它们的约定和风格，并找到最适合您的实践和模式。例如，Dojo工具包提供了一个健壮的框架来编写面向对象的JavaScript代码，甚至支持多个继承。

模式

最后，还有一个博客专门探讨常见的JavaScript模式和反模式。另外，检查一下这个问题，有没有JavaScript的编码标准？堆栈溢出。

相关讨论

自从我问这个问题以来，我要写一些我读过或申请过的东西。因此，阅读它的人不会感到沮丧，因为大多数答案都是RTMF伪装的(即使我必须承认，推荐的书是好的)。

var使用

在JS中，任何变量都应该已经在更高的作用域中声明。所以，当您想要一个新的变量时，声明它以避免像在不注意的情况下操纵一个全局变量这样的意外。因此，始终使用var关键字。

在对象生成中，变量var为private。如果只想声明一个公共变量，可以使用this.my_var = my_value来实现。

声明方法

在JS中，它们是许多声明方法的方法。对于一个OO程序员，最自然而有效的方法是使用以下语法：

物体内部

1
2
3
4
5
this.methodName = function(param) {

/* bla */

};

有一个缺点：内部函数不能访问"this"，因为JS范围很有趣。道格拉斯·克罗克福德建议使用名为"that"的传统局部变量来绕过这一限制。所以它变成了

1
2
3
4
5
6
7
8
9
10
11
function MyObject() {

    var that = this;

    this.myMethod = function() {

        jQuery.doSomethingCrazy(that.callbackMethod);

    };

};

不要依赖自动行尾

JS试图在行尾自动添加;，如果您忘记了它。不要依赖于这种行为，因为您会得到一些错误，这些错误会导致调试混乱。

首先应该阅读基于原型的编程，这样你就知道你要处理的是什么样的野兽，然后看看MDC的javascript风格指南和MDC的javascript页面。我还发现最好用一个工具来强制代码质量，例如javascript lint或其他变体。

使用OO的最佳实践听起来更像是寻找模式，而不是专注于代码质量，所以请看谷歌搜索：javascript模式和jquery模式。

  • 加快你的javascript速度

我经常觉得我是这里唯一一个为我的javascript使用moools的人。

它代表我的面向对象工具，mootools。

我真的很喜欢他们在javascript中的OOP。您也可以将它们的类实现与jquery一起使用，这样就不必放弃jquery(尽管moooltools也能做到这一点)。

不管怎样，给第一个链接一个好的阅读，看看你的想法，第二个链接是到mootools文档。

moootools和继承

moootools类

相关讨论

你可能想看看约翰·雷西格(jquery)的《javascript忍者的秘密》。这本书的目的是带领一个中级的javascript开发人员，让他了解创建一个跨浏览器的javascript库所需的知识。

草稿可通过出版商获得：http://www.manning.com/resig/

Douglas Crockford的主页上还有一些不错的javascript文章：网址：http://www.crockford.com/

这是一本涵盖大部分基础的书：

面向对象的JavaScript，用于高质量应用程序和库

相关讨论