Beautiful Mixins -《Beautiful JavaScript》讀書(shū)分享

enali 發(fā)布于2019-08-20 10:31 / 2461人閱讀

摘要：是基于原型鏈繼承的，但是其詭異的寫(xiě)法可能讓好多初學(xué)者望而卻步。在我們有和，很容易切換上下文，將各種互不相干糅合，達(dá)到的目的。最近在讀這本書(shū)，有一些好的內(nèi)容，正好可以跟大家分享，但并不是全部，有興趣的同學(xué)也可以自己讀一下，請(qǐng)支持正版。

剛開(kāi)始，代碼只是代碼而已。當(dāng)代碼多了，我們發(fā)明了函數(shù)，以便代碼可以重用。到后來(lái)，我們的函數(shù)也越來(lái)越多，所以我們又發(fā)明了別的一些編程概念。但是當(dāng)我們沉迷于這些新概念的同時(shí)，我們可能就錯(cuò)過(guò)了一些近在眼前的美麗事物……

類(lèi)繼承

類(lèi)概念主要存在于面向?qū)ο缶幊讨械模赡艽蠹疑蠈W(xué)時(shí)都學(xué)過(guò)，比如Java、C#、Objective-C等面向?qū)ο笳Z(yǔ)言。每個(gè)實(shí)體都需要先要有一個(gè)類(lèi)，這個(gè)類(lèi)對(duì)于我們來(lái)說(shuō)是比較抽象的（不是說(shuō)abstract class哦），然后子類(lèi)還可以繼承父類(lèi)。

這感覺(jué)似乎有點(diǎn)亞里士多德形而上學(xué)和分類(lèi)法的味道，但簡(jiǎn)單來(lái)說(shuō)這就是面向?qū)ο蟮幕A(chǔ)，在寫(xiě)出實(shí)際代碼之前，你得先寫(xiě)出一些類(lèi)、接口，然后類(lèi)繼承類(lèi)、類(lèi)實(shí)現(xiàn)接口……

實(shí)際上我們?nèi)祟?lèi)并不是非常擅長(zhǎng)分類(lèi)，打個(gè)比方，一個(gè)按鈕（Button），它應(yīng)該是一個(gè)矩形（Rectangle），還是一個(gè)控件（Control）呢？我們可以讓Button繼承Rectangle，讓Rectangle繼承Control……等等，是不是有什么不對(duì)？

所以，面向?qū)ο蟮母拍羁赡軙?huì)在項(xiàng)目剛開(kāi)始時(shí)就把你壓垮，但這并不是說(shuō)面向?qū)ο缶筒缓茫皇怯袝r(shí)候并不適合你的項(xiàng)目。

原型鏈繼承

可能大家都知道，JavaScript是不支持class關(guān)鍵字的，因?yàn)镴avaScript本身就不作為一個(gè)面向?qū)ο笳Z(yǔ)言來(lái)設(shè)計(jì)，但并不妨礙大家想出各種招來(lái)實(shí)現(xiàn)class。

JavaScript是基于原型鏈(Prototype)繼承的，但是其詭異的寫(xiě)法可能讓好多初學(xué)者望而卻步。

function Circle() {
  this.radius = 7;
}
Circle.prototype = {
  area: function () {
    return Math.PI * this.radius * this.radius;
  },
  grow: function () {
    this.radius++;
  },
  shrink: function () {
    this.radius--;
  }
};

在ES5之后，我們有了Object.create方法，好理解了一些。

var circle = Object.create({
  area: function () {
    return Math.PI * this.radius * this.radius;
  },
  grow: function () {
    this.radius++;
  },
  shrink: function () {
    this.radius--;
  }
}, {
  radius: {
    writable: true,
    configurable: true,
    value: 7
  }
});

只是第二參數(shù)用起來(lái)有點(diǎn)復(fù)雜，其實(shí)就是跟Object.defineProperties()的參數(shù)一樣，但是我們現(xiàn)在又有了ES6呀：

class Cicle {
  constructor() {
    this.radius = 7;
  }
  area() {
    return Math.PI * this.radius * this.radius;
  }
  grow() {
    this.radius++;
  }
  shrink() {
    this.radius--;
  }
}

這都是一些使用JavaScript實(shí)現(xiàn)class的例子，實(shí)際上，JavaScript還可以有另外一種重用代碼的方式——Mixins。

Mixins

