摘要：在編寫的過(guò)程中，涉及到了中的各種位運(yùn)算符，對(duì)進(jìn)制色值的處理不再是循環(huán)遍歷了。只對(duì)位運(yùn)算符感興趣的建議直接閱讀目錄中的色值的快速轉(zhuǎn)換。通過(guò)閱讀類，可以知道最終屬性均為一個(gè)或構(gòu)造出來(lái)的對(duì)象，接下來(lái)就具體說(shuō)說(shuō)類中的這些位運(yùn)算符起到了什么作用。

從最近寫的一個(gè)圖表庫(kù)中多帶帶抽象出來(lái)了顏色類庫(kù)，功能包括HEX、RGB/RGBA以及HSL/HSLA各種色值的轉(zhuǎn)換以及顏色明暗變化。
在編寫的過(guò)程中，涉及到了JS中的各種位運(yùn)算符，對(duì)16進(jìn)制色值的處理不再是循環(huán)遍歷了。只對(duì)位運(yùn)算符感興趣的建議直接閱讀目錄中的“HEX色值的快速轉(zhuǎn)換”。

先上兩張圖，循環(huán)了1600個(gè)div，分別設(shè)置顏色的漸變和隨機(jī)。雖然現(xiàn)在css中對(duì)顏色的處理方法越來(lái)越豐富，但在一些場(chǎng)景——例如可視化圖表中我們還是需要用JS來(lái)控制顏色。

將各種格式的色值進(jìn)行統(tǒng)一，方便操作，也確保展示效果一致。

