V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
ele828
V2EX  ›  JavaScript

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

  •  
  •   ele828 · 2021-11-23 08:30:03 +08:00 · 1839 次点击
    这是一个创建于 857 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    Mixin:

    // 伪代码
    
    ComponentA mixin SuperPower
    
    ComponentB mixin SuperPower
    
    ComponentC mixin SuperPower
    

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

    还是用组合来复用:

    
    <SuperPower>
      <ComponentA />
    </SuperPower>
    
    <SuperPower>
      <ComponentB />
    </SuperPower>
    
    <SuperPower>
      <ComponentC />
    </SuperPower>
    
    第 1 条附言  ·  2021-11-23 09:24:26 +08:00
    另,mixin 上有一些属性需要被继承。 例如:

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

    或通过组合:

    <SuperPower property="123">
    <ComponentA />
    </SuperPower>
    第 2 条附言  ·  2021-11-23 09:29:34 +08:00
    补充下,不是 react 或 vue 框架,目前只有以上两种选择。Component 是对外开放的组件库里的一些组件,不是在自己代码内部使用的。
    13 条回复    2021-11-23 15:52:38 +08:00
    Nillouise
        1
    Nillouise  
       2021-11-23 09:16:25 +08:00
    同楼主同样有疑问,mixin 跟普通的继承、组合有什么不同?我学 dart ,研究来研究去,发现好像也就给多重继承加多了一个继承顺序。
    4ark
        2
    4ark  
       2021-11-23 09:22:48 +08:00 via iPhone
    你们用什么框架?还是不用?
    其实目前来看这两种方案都不是最优的,建议了解下 React Hooks
    TomVista
        3
    TomVista  
       2021-11-23 09:24:02 +08:00
    抄作业吧 react/vue hook
    ele828
        4
    ele828  
    OP
       2021-11-23 09:26:43 +08:00
    @4ark 内部框架,目前只有这两种做法。hooks 目前是不支持的
    4ark
        5
    4ark  
       2021-11-23 09:29:49 +08:00 via iPhone
    @ele828 感觉你们在走老路,既然 mixin 都抄了,那抄个 hooks 也行啊
    ele828
        6
    ele828  
    OP
       2021-11-23 09:33:32 +08:00
    @4ark 嗯,hooks 确实是一种解法,不过暂时可能比较难推进
    zhuangzhuang1988
        7
    zhuangzhuang1988  
       2021-11-23 09:34:19 +08:00
    hook 也不好.
    murmur
        8
    murmur  
       2021-11-23 09:36:32 +08:00
    hooks 是每个变量都要自己去优化,框架不管了,比起这个我还是喜欢 vue 帮我优化这些
    anjianshi
        9
    anjianshi  
       2021-11-23 09:46:09 +08:00
    建议尽量不要用 mixin ,除非是加一些底层特性例如给每个组件加个通用的异常捕获啥的。
    因为 mixin 不直观,一旦应用复杂起来很难维护,遇到问题也不容易找出到底是哪个组件加进来的哪个 mixin 导致的问题。
    murmur
        10
    murmur  
       2021-11-23 09:48:28 +08:00
    @anjianshi vue webpack 早就支持 mixin 打断点了,都什么年代了还在纠结调试问题
    ele828
        11
    ele828  
    OP
       2021-11-23 10:22:38 +08:00
    @anjianshi 我个人也是不倾向于用 mixin
    darknoll
        12
    darknoll  
       2021-11-23 10:55:59 +08:00
    非常不喜欢 mixin ,后期维护的时候容易一头雾水
    maplelin
        13
    maplelin  
       2021-11-23 15:52:38 +08:00
    不推荐 mixin ,感知性太差,mixin 中引入的方法和变量在引入 mixin 的组件中不可感知,一旦 mixin 发生错误,定位问题的麻烦程度直接翻倍
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2816 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 13:24 · PVG 21:24 · LAX 06:24 · JFK 09:24
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.