手写jQuery核心代码Day1
手写jQuery核心代码
jQuery这个前端JS库虽然已经是逐渐的被淘汰了,但是作为曾经的一个经典的框架,思来想去,还是应该学习一下这个库的源码方面的内容,也是进一步的学习封装
源码在:https://gitee.com/jimmyxuexue/handwritten_jquery_source
jQuery的源码是运用到闭包的结构来写的,我的代码都是用一个类来进行封装的
静态属性和方法
Version属性:查看当前的库的版本,这个也是模仿jQuery的
一系列对数据类型判断的方法,入是否是数组,函数,字符串,HTML代码片段进行的判定
因为jQuery传递的是选择器,代码片段,或者其他无意义的值的时候返回的结果也是不同的,所以在类的constrouct构造函数中分别对一些类型的数据进行处理之后再返回出去
我们再传递数组或者是选择器的时候,如果是多个的情况下经常是返回一个对象,对象的属性中是有一个length属性的,这个length属性需要我们自己绑定再this身上再返回,同时,当我们进行一些方法的操作的时候,入toArray()
方法的时候,结果是数组,实现的核心是我们需要遍历DOM或者对象的属性,因为length也是属性,也会被我们所遍历,这个不是我们想要的,所以我们再返回this之前需要对length这个属性绑定属性绑定不可遍历的这个属性特征
使用的是Object这个原型对象的方法 Object.defineProperty(this,'length',{ enumerable:false})
这样是将这个‘length属性改成不可遍历的属性,正常访问访问的到
属性特征的其他知识点
属性特征可以设置多种特征如下
value //设置属性值
writable //值可否被修改
enumerable //属性可否被遍历
configurable //可否被配置
对象上的方法
toArray()
方法:将对象转换成数组的形式,如传递的是li标签,那么会将页面中的所有li标签绑定成一个数组的形式返回
因为所有的数据在构造函数的时候就返回给this了,所以这里的this是能够拿到对象类型的所有数据的,再通过for in的形式遍历对象的所有key,再push到一个数组中返回