Detailed explanation of the use of protobuf.js and Long.js

This time I bring you a detailed explanation of the use of protobuf.js and Long.js. What are the precautions when using protobuf.js and Long.js urgently? Here are practical cases. Let’s take a look. .

The structure of protobuf.js is very similar to the structure of webpack after loading. This modular combination is a good structural method. One is adapted to different loading methods, and the two modules are directly independent. webpack is more functional. But if you encapsulate the js library yourself, this is enough. Moreover, the module has a unified external interfacemodule.exports. This is very similar to node.

(function(global, undefined) {    "use strict";
    (function prelude(modules, cache, entries) {        function $require(name) {            var $module = cache[name];            //没有就去加载
            if (!$module)
                modules[name][0].call($module = cache[name] = { exports: {} }, $require, $module, $module.exports);            return $module.exports;
        }        //曝光成全局
        var proto = global.proto = $require(entries[0]);        // AMD
        if (typeof define === "function" && define.amd) {
            define(["long"], function(Long) {                if (Long && Long.isLong) {
                    proto.util.Long = Long;
                    proto.configure();
                }
            });            return proto;
        }        //CommonJS
        if (typeof module === "object" && module && module.exports)
            module.exports = proto;
    })    //传参    ({        1: [function (require, module, exports) {            function first() {
                console.log("first");
            }
            module.exports = first;
        }, {}],        2: [function(require, module, exports) {            function second() {
                console.log("second");
            }
            module.exports = second;
        }],        3: [function (require, module, exports) {            var proto = {};
            proto.first = require(1);
            proto.second = require(2);
            proto.build = "full";
            module.exports = proto;
        }]
      }, {}, [3]);
})(typeof window==="object"&&window||typeof self==="object"&&self||this)

You have to use Long.js when processing integers exceeding 16 bits. Mainly fromString and toString. The idea of ​​

  function fromString(str, unsigned, radix) {        if (str.length === 0)            throw Error('empty string');        if (str === "NaN" || str === "Infinity" || str === "+Infinity" || str === "-Infinity")            return ZERO;        if (typeof unsigned === 'number') {            // For goog.math.long compatibility
            radix = unsigned,
            unsigned = false;
        } else {
            unsigned = !!unsigned;
        }
        radix = radix || 10;        if (radix < 2 || 36 < radix)            throw RangeError(&#39;radix&#39;);        var p;        if ((p = str.indexOf(&#39;-&#39;)) > 0)            throw Error('interior hyphen');        else if (p === 0) {            return fromString(str.substring(1), unsigned, radix).neg();
        }        // Do several (8) digits each time through the loop, so as to
        // minimize the calls to the very expensive emulated p.
        var radixToPower = fromNumber(pow_dbl(radix, 8));        var result = ZERO;        for (var i = 0; i < str.length; i += 8) {            var size = Math.min(8, str.length - i),                value = parseInt(str.substring(i, i + size), radix);            if (size < 8) {                var power = fromNumber(pow_dbl(radix, size));
                result = result.mul(power).add(fromNumber(value));
            } else {                result = result.mul(radixToPower);
                result = result.add(fromNumber(value));
            }
        }
        result.unsigned = unsigned;        return result;
    }

fromstring is to intercept

string8 digits one by one. Then convert it to Long type (high bit, position, sign bit) and add it up. The last one is a dragon. 4294967296 is 2 raised to the 32nd power. Before each operation, there will be a radix operation mul(radixToPower) or mul(power), both of which ensure that the number of digits in the result is correct.

For example, before adding {low:123} and {low:1}, first multiply {low:123} by 10 to get {low:1230} and then perform bit operations with {low:1} . Because the first one is a high position, it cannot be added directly.

function fromBits(lowBits, highBits, unsigned) {        return new Long(lowBits, highBits, unsigned);
    }

fromBits is converted to Long

object. value%4294967296 gets the low bit. /get high position. The results are combined by displacement. mul is the multiplication of bits, and add is the addition of bits. The principle is to split a 64-bit file into four segments. 16 bits respectively. Shift this.low left by 16 bits to get the 32-17 bits of low. Then add it to the same position of the addend object

The final merger is through the | operation. It's really clever to restore it after displacement. I didn't seem to understand it for a while.

 LongPrototype.add = function add(addend) {        if (!isLong(addend))
            addend = fromValue(addend);        // pide each number into 4 chunks of 16 bits, and then sum the chunks.
        var a48 = this.high >>> 16;        var a32 = this.high & 0xFFFF;        var a16 = this.low >>> 16;        var a00 = this.low & 0xFFFF;        var b48 = addend.high >>> 16;        var b32 = addend.high & 0xFFFF;        var b16 = addend.low >>> 16;        var b00 = addend.low & 0xFFFF;        var c48 = 0, c32 = 0, c16 = 0, c00 = 0;
        c00 += a00 + b00;
        c16 += c00 >>> 16;
        c00 &= 0xFFFF;
        c16 += a16 + b16;
        c32 += c16 >>> 16;
        c16 &= 0xFFFF;
        c32 += a32 + b32;
        c48 += c32 >>> 16;
        c32 &= 0xFFFF;
        c48 += a48 + b48;
        c48 &= 0xFFFF;        return fromBits((c16 << 16) | c00, (c48 << 16) | c32, this.unsigned);
    };

>>> What is the difference between >>? ? .

toString

LongPrototype.toString = function toString(radix) {
        radix = radix || 10;        if (radix < 2 || 36 < radix)            throw RangeError(&#39;radix&#39;);        if (this.isZero())            return &#39;0&#39;;        if (this.isNegative()) { // Unsigned Longs are never negative
            if (this.eq(MIN_VALUE)) {                // We need to change the Long value before it can be negated, so we remove
                // the bottom-most digit in this base and then recurse to do the rest.
                var radixLong = fromNumber(radix),
                    p = this.p(radixLong),
                    rem1 = p.mul(radixLong).sub(this);                return p.toString(radix) + rem1.toInt().toString(radix);
            } else
                return &#39;-&#39; + this.neg().toString(radix);
        }        // Do several (6) digits each time through the loop, so as to
        // minimize the calls to the very expensive emulated p.
        var radixToPower = fromNumber(pow_dbl(radix, 6), this.unsigned),
            rem = this;        var result = &#39;&#39;;        while (true) {            var remp = rem.p(radixToPower),
                intval = rem.sub(remp.mul(radixToPower)).toInt() >>> 0,
                digits = intval.toString(radix);
            rem = remp;            if (rem.isZero())                return digits + result;            else {                while (digits.length < 6)
                    digits = '0' + digits;
                result = '' + digits + result;
            }
        }
    };

is also spelled out after sub. That is, the reverse operation of fromstring.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Interesting UglifyJS

How to let JS automatically match proto Js

The above is the detailed content of Detailed explanation of the use of protobuf.js and Long.js. For more information, please follow other related articles on the PHP Chinese website!