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 相关文章推荐
获取焦点时,利用js定时器设定时间执行动作
Apr 02 Javascript
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
Jul 17 Javascript
Prototype的Class.create函数解析
Sep 22 Javascript
jquery预览图片实现鼠标放上去显示实际大小
Jan 16 Javascript
javascript学习笔记(七)Ajax和Http状态码
Oct 08 Javascript
javascript验证邮件地址和MX记录的方法
Jun 16 Javascript
JavaScript节点及列表操作实例小结
Aug 05 Javascript
RequireJS入门一之实现第一个例子
Sep 30 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
Jan 16 Javascript
ES6入门教程之Class和Module详解
May 17 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
Nov 06 Javascript
微信小程序实现身份证取景框拍摄
Sep 09 Javascript
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的知识
2006/11/17 PHP
用PHP查询域名状态whois的类
2006/11/25 PHP
PHP书写格式详解(必看)
2016/05/23 PHP
PHP实现数组的笛卡尔积运算示例
2017/12/15 PHP
PHP实现Redis单据锁以及防止并发重复写入
2018/04/10 PHP
PHP rsa加密解密算法原理解析
2020/12/09 PHP
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
2012/02/02 Javascript
js获取下拉列表的值和元素个数示例
2014/05/07 Javascript
jquery.validate.js插件使用经验记录
2014/07/02 Javascript
jQuery判断当前点击的是第几个li的代码
2014/09/26 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
2016/04/23 Javascript
jQuery异步提交表单的两种方式
2016/09/13 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
2017/02/13 Javascript
JavaScript字符串_动力节点Java学院整理
2017/06/27 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
2018/02/07 Javascript
vue watch深度监听对象实现数据联动效果
2018/08/16 Javascript
js实现简单页面全屏
2019/09/17 Javascript
在vue项目实现一个ctrl+f的搜索功能
2020/02/28 Javascript
python对html代码进行escape编码的方法
2015/05/04 Python
python executemany的使用及注意事项
2017/03/13 Python
解决Pycharm 导入其他文件夹源码的2种方法
2020/02/12 Python
Pandas之read_csv()读取文件跳过报错行的解决
2020/04/21 Python
基于python SMTP实现自动发送邮件教程解析
2020/06/02 Python
在pycharm创建scrapy项目的实现步骤
2020/12/01 Python
Priority Pass机场贵宾室会籍计划:全球超过1200间机场贵宾室
2018/08/26 全球购物
String这个类型的class为何定义成final?
2012/11/13 面试题
项目工作说明书
2014/07/29 职场文书
党委班子剖析材料
2014/08/21 职场文书
2014年实习班主任工作总结
2014/11/08 职场文书
高三英语教学计划
2015/01/23 职场文书
公务员年度考核个人总结
2015/02/12 职场文书
大学生求职自荐信
2015/03/24 职场文书
《比尾巴》教学反思
2016/02/24 职场文书
2019消防宣传标语!
2019/07/10 职场文书
Mysql - 常用函数 每天积极向上
2021/04/05 MySQL
Java对文件的读写操作方法
2022/04/29 Java/Android