Solve the problem of incompatibility between TextEncoder and TextDecoder in IE

1. The problem arises

The project must upgrade stomp.js due to version issues. However, the TextEncoder and TextDecoder used inside the stomp.js package are not compatible under IE. As a result, the entire project cannot run under IE. Compatibility check entry .

Two, try to solve

text-encoding.js

I found the compatible library text-encoding.js on npm, this is the github link address , and this is the npm link address . Unfortunately, both of these have ceased to be maintained, and the company was unable to introduce them as open source software, so they gave up. Of course, it can be used if everyone's requirements are not so strict.

Write a text-encoding.js yourself

Note that studying the source code of Stomp.js, although TextEncoder is not compatible under IE, only the most basic encoding of TextEncoder is used in stomp, namely utf-8:

//--TextEncoder源码部分
 // 2. Set enc's encoding to UTF-8's encoder.
        if (Boolean(options['NONSTANDARD_allowLegacyEncoding'])) {
    
    
            // NONSTANDARD behavior.
            label = label !== undefined ? String(label) : DEFAULT_ENCODING;
            let encoding = getEncoding(label);
            if (encoding === null || encoding.name === 'replacement') {
    
    throw RangeError('Unknown encoding: ' + label);}
            if (!encoders[encoding.name]) {
    
    
                throw Error('Encoder not present.' +
                    ' Did you forget to include encoding-indexes.js first?');
            }
            enc._encoding = encoding;
        }

Among them is DEFAULT_ENCODINGutf-8 encoding. For only utf-8 encoding, we can use browser compatible unescapeand encodeURIComponentcooperation to simulate:

var encoder = new TextEncoder();
      encoder.encode("中文abc");
 //result : Uint8Array(9) [228, 184, 173, 230, 150, 135, 97, 98, 99]

unescape(encodeURIComponent("中文abc")).split("").map(val => val.charCodeAt());
//result : (9) [228, 184, 173, 230, 150, 135, 97, 98, 99]

Similarly, the decoding is as follows:

var decoder = new TextDecoder();
      decoder.decode(Uint8Array.from([228, 184, 173, 230, 150, 135, 97, 98, 99]));
//result : 中文abc

decodeURIComponent(escape(String.fromCharCode(...[228, 184, 173, 230, 150, 135, 97, 98, 99])));
//result : 中文abc

Therefore, in order to be compatible with IE, the ES5 package is as follows:

/**
 * @description 这是一个补丁包。用来解决新引入的stomp中引用textEncoder和textDecoder在IE下不兼容的问题
 *              由于stomp源码中只使用了最基本的utf8编码，故可以用支持ie的 unescape 和 encodeURIComponent伪装该函数
 * @param {type} 
 * @Date 2020-07-08 11:45:19
 */
(function(window) {
    
    

    if(undefined !== window.TextEncoder) {
    
    return;}

    function _TextEncoder() {
    
    
        //--DO NOTHING
    }
    _TextEncoder.prototype.encode = function(s) {
    
    
        return unescape(encodeURIComponent(s)).split('').map(function(val) {
    
    return val.charCodeAt();});
    };
    function _TextDecoder() {
    
    
        //--DO NOTHING
    }   
    _TextDecoder.prototype.decode = function(code_arr) {
    
    
        return decodeURIComponent(escape(String.fromCharCode.apply(null, code_arr)));
    };

    window.TextEncoder = _TextEncoder;
    window.TextDecoder = _TextDecoder;

})(this);

Just quote it directly.