javascriptRGB顏色轉換到16進位制詳解

本章節分享一段程式碼例項，它實現了RGB顏色轉換為16進位制的功能。

好像在實際應用中，16進位制顏色格式的使用遠遠要比RGB的要多。

程式碼例項如下:

[JavaScript] 純文字檢視 複製程式碼
//顏色轉換
var Color = function() {
  if (!(this instanceof Color)) {
   var color = new Color();
   color._init.apply(color, arguments);
   return color;
  }
  if (arguments.length) {
   this._init.apply(this, arguments);
  }
}
//設定get，set方法
var methods = ["red", "green", "blue", "colorValue"];
var defineSetGetMethod = function(fn, methods) {
  var fnPrototype = fn.prototype;
  for (var index = 0; index < methods.length; index++) {
   var methodName = methods[index].charAt(0).toLocaleUpperCase() + methods[index].substring(1);
   fn.prototype['set' + methodName] = new Function("value", "this." + methods[index] + "= value;");
   fn.prototype['get' + methodName] = new Function("return this." + methods[index] + ";");
   fn.prototype['toString'] = new Function('return "rgb("+this.red+","+this.green+","+this.blue+")";');
  }
};
defineSetGetMethod(Color, methods);
//擴充套件函式的例項方法
var extend = function(fn, option) {
  var fnPrototype = fn.prototype;
  for (var index in option) {
   fnPrototype[index] = option[index];
  }
};
extend(Color, {
  _init : function() {
   if (arguments.length == 3) {
    this.red = arguments[0];
    this.green = arguments[1];
    this.blue = arguments[2];
    this.getColorValue();
   } else {
    var colorValue = arguments[0].replace(/^\#{1}/, "");
    if (colorValue.length == 3) {
     colorValue = colorValue.replace(/(.)/g, '$1$1');
    }
    this.red = parseInt('0x' + colorValue.substring(0, 2), 16);
    this.green = parseInt('0x' + colorValue.substring(2, 4), 16);
    this.blue = parseInt('0x' + colorValue.substring(4), 16);
    this.colorValue = "#" + colorValue;
   }
  },
  getColorValue : function() {
   if (this.colorValue) {
    return this.colorValue;
   }
   var hR = this.red.toString(16);
   var hG = this.green.toString(16);
   var hB = this.blue.toString(16);
   return this.colorValue = "#"
   + (this.red < 16 ? ("0" + hR) : hR) 
   + (this.green < 16 ? ("0" + hG) : hG) 
   + (this.blue < 16 ? ("0" + hB) : hB);
  }
});
var color=new Color();
color.setRed(14);
color.setGreen(124);
color.setBlue(29);
console.log(color.getColorValue());
console.log(Color(12,34,56).getColorValue());
console.log(Color("#fff").getColorValue())
console.log(Color("#defdcd").getColorValue())

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.var Color = function() {}，建立一個Color建構函式。

（2）.if (!(this instanceof Color)) {

  var color = new Color();

  color._init.apply(color, arguments);

  return color;

}，判斷this是否是Color的物件例項，其實也就是判斷是否使用new 運算子來呼叫Color()

var color = new Color()，建立物件例項。

color._init.apply(color, arguments)，呼叫_init()方法進行物件初始化操作。

return color，返回建立的物件。

其實這個方式和jQuery建立物件的方式是相同的，大家知道建立一個jQuery物件沒必要採用new jQuery()的方式，直接使用jQuery("#id")類似於這種方式就可以。這裡也是模擬這種方式。

（3）.if (arguments.length) {

  this._init.apply(this, arguments);

}，這種是採用new的方式來建立一個物件。

（4）.var methods = ["red", "green", "blue", "colorValue"]，建立一個陣列，裡面儲存了一些關鍵字，後面會用到。

（5）.var defineSetGetMethod = function(fn, methods){}，建立一個方法為建構函式新增一些設定或者獲取rgb顏色值的方法。

（6）.var fnPrototype = fn.prototype，將原型物件賦值給變數fnPrototype。

（7）.for (var index = 0; index < methods.length; index++) {}，進行遍歷操作。

（8）.var methodName = methods[index].charAt(0).toLocaleUpperCase() + methods[index].substring(1)，如果陣列中的當前元素是"red"，那麼就會被轉換為"Red"。

（9）.fn.prototype['set' + methodName] = new Function("value", "this." + methods[index] + "= value;")，新增一個新的方法，此方法可以設定RGB顏色中的對應部分的值。

（10）.fn.prototype['get' + methodName] = new Function("return this." + methods[index] + ";")，獲取RGB顏色中對應部分的值。

（11）.fn.prototype['toString'] = new Function('return "rgb("+this.red+","+this.green+","+this.blue+")";')，獲取完整的RGB值。

（12）.defineSetGetMethod(Color, methods)，呼叫此方法進行相關操作。

（13）.var extend = function(fn, option) {

  var fnPrototype = fn.prototype;

  for (var index in option) {

    fnPrototype[index] = option[index];

  }

}，此方法可以通過原型擴充套件物件。

（14）.extend(Color, {})，為Color的物件例項擴充套件了兩個方法。

（15）. _init : function() {}，此方法可以初始化物件例項。

（16）.if (arguments.length == 3) {

  this.red = arguments[0];

  this.green = arguments[1];

  this.blue = arguments[2];

  this.getColorValue();

}判斷傳遞的引數是否不是三個，也就是Color(12,34,56)這種RGB形式的。

那麼就將對應的R、G和B三個對應的值賦值給對應屬性。

最後呼叫getColorValue()方法。

（17）.var colorValue = arguments[0].replace(/^\#{1}/, "")，如果是傳遞的#fff或者#defdcd形式的引數，那麼將#去掉。

（18）.if (colorValue.length == 3) {

  colorValue = colorValue.replace(/(.)/g, '$1$1');

}，如果字串的長度等於3，也就是#fff這種形式，那麼就會被替換成完整的形式#ffffff。

（19）.this.red = parseInt('0x' + colorValue.substring(0, 2), 16)，將對應的R值轉換為數字（以十進位制形式表示的16進位制）。

（20）.this.colorValue = "#" + colorValue，前面加#返回顏色值。

（21）.getColorValue : function() {}，返回轉換後的值。

（22）.if (this.colorValue) {  return this.colorValue;

}，判斷是否存在colorValue屬性，如果存在直接返回即可。

（23）.var hR = this.red.toString(16)，將對應的R的顏色值轉換為16進位制。

（24）.return this.colorValue = "#" 

  + (this.red < 16 ? ("0" + hR) : hR) 

  + (this.green < 16 ? ("0" + hG) : hG) 

  + (this.blue < 16 ? ("0" + hB) : hB);

}返回最終的轉換後的16進位制格式顏色。

二.相關閱讀:

（1）.instanceof可以參閱javascript instanceof一章節。

（2）.apply()可以參閱javascript apply()一章節。

（3）.arguments可以參閱Javascript arguments物件一章節。

（4）.prototype屬性可以參閱javascript prototype一章節。

（5）.charAt()方法可以參閱javascript String charAt()一章節。

（6）.toLocaleUpperCase()方法可以參閱JavaScript toLocaleUpperCase()一章節。

（7）.replace()方法可以參閱replace()一章節。

（8）.parseInt()方法可以參閱javascript parseInt()一章節。

（9）.substring()方法可以參閱substring()一章節。