如何实现一个autoprefixer

使用js操作DOM元素样式时，如果在不知道前缀的情况下，每次都要添加不少浏览器兼容前缀的代码，会显得代码十分多，可不可以实现自动检测浏览器前缀，自动添加合适的前缀的方法呢？

要实现这个功能，其实是对浏览器进行能力检测，通过设置特定属性，检测浏览器前缀。

实现细节如下：

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

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

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

  return false
})();

const autoPrefixStyle = prop => {
  if(!prefix) return false

  if(prefix === 'standard') return prop

  return prefix + prop.charAt(0).toUpperCase() + prop.substr(1)
}

此时，比如我设置css属性时，该方法会自动为其添加前缀。

例如在chrome浏览器中

autoPrefixStyle('transform')
//输出：webkitTransform