JS设计模式之Mixin(混入)模式
栏目: JavaScript · 发布时间: 5年前
内容简介: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设计模式》
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- underscore 诞生记(二)—— 链式调用与混入(mixin)
- 使用vue中的混入mixin优化表单验证插件
- 设计模式——订阅模式(观察者模式)
- 设计模式-简单工厂、工厂方法模式、抽象工厂模式
- java23种设计模式-门面模式(外观模式)
- 简单工厂模式、工厂模式、抽象工厂模式的解析-iOS
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
JS 压缩/解压工具
在线压缩/解压 JS 代码
正则表达式在线测试
正则表达式在线测试