Javascript 工具函数封装

自定义 log 函数

1
2
3
4
5
var log = function() {
console.log.apply(console, arguments)
}
// var log = console.log.bind(console)

选择器封装,类似 jQuery 中的 $

1
2
3
4
5
6
7
var e = function(selector) {
return document.querySelector(selector)
}
var es = function(selector) {
return document.querySelectorAll(selector)
}

查找 element 的所有子元素

1
2
3
4
5
var find = function(element, selector) {
return element.querySelector(selector)
}
// 在原生对象上部署此方法
// Element.prototype.find = Element.prototype.querySelector

添加 HTML 到指定元素后面

1
2
3
var appendHtml = function(element, html) {
element.insertAdjacentHTML('beforeend', html)
}

添加 HTML 到指定元素开头

1
2
3
var prependHtml = function(element, html) {
element.insertAdjacentHTML('afterbegin', html)
}

绑定事件

1
2
3
4
5
var bindEvent = function(element, eventName, callback) {
element.addEventListener(eventName, callback)
}
// 在原生对象上部署此方法
// Element.prototype.on = Element.prototype.addEventListener

给多个元素绑定事件

1
2
3
4
5
6
7
var bindAll = function(selector, eventName, callback) {
var elements = document.querySelectorAll(selector)
for(var i = 0; i < elements.length; i++) {
var e = elements[i]
bindEvent(e, eventName, callback)
}
}

添加 class

1
2
3
var addClass = function(element, className) {
element.classList.add(className)
}

删除 class

1
2
3
var removeClass = function(element, className) {
element.classList.remove(className)
}

切换 class

1
2
3
4
5
6
7
var toggleClass = function(element, className) {
if (element.classList.contains(className)) {
element.classList.remove(className)
} else {
element.classList.add(className)
}
}

删除拥有某个 class 的所有元素

1
2
3
4
5
6
7
8
var removeClassAll = function(className) {
var selector = '.' + className
var elements = document.querySelectorAll(selector)
for (var i = 0; i < elements.length; i++) {
var e = elements[i]
e.classList.remove(className)
}
}

批量删除元素

1
2
3
4
5
6
7
var removeAll = function(selector) {
var tags = document.querySelectorAll(selector)
for (var i = 0; i < tags.length; i++) {
var tag = tags[i]
tag.remove()
}
}

切换元素显示和隐藏

1
2
3
4
5
6
var show = function(element) {
element.classList.add('hide')
}
var hide = function(element) {
element.classList.remove('hide')
}

设置元素内容

1
2
3
4
5
6
7
8
9
var setText = function(element, text) {
element.textContent = text
}
var setHtml = function(element, html) {
element.innerHTML = html
}
var setValue = function(element, value) {
element.value = value
}

自定义属性操作

1
2
3
4
5
6
7
// 获取自定义属性
var getData = function(element, property) {
return element.dataset.property
}
var setData = function(element, property, value) {
element.dataset.property = value
}

AJAX

1
2
3
4
5
6
7
8
9
10
11
var ajax = function(method, path, data, reseponseCallback) {
var r = new XMLHttpRequest()
r.open(method, path, true)
r.setRequestHeader('Content-Type', 'application/json')
r.onreadystatechange = function() {
if(r.readyState === 4) {
reseponseCallback(r)
}
}
r.send(data)
}

如果对您有帮助,可以请我喝咖啡