zoukankan      html  css  js  c++  java
  • iview在ie9及以上的兼容问题解决方案

    兼容requestAnimationFrame

    let lastTime = 0
    let vendors = ['ms', 'moz', 'webkit', 'o']
    for (let x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
      window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame']
      window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame']
    }
    if (!window.requestAnimationFrame) {
      window.requestAnimationFrame = function (callback, element) {
        let currTime = new Date().getTime()
        let timeToCall = Math.max(0, 16 - (currTime - lastTime))
        let callbackParams = currTime + timeToCall
        let id = window.setTimeout(() => { callback(callbackParams) }, timeToCall)
        lastTime = currTime + timeToCall
        return id
      }
    }
    if (!window.cancelAnimationFrame) {
      window.cancelAnimationFrame = function (id) {
        clearTimeout(id)
      }
    }

    兼容classList

    if (!('classList' in document.documentElement)) {
      Object.defineProperty(HTMLElement.prototype, 'classList', {
        get: function () {
          let self = this
          function update (fn) {
            return function (value) {
              let classes = self.className.split(/s+/g)
              let index = classes.indexOf(value)
              fn(classes, index, value)
              self.className = classes.join(' ')
            }
          }
          return {
            add: update(function (classes, index, value) {
              if (!~index) classes.push(value)
            }),
            remove: update(function (classes, index) {
              if (~index) classes.splice(index, 1)
            }),
            toggle: update(function (classes, index, value) {
              if (~index) { classes.splice(index, 1) } else { classes.push(value) }
            }),
            contains: function (value) {
              return !!~self.className.split(/s+/g).indexOf(value)
            },
            item: function (i) {
              return self.className.split(/s+/g)[i] || null
            }
          }
        }
      })
    }

    兼容dataset

    if (window.HTMLElement) {
      if (Object.getOwnPropertyNames(HTMLElement.prototype).indexOf('dataset') === -1) {
        Object.defineProperty(HTMLElement.prototype, 'dataset', {
          get: function () {
            let attributes = this.attributes // 获取节点的所有属性
            let name = []
            let value = [] // 定义两个数组保存属性名和属性值
            let obj = {} // 定义一个空对象
            for (let i = 0; i < attributes.length; i++) { // 遍历节点的所有属性
              if (attributes[i].nodeName.slice(0, 5) === 'data-') { // 如果属性名的前面5个字符符合"data-"
                // 取出属性名的"data-"的后面的字符串放入name数组中
                name.push(attributes[i].nodeName.slice(5))
                // 取出对应的属性值放入value数组中
                value.push(attributes[i].nodeValue)
              }
            }
            for (let j = 0; j < name.length; j++) { // 遍历name和value数组
              obj[name[j]] = value[j] // 将属性名和属性值保存到obj中
            }
            return obj // 返回对象
          }
        })
      }
    }

    参考: iview在ie9及以上的兼容问题解决方案

  • 相关阅读:
    80x86的保护模式
    计算机二进制的表示
    操作系统基本知识(一)
    记录一次在安装双系统的过程(先有debian, 后加windows 8.1)
    LitePal + Gson + Volley的ORM框架尝试方案
    如何使用DDMS Heap查看Android应用内存情况
    测试驱动开发的第一个例子---我的毕业设计
    策略模式的孪生兄弟---状态模式
    面试常备---栈和队列总结篇
    面试常备题---二叉树总结篇
  • 原文地址:https://www.cnblogs.com/ToBeBest/p/10512229.html
Copyright © 2011-2022 走看看