如何使用原型继承编写一个整洁,灵活的复杂javascript应用程序

Question

有一段时间我一直在开发javascript应用程序,通常是较小的脚本来完成简单的任务,但也是一个相当大而复杂的应用程序,使用Dean Edwards的base2库来创建带有继承的伪经典OO类,...在javascript中.

base2库对我很有帮助,主要是因为它使我能够遵循我非常熟悉的经典OO范例.我还知道其他几个可用于构建更健壮和成熟的javascript应用程序的框架(例如backbone.js).但我总觉得这种类型的库是一种"欺骗"的方式,构建一种使用该语言实际上不适合的原则来编写代码的方法.

我一直在阅读不同的方法来定义对象/函数,实例化它们并使用原型继承实现多态性.这真的是语言如何在基础层面上运作,我觉得我应该利用它而不是决定它是烦人的或奇怪的,并试图找到一种方式按照我习惯的方式做事(经典的OO方式).

因此,查看不使用此类库的应用程序,编写应用程序的方法似乎有很多,而对于传统的通用语言,如Java,C++,......构建应用程序的正确方法似乎更明确定义(区分好代码和坏代码要容易得多).如果有人明天会问我:"开始为我开发projectX",我不知道如何开始定义和构建我的对象的方式我可以肯定不会再回来咬我,因为重组太晚了整个东西.

使用原型继承,专业复杂的js app骨架会是什么样的,所以不使用任何类型的库来模仿经典OO,假设一个简单的MVC类型的应用程序,但可以轻松扩展到更复杂的比例.如何定义我的对象？如何将对象/"类"组合在一起(命名空间)？换句话说:如何做到这一点而不会因为一团糟而无法理解？

Answer 1

我在创建面向对象的Javascript'类'时遵循两种模式(认为JS中没有真正的类,我们可以模仿它们).首先是更熟悉的OO方式和简单易懂.

// in JS, functions can be used as OO classes
var Person = function(name) {
    var self = this;

    //private methods and attributes
    this.getNickname = function(){
        return "Yaka";
    };

    //public methods and attributes (return obj)
    return {
        getName : function() {
            return name + ' ' + self.getNickname();
        }
    }
};

//static functions attached to 'Person' class 
Person.hasBrain = function() {
    return true;
}

此模型允许您为类创建私有,公共和静态部分,从而实现良好的封装.但这不是最佳方式,因为每个对象都会携带它自己的所有实例方法的副本.您可以避免使用基于原型的编程实例方法的多个副本:

// in JS, functions can be used as OO classes
var Person = function(name) {
    this.name = null;
};

// use of prototypes improves performance and memory use
Person.prototype.getName = function() {
    return this.name;
}

Person.prototype.setName = function(name) {
    this.name = name;
}   

对于传统的OO程序员来说,这看起来并不是很熟悉,但却是使用javascript资源的最佳方式.它也适用于继承.

var Manager = function() {}
Manager.prototype = new Person();

在实践中,我使用原型方法来处理在应用程序中大量使用的基类/框架类.对于偶尔使用的类或少数实例,我使用前面讨论的方法.

我还建议您使用AMD库,例如requirejs,并为每个物理文件定义一个类.然后使用构建优化器将文件优化为单个脚本.

我从BoilerplateJS参考架构中的单元测试中复制了上述两种方法.看看BoilerplateJS中的代码,它将为您提供有关如何使用JS进行复杂应用程序开发的更多想法.

免责声明:我是BoilerplateJS的主要作者