mixin混入邏輯

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

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

有A對象和B對象，A， B對象有有方法屬性和數(shù)據(jù)屬性。現(xiàn)在有一個需求，將A沒有而B有的屬性混入到A中。A有而且B也有的屬性不混入以A為準(zhǔn)。通過這種混入機制（滾雪球的方式）可以不斷地擴充一個對象地的功能。暫且將它定義為混入模式。這種模式在Vue構(gòu)建的過程中使用到，在Express構(gòu)建的過程中也使用到。混入模式是JS構(gòu)建復(fù)雜對象的一種常用的模式。

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云服務(wù)器云服務(wù)器類拓展混入 mixins Mixin 匹配邏輯

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/106555.html

相關(guān)文章

vue混入。

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

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

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

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

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

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

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

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

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

BlackMass 2019-08-30 13:12 評論0 收藏0