怎么理解mixins

JavaScript016

怎么理解mixins,第1张

js只支持单继承, 因为一个对象只有一个原型,如果想实现多继承,就的把需要把父对象的属性拷贝到子对象上,这就是mixin。

在 Ruby 中, include 关键词即是 mixin,是将一个模块混入到一个另一个模块中,或是一个

类中。

const mixinClass = (base, ...mixins) => {

    const mixinProps = (target, source) => {

      Object.getOwnPropertyNames(source).forEach(prop => {

        if (/^constructor$/.test(prop)) { return }

        Object.defineProperty(target, prop, Object.getOwnPropertyDescriptor(source, prop))

      })

    }

    let Ctor

    if (base && typeof base === 'function') {

      Ctor = class extends base {

        constructor(...props) {

          super(...props)

        }

      }

      mixins.forEach(source => {

        mixinProps(Ctor.prototype, source.prototype)

      })

    } else {

      Ctor = class {}

    }

    return Ctor

  }

函数命名:统一使用动词或者动词+名词形式 ---- fnInit() 如果有内部函数则“_”开头  _fnInit(). 对象方法命名使用fn+对象类名+动词+名词形式  fnAnimateDoRun() 某事件响应函数命名方式为fn+触发事件对象名+事件名或者模块名  fnDivClick() 附常用的动词列表:变量命名: 一些算是默认的规范就不说了 (常量大写,循环变量简写,驼峰式等) 对于变量命名 还是没有一个规范,下面贴出一个别人的规范仅供参考。 按照类型规划: 按照前缀区分 :市面上常用的命名规范: camelCase(小驼峰式命名法 —— 首字母小写) PascalCase(大驼峰式命名法 —— 首字母大写) kebab-case(短横线连接式) Snake(下划线连接式) 1.1 项目文件命名 1.1.1 项目名 全部采用小写方式, 以 短横线 分隔。例:my-project-name。 1.1.2 目录名参照项目命名规则,有复数结构时,要采用复数命名法 。例:docs、assets、components、directives、mixins、utils、views。