摘要：筆者在編碼詳解與中編碼實(shí)踐一文中介紹了中編碼相關(guān)的基礎(chǔ)知識(shí)，其中沒(méi)有介紹純粹的編解碼方案，筆者后來(lái)根據(jù)網(wǎng)上的代碼完善了下這個(gè)庫(kù)，并且對(duì)中三種不同的編解碼方案進(jìn)行了比較。

Here is English Version For README

筆者在URL編碼詳解與DOM中GBK編碼實(shí)踐一文中介紹了JavaScript中URL編碼相關(guān)的基礎(chǔ)知識(shí)，其中沒(méi)有介紹純粹的JavaScript編解碼方案，筆者后來(lái)根據(jù)網(wǎng)上的代碼完善了下Isomorphic Urlencode這個(gè)庫(kù)，并且對(duì)JavaScript中三種不同的編解碼方案進(jìn)行了比較。核心的出發(fā)點(diǎn)為

對(duì)于瀏覽器中版本使用純粹的前端代碼實(shí)現(xiàn)GBK編碼

保證能夠在Node與Browser環(huán)境下實(shí)現(xiàn)無(wú)縫對(duì)切

可以使用npm命令直接安裝該依賴:

npm install --save isomorphic-urlencode

基于純粹的JavaScript優(yōu)勢(shì)在于可以跨平臺(tái)使用，不過(guò)缺陷在于其性能相對(duì)較差，另外目前只支持GBK/GB2312編碼，不如另外兩種可以用于其他編碼規(guī)范。在使用純粹的JavaScript中，如果使用UTF8編碼，那么直接調(diào)用JavaScript內(nèi)置的encodeURIComponent，如果使用GBK編碼，那么會(huì)使用如下兩個(gè)函數(shù)，其關(guān)鍵代碼為:

function gbkEncode(str) {
  return str.replace(/./g, function (a) {
    var code = a.charCodeAt(0);
    if (isAscii(code)) {
      return encodeURIComponent(a);
    } else {
      var key = code.toString(16);
      if (key.length != 4)key = ("000" + key).match(/....$/)[0];
      return U2Ghash[key] || a;
    }
  });
}

function gbkDecode(str, callback) {
  return str.replace(/%[0-9A-F]{2}%[0-9A-F]{2}/g, function (a) {
    if (a in G2Uhash) {
      return String.fromCharCode("0x" + G2Uhash[a]);
    } else {
      return a;
    }
  }).replace(/%[w]{2}/g, function (a) {

    return decodeURIComponent(a);

  });
}

Node版本使用了 node-urlencode，其對(duì)于UTF8的編解碼也是使用了JavaScript內(nèi)置的encodeURIComponent，而對(duì)于GBK等其他編碼使用了iconv-lite這個(gè)庫(kù):

function encode(str, charset) {
  if (isUTF8(charset)) {
    return encodeURIComponent(str);
  }

  var buf = iconv.encode(str, charset);
  var encodeStr = "";
  var ch = "";
  for (var i = 0; i < buf.length; i++) {
    ch = buf[i].toString("16");
    if (ch.length === 1) {
      ch = "0" + ch;
    }
    encodeStr += "%" + ch;
  }
  encodeStr = encodeStr.toUpperCase();
  return encodeStr;
}

如果你是在瀏覽器環(huán)境中使用,請(qǐng)?jiān)贖TML文件頭部添加:

if (parent._urlEncode_iframe_callback) {

    parent._urlEncode_iframe_callback(location.search.split("=")[1]);

    //直接關(guān)閉當(dāng)前子窗口
    window.close();
}

注意,上面一段代碼是將自身作為iframe的加載地址,因此務(wù)必放在HTML文件首部。然后在JS代碼中使用:

var urlencode = require("isomorphic-urlencode").dom;

urlencode("王下邀月熊").then(function (data) {
  console.log(data);

  //測(cè)試解碼
  urlencode.decode(data).then(function (data) {
    console.log(data);
  })
});

urlencode("王下邀月熊", "gbk").then(function (data) {
  console.log(data);

  //測(cè)試解碼
  urlencode.decode(data, "gbk").then(function (data) {
    console.log(data);
  })
});

瀏覽器版本主要基于iframe與form實(shí)現(xiàn),詳細(xì)原理參考這篇博客

