javascript模式——Mixin

时间:2023-03-08 20:08:54

Mixin是一种扩展收集功能的方式,能提高代码的复用率。

在javascript中,原型可以继承于其它对象的原型,并且可以为任意数量的实例定义属性。可以利用这一点来促进函数的复用。

下面一段代码就是将一些可以被复用的代码利用underscore.js里的_.extend对原型扩展,以实现高复用。

// 一些代码,可以被下面的类混入,
var controls = {
moveForward: function(){
console.log(this.name + ' move forward');
},
moveLeft: function(){
console.log(this.name + ' move left');
},
moveRight: function(){
console.log(this.name + ' move right');
}
} // Car类
function Car(){
this.name = 'car';
this.moveBackward = function(){
console.log(this.name + ' move backward');
}
} // Airplane类
function Airplane(){
this.name = 'airplane';
this.moveUp = function(){
console.log(this.name + ' move up');
}
this.moveDown = function(){
console.log(this.name + ' move down');
}
}
_.extend(Car.prototype, controls);
_.extend(Airplane.prototype, controls); var car = new Car()
car.moveRight(); var airplane = new Airplane()
airplane.moveLeft();

除了使用underscore.js里的方法进行对象扩展,我们也可以自己实现混入功能,像一些有独特需求的,比如指定混入的方法名等等。

// 一些代码,可以被下面的类混入,
var controls = {
moveForward: function(){
console.log(this.name + ' move forward');
},
moveLeft: function(){
console.log(this.name + ' move left');
},
moveRight: function(){
console.log(this.name + ' move right');
}
} // Car类
function Car(){
this.name = 'car';
this.moveBackward = function(){
console.log(this.name + ' move backward');
}
} function mixin( receivingClass, givingClass ) {
// only provide certain methods
if ( arguments[2] ) {
for ( var i = 2, len = arguments.length; i < len; i++ ) {
receivingClass[arguments[i]] = givingClass[arguments[i]];
}
}
} mixin(Car.prototype, controls, 'moveForward'); var car = new Car();
car.moveForward() // car move forward
car.moveLeft() // error:undefined is not a function