• js中兼容性问题的封装(能力检测)


      所谓兼容性,就是看浏览器是否支持当前对象的属性或是方法,先通过获得页面文本内容的方式来了解兼容性,并封装函数或对象以解决此类问题。
    获得页面文本内容的方式:innnerText 或textContent 或innerHTML。
    innerText在不同浏览器存在有兼容性问题,为此我们需要封装到一个函数里,使得不同的浏览器及不同版本都能获得页面文本。(谷歌兼容性较好,这里只拿早期火狐版本和IE8及其之前版本作比较)

    innerText和innerHTml的具体区别
      在获取页面文本的时候
    1,innerText只会获取到标签之间的文本信息,不会获取到标签;innerHTML是获得标签之前的所有内容,包括标签本身
    2,IE8及之前的版本是支持innerText的,早期的火狐浏览器是不支持的,早期的火狐只支持textContent,而IE8不支持;innerHTML是所有浏览器都支持的,不存在兼容性问题
      
    /**
         * innerText  textContent
         * 获得页面标签之间文本内容的兼容性写法
         * @param obj
         * @returns {*}
         */
        function getInnerText(obj) {
            if (obj.innerText) { //IE8及之前的版本支持
                return obj.innerText;
            } else {
                return obj.textContent; //早期的火狐支持
            }
        }
    
    
      在设置页面文本的时候
    1,innerText会把设置的文本内容原样输出;文本里即使有html标签,也不会渲染出来(发生了转义)
    2,innerHTML会渲染出html标签的,无兼容性问题
      
    /**
         * 设置页面标签之间文本内容的兼容性写法
         * @param obj
         * @param value
         */
        function setInnerText(obj, value) {
            if (obj.innerText) {
                obj.innerText = value;
            } else {
                obj.textContent = value;
            }
        }
      若有很多此类兼容性问题需要封装,可以统一把它们封装到一个对象里,如下
    var txt = {
            getInnerText: function (obj) {
                if (obj.innerText) { //IE8及之前的版本支持
                    return obj.innerText;
                } else {
                    return obj.textContent; //早期的火狐支持
                }
            },
            setInnerText: function (obj, value) {
                if (obj.innerText) {
                    obj.innerText = value;
                } else {
                    obj.textContent = value;
                }
            }
        };

      再看一个小例子

      获得下一个兄弟元素节点的能力检测
    nextSibling chrome,火狐都支持。但是会获得文本节点,IE8及之前版本会忽略空白文本节点
    nextElementSibling chrome,火狐支持,IE8及之前版本不支持
    /**
         * 取下一个兄弟元素节点
         * @param element
         * @returns {*}
         */
        function getNextElement(element) {
            if (element.nextElementSibling) {
                return element.nextElementSibling;
            } else {
                var node = element.nextSibling;
                while (node && node.nodeType != 1) {    //文本节点的节点值为1
                    node = node.nextSibling;
                }
                return node;
            }
        }


    以后的工作和学习中有许多兼容性的问题,多了解封装的思想和方法。

  • 相关阅读:
    Sereja and Bottles-水题有点坑爹
    what we benefit from big data
    SwipeRefreshLayout与ViewPager滑动事件冲突解决
    java连接数据库核心代码
    spring mvc中实现csrf安全防御简记
    一题多解(八)—— 矩阵上三角(下三角)的访问
    面向对象举例(一) —— 顶点(vertex)、边(edge)与图(graph)
    面向对象举例(一) —— 顶点(vertex)、边(edge)与图(graph)
    Python 辨异 —— __init__ 与 __new__
    Python 辨异 —— __init__ 与 __new__
  • 原文地址:https://www.cnblogs.com/2010master/p/5747505.html
Copyright © 2020-2023  润新知