上次给大家分享了如何用js实现剪切板粘贴上传图片,今天跟大家分享下JS Base64编码解码。
1. 基础不牢,选型糟糕
糟糕的技术选型往往源自自身技术广度不足。就在数月前,一个前端HTML字符信息转Base64的需求,我是毫不犹豫去找了个开源的base64.js。使用很简单,浏览器引入该JS文件,然后Base64编码这样:
解码就调用decode方法,如下:
数据准确,功能良好。当时弄完还洋洋得意,以为是个完美的解决。结果,今天发现,尼玛原来浏览器很早就支持了JS Base64加密解密,而上面这种洋洋得意的做法完全就是瞎子点灯——白费蜡!根本就不是一个好的技术选型。
由于技术广度掌握不足,或者说JS基础掌握不牢,导致浪费了大把时间去找Base64的JS语言库,学习其API用法,换来一个冗余完全不需要加载的JS,现在来看,真是个糟糕的技术选型。
2. 原生atob和btoa方法
实际上,从IE10+浏览器开始,所有浏览器就原生提供了Base64编码解码方法,不仅可以用于浏览器环境,Service Worker环境也可以使用。
方法名就是atob和btoa,具体语法如下:
1)Base64解码
语法为(浏览器中):
var decodedData = window.atob(encodedData);
或者(浏览器或js Worker线程中):
var decodedData = self.atob(encodedData);
例如:
window.atob('emhhbmd4aW54dQ=='); // 返回:'zhangxinxu'
atob这个方法名称乍一看,很奇怪,不知道这个单词什么意思。我们可以理解为 A to B,也就是从A到B。这里的B指的就是Base64吗?哈哈哈,恭喜你!猜错了!A指的才是Base64,反的,B才是普通字符,普通意思就是low,俗称low B。所以我们这么记忆,Low B,Low B,B表示很Low的普通字符,A才是Base64,和首字母对应关系是反的。
因此,atob表示Base64字符to普通字符,也就是Base64解码。
2)Base64编码
语法为(浏览器中):
var encodedData = window.btoa(stringToEncode);
或者(浏览器或js Worker线程中):
var encodedData = self.btoa(stringToEncode);
例如:
window.btoa('zhangxinxu'); // 返回:'emhhbmd4aW54dQ=='
btoa这个方法名称乍一看,很奇怪,不知道这个单词什么意思。我们可以理解为 B to A,也就是从B到A。那B指什么,A指什么呢?和atob方法一样,B指的是low B普通字符串,A指的是Base64字符。
因此,btoa方法表示low B普通字符to Base64字符,也就是Base64编码。
3. IE8/IE9的polyfill
当下,仍有不少PC项目还需要兼容IE9,所以,我们可以专门针对这些浏览器再引入一段ployfill脚本或者一个JS文件即可。
实际使用,我们可以借助IE条件注释无缝对接。也就是HTML中嵌入下面一段代码:
[if IE]表示所有IE浏览器,由于IE10+浏览器已经放弃了著名的IE条件注释的支持,Chrome等浏览器本身就不支持这个IE私有语法,因此,很天然的,上面一段script引入只在IE9-浏览器下有效。而我们本来就希望只IE8,IE9浏览器引入ployfill,于是正好完美衔接上。
也就是原生支持atob和btoa方法的浏览器认为就是一段无需关心的HTML注释,不支持atob和btoa的IE9及其以下浏览器则会加载我们的base64-polyfill.js,使浏览器也支持window.btoa和window.atob这个语法。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持易盾网络。