一次项目中移除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方法名相同的 appendpreAppend 方法:

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来配合。

有时我们还需要获取节点的 lefttop 值进行相应的计算,再提供一个 _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_0animate_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节点的操作都有相对统一的入口,这本身就秉持着面向对象的思想。

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

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章