干燥的Javascript类

Question

使用jQuery,这是我在JS中编写的大多数类的格式:

$.Tabs = function(options){
var self = this;
this.defaults = {};
var cfg = $.extend(true, {}, this.defaults, options);
this.$elem = cfg.$elem;

function _init(){
    var dontInit = false;

    if (!cfg.$elem || !cfg.requiredProperty){
        alert('missing params');
        dontInit = true;
    }

    if (!dontInit){
        self.$elem.bridge(self);
    }
}

this.show = function(){};
this.hide = function(){};

_init();
}

上面的代码就是一个例子.

我的问题是,你如何从你的课程中推断出常见的任务/功能,所以你写的每一个新课程,你都不必重新输入所有内容？

我创建了一个基于John Resig的Simple Javascript Inheritance模式的类创建脚本,它允许您需要某些参数,绑定pub/sub模式的事件侦听器,自动将默认值与传入的选项组合在一起,并在DOM之间创建一个桥梁element和类实例(即$('elem').data('instanceNamespace',classInstance);)

但是我不断使用这个类脚本来编写我的类,因为它使它们的可移植性降低.但是,当我觉得这些方面可以被抽象出来时,我不希望我的所有课程之间有如此多的相似之处.

思考？或者你如何格式化你的Javascript类？

提前致谢.

编辑:此外,是否有人知道使用类创建脚本对性能的影响？我假设额外的闭包增加了开销,但它是否足以让它不值得使用？

Answer 1

我认为你正在寻找的想法被称为混合.

注意:下面的内容只是vanilla javascript,没有jQuery,但我认为你会看到原型继承非常适合mixins的想法.

假设您定义了一个简单的构造函数:

var Person = function(name){
    this.name=name;
    this.sayhello = function(){
        console.log(this.name + ' says hello');
    };
};

然后我们可以通过使用以下函数将属性复制到新对象来混合新功能:

var extend = function(destination, source) {
    for (var property in source)
        destination[property] = source[property];
    return destination;
};

我们可以创建一些有用的功能,我们可能想要为很多不同的类重用它们,所以我们可以在运行时混合新功能,而不是让它们都从公共类继承.

var DanceMixin = {
    dance: function(){
        console.log(this.name + ' is dancing!');
    }
};

var SingMixin = {
    sing: function(){
        console.log(this.name + ' is singing!');
    }
};

var bob = new Person('bob'); 
extend(bob, SingMixin);
extend(bob, DanceMixin);

bob.sing();
/* bob is singing! */
bob.dance();
/* bob is dancing! */
bob.sayhello();
/* bob says hello */

请注意,这是仅将新功能添加到单个对象.如果我们想要将这些功能添加到所有Person对象,我们需要修改Person原型.

现在让我们说我们有另一个动物的简单构造函数:

var Animal = function(name){
    this.name = name;
    this.roar = function(){
        console.log(this.name + ' is roaring!');
    };
};

让我们说我们希望我们所有的动物都有跳舞的能力.所以我们可以使用如下函数DanceMixin将Animal原型添加到原型中:

var mixin = function(dest, src){
    for (var property in src)
        dest.prototype[property] = src[property];
    return dest;
}
mixin(Animal, DanceMixin);

现在我们可以制作一些可以跳舞的动物......

var lion = new Animal('lion');
lion.dance()
/* lion is dancing! */

顺便说一句,我强烈建议您查看MooTools解决问题的方法,这非常优雅. 以下是Implements在MooTools类中使用以促进mixins 的示例.