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

最新文章

  1. poj 2524:Ubiquitous Religions(并查集,入门题)
  2. PSVR开发者需要了解的9件事
  3. 【数论】二进制GCD
  4. NopCommerce之任务执行
  5. PHP多线程类
  6. [jobdu]把数组排成最小的数
  7. 梦游前端,JavaScript兼容性
  8. CSS样式与选择器
  9. bzoj 4383: [POI2015]Pustynia
  10. CSS中可以通过哪些属性定义,使得一个DOM元素不显示在浏览器可视范围内?
  11. es6面向对象
  12. 博弈之——SG模板
  13. VBA果然很强大
  14. s21day07 python笔记
  15. 最强Hibernate搭建文章(转)
  16. Java通过POI读取Excel
  17. 图数据库cayley+mongo的起航之旅
  18. 网络基础&#160;利用vnc&#160;viewer访问在vmware虚拟机上的linux
  19. linux 下 安装nginx
  20. multiprocess模块---进程---进程队列

热门文章

  1. vue在某页面监听键盘输入事件
  2. malloc实现
  3. 记一次 .NET 某市附属医院 Web程序 偶发性CPU爆高分析
  4. Various methods for capturing the screen
  5. 【LeetCode】256. Paint House 解题报告(C++)
  6. 【LeetCode】Gas Station 解题报告
  7. 【LeetCode】929. Unique Email Addresses 解题报告(Python)
  8. 【LeetCode】5. Longest Palindromic Substring 最长回文子串
  9. hud -5124-lines(线段树)
  10. Tomcat 组成与工作原理