mixin配合class实现多继承的绝佳妙用

Github 源码地址

什么是mixin

mixin一般翻译为“混入”、“混合”，
早期一般解释为：把一个对象的方法和属性拷贝到另一个对象上；
也可以简单理解为能够被继承的类，
最终目的是实现代码的复用。

从一个需求说起

为了使你能够最快的清楚我在说什么，我们从一个需求说起：

一个项目中有多个弹层需求；
一些是公共方法，比如点击关闭按钮关闭弹层；
一些弹层是可以拖动的，且有蒙层；
一些弹层是可以缩放的；
其他都是业务方法，无可复用性。

你可以先在心里想下，如果是你，你会怎样完成这个需求？

脑海中规划下

我们为公共方法写个类：BaseModal
为可拖动的弹层写个类：DragModal
为可缩放的弹层写个类：ScaleModal
为自定义的业务需求写个类：CustomModal

画个脑图的话，会是下面图片中的样子：

extends简单实现下 看代码

// 公共方法 class BaseModal { close(){ console.log('close'); } } // 可以拖动的弹层，我们写一个单独的类 class DragModal extends BaseModal { hasLayer = true; drag() { console.log('drag'); } } // 可以缩放的弹层，我们写一个单独的类 class ScaleModal extends BaseModal { scale() { console.log('scale'); } } // 业务方法 class CustomModal extends DragModal { close(){ console.log('custom-close'); } do() { console.log('do'); } } let c = new CustomModal(); d.close(); // custom-close c.drag(); // drag c.do(); // do c.hasLayer; // true