bistukey 2019-06-26
如今,在项目中使用React、Vue等框架作为技术栈已成为一种常态,在享受带来便利性的同时,也许我们渐渐地遗忘原生js的写法。
现在,是时候回归本源,响应原始的召唤了。本文将一步一步带领大家封装一套属于自己的DOM操作库,我将其命名为qnode
。
qnode
吸收了jquery优雅的链式写法,并且融入了我个人的一些经验和思考:
大家可能会比较疑惑,什么是DOM工厂模式?
实际上是这样,有一些需要共享的节点、数据和方法,它在某个文件中定义,在另一个文件中调用。我最初的方式是在文件中暴露(export)出这些东西,但是后来发现文件多了,这种方式很难维护,而且需要引入很多的文件,非常麻烦。
于是在不断的摸索和思考中,想出了DOM工厂模式这个概念,咱们可以这么理解:DOM工厂就是取快递的地方,不管是从哪里发来的货品,统一送到这里,然后再由特定的人群来取。
当然,未来还有很长的路要走,我会不断地探索和改进,融入更多的想法和改进。
qnode ├── QNode.js ├── README.md ├── api.js ├── core │ ├── attr.js │ ├── find.js │ ├── index.js │ ├── klass.js │ ├── listener.js │ ├── node.js │ └── style.js ├── index.js ├── q.js └── tools.js
q.js
是DOM操作的集合,融合了所有core的方法QNode.js
是工厂模式,提供节点、数据以及方法的缓存和获取core
目录下的文件是DOM操作的具体方法core/attr.js
:内容属性操作
import { isDef } from '../tools' export function text (value) { if (!isDef(value)) { return this.node.textContent } this.node.textContent = value return this } export function html (value) { if (!isDef(value)) { return this.node.innerHTML } this.node.innerHTML = value return this } export function value (val) { if (!isDef(val)) { return this.node.value } this.node.value = val return this } export function attr (name, value) { if (!isDef(value)) { return this.node.getAttribute(name) } if (value === true) { this.node.setAttribute(name, '') } else if (value === false || value === null) { this.node.removeAttribute(name) } else { this.node.setAttribute(name, value) } return this }
core/find.js
:节点信息获取
export function tagName () { return this.node.tagName } export function current () { return this.node } export function parent () { return this.node.parentNode } export function next () { return this.node.nextSibling } export function prev () { return this.node.previousSibling } export function first () { return this.node.firstChild } export function last () { return this.node.lastChild } export function find (selector) { return this.node.querySelector(selector) }
core/klass.js
:class样式操作
import { isArray } from '../tools' export function addClass (cls) { let classList = this.node.classList let classes = isArray(cls) ? cls : [].slice.call(arguments, 0) classList.add.apply(classList, classes.filter(c => c).join(' ').split(' ')) return this } export function removeClass (cls) { let classList = this.node.classList let classes = isArray(cls) ? cls : [].slice.call(arguments, 0) classList.remove.apply(classList, classes.filter(c => c).join(' ').split(' ')) return this } export function hasClass (cls) { let classList = this.node.classList // 若有空格,则必须满足所有class才返回true if (cls.indexOf(' ') !== -1) { return cls.split(' ').every(c => classList.contains(c)) } return classList.contains(cls) }
core/listener.js
:事件监听处理
export function on (type, fn, useCapture = false) { this.node.addEventListener(type, fn, useCapture) return this } export function off (type, fn) { this.node.removeEventListener(type, fn) return this }
core/node.js
:DOM操作
import { createFragment } from '../api' import { getRealNode, isArray } from '../tools' export function append (child) { let realNode = null if (isArray(child)) { let fragment = createFragment() child.forEach(c => { realNode = getRealNode(c) if (realNode) { fragment.appendChild(realNode) } }) this.node.appendChild(fragment) } else { realNode = getRealNode(child) if (realNode) { this.node.appendChild(realNode) } } return this } export function appendTo (parent) { parent = getRealNode(parent) if (parent) { parent.appendChild(this.node) } return this } export function prepend (child, reference) { let realNode = null let realReference = getRealNode(reference) || this.node.firstChild if (isArray(child)) { let fragment = createFragment() child.forEach(c => { realNode = getRealNode(c) if (realNode) { fragment.appendChild(realNode) } }) this.node.insertBefore(fragment, realReference) } else { realNode = getRealNode(child) if (realNode) { this.node.insertBefore(realNode, realReference) } } return this } export function prependTo (parent, reference) { parent = getRealNode(parent) if (parent) { parent.insertBefore(this.node, getRealNode(reference) || parent.firstChild) } return this } export function remove (child) { // 没有要移除的子节点则移除本身 if (!child) { if (this.node.parentNode) { this.node.parentNode.removeChild(this.node) } } else { let realNode = null if (isArray(child)) { child.forEach(c => { realNode = getRealNode(c) if (realNode) { this.node.removeChild(realNode) } }) } else { realNode = getRealNode(child) if (realNode) { this.node.removeChild(realNode) } } } return this }
core/style.js
:内联样式操作
import { isDef, isObject } from '../tools' const htmlStyle = document.documentElement.style const prefixes = ['webkit', 'moz', 'ms', 'o'] const prefixLen = prefixes.length function getRealStyleName (name) { if (name in htmlStyle) { return name } // 首字母大写 let upperName = name[0].toUpperCase() + name.substr(1) // 前缀判断 for (let i = 0; i < prefixLen; i++) { let realName = prefixes[i] + upperName if (realName in htmlStyle) { return realName } } // 都不支持则返回原值 return name } export function css (name) { if (!this.computedStyle) { this.computedStyle = window.getComputedStyle(this.node) } if (!isDef(name)) { return this.computedStyle } return this.computedStyle[name] } export function style (a, b) { if (isObject(a)) { Object.keys(a).forEach(name => { name = getRealStyleName(name) this.node.style[name] = a[name] }) } else { a = getRealStyleName(a) if (!isDef(b)) { return this.node.style[a] } this.node.style[a] = b } return this } export function show () { if (this.node.style.display === 'none') { this.node.style.display = '' } return this } export function hide () { this.node.style.display = 'none' return this } export function width () { return this.node.clientWidth } export function height () { return this.node.clientHeight }
core/index.js
:所有操作集合
import * as attr from './attr' import * as find from './find' import * as klass from './klass' import * as listener from './listener' import * as node from './node' import * as style from './style' export default Object.assign({}, attr, find, klass, listener, node, style )
api.js
:DOM API
// 创建dom节点 export function createElement (tagName) { return document.createElement(tagName) } // 创建dom节点片段 export function createFragment () { return document.createDocumentFragment() }
tools.js
:工具方法
import { createElement } from './api' export const Q_TYPE = (typeof Symbol === 'function' && Symbol('q')) || 0x89bc export const QNODE_TYPE = (typeof Symbol === 'function' && Symbol('QNode')) || 0x7b96 // 占位node节点 export const emptyNode = createElement('div') export function isQ (ele) { return ele && ele.node && ele.__type__ === Q_TYPE } /** * 判断值是否定义 * @param {any} t * @returns {boolean} */ export function isDef (t) { return typeof t !== 'undefined' } /** * 判断是否为字符串 * @param {any} t * @returns {boolean} */ export function isString (t) { return typeof t === 'string' } /** * 是否为对象 * @param {any} t * @param {boolean} [includeArray=false] 是否包含数组 * @returns {boolean} */ export function isObject (t) { return t && typeof t === 'object' } /** * 判断是否为数组 * @param {any} t * @returns {boolean} */ export function isArray (t) { if (Array.isArray) { return Array.isArray(t) } return Object.prototype.toString.call(t) === '[object Array]' } // 判断是否为dom元素 export function isElement (node) { if (isObject(HTMLElement)) { return node instanceof HTMLElement } return node && node.nodeType === 1 && isString(node.nodeName) } export function getRealNode (ele) { if (isElement(ele)) { return ele } else if (isQ(ele)) { return ele.node } return null }
q.js
import { createElement } from './api' import { Q_TYPE, isElement, isString, emptyNode } from './tools' import core from './core' class Q { constructor (selector) { let node if (isElement(selector)) { node = selector } else if (isString(selector)) { if (selector[0] === '$') { node = createElement(selector.substring(1)) } else { node = document.querySelector(selector) } } // node不存在,则创建一个占位node,避免操作dom报错 this.node = node || emptyNode this.__type__ = Q_TYPE } } // 集合 Object.assign(Q.prototype, core) export default function q (selector) { return new Q(selector) }
QNode.js
import { QNODE_TYPE, isQ, isArray } from './tools' import q from './q' export default class QNode { constructor () { this.__type__ = QNODE_TYPE this.qNodes = {} this.store = {} this.methods = {} } q (selector) { return q(selector) } getNode (name) { return this.qNodes[name] } setNode (name, node) { if (isArray(node)) { this.qNodes[name] = node.map(n => isQ(n) ? n : q(n)) } else { this.qNodes[name] = isQ(node) ? node : q(node) } return this.qNodes[name] } getStore (name) { return this.store[name] } setStore (name, value) { this.store[name] = value return value } getMethod (name) { return this.methods[name] } execMethod (name) { let fn = this.methods[name] return fn && fn.apply(this, [].slice.call(arguments, 1)) } setMethod (name, fn) { let thisFn = fn.bind(this) this.methods[name] = thisFn return thisFn } }
index.js
import q from './q' import QNode from './QNode' export { q, QNode } export default { q, QNode }
到这里为止,所有代码已经编写完成了。
参数:
备注:如果有多个节点,则只获取第一个
方法:
attr
find
class
listener
node
style
方法:
本文到这里就要结束了,读者对文中的代码感兴趣的话,建议自己动手试试,在编程这块儿,实践才能出真知。
写完之后,是不是跃跃欲试呢?下一篇文章我将基于本文封装的DOM库来开发无限循环轮播图,详细请看下文:原生js系列之无限循环轮播图。
附:本文源码
Vue和React是数据驱动视图,如何有效控制DOM操作?能不能把计算,更多的转移为js计算?因为js执行速度很快。patch函数-->patch,对比tag,对比tag与key,对比children