Utils库个人封装
个人简单封装
/* 构造函数+原型模式 使用时先new一下*/
const Tool = function () {
/* 低级浏览器直接报错 不兼容es6语法 */
}
/* 在原型上定义方法 */
Tool.prototype = {
constructor: Tool, //修正constructor指向
/* 实用方法 */
toJSON(str) { /* 将json字符串转化为json对象 */
let jsonObj = null
try {
jsonObj = JSON.parse(str)
} catch(e) {
jsonObj = eval(`(${str})`)
}
return jsonObj
},
getType(val) { /* 得到数据类型 */
let res = {}.toString.call(val)
let type = res.split(' ')[1].slice(0, -1)
return type
},
listToArray(likeArr) { /* 伪数组转化为真数组 */
return [].slice.call(likeArr, 0)
},
/* DOM */
getChildren(parent, tagname) { /* 获取父元素下的所有指定子元素,第二参数不传默认返回全部子元素 */
let arr = []
let allChildren = parent.children
let reg = new RegExp(`${tagname}`, 'i')
for (let val of allChildren) {
let valStr = val + ''
if (tagname) {
//有tagname就进行判断
if (reg.test(valStr)) {
arr.push(val)
}
//放进arr并直接跳出该次循环
continue
}
//没有tagname就返回所有子元素
arr.push(val)
}
return arr
},
getPreSiblings(ele) { /* 获取当前元素前面的所有相同兄弟元素节点 */
let parent = ele.parentElement
let allChildren = this.getChildren(parent)
let index = allChildren.indexOf(ele)
let arr = []
for (let i = 0; i < index; i++) {
if (allChildren[i] + '' === ele + '') {
arr.push(allChildren[i])
}
}
return arr
},
getPreSibling(ele) { /* 获取当前元素的前一个相同兄弟元素节点 */
let arr = this.getPreSiblings(ele)
return arr[arr.length - 1]
},
getNextSiblings(ele) { /* 获取当前元素后面的所有相同兄弟元素节点 */
let parent = ele.parentElement
let allChildren = this.getChildren(parent)
let index = allChildren.indexOf(ele)
let arr = []
for (let i = index + 1; i < allChildren.length - 1; i++) {
if (allChildren[i] + '' === ele + '') {
arr.push(allChildren[i])
}
}
return arr
},
getNextSibling(ele) { /* 获取当前元素后一个相同兄弟元素节点 */
let arr = this.getNextSiblings(ele)
return arr[0]
},
getSiblings(ele) { /* 获取除了自己之外的兄弟元素节点 */
let pres = this.getPreSiblings(ele)
let nexts = this.getNextSiblings(ele)
return pres.concat(nexts)
},
getIndex(ele) { /* 获取当前元素所在父元素的索引值 */
let parent = ele.parentElement
let allChildren = this.getChildren(parent)
return allChildren.indexOf(ele)
},
getSiblingsIndex(ele) { /* 获取当前元素在相同兄弟元素间的索引值 */
let res = this.getPreSiblings(ele)
return res.length
},
/* CSS */
addClass(ele, val) { /* 给元素在原有class上添加值 */
let res = ele.getAttribute('class')
if (res === '') {
ele.setAttribute('class', val)
} else {
ele.className += ` ${val}`
}
},
removeClass(ele, val) { /* 删除元素的class值 */
let res = ele.getAttribute('class')
ul.className = res.replace(val, '').trim()
if (res === '') {
ele.removeAttribute('class')
}
},
hasClass(ele, val) { /* 判断是否有某个class名 */
let res = ele.getAttribute('class')
return res.indexOf(val) !== -1
},
setCss(ele, attr, val) { /* 设置元素一个css样式 */
ele.style[attr] = val
},
setManyCss(ele, obj) { /* 设置多个样式 */
for (let key in obj) {
this.setCss(ele, key, obj[key])
}
}
}
/* 给Array原型添加方法 */
;+function () {
const arrPro = Array.prototype
/* Array */
arrPro.removeRepeat = function () { /* 数组去重 */
let obj = {}
for (let i = 0; i < this.length; i++) {
let temp = this[i]
if (obj[temp] === temp && temp !== undefined) {
this.splice(i, 1)
i--
continue
}
obj[temp] = temp
}
obj = null
return this
}
}()
优雅实现,优雅代码。
浙公网安备 33010602011771号