DRY-er Javascript类

使用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创建了一个类创建脚本,该脚本允许您要求某些参数,为发布/订阅模式绑定事件侦听器,自动将默认值与传入的选项组合在一起,并在DOM元素和类实例之间建立桥梁(即$(‘elem’).data(‘instanceNamespace’,classInstance);)

但是我对连续使用该类脚本编写类感到不舒服,因为这使它们的可移植性降低了.但是,当感觉那些方面可以抽象时,我不希望我的所有类之间都具有如此多的相似性.

有什么想法吗？或如何格式化Javascript类？

提前致谢.

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

解决方法:

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

注意：以下只是普通的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来促进混合的示例.

标签：dry,javascript
来源： https://codeday.me/bug/20191023/1915690.html