mixin混入邏輯

hufeng 發(fā)布于2019-08-26 10:39 / 1629人閱讀

摘要：現(xiàn)在有一個(gè)需求，將沒(méi)有而有的屬性混入到中。有而且也有的屬性不混入以為準(zhǔn)。通過(guò)這種混入機(jī)制滾雪球的方式可以不斷地?cái)U(kuò)充一個(gè)對(duì)象地的功能。暫且將它定義為混入模式。混入模式是構(gòu)建復(fù)雜對(duì)象的一種常用的模式。

有A對(duì)象和B對(duì)象，A， B對(duì)象有有方法屬性和數(shù)據(jù)屬性。現(xiàn)在有一個(gè)需求，將A沒(méi)有而B(niǎo)有的屬性混入到A中。A有而且B也有的屬性不混入以A為準(zhǔn)。通過(guò)這種混入機(jī)制（滾雪球的方式）可以不斷地?cái)U(kuò)充一個(gè)對(duì)象地的功能。暫且將它定義為混入模式。這種模式在Vue構(gòu)建的過(guò)程中使用到，在Express構(gòu)建的過(guò)程中也使用到?；烊肽Ｊ绞荍S構(gòu)建復(fù)雜對(duì)象的一種常用的模式。

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);

云服務(wù)器 GPU云服務(wù)器類(lèi)拓展混入 mixins Mixin 匹配邏輯

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/106555.html

相關(guān)文章

vue混入。

摘要：定義混入是一種分發(fā)組件中可復(fù)用功能非常靈活的方式?；烊雽?duì)象的鉤子被調(diào)用組件鉤子被調(diào)用值為對(duì)象的選項(xiàng)，例如，和，將被混合為同一個(gè)對(duì)象。全局混入也可以全局注冊(cè)混入對(duì)象。注意使用一旦使用全局混入對(duì)象，將會(huì)影響到所有之后創(chuàng)建的實(shí)例。定義混入是一種分發(fā)Vue組件中可復(fù)用功能非常靈活的方式?；烊雽?duì)象可以包含任意組件選項(xiàng)。當(dāng)組件使用混入對(duì)象時(shí)，所有混入對(duì)象的選項(xiàng)將被混入該組件本身的選項(xiàng)。例子： ...

vslam 2019-08-23 16:22 評(píng)論0 收藏0
在小程序中實(shí)現(xiàn) Mixins 方案

摘要：明白了什么是以后，便可開(kāi)始著手在小程序里面實(shí)現(xiàn)了。但是在小程序中，這套機(jī)制會(huì)和的有一點(diǎn)區(qū)別。代碼實(shí)現(xiàn)在小程序中，每個(gè)頁(yè)面都由函數(shù)定義，而則作用于這個(gè)函數(shù)當(dāng)中的對(duì)象。函數(shù)即為小程序運(yùn)行機(jī)制的具體實(shí)現(xiàn)，完全按照上一節(jié)總結(jié)的三條結(jié)論來(lái)進(jìn)行。原文來(lái)自我的博客：https://jrainlau.github.io/#/... showImg(https://segmentfault.com/...

chunquedong 2019-08-23 18:12 評(píng)論0 收藏0
高級(jí) Vue 組件模式 (3)

摘要：在中，我們是否也有一些手段或特性來(lái)提高組件的復(fù)用程度和靈活性呢答案當(dāng)然是有的，那就是。成果通過(guò)實(shí)現(xiàn)，我們成功將注入的邏輯抽離了出來(lái)，這樣每次需要共享組件的狀態(tài)和方法時(shí)，混入該即可。 03 使用 mixin 來(lái)增強(qiáng) Vue 組件目標(biāo) 之前一篇文章中，我們雖然將 toggle 組件劃分為了 toggle-button、toggle-on 和 toggle-off 三個(gè)子組件，且一切運(yùn)行良...

iKcamp 2019-08-23 12:26 評(píng)論0 收藏0
高級(jí) Vue 組件模式 (4)

摘要：使用替換目標(biāo)在第三篇文章中，我們使用來(lái)抽離了注入依賴(lài)項(xiàng)的公共邏輯。成果通過(guò)作用域插槽，我們有效地避免了第三方組件由于混入而可能造成的命名沖突以及隱式依賴(lài)等問(wèn)題。 04 使用 slot 替換 mixin 目標(biāo) 在第三篇文章中，我們使用 mixin 來(lái)抽離了注入 toggle 依賴(lài)項(xiàng)的公共邏輯。在 react 中，類(lèi)似的需求是通過(guò) HOC 的方式來(lái)解決的，但是仔細(xì)想想的話(huà)，react 在早...

LancerComet 2019-08-23 12:27 評(píng)論0 收藏0
談?wù)凜SS預(yù)處理器

摘要：變量插值預(yù)處理器中定義的變量不僅可以用作屬性值，還可以用作選擇器，屬性名等，這就是變量插值。三種預(yù)處理器的嵌套語(yǔ)法是一致的，引用父級(jí)選擇器的標(biāo)記也相同。三種預(yù)處理器的使用方式的差異比較大，下面分別說(shuō)明。在寫(xiě)CSS的時(shí)候我們會(huì)發(fā)現(xiàn)，為了兼容瀏覽器等原因，我們往往需要寫(xiě)很多冗余的代碼，CSS預(yù)處理器就是為了解決CSS的這些問(wèn)題，簡(jiǎn)化CSS代碼的編寫(xiě)。目前最主流的CSS預(yù)處理器是LESS...

BlackMass 2019-08-30 13:12 評(píng)論0 收藏0