我所说的 OO 是指经典的 OO。我一直在定义我的“类”(javascript 没有传统类)之间来回切换，使用模块模式提供隐私和使用对象字面量创建“公共(public)静态”集合。

当我创建“类”时，我没有指导力来确定要使用的组织类型。好吧，除了我的代码在没有设置任何选项的情况下同时通过了 jshint 和 jslint。

我正在处理大约 1500 行代码，因此在代码变得无法管理并且我不得不废弃它之前我需要一个“指导力量”。

我很清楚在 JavaScript 中编写“类”的不同方式。由 Alex MacCaw 编写的 JavaScript Web 应用程序教授的内容以及此处列出的多种方法。

但是，在应用程序方面，我只是不知道该使用什么方法。

最简单的似乎是对象字面量中的方法和变量的集合，如下所示:

var public_statics = {
    public_func: function () {},
    public_var: "hello"
}

最复杂的似乎是 - IIFE。

(function(){
    var private_var;
    function private_func(){
    }
})();

我如何知道使用哪一个或众多中间变体？

举个具体的例子:MVC 中的 Controller 怎么样。

目前(和一些随机选择的)，我实现了这样一个 Controller :

var Co = {};
Co.Controller = function(){
    // 'classes' from Mo are called here
    // 'classes' from Su are called here
}

然后我将其他与控制相关的方法添加到 Co.

如何选择要使用的 OO 风格？

已更新

我的库目前分为 4 个命名空间:

var Mo = {},
    Vi = {},
    Co = {},
    Su = {};

模型、 View 和 Controller 应该是不言自明的，并且 (Su)pport 适用于所有未包含在 MVC 中的“类”，例如 DOM 访问、效果、调试代码等。

我应该使用什么 OO 风格来进一步组织这个库/代码？

Controller “类”示例:

/**
 **  Controller
 */

Co.Controller = function (o_p) {
    var o_p_string_send;
    Su.time();
    o_p = Mo[o_p.model].pre(o_p);
    if (o_p.result !== 'complete') {
        o_p_string_send = JSON.stringify(o_p);
        Su.time();
        //Su.log(o_p_string_send);
        Co.serverCall('pipe=' + o_p_string_send, function (o_p_string_receive) {
            Su.time();
            //Su.log(o_p_string_receive);
            o_p.server = JSON.parse(o_p_string_receive);
            Mo[o_p.model].post(o_p);
            Su.time(true);
            Su.log('Server time: [' + o_p.server.time + ']');
        });
    }
};

最佳答案

IFFE 经常让人难以阅读，就我个人而言，我不知道为什么它们会变得如此主流。我认为代码应该易于阅读和简洁。尝试模拟不属于语言规范的语言行为通常是一个非常愚蠢的想法。

例如，JavaScript 不支持多重继承、多态性或许多其他有趣的范例。所以很多时候，我们看到人们试图在 JS 中创建这些具有多态性或私有(private)成员等的疯狂方式。我认为这是一个错误。

我目前作为一种业余爱好项目在高性能 JS 数据结构库上工作(我试图超越 Google 的闭包和其他一些)。来自 C++ 和 Java 背景，我总是喜欢制作东西类，我喜欢继承等等。让我与您分享一些代码片段。起初，我以为我很聪明，因为我写的是这样的东西:

function __namespace(n, v) {
    return {"meta":{"namespace":n,"version":v}};
}

var FJSL = FJSL == undefined ? new __namespace("Fast JavaScript Library", 0.1) : FJSL;

__using = function(parent, child) {
    clazz = new child();
    clazz.super = new parent();
    if (clazz.super == undefined) return clazz;
    for (a in clazz.super) {
        for (b in clazz) {
            if (a == "constructor" || b == "constructor") continue;
            if (clazz[b] === clazz.super[a]) continue;
            if (a == b && typeof clazz[b] != typeof clazz.super[a]) throw "Typesafety breached on '" + a + "' while trying to resolve polymorphic properties."; 
            if (a == b && typeof clazz[b] == typeof clazz.super[a]) {
                clazz["_"+a] = clazz.super[a];
            } else if (clazz[a] == undefined) {
                clazz[a] = clazz.super[a];
            }
        }
    }
    return clazz;
};

我是这样使用它的(在一个简单队列的例子中):

FJSL.Array = function() { 
    this.data = [];

    this.contains = function(idx, element) {
        for (var i = idx; i < this.data.length; i++) {
            if (this.data[i] === element)
                return i;
        }
        return -1;
    }

    this.size = function() {
        return this.data.length;
    }
}

FJSL.Queue = function() {
    return __using(FJSL.Array, 
    function() {
        this.head = 0;
        this.tail = 0;

        this.enqueue = function(element) {
            this.data[this.tail++] = element;
        };

        this.dequeue = function() {
            if (this.tail == this.head)
                return undefined;
            return this.data[this.head++];
        };

        this.peek = function() {
            return this.data[this.head];
        };

        this.size = function() {
            return this.tail - this.head;
        };

        this.contains = function(element) {
            return this._contains(this.head, element);
        };
    }
)};

您会注意到我是如何伪装继承的(一个队列使用一个数组，哈哈，我很聪明)。然而，这对于a) 阅读 和b) 理解 来说绝对是疯狂的。我忍不住想起了这个模因:

让我向您展示功能等效的代码，而无需尝试进行所有这些花哨的预处理和后处理:

FJSL.Queue = function(opts) {
    this.options = opts;
    this.head = 0;
    this.tail = 0;
    this.data = [];
};

FJSL.Queue.prototype = {
    add : function(element) {
        this.data[this.tail++] = element;
    },

    enqueue : function(element) {
        this.data[this.tail++] = element;
    },

    dequeue : function() {
        if (this.tail == this.head) {
            return undefined;
        }
        return this.data[this.head++];
    },

    peek : function() {
        return this.data[this.head];
    },

    size : function() {
        return this.tail - this.head;
    },

    contains : function(element) {
        // XXX: for some reason a for : loop doesn't get JIT'ed in Chrome
        for (var i = this.head; i < this.data.length; i++) {
            if (this.data[i] === element) {
                return true;
            }
        }
        return false;
    },

    isEmpty : function() {
        if (size) {
            return true;
        }
        return false
    }, 

    clear : function() {
        this.data = [];
    }
};

显然，我必须为可能使用数组的任何其他结构复制原型(prototype)构造函数，但我想要完成的事情要清楚得多，即使是新手 JS 程序员也能分辨出发生了什么。不仅如此，如果人们想要修改代码，他们会确切地知道去哪里和做什么。

我的建议是不要陷入试图让 JS 表现得像 C++ 或 Java 的疯狂。它永远不会。是的，你可以伪造继承和私有(private)/公共(public)/ protected 成员，但 JS 从来没有打算这样做。我认为拥有这种臃肿的代码(试图模拟非标准行为)的后果是对高性能网络应用程序及其同类应用程序造成了很大的负担。

简而言之，我建议使用对象字面量:

var public_statics = {
    public_func: function () {},
    public_var: "hello"
}

易于理解、易于修改、易于扩展。如果您的系统非常脆弱，如果有人不小心更改了某些“私有(private)”变量，可能会崩溃和烧毁，那么您只需要对其进行记录即可。

关于javascript - 如何为 JavaScript 选择 OO 设计模式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12078812/