JS設計模式之Mixin（混入）模式

摘要： 概念 Mixin模式就是一些提供能夠被一個或者一組子類簡單繼承功能的類,意在重用其功能。在面向物件的語言中，我們會通過介面繼承的方式來實現功能的複用。但是在javascript中，我們沒辦法通過介面繼承的方式，但是我們可以通過javascript特有的原型鏈屬性，將功能引用複製到原型鏈上，...

概念

Mixin模式就是一些提供能夠被一個或者一組子類簡單繼承功能的類,意在重用其功能。在面向物件的語言中，我們會通過介面繼承的方式來實現功能的複用。但是在javascript中，我們沒辦法通過介面繼承的方式，但是我們可以通過javascript特有的原型鏈屬性，將功能引用複製到原型鏈上，達到功能的注入。

示例

下面通過一個簡單的例子來演示這個模式

var Car = function(settings) {
this.model = settings.model || "no model provided"
this.color = settings.color || "no color provided"
}

var Action = function() {}

Action.prototype = {
driveForward: function() {
console.log("drive forward")
},
driveBackward: function() {
console.log("drive backward")
},
driveSideways: function() {
console.log("drive sideways")
}
}

//混入模式的實現
function Mixin(recClass, giveClass) {
if(arguments.length > 2) {
for(var i = 2, lenth = arguments.length; i < lenth ; ++ i) {
var methodName = arguments[i]
recClass.prototype[methodName] = giveClass.prototype[methodName]
}
}else {
for(var methodName in giveClass.prototype) {
if(!recClass.prototype[methodName]) {
recClass.prototype[methodName] = giveClass.prototype[methodName]
}
}
}
}

Mixin(Car, Action , "driveForward", "driveBackward")

var myCar = new Car({
model: "BMW",
color: "blue"
})

myCar.driveForward()//drive forward
myCar.driveBackward()//drive backward

//不指定特定方法名的時候，將後者所有的方法都新增到前者裡
Mixin(Car, Action)

var mySportsCar = new Car({
model: "Porsche",
color: "red"
})

mySportsCar.driveForward()//drive forward

優缺點

優點

有助於減少系統中的重複功能及增加函式複用。當一個應用程式可能需要在各種物件例項中共享行為時，我們可以通過在Mixin中維持這種共享功能並專注於僅實現系統中真正不同的功能，來輕鬆避免任何重複。

缺點

有些人認為將功能注入物件原型中會導致原型汙染和函式起源方面的不確定性。

參考

《JavaScript設計模式》