【三】封装DOM操作

关于专题【vue开发音乐App】

将一些涉及DOM操作的方法封装成dom.js，培养组件化开发的习惯和思维，良好的封装有利于代码维护和效率提升。

一、常见的DOM操作

• addClass(el, className)：为元素el添加名为className的样式类
• hasClass(el, className)：判断元素el是否包含名为className的样式类
• getData(el, name, val)：获取/设置指定dom上的属性值（第三个参数val，存在表示设置，不存在表示获取）
• prefixStyle(style)：为样式style拼接一个能够支持它的浏览器内核前缀

二、src/common/js/dom.js

// 为元素el添加名为className的样式类
export function addClass (el, className) {
  // 添加之前先检查是否已经包含该类
  if (hasClass(el, className)) {
    return false
  }
  let classArr = el.className.split(' ')
  classArr.push(className)
  el.className = classArr.join(' ')
}

// 检查元素el是否已经包含名为className的样式类
export function hasClass (el, className) {
  // 使用一个正则判断
  // (^|\s)：直接开头或前面是空格；(\s|$)：后面是空格或者直接结尾
  // 多出的一个反斜杠用于转义
  let reg = new RegExp(`(^|\\s)${className}(\\s|$)`)
  return reg.test(el.className)
}

// 获取指定dom上的属性值（第三个参数val，存在表示设置，不存在表示获取）
export function getData (el, name, val) {
  const prefix = 'data-'
  name = prefix + name
  if (val) {
    return el.setAttribute(name, val)
  } else {
    return el.getAttribute(name)
  }
}

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

// 定义vendor：供应商
let vendor = (() => {
  let transformName = {
    webkit: 'webkitTransform',
    Moz: 'MozTransform',
    O: 'OTransform',
    ms: 'msTransform',
    standard: 'transform'
  }
  // 循环遍历transformName，如果element的style支持其中一个，就返回（内核标志）
  for (let key in transformName) {
    if (elementStyle[transformName[key]] !== undefined) {
      return key
    }
  }

  // 如果都不满足，说明该浏览器有毛病，return false
  return false
})()

// 为样式style拼接一个能够支持它的浏览器内核前缀
export function prefixStyle (style) {
  if (vendor === false) {
    return false
  }
  if (vendor === 'standard') {
    return style
  }
  // 然后就做拼接，内核缩写 + 属性名首字母大写 + 剩余部分
  // eg. 'webkit' + 'T' + 'ransform' = 'webkitTransform'
  return vendor + style.charAt(0).toUpperCase() + style.substr(1)
}

三、调用示例

import {addClass, getData, prefixStyle} from 'common/js/dom'

// 为元素el添加.slider-item
addClass(el, 'slider-item')

// 获取绑在元素el标签上的'data-index'属性值
let index = getData(el, 'index')

// 在元素el的标签上绑定一个'data-name'属性，值为'abc'
getData(el, 'name', 'abc')

// 为transform/backdrop-filter拼接一个能够支持它们的浏览器内核前缀
// 以确保它们能被正确执行
let transform = prefixStyle('transform')
let filter = prefixStyle('backdrop-filter')

this.$refs.bgImage.style[transform] = `scale(${scale})`
this.$refs.filter.style[filter] = `blur(${blur}px)`