封装 DOM

什么是封装

举例

• 电脑笔记本就是CPU、内存、硬盘、主板、显卡的封装
• 用户只需要接触显示器、键盘、鼠标、触控板等设备

接口

• 被封装的东西需要暴露一些功能给外部
• 这些功能就是接口，如USB接口，HDMI接口
• 设备只要支持这些接口，即可与被封装的东西通讯
• 比如键盘、鼠标支持USB接口
• 显示器支持HDMI接口

术语

库

• 我们把提供给他人用的工具代码叫做库
• 比如jQuery、Underscore

API

• 库暴露出来的函数或属性叫做API（应用编程接口）

框架

• 当你的库变得很大，并且需要学习才能看懂
• 这个库就叫框架，比如Vue/React

两张封装风格

对象风格

• 也叫命名空间风格
  • window.dom 是我们提供的全局对象

增

• dom.create(`<div>hi</div>`)用于创建节点
• dom.after(node, node2)用于新增弟弟
• dom.before(node, node2)用于新增哥哥
• dom.append(parent, child)用于新增儿子
• dom.wrap(`<div></div>`)用于新增爸爸
• template 标签可以容纳任意元素

删

• dom.remove(node) 用于删除节点
• dom.empty(parent) 用于删除后代

改

• dom.attr(node, 'title',?) 用于读写属性
• dom.text(node, ?) 用于读写文本内容
• dom.html(node, ?) 用于读写 HTML 内容
• dom.style(node, {color:'red'}) 用于修改 style
• dom.class.add(node, 'blue') 用于添加 class
• dom.class.remove(node, 'blue') 用于删除 class
• dom.on(node, 'click', fn) 用于添加事件监听
• dom.off(node, 'click', fn) 用于删除事件监听

查

• dom.find('选择器') 用于获取标签或标签们
• dom.parent(node) 用于获取父元素
• dom.children(node) 用于获取子元素
• dom.siblings(node) 用于获取兄弟姐妹元素
• dom.next(node) 用于获取弟弟
• dom.previous(node) 用于获取哥哥
• dom.each(nodes, fn) 用于遍历所有节点
• dom.index(node) 用于获取排行老几

window.dom = {
    // 增
    create(string) {
        const container = document.createElement('template');
        container.innerHTML = string.trim();
        return container.content.firstChild;
    },
    after(node, node2) {
        node.parentNode.insertBefore(node2, node.nextSibling);
    },
    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)
    },

    // 删
    remove(node) {
        node.parentNode.removeChild(node)
        return node
    },
    empty(node) {
        // 高级写法，直接从 node 获取 childNodes
        // const childNodes = node.childNodes
        const {
            childNodes
        } = node
        const array = []
        let x = node.firstChild
        while (x) {
            array.push(dom.remove(node.firstChild))
            x = node.firstChild
        }
        return array
    },

    // 改
    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 // ie
            } else {
                node.textContent // firefox / Chrome
            } 
        }
        
    },
    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, object)
                const object = name
                for(let key in object){
                    // key: border / color
                    node.style[key] = object[key]
                }
            }
        } 
    },
    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)
    },

    // 查
    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
    }
};