背景

當我們在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官網請點選這裡