一次项目中移除jQuery的实践

早期的项目为了降低兼容浏览器的成本使用了jQuery，在项目使用期间，也逐渐暴露了一些问题。由于我们是sdk项目，需要集成进公司其他部门的产品，所以对适配以及兼容性要求比较高。在应用过程中，就发生了与移动端三方库zepto变量$冲突的问题。当时为了解决这个问题，新建了一个变量提供给jQuery以避免冲突。后期有了充裕的时间，便考虑写一个基类用来代替jQuery，同时还能减少一次网络请求，何乐而不为呢。

我把这个基类起名叫做 BaseElement ，由于项目中实际使用的dom节点不是很多，不需要考虑渲染的性能消耗，所以只实现了一些节点操作必备的方法。

用一个基类来封装dom节点，必然会有不同的节点类型和不同的样式，有时也会有文本，所以要给构造函数加入几个参数：

constructor (tag, className, text) {
        this._element = null;
        if (typeof tag === 'string') {
            this._element = document.createElement(tag);

        } else if (tag instanceof HTMLElement) {
            this._element = tag;
        }

        if (this._element) {
            if (typeof className === 'string' && className !== '') {
                this._element.className = className;
            }
            if (typeof text === 'string' && text !== '') {
                this._element.innerText = text;
            }
        }
    }
    
    get element () {
        return this._element;
    }
复制代码

这样 BaseElement 基类就用 _element 这个变量持有了dom节点，接下来的一系列方法也都与dom节点有关。

首先是显示与隐藏的方法，并加入了变量 _visible 用于记录当前节点的显示状态，节点默认为显示：

constructor () {
        this._visible = true;
    }
    
    show () {
        this._element.style.display = '';
        this._visible = true;
        return this;
    }
    
    hide () {
        this._element.style.display = 'none';
        this._visible = false;
        return this;
    }
    
    get visible () {
        return this._visible;
    }
复制代码

这两个方法都返回了当前节点基类，方便外部调用时用一行代码实现多种功能，例如：

let element = new BaseElement('div');
element.show().hide();
复制代码

基类光有显示和隐藏方法并不够，还需要把这个节点加入到节点树中才能够真正的显示出来，这里实现了与jQuery方法名相同的 append 和 preAppend 方法：

append (child) {
        if (this._element instanceof HTMLElement) {
            if (child instanceof BaseElement) {
                this._element.appendChild(child.element);
            } else if (child instanceof HTMLElement) {
                this._element.appendChild(child);
            }
            return this;
        }
        return null;
    }
    
    preAppend (child) {
        if (this._element instanceof HTMLElement) {
            if (child instanceof BaseElement) {
                this._element.prepend(child.element);
            } else if (child instanceof HTMLElement) {
                this._element.prepend(child);
            }
            return child;
        }
        return null;
    }
复制代码

再来一个移除的方法：

remove (child) {
        if (this._element instanceof HTMLElement)
            if (child instanceof BaseElement) {
                this._element.removeChild(child.element);
            } else if (child instanceof HTMLElement) {
                this._element.removeChild(child);
            }
            return this;
        }
        return null;
    }
复制代码

再实现一个移除自身所有子节点的方法：

empty () {
        if (this._element instanceof HTMLElement) {
            let children = this._element.children;
            while (children.length) {
                this._element.removeChild(children[0]);
            }
        }
    }
复制代码

实现这些方法之后，节点基类已经可以自由的添加与移除节点，接下来就需要处理节点的行间内容与样式了。

节点行间内容用两个存取器可以轻松实现：

set text (value) {
        if (typeof value === 'string' && this._element instanceof HTMLElement) {
            this._element.innerText = value;
        }
    }
    
    get text () {
        if (this._element instanceof HTMLElement) {
            return this._element.innerText;
        }
        return '';
    }
    
    set html (value) {
        if (typeof value === 'string' && this._element instanceof HTMLElement) {
            this._element.innerHTML = value;
        }
    }
    
    get html () {
        if (this._element instanceof HTMLElement) {
            return this._element.innerHTML;
        }
        return '';
    }
