首页 > 编程语言 >【JS封装-兼容IE(较旧版本如IE8及以下)】强化编程实践:精选JavaScript函数封装集锦-添加Event监听、获取非行间样式、支持跨浏览器的classList操作等IE低版本兼容

【JS封装-兼容IE(较旧版本如IE8及以下)】强化编程实践:精选JavaScript函数封装集锦-添加Event监听、获取非行间样式、支持跨浏览器的classList操作等IE低版本兼容

时间:2024-06-11 09:00:06浏览次数:27  
标签:function 封装 log 兼容 className var console document IE

目录

添加Event监听

获取非行间样式

JSON.parse与JSON.stringify

querySelector与querySelectorAll的兼容

支持跨浏览器的classList操作

兼容性处理console.log

兼容性处理forEach方法

Promise的兼容性处理

Fetch API的兼容性处理


添加Event监听

IE8及以下版本不支持addEventListener,需要使用attachEvent

function addEvent(elem, event, fn) {
    if (elem.addEventListener) {
        elem.addEventListener(event, fn, false);
    } else if (elem.attachEvent) {
        elem.attachEvent("on" + event, function() {
            // 设置this指向正确
            return(fn.call(elem, window.event));   
        });
    }
}

使用示例:

var btn = document.getElementById('myButton');
addEvent(btn, 'click', function(e) {
    alert('按钮被点击了!');
});

获取非行间样式

IE获取计算后的样式需要使用currentStyle,而其他现代浏览器使用getComputedStyle

function getStyle(obj, attr) {
    if (obj.currentStyle) {
        return obj.currentStyle[attr];
    } else {
        return getComputedStyle(obj, null)[attr];
    }
}

使用示例:

var element = document.getElementById('someElement');
var color = getStyle(element, 'color');
console.log(color);

JSON.parse与JSON.stringify

IE7及以下不支持这两个方法。

if (!window.JSON) {
    window.JSON = {
        parse: function(str) {
            return new Function('return ' + str)();
        },
        stringify: function(obj) {
            var arr = [];
            for (var prop in obj) {
                if (Object.prototype.hasOwnProperty.call(obj, prop)) {
                    arr.push(prop + ':' + obj[prop]);
                }
            }
            return '{' + arr.join(',') + '}';
        }
    };
}

使用示例:

var jsonString = '{"name":"John","age":30}';
var obj = JSON.parse(jsonString);
console.log(obj.name); // 输出: John

var objToSerialize = {name: "Alice", age: 25};
var serializedString = JSON.stringify(objToSerialize);
console.log(serializedString); // 输出: {"name":"Alice","age":25}

querySelector与querySelectorAll的兼容

IE8及以下不支持这两个方法。

if (!document.querySelector) {
    document.querySelector = function(selector) {
        var elements = document.querySelectorAll(selector);
        return elements.length ? elements[0] : null;
    };
}

if (!document.querySelectorAll) {
    document.querySelectorAll = function(selector) {
        var styleSheet = document.createStyleSheet();
        styleSheet.addRule(selector, "foo:bar");
        var elements = document.all.tags("foo");
        styleSheet.removeRule(0);
        return elements;
    };
}

使用示例:

var firstDiv = document.querySelector('div');
console.log(firstDiv);

var allDivs = document.querySelectorAll('div');
allDivs.forEach(function(div) {
    console.log(div);
});

支持跨浏览器的classList操作

IE9及以下版本不支持element.classList,可以进行如下封装以提供类似功能。

function classListSupport(element) {
    if ('classList' in document.documentElement) {
        return function(action, className) {
            if (action === 'add') {
                element.classList.add(className);
            } else if (action === 'remove') {
                element.classList.remove(className);
            } else if (action === 'toggle') {
                element.classList.toggle(className);
            } else if (action === 'contains') {
                return element.classList.contains(className);
            }
        };
    } else {
        var classes = element.className.split(' ');
        return function(action, className) {
            switch (action) {
                case 'add':
                    if(classes.indexOf(className) === -1) {
                        classes.push(className);
                        element.className = classes.join(' ');
                    }
                    break;
                case 'remove':
                    var index = classes.indexOf(className);
                    if(index !== -1) {
                        classes.splice(index, 1);
                        element.className = classes.join(' ');
                    }
                    break;
                case 'toggle':
                    var contains = classes.indexOf(className) !== -1;
                    if(contains) {
                        this.remove(className);
                    } else {
                        this.add(className);
                    }
                    break;
                case 'contains':
                    return classes.indexOf(className) !== -1;
            }
        };
    }
}

// 使用示例:
var myElement = document.getElementById('myElement');
var classHandler = classListSupport(myElement);

classHandler('add', 'newClass'); // 添加类
classHandler('remove', 'oldClass'); // 移除类
console.log(classHandler('contains', 'newClass')); // 检查是否包含类
classHandler('toggle', 'active'); // 切换类

兼容性处理console.log

在IE中,如果开发者工具未打开,直接使用console.log可能会导致错误。可以通过以下方式避免:

if (!window.console) {
    window.console = {};
}
if (!window.console.log) {
    window.console.log = function(msg) {
        if (typeof msg === "object") {
            msg = JSON.stringify(msg);
        }
        alert(msg);
    };
}

使用示例:

console.log("这是一个消息");
console.log({key: "value"}); // 对象会自动转换为JSON字符串

兼容性处理forEach方法

对于数组的forEach方法,IE8及以下版本并不支持。可以自定义一个兼容版本:

