JavaScript前端开发之实现二进制读写操作
网络编程 2021-07-04 21:03www.168986.cn编程入门
这篇文章主要介绍了JavaScript前端开发之实现二进制读写操作的相关资料,需要的朋友可以参考下
关于javascript前端开发之实现二进制读写操作的相关介绍,请看以下内容详解,本文介绍的非常详细,具有参考价值。
由于种种原因,在浏览器中无法像nodejs那样操作二进制。
最近写了一个在浏览器端操作读写二进制的帮助类
!function (entrance) { "use strict"; if ("object" === typeof exports && "undefined" !== typeof module) { module.exports = entrance(); } else if ("function" === typeof define && define.amd) { define([], entrance()); } else { var f; if ("undefined" !== typeof window) { f = window; } else { throw new Error('wrong execution environment'); } f.TinyStream = entrance(); } }(function () { var binaryPot = { / 初始化字节流,把-128至128的区间改为0-256的区间.便于计算 @param {Array} array 字节流数组 @return {Array} 转化好的字节流数组 / init: function (array) { for (var i = 0; i < array.length; i++) { array[i] = 1; if (array[i] < 0) { array[i] += 256 } if(array[i]>255){ throw new Error('不合法字节流') } } return array; }, / 把一段字符串按照utf8编码写到缓冲区中 @param {String} str 将要写入缓冲区的字符串 @param {Boolean} isGetBytes 是否只得到内容字节(不包括最开始的两位占位字节) @returns {Array} 字节流 / writeUTF: function (str, isGetBytes) { var back = [], byteSize = 0; for (var i = 0; i < str.length; i++) { var code = str.charCodeAt(i); if (code >= 0 && code <= 127) { byteSize += 1; back.push(code); } else if (code >= 128 && code <= 2047) { byteSize += 2; back.push((192 | (31 & (code >> 6)))); back.push((128 | (63 & code))) } else if (code >= 2048 && code <= 65535) { byteSize += 3; back.push((224 | (15 & (code >> 12)))); back.push((128 | (63 & (code >> 6)))); back.push((128 | (63 & code))) } } for (i = 0; i < back.length; i++) { if (back[i] > 255) { back[i] &= 255 } } if (isGetBytes) { return back } if (byteSize <= 255) { return [0, byteSize].concat(back); } else { return [byteSize >> 8, byteSize & 255].concat(back); } }, / 把一串字节流按照utf8编码读取出来 @param arr 字节流 @returns {String} 读取出来的字符串 / readUTF: function (arr) { if (Object.prototype.toString.call(arr) == "[object String]") { return arr; } var UTF = "", _arr = this.init(arr); for (var i = 0; i < _arr.length; i++) { var one = _arr[i].toString(2), v = one.match(/^1+?(?=0)/); if (v && one.length == 8) { var bytesLength = v[0].length, store = _arr[i].toString(2).slice(7 - bytesLength); for (var st = 1; st < bytesLength; st++) { store += _arr[st + i].toString(2).slice(2) } UTF += String.fromCharCode(parseInt(store, 2)); i += bytesLength - 1 } else { UTF += String.fromCharCode(_arr[i]) } } return UTF }, / 转换成Stream对象 @param x @returns {Stream} / convertStream: function (x) { if (x instanceof Stream) { return x } else { return new Stream(x) } }, / 把一段字符串转为mqtt格式 @param str @returns {|Array} / toMQttString: function (str) { return this.writeUTF(str) } }; / 读取指定长度的字节流到指定数组中 @param {Stream} m Stream实例 @param {number} i 读取的长度 @param {Array} a 存入的数组 @returns {Array} 存入的数组 / function baseRead(m, i, a) { var t = a ? a : []; for (var start = 0; start < i; start++) { t[start] = m.pool[m.position++] } return t } / 判断浏览器是否支持ArrayBuffer / var supportArrayBuffer = (function () { return !!window.ArrayBuffer; })(); / 字节流处理实体类 @param {String|Array} array 初始化字节流,如果是字符串则按照UTF8的格式写入缓冲区 @constructor / function Stream(array) { if (!(this instanceof Stream)) { return new Stream(array); } / 字节流缓冲区 @type {Array} / this.pool = []; if (Object.prototype.toString.call(array) === '[object Array]') { this.pool = binaryPot.init(array); } else if (Object.prototype.toString.call(array) == "[object ArrayBuffer]") { var arr = new Int8Array(array); this.pool = binaryPot.init([].slice.call(arr)); } else if (typeof array === 'string') { this.pool = binaryPot.writeUTF(array); } var self = this; //当前流执行的起始位置 this.position = 0; //当前流写入的多少字节 this.writen = 0; //返回当前流执行的起始位置是否已经大于整个流的长度 this.check = function () { return self.position >= self.pool.length }; } / 强制转换为Stream对象 @param x @returns {|Stream} / Stream.parse = function (x) { return binaryPot.convertStream(x); }; Stream.prototype = { / 从缓冲区读取4个字节的长度并转换为int值,position往后移4位 @returns {Number} 读取到的数字 @description 如果position大于等于缓冲区的长度则返回-1 / readInt: function () { if (this.check()) { return -1 } var end = ""; for (var i = 0; i < 4; i++) { end += this.pool[this.position++].toString(16) } return parseInt(end, 16); }, / 从缓冲区读取1个字节,position往后移1位 @returns {Number} @description 如果position大于等于缓冲区的长度则返回-1 / readByte: function () { if (this.check()) { return -1 } var val = this.pool[this.position++]; if (val > 255) { val &= 255; } return val; }, / 从缓冲区读取1个字节,或读取指定长度的字节到传入的数组中,position往后移1或bytesArray.length位 @param {Array|undefined} bytesArray @returns {Array|Number} / read: function (bytesArray) { if (this.check()) { return -1 } if (bytesArray) { return baseRead(this, bytesArray.length | 0, bytesArray) } else { return this.readByte(); } }, / 从缓冲区的position位置按UTF8的格式读取字符串,position往后移指定的长度 @returns {String} 读取的字符串 / readUTF: function () { var big = (this.readByte() << 8) | this.readByte(); return binaryPot.readUTF(this.pool.slice(this.position, this.position += big)); }, / 把字节流写入缓冲区,writen往后移指定的位 @param {Number|Array} _byte 写入缓冲区的字节(流) @returns {Array} 写入的字节流 / write: function (_byte) { var b = _byte; if (Object.prototype.toString.call(b).toLowerCase() == "[object array]") { [].push.apply(this.pool, b); this.writen += b.length; } else { if (+b == b) { if (b > 255) { b &= 255; } this.pool.push(b); this.writen++ } } return b }, / 把参数当成char类型写入缓冲区,writen往后移2位 @param {Number} v 写入缓冲区的字节 / writeChar: function (v) { if (+v != v) { throw new Error("writeChar:arguments type is error") } this.write((v >> 8) & 255); this.write(v & 255); this.writen += 2 }, / 把字符串按照UTF8的格式写入缓冲区,writen往后移指定的位 @param {String} str 字符串 @return {Array} 缓冲区 / writeUTF: function (str) { var val = binaryPot.writeUTF(str); [].push.apply(this.pool, val); this.writen += val.length; }, / 把缓冲区字节流的格式从0至256的区间改为-128至128的区间 @returns {Array} 转换后的字节流 / toComplements: function () { var _tPool = this.pool; for (var i = 0; i < _tPool.length; i++) { if (_tPool[i] > 128) { _tPool[i] -= 256 } } return _tPool }, / 获取整个缓冲区的字节 @param {Boolean} isCom 是否转换字节流区间 @returns {Array} 转换后的缓冲区 / getBytesArray: function (isCom) { if (isCom) { return this.toComplements() } return this.pool }, / 把缓冲区的字节流转换为ArrayBuffer @returns {ArrayBuffer} @throw {Error} 不支持ArrayBuffer / toArrayBuffer: function () { if (supportArrayBuffer) { return new ArrayBuffer(this.getBytesArray()); } else { throw new Error('not support arraybuffer'); } }, clear: function () { this.pool = []; this.writen = this.position = 0; } }; return Stream; });
如何使用?
<script src="binary.js"></script> <script> var ts = TinyStream('我叫张亚涛'); ts.writeUTF('你好'); console.log('获取缓冲区字节流:',ts.getBytesArray()); console.log('当前的缓冲区position为:',ts.position,'writen为:',ts.writen); console.log('读取第一个utf8字节流:',ts.readUTF()); console.log('当前的缓冲区position为:',ts.position,'writen为:',ts.writen); console.log('读取第二个utf8字节流:',ts.readUTF()); console.log('当前的缓冲区position为:',ts.position,'writen为:',ts.writen); </script>
以后,我可以不用为浏览器段处理二进制而发愁了!!!希望本文分享对大家学习javascript二进制相关知识有所帮助。
上一篇:jQuery实现带有动画效果的回到顶部和底部代码
下一篇:js实现二级菜单渐隐显示
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程