程序员人生网站导航

JavaScript优化篇：BASE64极速版

栏目：jscript时间：2013-11-11 23:57:45

　　网(LieHuo.Net)教程 BASE64原理很简单，但要写出一个高效的，尤其是用JS这样高灵活低效率的脚本，还需斟酌一翻。

　　先看看网上比较流行的版本。首先声明64个常量字符：

以下为引用的内容：
var key = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";

　　这一步大家都一样，也没有更好的方法列出这些字符。但接下来的做法，就大有讲究了。因为这里的key是一个String，所以各个版本里都大量充斥着charAt，甚至indexOf函数来操作这个key。用charAt来访问key的第n个字符，这还在清理之中;但用indexOf来确定字符的位置，就不可原谅了。在VBScript里倒还能凑合着用，但在JS里这种做法是很糟糕的，显然没有把其灵活性发挥出来。何谓灵活性，用最短的话说就是多用哈希表。哈希表是JS与生俱来就有的东西，其效率是其他方法都不能相比的。显然，在BASE64这样数字与字符频繁转换的算法里，hash是该大显身手的。

　　再谈charAt的问题。charAt虽然不会像indexOf那样效率数量级的下降，但也不是最优秀的。脚本程序分两类，一类是自己写的，另类就是系统内置在浏览器中的，就是所谓的[Native Code]。后者的效率当然是远高于前者，这大家都知道。所以尽可能多让代码交给系统执行，有时看起来可能计算量变大了，但最终的速度反倒提升了。

　　就说BASE64解码的过程，参数是个String，按常规的方法就是先charAt其每个字符。如果有1万个字符，那么charAt也就运行了1万次。能否将多次charAt函数的执行合并到1次本地代码的调用上呢,当然可以：

　　var arr = str.split('');

　　之后的str.charAt(i)就可以用arr[i]代替了。此方法虽多开辟的一块内存，但最终的效率还是有所提高，并且增强了代码可读性。当然，在运行速度极快的浏览器比如FireFox,Chrome就没什么区别，甚至还可能倒退。

　　最后就是一个层次上的问题。网上常有人在说BASE64如何支持中文。按照这种说法，BASE64用来编码解码字符串了，这与其意义多少有些偏离。BASE64的最初就是将二进制文件转成可见字符，在邮件里发送。因此其意义就在于二进制与字符的转换，而不是字符与字符的转换。JS没有二进制，但可以用0-255的数组来模拟。所以：

　　function 编码函数(Array[]){return String;}

　　function 解码函数(String){return Array[];}

　　至于中文的问题，无非就是Unicode与ANSI的转换。JS貌似没有现成的转换函数，若要实现可以用Unicode与ANSI的对照表。但双方的编码/解码都统一使用Unicode，也就

　　不存在支不支持的问题了。

　　最终的代码：

以下为引用的内容：
<script>
var mapEn = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/".split('');
var mapDe = {};

for(var i=0; i<64; i++)
mapDe[mapEn[i]] = i;

/*
* 函数: Base64Encode
* 说明: 编码
* 教程:网liehuo.net
*/
function Base64Encode(data)
{
var buf = [];
var map = mapEn;
var n = data.length; //总字节数
var val; //中间值
var i = 0;

/*
* 3字节 ==> val ==> 4字符
*/
while(i < n)
{
val = (data[ i ] << 16) |
(data[i+1] << 8) |
(data[i+2]);

buf.push(map[val>>18],
map[val>>12 & 63],
map[val>>6 & 63],
map[val & 63]);
i += 3;
}

if(n%3 == 1) //凑两个"="
buf.pop(),buf.pop(),buf.push('=', '=');
else //凑一个"="
buf.pop(),buf.push('=');

return buf.join('');
}

/*
* 函数: Base64Decode
* 说明: 解码
*/
function Base64Decode(str)
{
var buf = [];
var arr = str.split('');
var map = mapDe;
var n = arr.length; //总字符数
var val; //中间值
var i=0;

/*
* 长度异常
*/
if(n % 4)
return;

/*
* 4字符 ==> val ==> 3字节
*/
while(i < n)
{
val = (map[arr[ i ]] << 18) |
(map[arr[i+1]] << 12) |
(map[arr[i+2]] << 6) |
(map[arr[i+3]]);

buf.push(val>>16,
val>>8 & 0xFF,
val & 0xFF);
i += 4;
}

/*
* 凑字字符"="个数
*/
while(arr[--n] == '=')
buf.pop();

return buf;
}
</script>

------分隔线----------------------------

上一篇 隐藏滚动条的多种方法与实例分析

下一篇 Linux操作系统系列之“载入点”

------分隔线----------------------------