前端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] &= 0xff;
            }
            return array;
        },
        /**
         * 把一段字符串按照utf8編碼寫到緩沖區中
         * @param {String} str 將要寫入緩沖區的字符串
         * @param {Boolean} isGetBytes  是否只得到內容字節(不包括最開始的兩位占位字節)
         * @see https://zh.wikipedia.org/wiki/UTF-8
         * @return {Array} 字節流
         */
        writeUTF: function (str, isGetBytes) {
            var back = [];
            var byteSize = 0;
            for (var i = 0; i < str.length; i++) {
                var code = str.charCodeAt(i);
                if (0x00 <= code && code <= 0x7f) {
                    byteSize += 1;
                    back.push(code);
                } else if (0x80 <= code && code <= 0x7ff) {
                    byteSize += 2;
                    back.push((192 | (31 & (code >> 6))));
                    back.push((128 | (63 & code)))
                } else if ((0x800 <= code && code <= 0xd7ff) || (0xe000 <= code && code <= 0xffff)) {
                    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++) {
                back[i] &= 0xff;
            }
            if (isGetBytes) {
                return back
            }
            if (byteSize <= 0xff) {
                return [0, byteSize].concat(back);
            } else {
                return [byteSize >> 8, byteSize & 0xff].concat(back);
            }
        },
        /**
         *  把一串字節流按照utf8編碼讀取出來
         * @param arr 字節流
         * @returns {String} 讀取出來的字符串
         */
        readUTF: function (arr) {
            if (typeof arr === '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 = this.pool.length | 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>

以后，我可以不用為瀏覽器段處理二進制而發愁了！！！