使用 class 写一个简单的jquery,考虑插件和扩展性

简易的jQuery 对象

class jQuery{
	// 构造函数
	constructor(selector){
		const result  =  document.querySelectorAll(selector);
		const length = result.length
		for (let i=0;i<length;i++) {
			this[i] = result[i]
		}
		this.length = length
		this.selector = selector
	}
	// 获取指定位置的标签
	get(index){
		return this[index]
	}
	// 遍历
	each(fn){
		for (let i = 0;i<this.length;i++){
			const elem = this[i]
			fn(elem)
		}
	}
	// 事件绑定
	on(type,fn) {
		return this.each(elem => {
			elem.addEventListener(type,fn,false)	
		})
	}
	
}

插件 (简易弹框)

jQuery.prototype.dialog = function(info){
	alert(info);
}

扩展方法

class myJquery extents jQuery{
	constructor(selector){
		super(selector)
	}
	// 给元素添加类名
	addClass(){}
	// 添加样式
	style(data){}
	
	.......
}