class的原型本质:
- 原型和原型链的图示
- 属性和方法的执行规则
核心代码演示:
class jQuery {
constructor(selector) {
//查询dom元素
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
}
//返回第几个dom元素
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)
})
}
//扩展很多DOM--API
}
// const $p = new jQuery('p')
// $p.get(1)
// $p.each((elem) => console.log(elem.nodeName))
// $p.on('click', () => alert('clicked')
插件:
扩展性: