JavaScript前端开发之实现二进制读写操作


Posted in Javascript onNovember 04, 2015

关于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二进制相关知识有所帮助。

Javascript 相关文章推荐
javascript实现面向对象类的功能书写技巧
Mar 07 Javascript
javascript实现点击提交按钮后显示loading的方法
Jul 03 Javascript
js实现点击切换TAB标签实例
Aug 21 Javascript
AngularJS中$http服务常用的应用及参数
Aug 22 Javascript
Vue.js动态添加、删除选题的实例代码
Sep 30 Javascript
微信小程序视图template模板引用的实例详解
Sep 20 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
Nov 15 Javascript
vue .sync修饰符的使用详解
Jun 15 Javascript
微信小程序人脸识别功能代码实例
May 07 Javascript
在layui tab控件中载入外部html页面的方法
Sep 04 Javascript
JS图片预加载三种实现方法解析
May 08 Javascript
vue使用transition组件动画效果的实例代码
Jan 28 Vue.js
js实现二级菜单渐隐显示
Nov 03 #Javascript
整理JavaScript创建对象的八种方法
Nov 03 #Javascript
JavaScript实现倒计时代码段Item1(非常实用)
Nov 03 #Javascript
jQuery实用技巧必备(下)
Nov 03 #Javascript
JavaScript实现的多种鼠标拖放效果
Nov 03 #Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
Nov 03 #Javascript
jQuery实现Email邮箱地址自动补全功能代码
Nov 03 #Javascript
You might like
推荐几部必看的DC动画电影
2020/03/03 欧美动漫
VOLVO车载收音机
2021/03/02 无线电
php自定义错误处理用法实例
2015/03/20 PHP
thinkphp3.2中Lite文件替换框架入口文件或应用入口文件的方法
2015/05/21 PHP
PHP删除数组中特定元素的两种方法
2019/02/28 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
jQuery JSON的解析方式分享
2011/04/05 Javascript
深入理解JavaScript系列(2) 揭秘命名函数表达式
2012/01/15 Javascript
jQuery学习笔记 操作jQuery对象 文档处理
2012/09/19 Javascript
基于jquery DOM写的类似微博发布的效果
2012/10/20 Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
2013/01/23 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
2013/05/03 Javascript
XMLHttpRequest处理xml格式的返回数据(示例代码)
2013/11/21 Javascript
用js模拟struts2的多action调用示例
2014/05/19 Javascript
jquery 插件实现瀑布流图片展示实例
2015/04/03 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
2016/09/17 Javascript
js实现图片切换(动画版)
2016/12/25 Javascript
Vue filters过滤器的使用方法
2017/07/14 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
2018/12/23 Javascript
JointJS JavaScript流程图绘制框架解析
2019/08/15 Javascript
NodeJS模块Buffer原理及使用方法解析
2020/11/11 NodeJs
python自动化测试之从命令行运行测试用例with verbosity
2014/09/28 Python
Python模块、包(Package)概念与用法分析
2019/05/31 Python
Python中格式化字符串的四种实现
2020/05/26 Python
浅析PyCharm 的初始设置(知道)
2020/10/12 Python
html5 的a标签 Href 拨电话的写法
2013/11/04 HTML / CSS
后勤园长自我鉴定
2013/10/17 职场文书
大学生自我鉴定范文
2013/12/28 职场文书
《这儿真好》教学反思
2014/02/22 职场文书
高中军训感想300字
2014/03/04 职场文书
客户经理竞聘演讲稿
2014/05/15 职场文书
校车安全责任书
2014/08/25 职场文书
护士岗前培训心得体会
2016/01/08 职场文书
Django集成富文本编辑器summernote的实现步骤
2021/05/31 Python
python套接字socket通信
2022/04/01 Python