用 Javascript 进行 OOP 编程 - 正确

Question

我对改进我的 javascript 代码以使其成为适当的 OOP 很感兴趣......目前我倾向于做这样的事情：

jQuery(document).ready(function () {
    Page.form = (function () {
        return {
            //generate a new PDF
            generatePDF: function () {

            },
            //Update the list of PDFs available for download
            updatePDFDownloads: function () {

            },
            /*
             * Field specific functionality
             */
            field: (function () {
                return {
                    //show the edit prompt
                    edit: function (id, name) {

                    },
                    //refresh the value of a field with the latest from the database
                    refresh: function (id) {

                    }
                };
            }())
        };
    }());
});

我想最后它只是主要组织的函数......有什么好的资源可以让我学习如何对 javascript 进行编程以面向对象的方式，或者您对改进我当前的编程风格有何建议？

看来我应该做一种模型原型，并让我的 form 对象从该原型继承。

（由于与prototypeJS冲突，我使用jQuery而不是$）

Answer 1

您的问题非常广泛，因此我认为这里不可能给出完整的答案。但这里有几点。

关于您所显示的代码。你正在跳几个多余的圈。

1. 除非您以某种方式访问​​ DOM，否则无需将代码包装在 jQuery(document).ready() 中。
2. 无需从自调用匿名函数返回对象，除非你关闭了一些私有函数或数据

你创建的对象可以像这样更简单地创建（一件好事）

var Page = {
    form: {
        //generate a new PDF
        generatePDF: function () {

        },
        //Update the list of PDFs available for download
        updatePDFDownloads: function () {

        },
        /*
        * Field specific functionality
        */
        field: {
            //show the edit prompt
            edit: function (id, name) {

            },
            //refresh the value of a field with the latest from the database
            refresh: function (id) {

            }
        }
    }
};

它更容易阅读并且不那么混乱，只做那些能给你带来东西的事情。请参阅 cargo cult 编程

这是一个使用自调用匿名函数来创建私有成员的示例

var Obj = (function() {
    privateFunction( param ) {
        // do something with param
    }

    var privateVar = 10;

    return {
        // publicMethod has access to privateFunction and privateVar
        publicMethod: function() {
            return privateFunction( privateVar );
        }
    }

})();

您拥有的结构正如您所说，使用对象文字非常适合对一组函数（方法）和属性进行分组。这是一种命名空间。它也是创建单例的一种方法。您可能还想创建同一类的许多对象。
JavaScript 没有像传统面向对象语言那样的类（我会讲到），但在最简单的层面上，创建一个“模板”来创建特定类型的对象是非常容易的。这些“模板”是称为构造函数的普通函数。

// a constructor
// it creates a drink with a particular thirst quenchingness
function Drink( quenchingness ) {
    this.quenchingness = quenchingness;
}

// all drinks created with the Drink constructor get the chill method
// which works on their own particular quenchingness
Drink.prototype.chill = function() {
   this.quenchingness *= 2; //twice as thirst quenching
}

var orange = new Drink( 10 );
var beer   = new Drink( 125 );

var i_will_have = ( orange.quenchingness > beer.quenchingness ) 
    ? orange 
    : beer; //beer

var beer2  = new Drink( 125 );
beer2.chill();

var i_will_have = ( beer2.quenchingness > beer.quenchingness )
    ? beer2 
    : beer; //beer2 - it's been chilled!

关于构造函数有很多东西需要了解。你必须四处寻找。 SO 上有很多例子。
继承是面向对象的基础，但在 js 中并不那么直观，因为它是原型的。我不会在这里讨论这个，因为你很可能不会直接使用 js 的原生原型继承范例。
这是因为有些库可以非常有效地模仿经典继承，原型（继承） 或 mootools（类）。 有 其他。

许多人说继承在面向对象中被过度使用，并且您应该支持组合，这让我想到了我的观点当我开始这个漫无目的的答案时，最初就打算推荐。

JavaScript 中的设计模式与任何 OO 语言中的设计模式一样有用，您应该熟悉它们

我建议您阅读 专业 JavaScript 设计模式。
在那里，就是这样

Answer 2

面向对象的 JavaScript 和一般 JavaScript 的一些很好的资源...

在线文章

• 如何在 JavaScript 中“正确”创建自定义对象？
• https://developer.mozilla.org/en/Introduction_to_Object-Oriented_JavaScript
• http: //mckoss.com/jscript/object.htm
• http://ejohn.org/blog/simple-javascript-inheritance/
• JavaScript：如何获取私有、特权、公共和静态成员（属性和方法）

书籍

• JavaScript：好的部分 - Douglas克罗克福德
• 面向对象的 JavaScript - Stoyan Stefanov

我希望这会有所帮助。
赫里斯托

Answer 3

没有一种正确的方法......有些人使用框架来定义他们的对象，我喜欢直接扩展原型。不管怎样，我想说 Oran Looney 有一些关于 JS 中的 OO 机制的好帖子：

http:// /oranlooney.com/classes-and-objects-javascript/

也值得看看他的其他文章：

http://oranlooney.com/deep-copy-javascript/
http://oranlooney.com/function-javascript/

Answer 4

我建议阅读的前 3 本书是

1. JavaScript 和面向对象编程 (OOP)

2. JavaScript 中的经典继承

3. 原型继承JavaScript 中的原型继承

祝您阅读愉快！

Answer 5

我们使用的代码遵循这个基本结构：

//Create and define Global NameSpace Object
( function(GlobalObject, $, undefined) 
{
    GlobalObject.Method = function()
    {
        ///<summary></summary>
    }

}) (GlobalObject = GlobalObject || {}, jQuery);

//New object for specific functionality
( function(Functionality.Events, $, undefined)
{
    //Member Variables 
    var Variable; // (Used for) , (type)

    // Initialize
    GlobalObject.Functionality.Events.Init = function()
    {
        ///<summary></summary>
    }

    // public method
    this.PublicMethod = function(oParam)
    {
        ///<summary></summary>
        ///<param type=""></param>
    }

    // protected method (typically define in global object, but can be made available from here)
    GlobalObject.Functionality.ProtectedMethod = function()
    {
        ///<summary></summary>
    }

    // internal method (typically define in global object, but can be made available from here)
    GlobalObject.InternalMethod = function()
    {
        ///<summary></summary>
    }

    // private method
    var privateMethod = function()
    {
        ///<summary></summary>
    }
}) (GlobalObject.Funcitonality.Events = GlobalObject.Funcitonality.Events || {}, jQuery )

这样做的优点是它自动初始化 Global 对象，允许您维护代码的完整性，并根据您的定义将每个功能组织到特定的分组中。这个结构很扎实，呈现了您期望从 OOP 中获得的所有基本语法内容，而无需关键字。甚至可以使用 javascript 设置智能感知，然后定义每个部分并引用它们使得编写 javascript 更干净且更易于管理。希望这个布局有帮助！

Answer 6

我认为你使用什么语言并不重要，好的 OOP 就是好的 OOP。我喜欢通过使用 MVC 架构来尽可能地分散我的关注点。由于 JavaScript 是基于事件的，所以我也主要使用观察者设计模式。

这里是一个有关使用 jQuery 的 MVC 的教程。