get started
• 封装
• 写DOM库
封装
• 举例
电脑笔记本就是CPU、内存、硬盘、主板、显卡的封装
• 接口
被封装的东西需要暴露一些功能给外部
这些功能就是接口，如USB接口、HDMI接口
设备只要支持这些接口，即可与被封装的东西通讯
术语
• 库
我们把提供给其他人用的工具代码叫做库
比如jQuery、Underscore
• API
库暴露出来的函数或者属性叫做API（应用编程接口）
• 框架
当你的库变得很大，并且需要学习才能看懂，那么这个库就叫框架
比如Vue、React
• 注意
编程界的属于大部分都很随便，没有固定的解释，所以意会即可
用两种风格封装DOM操作
对象风格和链式风格（也叫jQuery风格，下一篇）
对象风格
• 也叫命名空间风格
window.dom是我们提供的全局对象
• 增
dom.create(`<div>hi</div>`) 用于创建节点(template.innerHTML = string.trim();)
dom.after(node, node2) 用于新增弟弟
dom.before(node, node2) 用于新增哥哥
dom.append(parent, node) 用于新增儿子
dom.wrap(node, parent) 用于新增爸爸
代码如下
create(string) {
const container = document.createElement("template");
container.innerHTML = string.trim(); //trim()将字符串两边的空格去掉
return container.content.firstChild;
},
after(node, node2) {
node.parentNode.insertBefore(node2, node.nextSibling);//将node2插入node的后面
// 使用node的上一个node的方法将node2插入到node的下一个节点之前，也就是将node2插到node后面
},
before(node, node2) {
node.parentNode.insertBefore(node2, node);
},
append(parent, node) {
parent.appendChild(node)
},
wrap(node, parent) {
dom.before(node, parent)
dom.append(parent, node)
},
• 删
dom.remove(node) 用于删除节点
dom.empty(parent) 用于删除后代
代码如下
remove(node) {
node.parentNode.removeChild(node) // node.remove()也可以用但是太新了，用旧的保险
return node
},
empty(node) {
const { childNodes } = node // const childNodes = node.childNodes
const array = []
// for (let i = 0; i < childNodes.length; i++){ childNodes.length会实时变化
let x = node.firstChild
while (x) {
array.push(dom.remove(node.firstChild))
x = node.firstChild
}
return array
},
• 改
image.png
attr(node, name, value) { // 重载：根据参数个数不同
if (arguments.length === 3) {
node.setAttribute(name, value)
} else if (arguments.length === 2) {
return node.getAttribute(name)
}
},
text(node, string) { // 适配
if (arguments.length === 2) {
if ('innerText' in node) {
node.innerText = string; // ie
} else {
node.textContent = string; // firefox/Chrome
}
} else if (arguments.length === 1) {
if ('innerText' in node) {
return node.innerText
} else {
return node.textContent
}
}
},
html(node, string) {
if (arguments.length === 2) {
node.innerHTML = string;
} else if (arguments.length === 1) {
return node.innerHTML
}
},
style(node, name, value) {
if (arguments.length === 3) {
// dom.style(div, 'color', 'red')
node.style[name] = value;
} else if (arguments.length === 2) {
if (typeof name === 'string') {
// dom.style(div, 'color')
return node.style[name]
} else if (name instanceof Object) {
// dom.style(div, {color: 'red'})
for (let key in name) {
node.style[key] = name[key] // 若使用句点法会将值默认为字符串
}
}
}
},
class: { // class是个对象
add(node, className) {
node.classList.add(className)
},
remove(node, className) {
node.classList.remove(className)
},
has(node, className) {
return node.classList.contains(className)
}
},
on(node, eventName, fn) {
node.addEventListener(eventName, fn)
},
off(node, eventName, fn) {
node.removeEventListener(eventName, fn)
},
• 查
image.png
find(selector, scope) {
return (scope || document).querySelectorAll(selector)
},
parent(node) {
return node.parentNode
},
children(node) {
return node.children
},
siblings(node) {
return Array.from(node.parentNode.children).filter(n=>n!==node)
},
next(node) {
let x = node.nextSibling
while (x && x.nodeType === 3) {
x = x.nextSibling
}
return x
},
previous(node) {
let x = node.previousSibling
while (x && x.nodeType === 3) {
x = x.previousSibling
}
return x
},
each(nodeList, fn) {
for (let i = 0; i < nodeList.length; i++){
fn.call(null, nodeList[i])
}
},
index(node) {
const list = dom.children(node.parentNode)
let i
for (i = 0; i < list.length; i++){
if (list[i] === node) {
break
}
}
return i
}
