解析原来浏览器原生支持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-Mozilla和IE中的一个函数直接量的问题
Jan 09 Javascript
childNodes.length与children.length的区别
May 14 Javascript
JavaScript词法作用域与调用对象深入理解
Nov 29 Javascript
基于jQuery实现模拟页面加载进度条
Apr 01 Javascript
开源的javascript项目Kissy介绍
Nov 28 Javascript
node.js中的fs.readSync方法使用说明
Dec 17 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
Apr 18 Javascript
浅谈jquery的map()和each()方法
Jun 12 Javascript
JavaScript实现按键精灵的原理分析
Feb 21 Javascript
jQuery表单设置值的方法
Jun 30 jQuery
BootStrap table实现表格行拖拽效果
Dec 01 Javascript
vue-openlayers实现地图坐标弹框效果
Sep 24 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打开文件fopen函数的使用说明
2013/07/05 PHP
ThinkPHP 3.2 版本升级了哪些内容
2015/03/05 PHP
Yii中表单用法实例详解
2016/01/05 PHP
Zend Framework教程之MVC框架的Controller用法分析
2016/03/07 PHP
PHP常用正则表达式精选(推荐)
2019/05/28 PHP
PHP创建XML的方法示例【基于DOMDocument类及SimpleXMLElement类】
2019/09/10 PHP
js读取注册表的键值示例
2013/09/25 Javascript
jQuery使用hide方法隐藏元素自身用法实例
2015/03/30 Javascript
JavaScript实现在页面间传值的方法
2015/04/07 Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
2015/04/17 Javascript
javascript先序遍历DOM树的方法
2016/02/27 Javascript
jQuery.Form上传文件操作
2017/02/05 Javascript
Bootstrap BootstrapDialog使用详解
2017/02/17 Javascript
Angular中ng-bind和ng-model的区别实例详解
2017/04/10 Javascript
JS实现websocket长轮询实时消息提示的效果
2017/10/10 Javascript
python实现搜索指定目录下文件及文件内搜索指定关键词的方法
2015/06/28 Python
Flask框架的学习指南之用户登录管理
2016/11/20 Python
Python中property函数用法实例分析
2018/06/04 Python
Python 爬取携程所有机票的实例代码
2018/06/11 Python
解决Python3.5+OpenCV3.2读取图像的问题
2018/12/05 Python
Win 10下Anaconda虚拟环境的教程
2020/05/18 Python
详解selenium + chromedriver 被反爬的解决方法
2020/10/28 Python
Stylenanda中文站:韩国一线网络服装品牌
2016/12/22 全球购物
全球虚拟主机商:HostGator
2017/02/06 全球购物
微软日本官方网站:Microsoft日本
2017/11/26 全球购物
服务员岗位职责
2014/01/29 职场文书
蓝颜请假条
2014/04/11 职场文书
2014年大学生党员自我评议
2014/09/22 职场文书
见习报告怎么写
2014/10/31 职场文书
公司车辆管理制度
2015/08/04 职场文书
劳保用品管理制度范本
2015/08/06 职场文书
2016年感恩教师节活动总结
2016/04/01 职场文书
python spilt()分隔字符串的实现示例
2021/05/21 Python
OpenCV全景图像拼接的实现示例
2021/06/05 Python
解决MultipartFile.transferTo(dest) 报FileNotFoundExcep的问题
2021/07/01 Java/Android
室外天线与收音机天线杆接合方法
2022/04/05 无线电