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 相关文章推荐
IE6/7/8/9不支持exec的简写方式
May 25 Javascript
AngularJS基础知识
Dec 21 Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
Nov 17 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
Jan 19 Javascript
Bootstrap自定义文件上传下载样式
May 26 Javascript
微信小程序入门教程
Nov 18 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
Dec 11 Javascript
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
May 15 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 jQuery
深入浅出vue图片路径的实现
Sep 04 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
Nov 02 Javascript
解读Vue组件注册方式
May 15 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
php 定界符格式引起的错误
2011/05/24 PHP
php skymvc 一款轻量、简单的php
2011/06/28 PHP
PHP多个图片压缩成ZIP的方法
2020/08/18 PHP
jquery复选框checkbox实现删除前判断
2014/04/20 Javascript
JavaScript实现生成GUID(全局统一标识符)
2014/09/05 Javascript
javascript匀速运动实现方法分析
2016/01/08 Javascript
Jquery跨域获得Json的简单实例
2016/05/18 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
2016/07/27 Javascript
JavaScript仿聊天室聊天记录
2016/12/27 Javascript
webpack配置导致字体图标无法显示的解决方法
2018/03/06 Javascript
vue2.0 下拉框默认标题设置方法
2018/08/22 Javascript
nodejs 使用 js 模块的方法实例详解
2018/12/04 NodeJs
JavaScript寄生组合式继承原理与用法分析
2019/01/11 Javascript
通过实例学习React中事件节流防抖
2019/06/17 Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
2020/08/12 Javascript
[32:17]完美世界DOTA2联赛循环赛LBZS vs Forest第二场 10月30日
2020/10/31 DOTA
python解析中国天气网的天气数据
2014/03/21 Python
Python断言assert的用法代码解析
2018/02/03 Python
Python嵌套列表转一维的方法(压平嵌套列表)
2018/07/03 Python
十分钟搞定pandas(入门教程)
2019/06/21 Python
python根据用户需求输入想爬取的内容及页数爬取图片方法详解
2020/08/03 Python
大女孩胸罩:Big Girls Bras
2016/12/15 全球购物
英国奢华护肤、美容和Spa品牌:Temple Spa
2019/11/02 全球购物
linux面试题参考答案(9)
2016/01/29 面试题
Ruby如何定义一个类
2012/10/08 面试题
大学生就业意向书范文
2014/04/01 职场文书
2014年银行员工年终自我评价
2014/09/19 职场文书
纪委书记群众路线整改措施思想汇报
2014/10/09 职场文书
思想作风建设心得体会
2014/10/22 职场文书
2014年酒店工作总结范文
2014/11/17 职场文书
2014年医药代表工作总结
2014/11/22 职场文书
2015年检验员工作总结范文
2015/04/30 职场文书
建筑工程催款函
2015/06/24 职场文书
婚礼领导致辞大全
2015/07/28 职场文书
MYSQL(电话号码,身份证)数据脱敏的实现
2021/05/28 MySQL
为自由献出你的心脏!「进击的巨人展 FINAL」2022年6月在台开展
2022/04/13 日漫