如何创建自包含模块化组件并避免组件内重复代码

不要在「多组件复制粘贴重复代码」和「抽离全局模块造成硬依赖」两个极端做二选一，行业内成熟的实现都是走松耦合分层的思路，常用方案有三个：

• 内置精简实现+可选外部覆写
  把你提到的按名称触发动画这类通用函数，做覆盖组件自身使用场景的最小体积精简版，直接内置在对应组件源码里，保证组件零外部依赖就能独立运行、完整实现所有功能。同时给组件暴露同签名的可选配置项，允许使用者传入自定义版本的函数替换内置逻辑：如果你后续抽了统一的全功能动画模块，只要在初始化组件时把模块里的对应方法传入，组件就会自动使用外部版本，没传的场景下完全靠内置逻辑兜底，不会抛警告、不会报缺依赖错误，普通用户不需要做任何额外配置就能开箱用，有定制需求的用户也能灵活接入统一逻辑。
  注意内置的精简实现不要加多余功能，只要满足组件自身的调用需求即可，单份实现通常只有几百字节，不会带来明显的体积负担。
• 构建期去重的可选对等依赖
  把通用逻辑拆成零外部依赖的独立单函数小包，不要打包成必须提前加载的大体积全局模块。组件发布/构建时做两个配置：一是把这个通用逻辑小包声明为可选的peerDependencies，二是在构建产物中直接打入一份该逻辑的静态副本，同时配置构建规则：如果最终项目里已经引入了这个通用小包，构建工具就自动去重、复用同一份代码；如果项目里没引，就用组件自带的副本运行，整个过程对使用者完全透明。
  这种方案既保证了组件可以脱离其他模块独立运行，又能在多组件同时使用时保证最终产物里只有一份通用逻辑代码，不会产生冗余。
• 原生API优先的薄适配层
  对于动画、DOM操作这类浏览器原生已经提供能力的通用逻辑，优先基于原生API写最薄的适配实现作为内置兜底，不要一开始就引入第三方 runtime 依赖。比如按名称触发动画的需求，完全可以基于原生Element.animate()（Web Animation API）实现基础能力，根本不需要额外引入动画库；只有当你需要兼容极低版本浏览器、或者做复杂动画编排的时候，再通过前面说的可选覆写方式接入外部的全功能动画模块即可。

实操注意：不要为了追求绝对的「零代码重复」强行给组件加深依赖。自包含组件的第一优先级是独立可用，对于单份体积1KB以内的通用逻辑，即使在3-5个组件里有重复副本，也是完全可接受的权衡，成本远低于为了消掉这点重复提升组件的配置、使用门槛。

内容的提问来源于stack exchange，提问作者Zodd