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

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

原生的 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});


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

可以使用对象的扩展方式实现 mixins 混入效果,即将一个对象的属性和方法混合到另一个对象中。以下是一种实现方式:


function mixin(target, ...sources) {
  // 遍历 sources 数组中的每一个源对象
  sources.forEach(source => {
    // 遍历源对象的所有可枚举属性
    for (let key in source) {
      // 如果目标对象中没有该属性,直接赋值
      if (!(key in target)) {
        target[key] = source[key];
      } else {
        // 否则,将两个对象的同名属性合并为一个数组
        target[key] = [].concat(target[key], source[key]);
      }
    }
  });
  // 返回混入后的对象
  return target;
}

// 使用示例
const obj1 = { a: 1, b: 2 };
const obj2 = { b: [3, 4], c: 5 };
const obj3 = { d: 6 };

const mixedObj = mixin({}, obj1, obj2, obj3);
console.log(mixedObj); // { a: 1, b: [2, 3, 4], c: 5, d: 6 }

以上代码定义了一个 mixin 函数,该函数接受一个目标对象和多个源对象作为参数,并将所有源对象的属性和方法混合到目标对象中,最终返回混入后的对象。

在 mixin 函数内部,首先遍历所有源对象,然后遍历每个源对象的所有可枚举属性。如果目标对象中没有该属性,直接将该属性赋值给目标对象;否则,将两个对象的同名属性合并为一个数组。最后返回混入后的对象

可以使用JavaScript的Object.assign()方法来实现mixins混入效果。Object.assign()方法可以将源对象的所有可枚举属性复制到目标对象中,从而实现mixins混入效果。具体实现方法如下:

// 定义源对象
let source = {
    sayHello: function() {
        console.log('Hello');
    }
};
// 定义目标对象
let target = {
    sayGoodbye: function() {
        console.log('Goodbye');
    }
};
// 混入源对象的属性
Object.assign(target, source);
// 调用混入的方法
target.sayHello(); // 输出:Hello