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及以上的兼容问题解决方案

posted @ 2019-03-11 18:07  知九  阅读(1269)  评论(0编辑  收藏  举报