if (!Array.prototype.forEach) {
    Array.prototype.forEach = function(callback, thisArg) {
        var T, k;
        if (this == null) {
            throw new TypeError('this is null or not defined');
        }
        var O = Object(this);
        var len = O.length >>> 0;
        if (typeof callback !== 'function') {
            throw new TypeError(callback + ' is not a function');
        }
        if (arguments.length > 1) {
            T = thisArg;
        }
        k = 0;
        while (k < len) {
            var kValue;
            if (k in O) {
                kValue = O[k];
                callback.call(T, kValue, k, O);
            }
            k++;
        }
    };
}

使用示例:

var arr = [1, 2, 3];
arr.forEach(function(item, index, array) {
    console.log(item);
});

Promise的兼容性处理

IE11开始才支持Promise,对于旧版IE,可以使用polyfill库,如es6-promise。

安装es6-promise:

npm install es6-promise --save

然后,在你的主入口文件引入并设置为全局:

import 'es6-promise/auto';

或者直接在HTML中通过CDN引入:

<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>

使用示例:

new Promise((resolve, reject) => {
    setTimeout(() => resolve('成功'), 1000);
}).then(value => console.log(value));

Fetch API的兼容性处理

IE不支持Fetch API,可以使用fetch-ie8或者whatwg-fetch作为polyfill。

安装whatwg-fetch:

npm install whatwg-fetch --save

然后,在主入口文件引入:

import 'whatwg-fetch';

或在HTML中通过CDN引入:

<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.4/fetch.min.js"></script>

使用示例:

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

标签:function,封装,log,兼容,className,var,console,document,IE
From: https://blog.csdn.net/weixin_43298211/article/details/139458800

相关文章

  • 谁说.net core不好动态访问webservice?看这篇文章,C#快速实现动态访问webservice,兼容.ne
    前言:访问webservice,大多数人都是用服务引用的方式,但是这种方式比较麻烦,例如遇到服务更新了,你还需要手动更新你的服务引用,再重新发布,很麻烦。或者已有的一些例子,至少我看到的很多案例,动态访问也只能止步于使用.netframework环境,没看到有啥.netcore上面动态访问的案例。于是我就来......
  • 【YOLOv8改进】EMA(Efficient Multi-Scale Attention):基于跨空间学习的高效多尺度注意力
    YOLO目标检测创新改进与实战案例专栏专栏目录:YOLO有效改进系列及项目实战目录包含卷积,主干注意力,检测头等创新机制以及各种目标检测分割项目实战案例专栏链接:YOLO基础解析+创新改进+实战案例摘要通道或空间注意力机制在许多计算机视觉任务中表现出显著的效果,可以......
  • IEEE754浮点数表示形式
    IEEE754浮点数表示形式IEEE754浮点数官方文档:https://ieeexplore.ieee.org/document/8766229浮点数的上述表示形式,既没有规定阶码和尾数的位数,也没有规定阶码和尾数采用的机器码形式(原码、反码、补码和移码)。实际上,直到20世纪80年代初,浮点数表示形式还没有统一标准,不同厂商计......
  • 首届IEEE RAS峰会,为什么大厂阿里、字节、腾讯都参加了?
    "RASinDataCenters2024"首届IEEERAS(Reliability,Availability,andServiceability,即可靠性、可用性和可维护性)在数据中心峰会在2024年6月11日至12日举行,地点设在美国加利福尼亚州圣克拉拉市的圣克拉拉万豪酒店(SantaClaraMarriott)。这一峰会主要是为了探讨和交流数据......
  • mORMot and Open Source friends SynProject Tutorial (SynProject教程)
    mORMotandOpenSourcefriendsSynProjectTutorial--(SynProject教程)第一步本页介绍SynProject的一些典型用法。我们将为mORMot框架本身创建一个源代码存储库和相关的文档。您要求文档,我们将通过SynProject自动生成它!我们需要什么因此,我们在硬盘上的D:\Dev\Lib文件夹中......
  • 2024.06.09 与显哥在办公室Mock Interview复盘
    我已刷题3月,现正准备着下周一Weride的电面;今日回办公室与显哥进行mockinterview,一起做题LC30。耗时50分钟而我没有做出,结束后与显哥复盘,发现以下问题:没有充分理解题意没有进行时空复杂度分析,事先确定求解的复杂度没有打草稿后再写代码在对代码进行解释时,不足够high-level;容......
  • 短信接口封装
    腾讯云短信封装发送短信#-*-coding:utf-8-*-fromtencentcloud.commonimportcredentialfromtencentcloud.common.exception.tencent_cloud_sdk_exceptionimportTencentCloudSDKExceptionfromtencentcloud.sms.v20210111importsms_client,modelsfromtencentclo......
  • 取素数优化——埃拉托斯特尼筛法(Sieve of Eratosthenes)
    埃拉托斯特尼筛法(SieveofEratosthenes)是一种用来生成一定范围内所有素数的算法。其基本思想是从小到大遍历每个数,如果当前数是素数,则将其所有的倍数标记为非素数。这个过程中,所有未被标记为非素数的数即为素数。下面是使用埃拉托斯特尼筛法来计算区间[x,y]内的素数个数的修......
  • Android RecyclerView使用详解(含通过网络请求得到数据)
    RecyclerView概述RecyclerView是Android中非常受欢迎的控件,RecyclerView是官方在Android5.0之后新添加的控件,推出用来替代传统的ListView和GridView列表控件,所以如果你还在使用ListView的话可以替换为RecyclerView了。对于RecyclerView的使用根据实际项目进行说明,一些功能可......
  • ollama qwen2 运行&openai 兼容api 测试
    qwen2模型已经发布了,各种新闻都说很不错,所以通过ollama测试下安装ollamaclicurl-fsSLhttps://ollama.com/install.sh|sh启动服务ollamaserve拉取qwen2:1.5b模型使用了api模式clicurl-XPOSThttp://localh......