原生js如何实现mixins混入效果

Question

情况描述：
我这是原生的前端项目，但是用的语法是直接引入了vue.js使用的vue语法。页面还是html那种的。不是vue项目。
然后想着有很多页面都会有一些固定的方法，比如计算高度之类的。就想到如果能和vue一样，弄一个混入的js文件，直接每个页面引入一下就能使用的话那肯定方便不少，代码也能简化。但是这种只是引入vue语法的html项目我试了半天找不到如何实现。不知道有没有其他办法可以实现的。

Answer 1

原生的 JavaScript 并没有提供混入（mixins）的功能，但可以使用原型（prototype）或者对象合并的方式来实现类似的功能。

假设有一个混入对象 mixin，包含一些共用的方法：

const mixin = {
  computed: {
    // 计算高度的方法
    height() {
      return this.$el.offsetHeight;
    }
  },
  methods: {
    // 通用方法
    hello() {
      console.log('Hello, world!');
    }
  }
};

如果要将混入对象应用到一个组件对象 MyComponent 中，可以使用对象合并的方式：

const MyComponent = {
  // 自定义属性和方法
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  methods: {
    // 自定义方法
    handleClick() {
      console.log('Clicked!');
    }
  }
};

Object.assign(MyComponent, mixin); // 合并混入对象

new Vue({
  el: '#app',
  components: {
    MyComponent
  },
  template: '<my-component></my-component>'
});

这样，MyComponent 就包含了混入对象中的属性和方法。

如果要混入多个对象，可以将多个对象合并到一个对象中，再将该对象合并到组件对象中。比如：

const mixin1 = {
  data() {
    return {
      foo: 'bar'
    };
  }
};

const mixin2 = {
  methods: {
    baz() {
      console.log('baz');
    }
  }
};

const MyComponent = {
  // ...
};

Object.assign(MyComponent, Object.assign({}, mixin1, mixin2));

// 或者使用 Object.assign 和扩展运算符：
Object.assign(MyComponent, {...mixin1, ...mixin2});

需要注意的是，由于使用了对象合并的方式，如果混入对象和组件对象具有相同的属性或方法，则会被后者覆盖，这可能会导致一些问题。因此，建议在混入对象中使用前缀或命名空间来避免冲突。