主要的測(cè)試代碼如下所示，從結(jié)果中可見(jiàn)對(duì)于大數(shù)據(jù)串還是使用DOM效率較好，但是基于DOM的解決方案需要嵌入iframe，這個(gè)可能造成額外的代碼侵入與性能損耗。

/**
 * Created by apple on 16/9/8.
 */

var urlencode = require("../urlencode");

var urlencodeDOM = require("../urlencode").dom;


//測(cè)試長(zhǎng)字符串編碼時(shí)間
var str = "";

for (i = 0; i < 100000; i++) {
  str += "王下邀月熊";
}

console.time("基于Pure JavaScript的編解碼");

urlencode.decode(urlencode(str, "gbk"), "gbk");

console.timeEnd("基于Pure JavaScript的編解碼");


console.time("基于DOM的編解碼");

urlencodeDOM(str, "gbk").then(function (data) {

  //測(cè)試解碼
  urlencodeDOM.decode(data, "gbk").then(function (data) {
    console.timeEnd("基于DOM的編解碼")
  })
});

//測(cè)試短時(shí)間內(nèi)多次編碼
var timerPure = 0;

var timerDOM = 0;

str = "王下邀月熊";

for (i = 0; i < 1000; i++) {

  var start = new Date();

  urlencode.decode(urlencode(str, "gbk"), "gbk");

  timerPure += new Date().getMilliseconds() - start.getMilliseconds();

  (function test(start) {

    urlencodeDOM(str, "gbk").then(function (data) {

      //測(cè)試解碼
      urlencodeDOM.decode(data, "gbk").then(function (data) {
        timerDOM += new Date().getMilliseconds() - start.getMilliseconds();

        console.log("timerDOM:" + timerDOM);

      })
    });

  })(new Date());

}
console.log("timerPure:" + timerPure);

// 基于Pure JavaScript的編解碼: 526.27ms
// 基于DOM的編解碼: 155.32ms

主要的測(cè)試代碼如下所示，可以看出基于Node的編解碼速度會(huì)快于純粹的JavaScript編解碼。

/**
 * Created by apple on 16/9/8.
 */
var urlencode = require("./urlencode");
var urlencodeNode = require("./node-urlencode");


//測(cè)試長(zhǎng)字符串編碼時(shí)間
var str = "";

for (i = 0; i < 1000000; i++) {
  str += "王下邀月熊";
}

console.time("基于Pure JavaScript的編解碼");

urlencode.decode(urlencode(str));

urlencode.decode(urlencode(str, "gbk"), "gbk");

console.timeEnd("基于Pure JavaScript的編解碼");


console.time("基于NODE的編解碼");

urlencodeNode.decode(urlencode(str));

urlencodeNode.decode(urlencode(str, "gbk"), "gbk");

console.timeEnd("基于NODE的編解碼");


// 基于Pure JavaScript的編解碼: 526.27ms
// 基于DOM的編解碼: 155.32ms

//測(cè)試短時(shí)間內(nèi)多次編碼
var timerPure = 0;

var timerNODE = 0;

str = "王下邀月熊王下邀月熊王下邀月熊王下邀月熊";

for (i = 0; i < 1000; i++) {

  var start = new Date();

  urlencode.decode(urlencode(str));
  urlencode.decode(urlencode(str, "gbk"), "gbk");

  timerPure += new Date().getMilliseconds() - start.getMilliseconds();
}

for (i = 0; i < 1000; i++) {

  var start = new Date();

  urlencodeNode.decode(urlencode(str));
  urlencodeNode.decode(urlencode(str, "gbk"), "gbk");

  timerNODE += new Date().getMilliseconds() - start.getMilliseconds();

}

console.log("timerPure:" + timerPure);

console.log("timerNODE:" + timerNODE);

// 基于Pure JavaScript的編解碼: 10932.610ms
// 基于NODE的編解碼: 7585.223ms
// timerPure:28
// timerNODE:31

使用node node-urlencode.test.js來(lái)測(cè)試Node環(huán)境下轉(zhuǎn)碼。
使用webpack demo/demo.js demo/demo.dist.js,然后在瀏覽器中打開(kāi)demo.html,在Console中可以查看運(yùn)行結(jié)果