mixin混入逻辑

hufeng 发布于2019-08-26 10:39 / 1590人阅读

摘要：现在有一个需求，将没有而有的属性混入到中。有而且也有的属性不混入以为准。通过这种混入机制滚雪球的方式可以不断地扩充一个对象地的功能。暂且将它定义为混入模式。混入模式是构建复杂对象的一种常用的模式。

有A对象和B对象，A， B对象有有方法属性和数据属性。现在有一个需求，将A没有而B有的属性混入到A中。A有而且B也有的属性不混入以A为准。通过这种混入机制（滚雪球的方式）可以不断地扩充一个对象地的功能。暂且将它定义为混入模式。这种模式在Vue构建的过程中使用到，在Express构建的过程中也使用到。混入模式是JS构建复杂对象的一种常用的模式。

function mixin(dest, src, cover) {
  if (dest === undefined) {
    throw Error("dest can not null");
  }
  if (src === undefined) {
    throw Error("src can not null");
  }
  if (cover === undefined) {
    cover = false;
  }
  Object.getOwnPropertyNames(src).forEach(function(prop) {
    if (Object.prototype.hasOwnProperty.call(dest, prop)) {
      return;
    }
    let value = Object.getOwnPropertyDescriptor(src, prop);
    Object.defineProperty(dest, prop, value);
  });
}

const a = {
  x: 1,
  y: 2,
  z: 3,
  say: function() {
    console.log("local state (x, y, z)");
  }
}

const b = {
  r: 4,
  s: 5,
  z: 6,
  run: function() {
    console.log("local state (r, s, z)");
  }
}

const c = {
  m: 4,
  n: 5,
  y: 6,
  bit: function() {
    console.log("local state (m, n, y)");
  }
}

mixin(a, b);
mixin(a, c);

console.log("mixin a ", a);

GPU云服务器云服务器类拓展混入 mixins Mixin 匹配逻辑

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106555.html

vue混入。

摘要：定义混入是一种分发组件中可复用功能非常灵活的方式。混入对象的钩子被调用组件钩子被调用值为对象的选项，例如，和，将被混合为同一个对象。全局混入也可以全局注册混入对象。注意使用一旦使用全局混入对象，将会影响到所有之后创建的实例。定义混入是一种分发Vue组件中可复用功能非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。例子： ...

vslam 2019-08-23 16:22 评论0 收藏0
在小程序中实现 Mixins 方案

摘要：明白了什么是以后，便可开始着手在小程序里面实现了。但是在小程序中，这套机制会和的有一点区别。代码实现在小程序中，每个页面都由函数定义，而则作用于这个函数当中的对象。函数即为小程序运行机制的具体实现，完全按照上一节总结的三条结论来进行。原文来自我的博客：https://jrainlau.github.io/#/... showImg(https://segmentfault.com/...

chunquedong 2019-08-23 18:12 评论0 收藏0
高级 Vue 组件模式 (3)

摘要：在中，我们是否也有一些手段或特性来提高组件的复用程度和灵活性呢答案当然是有的，那就是。成果通过实现，我们成功将注入的逻辑抽离了出来，这样每次需要共享组件的状态和方法时，混入该即可。 03 使用 mixin 来增强 Vue 组件目标之前一篇文章中，我们虽然将 toggle 组件划分为了 toggle-button、toggle-on 和 toggle-off 三个子组件，且一切运行良...

iKcamp 2019-08-23 12:26 评论0 收藏0
高级 Vue 组件模式 (4)

摘要：使用替换目标在第三篇文章中，我们使用来抽离了注入依赖项的公共逻辑。成果通过作用域插槽，我们有效地避免了第三方组件由于混入而可能造成的命名冲突以及隐式依赖等问题。 04 使用 slot 替换 mixin 目标在第三篇文章中，我们使用 mixin 来抽离了注入 toggle 依赖项的公共逻辑。在 react 中，类似的需求是通过 HOC 的方式来解决的，但是仔细想想的话，react 在早...

LancerComet 2019-08-23 12:27 评论0 收藏0
谈谈CSS预处理器

摘要：变量插值预处理器中定义的变量不仅可以用作属性值，还可以用作选择器，属性名等，这就是变量插值。三种预处理器的嵌套语法是一致的，引用父级选择器的标记也相同。三种预处理器的使用方式的差异比较大，下面分别说明。在写CSS的时候我们会发现，为了兼容浏览器等原因，我们往往需要写很多冗余的代码，CSS预处理器就是为了解决CSS的这些问题，简化CSS代码的编写。目前最主流的CSS预处理器是LESS...

BlackMass 2019-08-30 13:12 评论0 收藏0