复制代码

至于样式，也提供了不同的方法来操作：

css (key, value) {
        if (value !== null && this._element instanceof HTMLElement) {
            this._element.style[key] = value;
        }
        return this;
    }
    
    addClass (className) {
        if (this._element instanceof HTMLElement) {
            let tmpClassName = this._element.className;
            if (className !== '' && !tmpClassName.split(' ').includes(className)) {
                tmpClassName += ' ' + className;
                this._element.className = tmpClassName;
            }
            return this;
        }
        return null;
    }
    
    removeClass (className) {
        if (this._element instanceof HTMLElement) {
            let tmpClassName = this._element.className;
            if (className !== '') {
                this._element.className = tmpClassName.split(' ').filter((value) => {
                    return value !== className && value !== '';
                }).join(' ');
            }
            return this;
        }
        return null;
    }
    
    hasClass (className) {
        if (this._element instanceof HTMLElement) {
            if(className !== '') {
                return this._element.className.indexOf(className) >= 0;
            }
        }
        return false;
    }
复制代码

css方法可以直接设置节点的某项样式，例如：

let element = new BaseElement('div');
element.css('width', '100%');
复制代码

而 addClass 方法则直接给节点设置一个class，需要写相应的css来配合。

有时我们还需要获取节点的 left 与 top 值进行相应的计算，再提供一个 _offset 方法来获取这些值， _offset 方法通过循环调用 offsetParent 来获取当前节点与页面左上角的偏移，关于 offsetParent 的详情请查看这里：

_offset (direction) {
        if (this._element instanceof HTMLElement) {
            let offsetDir: string = 'offset' + direction[0].toUpperCase() + direction.substring(1);

            let realNum: number = this._element[offsetDir];
            var positionParent: Element = (this._element as HTMLElement).offsetParent;

            while(positionParent !== null) {
                realNum += positionParent[offsetDir];
                positionParent = (positionParent as HTMLElement).offsetParent;
            }
            return realNum;
        }
        return 0;
    }
    
    get left () {
        return this._offset('left');
    }
    
    get top () {
        return this._offset('top');
    }
复制代码

在jQuery中，动画是依照计时器来计算节点属性的，实现起来需要一定的代码量，而项目应用环境也都是现代浏览器，所以动画方面就使用css3来实现了。这里有一个小技巧，如果需要实现重复性的动画，比如popup效果，可以写两个css，比如 animate_0 和 animate_1 ，再加上这样的代码就没问题了：

this._animateIndex = 0;

applyAnimate () {
    let animateName = `animate_${this._animateIndex}`;
    this._element.removeClass(animateName);
    this._animateIndex = 1 - this._animateIndex;
    this._element.addClasss(animateName);
}
复制代码

最后需要给节点添加一些事件侦听，毕竟现在纯展示性的项目很少，绝大多数的项目都需要与用户产生交互，方法如下：

on (type, callback) {
        if (this._element instanceof HTMLElement) {
            if (this._element.addEventListener) {
                this._element.addEventListener(type, callback);
            } else if (this._element['attachEvent']) {
                this._element['attachEvent']('on' + type, callback);
            } else {
                this._element['on' + type] = callback;
            }
        }
    }
复制代码

还有一个在交互中喜闻乐见的 hover 方法：

hover (inCallback, outCallback) {
        // mouseover和mouseout在进入子节点时也会触发，这里使用mouseenter和mouseleave
        this.on('mouseenter', inCallback);
        this.on('mouseleave', outCallback);
    }
复制代码

节点基类到这里，支持通常的项目开发已经足够了，如果有一些特殊的节点类型，比如video之类，再自行扩展即可。

总结

在项目中用 BaseElement 构建dom节点，由于使用的都是封装好的方法，也可以使所有dom节点的操作都有相对统一的入口，这本身就秉持着面向对象的思想。

也许这个基类的适用面并没有很广，但只要能够起到抛砖引玉的作用，那也是很好的结果了。