背景
当我们在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官网请点击这里
