按需引入core-js解決IE11兼容性問題,替換babel-polyfill

解決IE兼容問題:css

1是能夠直接在入口文件中引入import 'babel-polyfill'html

2 如今介紹的是經過單獨使用core-js的某個類庫來解決,如es6

import 'core-js/features/object/assign'
import 'core-js/features/promise'
import 'core-js/features/function/name'
複製代碼

若是能夠在按需引入來解決問題,就按需引入好了,由於babel-polyfill文件包引入,致使項目體積過大數組

修改代碼以下圖 :promise

需安裝core-js : yarn add core-jsbash


解決完了上面的問題後,IE10及如下的居然又出現了'MAP'未定義, 'Set'未定義的狀況 覺得是我沒有包含到須要的文件,因而我又import 'babel-polyfill'回來做測試,發現'MAP'未定義, 'Set'未定義的狀況 依然存在 , 因而在網上查了下,'MAP'未定義能夠引入如下代碼(最好是在html中引入) :babel

function Map() {
    this.elements = new Array();
    // 獲取Map元素個數
    this.size = function() {
        return this.elements.length;
    },
    // 判斷Map是否爲空
    this.isEmpty = function() {
        return (this.elements.length < 1);
    },
    // 刪除Map全部元素
    this.clear = function() {
        this.elements = new Array();
    },
    // 向Map中增長元素(key, value)
    this.put = function(_key, _value) {
        if (this.containsKey(_key) == true) {
            if (this.containsValue(_value)) {
                if (this.remove(_key) == true) {
                    this.elements.push({
                        key : _key,
                        value : _value
                    });
                }
            } else {
                this.elements.push({
                    key : _key,
                    value : _value
                });
            }
        } else {
            this.elements.push({
                key : _key,
                value : _value
            });
        }
    },
    // 向Map中增長元素(key, value)
    this.set = function(_key, _value) {
        if (this.containsKey(_key) == true) {
            if (this.containsValue(_value)) {
                if (this.remove(_key) == true) {
                    this.elements.push({
                        key : _key,
                        value : _value
                    });
                }
            } else {
                this.elements.push({
                    key : _key,
                    value : _value
                });
            }
        } else {
            this.elements.push({
                key : _key,
                value : _value
            });
        }
    },
    // 刪除指定key的元素,成功返回true,失敗返回false
    this.remove = function(_key) {
        var bln = false;
        try {
            for (i = 0; i < this.elements.length; i++) {
                if (this.elements[i].key == _key) {
                    this.elements.splice(i, 1);
                    return true;
                }
            }
        } catch (e) {
            bln = false;
        }
        return bln;
    },

    // 刪除指定key的元素,成功返回true,失敗返回false
    this.delete = function(_key) {
        var bln = false;
        try {
            for (i = 0; i < this.elements.length; i++) {
                if (this.elements[i].key == _key) {
                    this.elements.splice(i, 1);
                    return true;
                }
            }
        } catch (e) {
            bln = false;
        }
        return bln;
    },
    
    // 獲取指定key的元素值value,失敗返回null
    this.get = function(_key) {
        try {
            for (i = 0; i < this.elements.length; i++) {
                if (this.elements[i].key == _key) {
                    return this.elements[i].value;
                }
            }
        } catch (e) {
            return null;
        }
    },

    // set指定key的元素值value
    this.setValue = function(_key, _value) {
        var bln = false;
        try {
            for (i = 0; i < this.elements.length; i++) {
                if (this.elements[i].key == _key) {
                    this.elements[i].value = _value;
                    return true;
                }
            }
        } catch (e) {
            bln = false;
        }
        return bln;
    },

    // 獲取指定索引的元素(使用element.key,element.value獲取key和value),失敗返回null
    this.element = function(_index) {
        if (_index < 0 || _index >= this.elements.length) {
            return null;
        }
        return this.elements[_index];
    },

    // 判斷Map中是否含有指定key的元素
    this.containsKey = function(_key) {
        var bln = false;
        try {
            for (i = 0; i < this.elements.length; i++) {
                if (this.elements[i].key == _key) {
                    bln = true;
                }
            }
        } catch (e) {
            bln = false;
        }
        return bln;
    },

    // 判斷Map中是否含有指定key的元素
    this.has = function(_key) {
        var bln = false;
        try {
            for (i = 0; i < this.elements.length; i++) {
                if (this.elements[i].key == _key) {
                    bln = true;
                }
            }
        } catch (e) {
            bln = false;
        }
        return bln;
    },
    
    // 判斷Map中是否含有指定value的元素
    this.containsValue = function(_value) {
        var bln = false;
        try {
            for (i = 0; i < this.elements.length; i++) {
                if (this.elements[i].value == _value) {
                    bln = true;
                }
            }
        } catch (e) {
            bln = false;
        }
        return bln;
    },

    // 獲取Map中全部key的數組(array)
    this.keys = function() {
        var arr = new Array();
        for (i = 0; i < this.elements.length; i++) {
            arr.push(this.elements[i].key);
        }
        return arr;
    },

    // 獲取Map中全部value的數組(array)
    this.values = function() {
        var arr = new Array();
        for (i = 0; i < this.elements.length; i++) {
            arr.push(this.elements[i].value);
        }
        return arr;
    };
    
    /**
    * map遍歷數組
    * @param callback [function] 回調函數;
    * @param context [object] 上下文;
    */
    this.forEach = function forEach(callback,context){
        context = context || window;
        
        //IE6-8下本身編寫回調函數執行的邏輯
        var newAry = new Array();
        for(var i = 0; i < this.elements.length;i++) {
            if(typeof  callback === 'function') {
                var val = callback.call(context,this.elements[i].value,this.elements[i].key,this.elements);
                newAry.push(this.elements[i].value);
            }
        }
        return newAry;
    }

}

複製代碼

'SET'未定義能夠引入 es6-shim.js函數

<script src="//cdn.bootcss.com/es6-shim/0.35.4/es6-shim.js"></script>
複製代碼

這兩個問題是解決了,可是IE又報缺乏對象 真是心塞, 若是你們有解決辦法,能夠留言告訴我。。測試

相關文章
相關標籤/搜索