【三】封装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)`
发表评论 (审核通过后显示评论)：