JavaScript前端開發(fā)之實現(xiàn)二進制讀寫操作
更新時間：2015年11月04日 09:11:15 作者：double Net
這篇文章主要介紹了JavaScript前端開發(fā)之實現(xiàn)二進制讀寫操作的相關資料,需要的朋友可以參考下
關于javascript前端開發(fā)之實現(xiàn)二進制讀寫操作的相關介紹，請看以下內容詳解，本文介紹的非常詳細，具有參考價值。
由于種種原因，在瀏覽器中無法像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 = {
/**
* 初始化字節(jié)流,把-128至128的區(qū)間改為0-256的區(qū)間.便于計算
* @param {Array} array 字節(jié)流數(shù)組
* @return {Array} 轉化好的字節(jié)流數(shù)組
*/
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('不合法字節(jié)流')
}
}
return array;
},
/**
* 把一段字符串按照utf8編碼寫到緩沖區(qū)中
* @param {String} str 將要寫入緩沖區(qū)的字符串
* @param {Boolean} isGetBytes 是否只得到內容字節(jié)(不包括最開始的兩位占位字節(jié))
* @returns {Array} 字節(jié)流
*/
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);
}
},
/**
* 把一串字節(jié)流按照utf8編碼讀取出來
* @param arr 字節(jié)流
* @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)
}
};
/**
* 讀取指定長度的字節(jié)流到指定數(shù)組中
* @param {Stream} m Stream實例
* @param {number} i 讀取的長度
* @param {Array} a 存入的數(shù)組
* @returns {Array} 存入的數(shù)組
*/
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;
})();
/**
* 字節(jié)流處理實體類
* @param {String|Array} array 初始化字節(jié)流,如果是字符串則按照UTF8的格式寫入緩沖區(qū)
* @constructor
*/
function Stream(array) {
if (!(this instanceof Stream)) {
return new Stream(array);
}
/**
* 字節(jié)流緩沖區(qū)
* @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;
//當前流執(zhí)行的起始位置
this.position = 0;
//當前流寫入的多少字節(jié)
this.writen = 0;
//返回當前流執(zhí)行的起始位置是否已經大于整個流的長度
this.check = function () {
return self.position >= self.pool.length
};
}
/**
* 強制轉換為Stream對象
* @param x
* @returns {*|Stream}
*/
Stream.parse = function (x) {
return binaryPot.convertStream(x);
};
Stream.prototype = {
/**
* 從緩沖區(qū)讀取4個字節(jié)的長度并轉換為int值,position往后移4位
* @returns {Number} 讀取到的數(shù)字
* @description 如果position大于等于緩沖區(qū)的長度則返回-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);
},
/**
* 從緩沖區(qū)讀取1個字節(jié),position往后移1位
* @returns {Number}
* @description 如果position大于等于緩沖區(qū)的長度則返回-1
*/
readByte: function () {
if (this.check()) {
return -1
}
var val = this.pool[this.position++];
if (val > 255) {
val &= 255;
}
return val;
},
/**
* 從緩沖區(qū)讀取1個字節(jié),或讀取指定長度的字節(jié)到傳入的數(shù)組中,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();
}
},
/**
* 從緩沖區(qū)的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));
},
/**
* 把字節(jié)流寫入緩沖區(qū),writen往后移指定的位
* @param {Number|Array} _byte 寫入緩沖區(qū)的字節(jié)(流)
* @returns {Array} 寫入的字節(jié)流
*/
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
},
/**
* 把參數(shù)當成char類型寫入緩沖區(qū),writen往后移2位
* @param {Number} v 寫入緩沖區(qū)的字節(jié)
*/
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的格式寫入緩沖區(qū),writen往后移指定的位
* @param {String} str 字符串
* @return {Array} 緩沖區(qū)
*/
writeUTF: function (str) {
var val = binaryPot.writeUTF(str);
[].push.apply(this.pool, val);
this.writen += val.length;
},
/**
* 把緩沖區(qū)字節(jié)流的格式從0至256的區(qū)間改為-128至128的區(qū)間
* @returns {Array} 轉換后的字節(jié)流
*/
toComplements: function () {
var _tPool = this.pool;
for (var i = 0; i < _tPool.length; i++) {
if (_tPool[i] > 128) {
_tPool[i] -= 256
}
}
return _tPool
},
/**
* 獲取整個緩沖區(qū)的字節(jié)
* @param {Boolean} isCom 是否轉換字節(jié)流區(qū)間
* @returns {Array} 轉換后的緩沖區(qū)
*/
getBytesArray: function (isCom) {
if (isCom) {
return this.toComplements()
}
return this.pool
},
/**
* 把緩沖區(qū)的字節(jié)流轉換為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('獲取緩沖區(qū)字節(jié)流:',ts.getBytesArray());
console.log('當前的緩沖區(qū)position為:',ts.position,'writen為:',ts.writen);
console.log('讀取第一個utf8字節(jié)流:',ts.readUTF());
console.log('當前的緩沖區(qū)position為:',ts.position,'writen為:',ts.writen);
console.log('讀取第二個utf8字節(jié)流:',ts.readUTF());
console.log('當前的緩沖區(qū)position為:',ts.position,'writen為:',ts.writen);
</script>
以后，我可以不用為瀏覽器段處理二進制而發(fā)愁了！?。∠Ｍ疚姆窒韺Υ蠹覍W習javascript二進制相關知識有所幫助。
相關文章
字符串拼接是所有程序設計語言都需要的操作。當拼接結果較長時，如何保證效率就成為一個很重要的問題。本文介紹的是Javascript中的字符串拼接，希望對你有幫助，一起來看。2014-09-09
淺拷貝是指，一個新的對象對原始對象的屬性值進行精確地拷貝；深拷貝是指，對于簡單數(shù)據類型直接拷貝他的值，對于引用數(shù)據類型，在堆內存中開辟一塊內存用于存放復制的對象，并把原有的對象類型數(shù)據拷貝過來。本文將實現(xiàn)JavaScript深淺拷貝，需要的可以參考一下2022-09-09
javascript開發(fā)隨筆二 動態(tài)加載js和文件
js無非就是script標簽引入頁面，但當項目越來越大的時候，單頁面引入N個js顯然不行，合并為單個文件減少了請求數(shù)，但請求的文件體積卻很大2011-11-11
這篇文章主要介紹了uniapp微信小程序使用xr加載模型的操作方法,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-07-07
本文給大家匯總了一下png在IE瀏覽器下出現(xiàn)的各種問題的解決方法，十分的實用，有需要的小伙伴可以參考下。2015-07-07
這篇文章主要為大家詳細解析了Sortable.js拖拽排序使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
詳解用Webpack與Babel配置ES6開發(fā)環(huán)境
這篇文章主要介紹了詳解用Webpack與Babel配置ES6開發(fā)環(huán)境，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
這篇文章主要給大家介紹了關于JavaScript塊級作用域綁定的相關資料,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了JS實現(xiàn)移動端雙指縮放和旋轉方法,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-12-12
本文通過實例代碼給大家介紹了js實現(xiàn)顯示當前日期功能，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-07-07