术语

库
把提供给其他人用的工具代码叫做库，比如jQuery, Underscore
API
库暴露出来的函数或属性叫做API(应用编程接口)
框架
当你的库变得很大，并且需要学习才能看懂
那这个库就叫框架，比如Vue/React

封装

  1. window.dom = {
  2.   create: function (string) {
  3.     // template可以容纳任何元素
  4.     let container = document.createElement("template");
  5.     container.innerHTML = string.trim();
  6.     return container.content.firstChild;
  7.   },
  9.   // 可以省去 : function
  10.   // 把node2放到node1的后面
  11.   after(node1, node2) {
  12.     node1.parentNode.insertBefore(node2, node1.nextSibling);
  13.   },
  14.   before(node1, node2) {
  15.     node1.parentNode.insertBefore(node2, node1);
  16.   },
  17.   append(parent, child) {
  18.     parent.appendChild(child);
  19.   },
  20.   // 新增父节点
  21.   wrap(parent, node) {
  22.     dom.before(node, parent);
  23.     dom.append(parent, node);
  24.   },
  25.   remove(node) {
  26.     //node.remove()
  27.     node.parentNode.removeChild(node);
  28.     return node;
  29.   },
  30.   empty(node) {
  31.     const { childNodes } = node;
  32.     const array = [];
  34.     // for (let i = 0; i < childNodes.length; i++) {
  35.     //   array.push(dom.remove(childNodes[i]));
  36.     // }
  37.     // length是实时变化的，上面方法不可行
  39.     let x = node.firstChild;
  40.     while (x) {
  41.       array.push(dom.remove(node.firstChild));
  42.       x = node.firstChild;
  43.     }
  44.     return array;
  45.   },
  46.   // 设置/获取属性
  47.   attr(node, name, value) {
  48.     // 重载
  49.     if (arguments.length === 3) {
  50.       node.setAttribute(name, value);
  51.     } else if (arguments.length === 2) {
  52.       return node.getAttribute(name);
  53.     }
  54.   },
  55.   text(node, string) {
  56.     // 适配
  57.     if (arguments.length === 2) {
  58.       if ("innerText" in node) {
  59.         node.innerText = string; // ie
  60.       } else {
  61.         node.textContent = string; // firefox
  62.       }
  63.     } else if (arguments.length === 1) {
  64.       if ("innerText" in node) {
  65.         return node.innerText;
  66.       } else {
  67.         return node.textContent;
  68.       }
  69.     }
  70.   },
  71.   html(node, value) {
  72.     if (arguments.length === 2) {
  73.       node.innerHTML = value;
  74.     } else if (arguments.length === 1) {
  75.       return node.innerHTML;
  76.     }
  77.   },
  78.   style(node, name, value) {
  79.     if (arguments.length === 3) {
  80.       // dom.style(div, 'color', 'red')
  81.       node.style[name] = value;
  82.     } else if (arguments.length === 2) {
  83.       if (typeof name === "string") {
  84.         // dom.style(div, 'color')
  85.         return node.style[name];
  86.       } else if (name instanceof Object) {
  87.         //dom.style(div, {color: 'red'})
  88.         for (let key in name) {
  89.           node.style[key] = name[key];
  90.         }
  91.       }
  92.     }
  93.   },
  94.   class: {
  95.     add(node, className) {
  96.       node.classList.add(className);
  97.     },
  98.     remove(node, className) {
  99.       node.classList.remove(className);
  100.     },
  101.     has(node, className) {
  102.       return node.classList.contains(className);
  103.     },
  104.   },
  105.   on(node, eventName, fn) {
  106.     node.addEventListener(eventName, fn);
  107.   },
  108.   off(node, eventName, fn) {
  109.     node.removeEventListener(eventName, fn);
  110.   },
  111.   find(selector, scope) {
  112.     // const div = dom.find("#test")[0]
  113.     return (scope || document).querySelectorAll(selector);
  114.   },
  115.   parent(node) {
  116.     return node.parentNode;
  117.   },
  118.   children(node) {
  119.     return node.children;
  120.   },
  121.   siblings(node) {
  122.     return Array.from(node.parentNode.children).filter((n) => n !== node);
  123.   },
  124.   next(node) {
  125.     let x = node.nextSibling;
  126.     while (x && x.nodeType === 3) {
  127.       x = x.nextSibling;
  128.     }
  129.     return x;
  130.   },
  131.   previous(node) {
  132.     let x = node.previousSibling;
  133.     while (x && x.nodeType === 3) {
  134.       x = x.previousSibling;
  135.     }
  136.     return x;
  137.   },
  138.   each(nodeList, fn) {
  139.     for (let i = 0; i < nodeList.length; i++) {
  140.       fn.call(null, nodeList[i]);
  141.     }
  142.   },
  143.   index(node) {
  144.     const list = dom.children(node.parentNode);
  145.     let i;
  146.     for (i = 0; i < list.length; i++) {
  147.       if (list[i] === node) {
  148.         break;
  149.       }
  150.     }
  151.     return i;
  152.   },
  153. };