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's Simple Javascript Inheritance pattern的类创建脚本，它允许您需要某些参数，为pub / sub模式绑定事件侦听器，自动将默认值与传入的选项组合在一起，并在它之间创建桥梁DOM元素和类实例（即$（'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方法，这非常优雅。 Here是在MooTools类中使用Implements来促进mixins的示例。

干燥的Javascript类

1 个答案: