手写一个简易的Jquery考虑插件及扩展性

通过手写一个简易的DOM节点查询功能的Jquery实例，了解Jquery内部实现原理及理解Class与继承。 页面DOM节点如下

第一段文字 1

第一段文字 2

第一段文字 3

定义jquery对象 class jQuery{ // constructor 构造器 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) }) } } // 使用 var p = new jQuery('p') console.log(p) // jQuery {0: p, 1: p, 2: p, length: 3, selector: "p"} console.log(p.get(2)) //

第一段文字3

p.each(elem => console.log(elem.nodeName)) // p p p p.on('click',()=>alert('clicked')) 考虑插件 给jquery原型定义方法，实现插件性 jQuery.prototype.dialog=function(info){ console.log(info) } p.dialog('abc') //abc 考虑扩展性 定义新的对象并继承自jquery实现jquery 的扩展性，也就是造轮子 //造轮子 // [extends](ES6) 关键字用来创建一个普通类或者内建对象的子类 class myJquery extends jquery{ //constructor 属性返回对创建此对象的数组函数的引用。 constructor(selector){ //[super](ES6)关键字用于访问和调用一个对象的父对象上的函数 super(selector) } //扩展自己的方法 addclass(className){ } style(data){ } }

本文章由javascript技术分享原创和收集