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
}