這就是我們今天的主題，近在眼前的美麗事物，但可不是什么新概念，用過(guò)Ruby或Python的同學(xué)，可能有所耳目，Mixins的字面意思就是把東西摻合在一起。

在JavaScript我們有call和apply，很容易切換上下文，將各種互不相干糅合，達(dá)到Mixins的目的。

假設(shè)我們要做一個(gè)圓形按鈕(RoundButton)，它有兩個(gè)特性：

是圓的

可點(diǎn)擊

我們可以把這兩個(gè)特性分別寫(xiě)做2個(gè)函數(shù)：

// 是圓的
var withCircle = function () {
  this.area = function () {
    return Math.PI * this.radius * this.radius;
  };
  this.grow = function () {
    this.radius++;
  };
  this.shrink = function () {
    this.radius--;
  }
}

// 可點(diǎn)擊
var withClickable = function () {
  this.hover = function () {
    console.log("hovering");
  };
  this.press = function () {
    console.log("button pressed");
  };
  this.release = function () {
    console.log("button released");
  };
  this.fire = function () {
    this.action.fire();
  };
}

這是我們的圓形按鈕：

var RoundButton = function(radius, label, action) {
  this.radius = radius;
  this.label = label;
  this.action = action;
};

現(xiàn)在我們要讓給這個(gè)圓形按鈕附上那兩個(gè)特性：

withCircle.call(RoundButton.prototype);
withClickable.call(RoundButton.prototype);

var button = new RoundButton(4, "yes!", function() {
  return "you said yes!"
});
button1.fire(); // 輸出 "you said yes!"

這樣寫(xiě)，是不是瞬間顯得既簡(jiǎn)潔又自然？讓人一眼看懂代碼在做什么。

當(dāng)然這些附加特性的函數(shù)用的多了，也就創(chuàng)建了許多函數(shù)，這里可以簡(jiǎn)單的用一個(gè)立即執(zhí)行函數(shù)（Immediately Invoked Function Expression）的閉包來(lái)對(duì)其進(jìn)行優(yōu)化一下，以withCircle為例：

var withCircle = (function () {
  function area() {
    return Math.PI * this.radius * this.radius;
  }
  function grow() {
    this.radius++;
  }
  function shrink() {
    this.radius--;
  }
  return function () {
    this.area = area;
    this.grow = grow;
    this.shrink = shrink;
  };
})();

這樣就不需要每次使用都新建函數(shù)了，從而節(jié)省更多的資源。

Advice

有時(shí)候，你無(wú)法確保某些函數(shù)可能會(huì)覆蓋原有的功能，例如以下例子：

Button.prototype.press = function() {
  console.log("pressed");
};

// 這時(shí)再用我們的 withClickable，就會(huì)覆蓋掉 press
withClickable.call(Button.prototype);

這時(shí)候我們應(yīng)該采用Advice，Twitter的Flight框架已經(jīng)提供了此功能：

var withClickable = function () {
  this.after("press", function () {
    console.log("press again.");
  });
};

withAdvice.call(Button.prototype);
withClickable.call(Button.prototype);

var button = new Button();
button.press(); // 輸出 "pressed", "press again."

兩個(gè)press并不會(huì)互相沖突，而是有先后順序的執(zhí)行，就類(lèi)似通過(guò)addEventListener添加了多個(gè)事件而不是直接修改onclick一樣，具體細(xì)節(jié)可以參考Flight的API。

小結(jié)

作為一名程序員，我們或許在上學(xué)時(shí)就被灌輸了面向?qū)ο蟮墓逃兴枷耄吘姑嫦驅(qū)ο髲纳鲜兰o(jì)90年代到現(xiàn)在，經(jīng)久不衰，自由它的優(yōu)勢(shì)。但是在JavaScript中，如果你并不善于面向?qū)ο蟮某橄笏季S，何不嘗試一下Mixins呢？而且Mixins與類(lèi)繼承相比，還能更好的解耦合，可以用于任何Object之上，正好用上了JavaScript若類(lèi)型的優(yōu)勢(shì)。

最近在讀《Beautiful JavaScript》這本書(shū)，有一些好的內(nèi)容，正好可以跟大家分享，但并不是全部，有興趣的同學(xué)也可以自己讀一下，請(qǐng)支持正版。

原文鏈接：http://t.cn/RteECIF
微信號(hào)：程序員晉級(jí)之路『code-learning』