解析原来浏览器原生支持JS Base64编码解码


Posted in Javascript onAugust 12, 2019

上次给大家分享了如何用js实现剪切板粘贴上传图片,今天跟大家分享下JS Base64编码解码。

1. 基础不牢,选型糟糕

糟糕的技术选型往往源自自身技术广度不足。就在数月前,一个前端HTML字符信息转Base64的需求,我是毫不犹豫去找了个开源的base64.js。使用很简单,浏览器引入该JS文件,然后Base64编码这样:

解析原来浏览器原生支持JS Base64编码解码

解码就调用decode方法,如下:

解析原来浏览器原生支持JS Base64编码解码

数据准确,功能良好。当时弄完还洋洋得意,以为是个完美的解决。结果,今天发现,尼玛原来浏览器很早就支持了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中嵌入下面一段代码:

解析原来浏览器原生支持JS Base64编码解码

[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这个语法。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript之querySelector和querySelectorAll使用介绍
Dec 20 Javascript
JS实现点击下载的小例子
Jul 10 Javascript
javascript自定义函数参数传递为字符串格式
Jul 29 Javascript
JavaScript中window.open用法实例详解
Apr 15 Javascript
深入了解JavaScript中的Symbol的使用方法
Jul 28 Javascript
js实现商城星星评分的效果
Dec 29 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
Jan 04 Javascript
js实现返回顶部效果
Mar 10 Javascript
javascript如何用递归写一个简单的树形结构示例
Sep 06 Javascript
vue获取dom元素注意事项
Dec 28 Javascript
使用微信小程序开发弹出框应用实例详解
Oct 18 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
Jun 17 Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
Aug 12 #Javascript
微信小程序实现页面跳转传递参数(实体,对象)
Aug 12 #Javascript
微信小程序实现传递多个参数与事件处理
Aug 12 #Javascript
node命令行工具之实现项目工程自动初始化的标准流程
Aug 12 #Javascript
五分钟搞懂Vuex实用知识(小结)
Aug 12 #Javascript
no-vnc和node.js实现web远程桌面的完整步骤
Aug 11 #Javascript
Angular8基础应用之表单及其验证
Aug 11 #Javascript
You might like
php公用函数列表[正则]
2007/02/22 PHP
php生成gif动画的方法
2015/11/05 PHP
phpMyAdmin无法登陆的解决方法
2017/04/27 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
类似php的js数组的in_array函数自定义方法
2013/12/27 Javascript
控制input输入框中提示信息的显示和隐藏的方法
2014/02/12 Javascript
如何使用jquery实现文字上下滚动效果
2016/10/12 Javascript
微信小程序实现顶部选项卡(swiper)
2020/06/19 Javascript
在react-router4中进行代码拆分的方法(基于webpack)
2018/03/08 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
2018/09/03 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
2019/05/02 Javascript
Vue 无限滚动加载指令实现方法
2019/05/28 Javascript
发布订阅模式在vue中的实际运用实例详解
2019/06/09 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
2020/07/28 Javascript
Nuxt 项目性能优化调研分析
2020/11/07 Javascript
学习python类方法与对象方法
2016/03/15 Python
浅析Python中的赋值和深浅拷贝
2017/08/15 Python
Python实现图片尺寸缩放脚本
2018/03/10 Python
python去除拼音声调字母,替换为字母的方法
2018/11/28 Python
python控制台实现tab补全和清屏的例子
2019/08/20 Python
PyCharm更改字体和界面样式的方法步骤
2019/09/27 Python
Python通过Manager方式实现多个无关联进程共享数据的实现
2019/11/07 Python
详解用 python-docx 创建浮动图片
2021/01/24 Python
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
2013/01/09 HTML / CSS
HTML5的表单(绝对特别强大的功能)使用示例
2013/06/20 HTML / CSS
Vans荷兰官方网站:美国南加州的原创极限运动潮牌
2018/01/23 全球购物
毕业生自荐信
2013/12/14 职场文书
圣诞节红领巾广播稿
2014/02/03 职场文书
少儿节目主持串词
2014/04/02 职场文书
护士先进个人总结
2015/02/13 职场文书
奔腾年代观后感
2015/06/09 职场文书
2015教师个人德育工作总结
2015/07/22 职场文书
委托开发合同书(标准版)
2019/08/07 职场文书
聊聊JS ES6中的解构
2021/04/29 Javascript
用Java实现简单计算器功能
2021/07/21 Java/Android
Python绘画好看的星空图
2022/03/17 Python