组件抽象问题请教，用 mixin 还是组合抽象

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

This topic created in 1811 days ago, the information mentioned may be changed or developed.

我有若干组件，要给这些组件都新增一些公共的功能，应当使用 mixin 还是组合的来设计呢？

Mixin:

// 伪代码

ComponentA mixin SuperPower

ComponentB mixin SuperPower

ComponentC mixin SuperPower

然后直接使用 <ComponentA />, <ComponentB />, <ComponentC />

还是用组合来复用：


<SuperPower>
  <ComponentA />
</SuperPower>

<SuperPower>
  <ComponentB />
</SuperPower>

<SuperPower>
  <ComponentC />
</SuperPower>

Supplement 1 · Nov 23, 2021

另，mixin 上有一些属性需要被继承。例如：

<ComponentA super-power-property="123" />

或通过组合：

<SuperPower property="123">
<ComponentA />
</SuperPower>

Supplement 2 · Nov 23, 2021

补充下，不是 react 或 vue 框架，目前只有以上两种选择。Component 是对外开放的组件库里的一些组件，不是在自己代码内部使用的。

13 replies • 2021-11-23 15:52:38 +08:00

u2r1Hqo6HExmNsrt

Nov 23, 2021

同楼主同样有疑问，mixin 跟普通的继承、组合有什么不同？我学 dart ，研究来研究去，发现好像也就给多重继承加多了一个继承顺序。

4ark

Nov 23, 2021 via iPhone

你们用什么框架？还是不用？
其实目前来看这两种方案都不是最优的，建议了解下 React Hooks

TomVista

Nov 23, 2021

抄作业吧 react/vue hook

ele828

Nov 23, 2021

@4ark 内部框架，目前只有这两种做法。hooks 目前是不支持的

4ark

Nov 23, 2021 via iPhone

@ele828 感觉你们在走老路，既然 mixin 都抄了，那抄个 hooks 也行啊

ele828

Nov 23, 2021

@4ark 嗯，hooks 确实是一种解法，不过暂时可能比较难推进

zhuangzhuang1988

Nov 23, 2021

hook 也不好.

murmur

Nov 23, 2021

hooks 是每个变量都要自己去优化，框架不管了，比起这个我还是喜欢 vue 帮我优化这些

anjianshi

Nov 23, 2021

建议尽量不要用 mixin ，除非是加一些底层特性例如给每个组件加个通用的异常捕获啥的。
因为 mixin 不直观，一旦应用复杂起来很难维护，遇到问题也不容易找出到底是哪个组件加进来的哪个 mixin 导致的问题。

murmur

Nov 23, 2021

@anjianshi vue webpack 早就支持 mixin 打断点了，都什么年代了还在纠结调试问题

ele828

Nov 23, 2021

@anjianshi 我个人也是不倾向于用 mixin

darknoll

Nov 23, 2021

非常不喜欢 mixin ，后期维护的时候容易一头雾水

maplelin

Nov 23, 2021

不推荐 mixin ，感知性太差，mixin 中引入的方法和变量在引入 mixin 的组件中不可感知，一旦 mixin 发生错误，定位问题的麻烦程度直接翻倍