logo头像

求知若渴,虚心若愚

jQuery - jQuery源码学习 - 给jQuery添加方法和属性(96行-283行)(一)

给jQuery添加方法和属性(96行-283行)

  • 其中最重要的一个init方法

原型问题

1
2
3
4
jQuery.fn = jQuery.prototype = {
// 原型对象
constructor: jQuery,//指回来
}
  • 对象引用,jQuery原型给了jQuery.fn
  • 给原型对象新添加实例属性和方法

jquery

  • 添加jQuery版本
1
jquery: core_version,

constructor

  • 修正this指向问题
  • 因为新的对象覆盖了原来的原型对象,需要修正
1
constructor: jQuery,

exec

  • exec() 方法用于检索字符串中的正则表达式的匹配
  • 返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为 null。
  • 此数组的第 0 个元素是与正则表达式相匹配的文本
  • 第 1 个元素是与 RegExpObject 的第 1 个子表达式相匹配的文本(如果有的话),第 2 个元素是与 RegExpObject 的第 2 个子表达式相匹配的文本(如果有的话)

init (重要)

  • 初始化和参数管理
  • init其实是真正的构造函数
  • selector类型很多,判断处理:
    • 不合法处理,空,null,undefined,false等,直接返回this
    • 判断字符串:
      • 代码作用:
        • 字符串可以选择元素
        • 还可以创建元素
      • 判断是不是标签,创建元素:
        • 判断左边第一个字符是不是<
        • 判断最后一个字符是不是>
        • 在判断长度是不是大于等于3
      • 判断是不是选择元素
    • 判断DOM元素:nodeType
    • $()传递的函数形式:isFunction
    • 传递数组或者json形式
  • 判断是否是字符串,字符串的处理:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

if(){
单标签:match = [null,'<li>',null]
多个:match = [null,'<li>11</li><li>22</li>',null]
}
else {
正则匹配,匹配情况1.id元素,或者是标签开头的<li>xxx,但是别的.box div.box等复杂情况匹配不到,就会返回null(空)

match = null // $('.box')$('div')$('#div div.box')$('')
match != null // $('#div1')$('<li>xxx')
// 示例:
match = ['#div1',null,'div1'] // $('#div1')
match = ['<li>xxx','<li>',null] // $('<li>xxx') //这句是后面写不写文章都不会被创建的原因,因为正则匹配的问题
}

// 能进入if的标签和id
if(match && (match[1] || !context)) {
if(match[1]) {
// 标签的情况
//1. 首先context上下文需要是元生的document对象
//2. jQuery.parseHTML方法:用于将HTML字符串解析为对应的DOM节点数组,返回一个数组
// 方法详细解析说明,后面部分有
$.parseHTML( htmlString [, context ] [, keepScripts ] )
htmlString(String类型):需要解析并转为DOM节点数组的HTML字符串
context(Element类型):指定在哪个Document中创建元素,默认为当前文档的document
keepScripts(Boolean类型):指定传入的HTML字符串中是否包含脚本,默认为false

// merge:合并两个数组内容到第一个数组,在jQuery内部是可以合并特殊的json的

// 处理创建标签,并且添加属性的形式,其中属性是json形式:$('<div>',{title:'hello',html:'1234'})
// rsingleTag = /^<(\w+)\s*\/?>(?:<\/\1>|)$/,
// 1. 匹配单标签:<li>或者<li></li>其余都不可以,必须是单个标签,2个li就不行了
// 2. 必须是一个对象字面量,也就是后面必须是json的形式才可以创建
if(){
// 对json进行for in 循环
// 如果jQuery有这个方法,就调用这个方法
// 如果么有这个方法,就添加这个属性attr
}
else {
// id的情况
// 根据id获取元素
// 判断元素是否存在,存在就拼接json
this.length =1
this[0] = 元素
this.context = document
this.selector = selector
return this
}
}
}

// 更复杂的情况,就是调用find方法进行
// $(document).find('ul li.box') 其实find内部调用的就是sizzle这个选择器引擎
  • 判断DOM元素
    • 判断是否有nodeType即可
    • 这个其实就是DOM对象转jQuery对象
  • 判断是不是函数
    • jQuery.isFunction,一般都是为了入口函数 ready
    • $(function(){}):简写的形式,其实本质调用的还是ready方法
  • 处理特殊情况:$(里面还是一个jquery对象)
  • 处理一个json或者数组之类的情况
  • makeArray
    • 将一个类似数组的对象转换为真正的数组对象
    • 类数组对象具有许多数组的属性(例如length属性,[]数组访问运算符等),不过它毕竟不是数组,缺少从数组的原型对象上继承下来的内置方法(例如:pop()、reverse()等)
    • 在jQuery内部其实是可以传第二个参数的,那么这个时候,就是转为我们想要的json对象的形式
1
2
3
4
5
6
7

$(function () {
var elems = document.getElementsByTagName("div"); // 返回一个节点列表
var arr = jQuery.makeArray(elems);
arr.reverse(); //对列表的元素使用一个数组方法
$(arr).appendTo(document.body);
})
支付宝打赏 微信打赏

赞赏是对我们的肯定!