解决TextEncoder 和 TextDecoder在IE下不兼容的问题

一、问题产生

项目中由于版本问题必须升级stomp.js。然而stomp.js包内部使用的TextEncoder和TextDecoder在IE下并不兼容。导致整个项目在IE下无法跑。兼容性查看入口.

二、解决尝试

text-encoding.js

在npm上找到了兼容库 text-encoding.js,这是github 链接地址,这是npm链接地址。然而很不幸的是，这两个都已经停止维护，公司也无法将其作为开源软件引入，故放弃。当然，对于大家要求没那么严格来说，完全可以使用。

自己写一个text-encoding.js

注意到，研究Stomp.js源码， 虽然TextEncoder在IE下不兼容，但是stomp中只使用了TextEncoder最基本的编码，即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;
        }

其中的DEFAULT_ENCODING即为utf-8编码。对于只是utf-8编码，我们可以使用浏览器兼容的unescape和encodeURIComponent配合，进行模拟：

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]

同样的，解码如下：

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

故，为了兼容IE ，以ES5封装如下：

/**
 * @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);

拿去直接引用即可。