关于mixin的组织方式

Question

其实用es6 class也可以用extend来拆分类实现，应该只是尤大的个人喜好问题吧，有些人不喜欢完全使用面向对象的写法

Answer 1

想上进的小前端 2020-07-08 20:25:04

没啥问题，都能实现，但是calss是一个语法糖，本质还是尤大使用的那一套

Answer 2

鸡肋2016 2019-09-23 11:03:47

提问者将代码混入的方法用es6尝试实验了，这样研究很赞！

但是我想知道提问者方法三，使用模拟多继承，实现完整类的mixin，

类Mix 混入多个mixin 后， mixin中如果在构造函数中有自身的属性和方法 Mix混入后是不是就会丢失

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57

class any{         point(){             console.log("i have point");         }     }       class Rectangle extends any{       // constructor     constructor(height, width) {         super();         this.height = height;         this.width = width;     }     // Getter     get area() {         return this.calcArea()     }     // Method     calcArea() {         return this.height * this.width;     } }   function copyProperties(target, source) {     const ownPropertyNames = Object.getOwnPropertyNames(source);            ownPropertyNames     .filter(key => !/^(prototype|name|constructor)$/.test(key))     .forEach(key => {                   const desc = Object.getOwnPropertyDescriptor(source, key);         console.log(desc);          Object.defineProperty(target, key, desc)     }); }   function mixin(...mixins) {     class Mix {     }            for (const mixin of mixins) {       copyProperties(Mix, mixin)       copyProperties(Mix.prototype, mixin.prototype)     }       return Mix; }     class Vue extends mixin(Rectangle) {   // ... }   let localVue = new Vue(3, 4);   console.dir(localVue.hasOwnProperty("height"));//false

 

Answer 3

提问者 xjtumj 2018-06-17 17:49:49

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

方法一，将拆分的方法和属性挂在prototype对象上 // main.js import Init from 'instance/init'; import { mixin } from 'utils'; class Vue {   // ... }   mixin(Vue.prototype, Init);   export default Vue;     // init.js export default {   init() {     console.log('init.');   } }   // utils.js export function mixin(target, source) {   return Object.assign(target, source); }   // test.js import Vue from 'main.js'; new Vue().init();

方法二，将拆分的方法和属性挂在实例对象上

1 2 3 4 5 6 7 8 9

// main.js import Init from 'instance/init'; import { mixin } from 'utils'; class Vue {   constructor() {     mixin(this, Init);   } } export default Vue;

方法三，使用模拟多继承，实现完整类的mixin：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

// main.js import Init from './instance/init'; import { mixin } from './utils'; class Vue extends mixin(Init) {   // ... } export default Vue;   // utils.js export function mixin(...mixins) {     class Mix {     }           for (const mixin of mixins) {       copyProperties(Mix, mixin)       copyProperties(Mix.prototype, mixin.prototype)     }           return Mix; }   function copyProperties(target, source) {     const ownPropertyNames = Object.getOwnPropertyNames(source);           ownPropertyNames     .filter(key => !/^(prototype|name|constructor)$/.test(key))     .forEach(key => {         const desc = Object.getOwnPropertyDescriptor(source, key);                   Object.defineProperty(target, key, desc)     }); }   // init.js export default class {     init() {         console.log('init.');     } }

• ustbhuangyi #1

  额，你这基本上就是把 function 换成了 class，还是给原型上去扩展了方法，我认为和 Vue 目前的实现并没有什么本质区别。

• ustbhuangyi #2

  另外 Vue 并不是完全不会用 class，比如 VNode 就是 class 的实现，所以我觉得你的猜测尤大的喜好问题站不住脚。

• 提问者 xjtumj 回复 ustbhuangyi #3

  本来es6的class就是个语法糖，没有什么本质的区别，也有可能是vnode是后来写的代码，vue初始版本是很早的，当时es6还没有出来，后来觉得这里改class没有什么必要，就保留了这里。
  
  但是视频中说是用es6不好实现，这个就不对了，现在的情况下应当提倡使用es6的语法，虽然是个语法糖，但也能更加统一和拥抱标准

点开查看后面7条评论

Answer 4

提问者 xjtumj 2018-06-17 17:12:59

```

markdown测试

```

Answer 5

ustbhuangyi 2018-06-16 01:12:55

那么问题来了，es6 的 class 如何把原型上的属性和方法拆分到不同的 JS 文件中呢？

• 提问者 xjtumj #1

  一样的呀，mixin和继承基本是一个概念，把类拆分到不同的文件中，使用类的继承是一样的效果

• 提问者 xjtumj #2

  而且就算不用继承，prototype的属性方法全部mixin到this上也未尝不可，本身就是单例

• ustbhuangyi 回复 提问者 xjtumj #3

  可否举个例子？

点开查看后面2条评论