为CSS属性添加浏览器私有前缀

背景

当我们在js中操作DOM时，往往需要手动为部分特殊的CSS属性 添加特定的前缀
为了减少工作量，提高代码复用性
我们可以将这个工作封装成一个函数
这个函数的任务是：
接收一个CSS属性名，返回 带有浏览器前缀&首字母大写的属性名

函数实现

首先定义一个div标签的style和一个立即执行函数vendor

let elementStyle = document.createElement('div').style

let vendor = (() => {
  let transformNames = {
    webkit: 'webkitTransform',
    Moz: 'MozTransform',
    O: 'OTransform',
    ms: 'msTransform',
    standard: 'transform'
  }

  for (let key in transformNames) {
    if (elementStyle[transformNames[key]] !== undefined) {
      return key
    }
  }

  return false
})()

在当前运行环境下，遍历transformNames对象
从而辨别当前浏览器所属类型(webkit/firefox/opera/IE/standard)
如果以上都不支持，说明当前浏览器有问题

---

然后定义一个向外暴露的方法

export function prefixStyle (style) {
  if (vendor === false) {
    return false
  }

  if (vendor === 'standard') {
    return style
  }

  return vendor + style.charAt(0).toUpperCase() + style.substr(1)
}

如果检测到当前浏览器为standard，则原封不动地返回原属性名
如果检测到当前浏览器不是standard，则作字符串的拼接，并对原属性名 作首字母大写

调用函数

当我们需要用到这个函数时
在对应的组件中 引入

import { prefixStyle } from '.../.../xxx.js'

定义常量

const transform = prefixStyle('transform')

操作DOM

this.$refs.xxx.style[transform] = xxx

补充

如果觉得手动封装比较麻烦，可以考虑在自己的编辑器中安装官方的autoprefixer插件
Autoprefixer官网请点击这里