此绘彼卷

导航

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
	}
}()

posted on 2020-04-17 17:10  此绘彼卷  阅读(321)  评论(0)    收藏  举报