为什么要从项目中移除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用于记录当前节点的显示状态，节点默认为显示：
``js
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;
}
这两个方法都返回了当前节点基类，方便外部调用时用一行代码实现多种功能，例如：
```js
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节点的操作都有相对统一的入口，这本身就秉持着面向对象的思想。
也许这个基类的适用面并没有很广，但只要能够起到抛砖引玉的作用，那也是很好的结果了。
