【JS Utils】计算类名/样式合集

computeClass, computeStyle（计算类名/样式合集）

• 简述：类似于 Vue 的 class, style 属性序列计算方法，将类名/样式整合到一个合集里。
• 兼容性：运行环境需支持 Array.prototype.flat，兼容方案可参考此处。

---

源码

/**
 *  计算类名合集
 *  @param  {String|Array|Object} value 类名源 ( String | Array[String] | Object: { className: Boolean } )
 *  @param  {Boolean}             toStr 是否序列化为文本
 *  @return {Array|String}              处理后的类名合集
 */
function computeClass(value, toStr) {
  const res = []
  for (let item of [value].flat(Infinity)) {
    if (!item) continue
    if (typeof item == 'string') {
      for (let val of item.split(' ')) (val = val.trim()) && !res.includes(val) && res.push(val)
    } else if (typeof item == 'object') {
      for (let key in item) key && item[key] && !res.includes(key) && res.push(key)
    }
  }
  return toStr ? res.join(' ') : res
}

/**
 *  计算样式合集
 *  @param  {String|Array|Object} value 样式源 ( String: CssText | Array[String] | Object: { CssKey: CssValue } )
 *  @param  {Boolean}             toStr 是否序列化为文本
 *  @return {Object|String}             处理后的样式合集
 */
function computeStyle(value, toStr) {
  const res = {}, noHump = (v) => v.replace(/(^[A-Z])|[A-Z]/g, ($0, $1) => `${$1 ? '' : '-'}${$0.toLowerCase()}`)
  for (let item of [value].flat(Infinity)) {
    if (!item) continue
    if (typeof item == 'string') {
      for (let val of item.split(';')) {
        val = val.split(':')
        if (val.length == 2 && (val[0] = noHump(val[0].trim()))) res[val[0]] = val[1].trim()
      }
    } else if (typeof item == 'object') {
      for (let key in item) {
        let val = item[key], str = typeof val == 'string' || typeof val == 'number'
        res[noHump(key)] = str ? String(val) : Array.isArray(val) ? val.join(', ') : ''
      }
    }
  }
  if (toStr) {
    let str = ''
    for (let key in res) str += `${key}: ${res[key]}; `
    return str.trim()
  }
  return res
}

使用示例

var rawClass = ['c1', 'c2 c3', { c3: true, c4: true, c5: false }, ['c6', ['c6', 'c7'], { c8: 0, c9: 1 }]]
computeClass(rawClass) // => ["c1", "c2", "c3", "c4", "c6", "c7", "c9"]
computeClass(rawClass, true) // => "c1 c2 c3 c4 c6 c7 c9"

var rawStyle = ['width: 10px', 'height: 20px; line-height: 30px; font-size: ;', { lineHeight: '40px', 'border-width': ['2px'] }, ['color: red', ['background: blue', { background: '', backgroundColor: 'green', boxShadow: ['0 0 1px blue', 'inset 0 0 1px red'] }]]]
computeStyle(rawStyle) // => { width: "10px", height: "20px", "line-height": "40px", "font-size": "", "border-width": "2px", "color": "red", "background": "", "background-color": "green", "box-shadow": "0 0 1px blue, inset 0 0 1px red" }
computeStyle(rawStyle, true) // => "width: 10px; height: 20px; line-height: 40px; font-size: ; border-width: 2px; color: red; background: ; background-color: green; box-shadow: 0 0 1px blue, inset 0 0 1px red;"