對(duì)顏色進(jìn)行明暗處理，最明時(shí)為白色(#fff)，最暗時(shí)為黑色(#000)。

其中顏色格式包括：

3位Hex值

6位Hex值

整數(shù)型RGB

百分比型RGB

整數(shù)型RGBA

百分比型RGBA

HSL

HSLA

常見的顏色命名，如black

要實(shí)現(xiàn)以上的功能，流程上應(yīng)該包括：

通過(guò)正則表達(dá)式檢測(cè)顏色格式。

將顏色統(tǒng)一為一種最易操作的格式。由于我們的操作主要為明暗操作，那么RGB/RGBA格式顯然是最方便的，因此將各種格式統(tǒng)一為RGB/RGBA。

為每個(gè)格式化后的顏色添加“變明”、“變暗”兩個(gè)方法，并返回一個(gè)新的標(biāo)準(zhǔn)格式顏色對(duì)象，以便鏈?zhǔn)秸{(diào)用。

顏色對(duì)象還需要有一個(gè)輸出顏色字符串的方法，以便在所有操作完成后輸出最終的色值添加給對(duì)應(yīng)的Dom。

注意，此類庫(kù)使用了部分ES6語(yǔ)法，如需轉(zhuǎn)化為瀏覽器可直接使用的版本，可用babel進(jìn)行轉(zhuǎn)換。

檢測(cè)格式時(shí)，主要依靠的是正則表達(dá)式，具體如下：

const reHex3 = /^#([0-9a-f]{3})$/
const reHex6 = /^#([0-9a-f]{6})$/
const reRgbInteger = /^rgb(s*([-+]?d+)s*,s*([-+]?d+)s*,s*([-+]?d+)s*)$/
const reRgbPercent = /^rgb(s*([-+]?d+(?:.d+)?)%s*,s*([-+]?d+(?:.d+)?)%s*,s*([-+]?d+(?:.d+)?)%s*)$/
const reRgbaInteger = /^rgba(s*([-+]?d+)s*,s*([-+]?d+)s*,s*([-+]?d+)s*,s*([-+]?d+(?:.d+)?)s*)$/
const reRgbaPercent = /^rgba(s*([-+]?d+(?:.d+)?)%s*,s*([-+]?d+(?:.d+)?)%s*,s*([-+]?d+(?:.d+)?)%s*,s*([-+]?d+(?:.d+)?)s*)$/
const reHslPercent = /^hsl(s*([-+]?d+(?:.d+)?)s*,s*([-+]?d+(?:.d+)?)%s*,s*([-+]?d+(?:.d+)?)%s*)$/
const reHslaPercent = /^hsla(s*([-+]?d+(?:.d+)?)s*,s*([-+]?d+(?:.d+)?)%s*,s*([-+]?d+(?:.d+)?)%s*,s*([-+]?d+(?:.d+)?)s*)$/

對(duì)于已命名的顏色，則構(gòu)建了一個(gè)named對(duì)象，key為顏色名稱，value則為16進(jìn)制色值，例如：

const named = {
  aliceblue: 0xf0f8ff,
  antiquewhite: 0xfaebd7,
  ...
  yellowgreen: 0x9acd32
}

通過(guò)named.hasOwnProperty方法來(lái)檢測(cè)輸入的字符串是否是已命名的顏色，如果是，則用其16進(jìn)制色值替換。

實(shí)際上，我創(chuàng)建了3個(gè)class，分別為Color、Rgb和Hsl。以上的顏色檢測(cè)均放在Color的format方法中，將格式化之后的顏色放入Color的f屬性里，代碼如下：

class Color {
  constructor () {
    this.f = {}
  }
  format (str) {
    let m
    str = (str + "").trim().toLowerCase()
    if (reHex3.exec(str)) {
      m = parseInt(reHex3.exec(str)[1], 16)
      this.f = new Rgb((m >> 8 & 0xf) | (m >> 4 & 0x0f0), (m >> 4 & 0xf) | (m & 0xf0), ((m & 0xf) << 4) | (m & 0xf), 1)
    } else if (reHex6.exec(str)) {
      m = parseInt(reHex6.exec(str)[1], 16)
      this.f = this.rgbn(m)
    } else if (reRgbInteger.exec(str)) {
      m = reRgbInteger.exec(str)
      this.f = new Rgb(m[1], m[2], m[3], 1)
    } else if (reRgbPercent.exec(str)) {
      m = reRgbPercent.exec(str)
      const r = 255 / 100
      this.f = new Rgb(m[1] * r, m[2] * r, m[3] * r, 1)
    } else if (reRgbaInteger.exec(str)) {
      m = reRgbaInteger.exec(str)
      this.f = this.rgba(m[1], m[2], m[3], m[4])
    } else if (reRgbaPercent.exec(str)) {
      m = reRgbaPercent.exec(str)
      const r = 255 / 100
      this.f = this.rgba(m[1] * r, m[2] * r, m[3] * r, m[4])
    } else if (reHslPercent.exec(str)) {
      m = reHslPercent.exec(str)
      this.f = this.hsla(m[1], m[2] / 100, m[3] / 100, 1)
    } else if (reHslaPercent.exec(str)) {
      m = reHslaPercent.exec(str)
      this.f = this.hsla(m[1], m[2] / 100, m[3] / 100, m[4])
    } else if (named.hasOwnProperty(str)) {
      this.f = this.rgbn(named[str])
    } else if (str === "transparent") {
      this.f = new Rgb(NaN, NaN, NaN, 0)
    } else {
      this.f = null
      throw new Error("Invalid color format.")
    }
    return this.f
  }
  rgbn (n) {
    return new Rgb(n >> 16 & 0xff, n >> 8 & 0xff, n & 0xff, 1)
  }
  rgba (r, g, b, a) {
    if (a <= 0) r = g = b = NaN
    return new Rgb(r, g, b, a)
  }
  hsla (h, s, l, a) {
    if (a <= 0) {
      h = s = l = NaN
    } else if (l <= 0 || l >= 1) {
      h = s = NaN
    } else if (s <= 0) {
      h = NaN
    }
    return new Hsl(h, s, l, a).rgb()
  }
}

為了方便讀者快速理解代碼，用了大量的if / else if，實(shí)際可以用三元表達(dá)式替代，讓代碼更優(yōu)雅緊湊。
通過(guò)閱讀Color類，可以知道最終f屬性均為一個(gè) new Rgb 或 new Hsl 構(gòu)造出來(lái)的對(duì)象，接下來(lái)就具體說(shuō)說(shuō)Color類中的這些位運(yùn)算符起到了什么作用。

HSL和RGB的轉(zhuǎn)換沒(méi)有什么黑魔法，都是查Wiki之后寫的方法，大同小異，所以重點(diǎn)講講16進(jìn)制色值是怎樣處理的。
網(wǎng)上資料中，大部分的HEX轉(zhuǎn)Rgb都是通過(guò)遍歷字符串，將HEX色值分隔，再轉(zhuǎn)化為10進(jìn)制數(shù)字。但在閱讀d3.js的源碼后，發(fā)現(xiàn)還有更巧妙的處理方法。

首先補(bǔ)充一下HEX色值的基本概念。HEX色值可以為3位或者6位，3位可以理解為一種簡(jiǎn)寫,如#123，實(shí)際等于#112233。
而對(duì)于一個(gè)6位的HEX色值，如#112233，在轉(zhuǎn)換為RGB時(shí)，實(shí)際是每?jī)晌粚?duì)應(yīng)RGB中的一個(gè)值，即11、22、33分別對(duì)應(yīng)R、G、B。

首先以6位HEX色值為例，我們通過(guò)正則表達(dá)式取出其值后，parseInt(str, 16)轉(zhuǎn)化為16進(jìn)制數(shù)字，也可以通過(guò)在前面加上"0x"來(lái)達(dá)到這一效果，目的都是告訴解析器，它是一個(gè)16進(jìn)制的數(shù)。依然以#112233為例，具體看看代碼：

const m = parseInt("112233", 16) // 0x112233

// 分別獲取R、G、B的值
const r = m >> 16 & 0xff // 17
const g = m >> 8 & 0xff // 34
const b = m & 0xff // 51

那么>>和&分別起什么作用，為什么這樣一操作就能直接取出對(duì)應(yīng)數(shù)值呢？

>>是JS中的右移運(yùn)算符，用于將數(shù)字的二進(jìn)制右移n位。對(duì)于一個(gè)16進(jìn)制的數(shù)字而言，每一位數(shù)字都對(duì)應(yīng)4位2進(jìn)制數(shù)字，如0x112233的二進(jìn)制就是0001 0001 0010 0010 0011 0011。
因此要取出最左端11對(duì)應(yīng)的10進(jìn)制數(shù)字，只需要將其右移16位，剩下左起的8位即可。

那么當(dāng)我們需要取中間的22和最右端的33時(shí)該怎么辦呢？這就需要用到&。&是JS中位的與運(yùn)算，說(shuō)起來(lái)有點(diǎn)繞口，實(shí)際就是將兩端的值的二進(jìn)制按位一一取與運(yùn)算。

所以我們實(shí)際看看取22和33時(shí)發(fā)生了什么：

// 0x112233的二進(jìn)制為0001 0001 0010 0010 0011 0011
let n = 0x112233 >> 8 // 0001 0001 0010 0010
// 將n和0xff按位與運(yùn)算，0xff的二進(jìn)制為1111 1111
n & 0xff // 0010 0010 也就是 0x22
n = 0x112233 & 0xff // 0011 0011 也就是 0x33

簡(jiǎn)單的說(shuō)，就是通過(guò)與0xff這個(gè)二進(jìn)制最右端8均為1的數(shù)與運(yùn)算，從而取出目標(biāo)數(shù)最右端的八位，并舍棄其余所有位數(shù)。
總的來(lái)說(shuō)，就是先用>>調(diào)整位置，再用&篩選。

我們接著處理3位HEX值，以#123為例，取出對(duì)應(yīng)的R、G、B。

const m = parseInt("123", 16) // 0x123
const r = (m >> 8 & 0xf) | (m >> 4 & 0x0f0) // 17
const g = (m >> 4 & 0xf) | (m & 0xf0) // 34
const b = ((m & 0xf) << 4) | (m & 0xf) // 51

代碼中出現(xiàn)的|是位的或運(yùn)算符，機(jī)制和&相類似。<<則是和>>對(duì)應(yīng)的左移運(yùn)算符。
同樣一步一步看看|是怎么起到作用的：

// 0x123的二進(jìn)制為0001 0010 0011
0x123 >> 8 & 0xf // 0001
0x123 >> 4 & 0x0f0 // 0001 0000
0001 | 0001 0000 // 0001 0001 也就是 0x11

0x123 >> 4 & 0xf // 0010
0x123 & 0xf0 // 0010 0000
0010 | 0010 0000 // 0010 0010 也就是 0x22

(0x123 & 0xf) << 4 // 0011 0000
0x123 & 0xf // 0011
0011 0000 | 0011 // 0011 0011 也就是 0x33

思路和6位時(shí)一樣，只是增加了<<和|，更靈活的操作各種位運(yùn)算。

之后要做的主要就是一些HSL轉(zhuǎn)換、明暗變化以及各種錯(cuò)誤處理，都是比較常規(guī)的做法，這里不多做贅述，有興趣的可以看看代碼：https://github.com/Yuyz0112/v...