shihangbo
(function(window, undefined) {
  //- 模块
  (96,283)  jQuery.fn :给JQ对象,添加一些方法和属性 
  //- 模块解析
  jQuery.fn = jQuery.prototype = {  // 添加实例属性和方法
    jquery :版本
    constructor :修正指向问题
    init() :初始化和参数管理
    selector :存储选择字符串
    length :this对象的长度
    toArray() :jq对象转原生数组,可将jq对象转成由原生对象组成的数组,即 {0: div, 1: div, 2: div} -> 原生[div, div, div]
    get() :jq对象转原生集合,可获取get指定的原生dom,$(\'div\').get(1).innerHTML = \'22222\'; 
    pushStack() :jq对象的入栈,在源码中非常重要!
    each() :遍历集合,使用jq对象对工具方法:return jQuery.each();
    ready() :dom加载的接口,延迟对象的处理:jQuery.ready.promise().done( fn );
    slice() :集合截取,【return this.pushStack(\'截取对dom对象\');】如:$(\'div\').slice(1,3).css(\'background\', \'red\');
    first() :集合的第一项,return this.eq( 0 );
    last() :集合的最后一项,return this.eq( -1 );
    eq() :集合的制定项,return this.pushStack( j >= 0 && j < len ? [ this[j] ] : [] );
    map() :返回新集合,调用 this.pushStack() 和 工具方法 jQuery.map();
    end() :返回集合前一个状态,【return this.prevObject; 】如:$(\'div\').pushStack( $(\'spsn\') ).css(\'background\', \'red\').end().css(\'background\', \'yellow\');
    push() :core_push :将数组的push方法挂载到jq对象上,使得jq对象拥有该方法,供jq库内部使用
    sort() :[].sort :同上
    splice() :[].splice :同上
  }
})(window)
 
【知识点梳理】
1、关于constructor属性的指向原理
function Aaa(){};
js源码中,当一个函数 Aaa 创建完之后,会自动给他原型中(Aaa.prototype)添加属性 constructor,并将属性指向构造函数本身,即 Aaa.prototype.constructor = Aaa;
2、init函数处理的【5种情况】
  (1) $("") $(null) $(undefined) $(false)
  (2) $("#div") $(".box") $("div") $("#div div.box")
     $("<li>") $("<li>1</li><li>2</li>")
  (3) $(this) $(document)
  (4) $(function() {})
  (5) $( [] ) $( {} )
2.1、对于(2)的源码解析---init函数处理解析
【第一个if判断,if选择字符串,如(2)种情况】
if ("string") {
 
【第二个if判断:获取match用于后续if判断】
if () {
  // $("<li>") $("<li>1</li><li>2</li>")
  match = [null, \'<li>\', null];
  match = [null, \'<li>1</li><li>2</li>\', null];
} esle {
  // $("#div") $(".box") $("div") $("#div div.box")
  // $("<li>hello")
  match = null; // $(".box") $("div") $("#div div.box")
  match = [\'#div1\', null, \'div1\']; // $("#div")
  match = [\'<li>hello\', \'<li>\', null]; // $("<li>hello")
}
【第三个if判断:创建标签和id选择器为真,class选择器,标签选择器和组合选择器为假】
if () {
  【第三个if嵌套if判断:创建标签为真,id选择器为假】
  if () { $("<li>") 处理;return this; } else { $("#div") 处理;return this; };
} else if ( !context || context.jquery ) {
  // 处理有原生的复杂选择器 or 没有上下文时
  $(\'ul\', document).find(\'li\');  >>转化为jq选择器>> jQuery(document).find(\'xx\');   // find -> sizzle find最终调用sizzle
  $(document).find(\'ul li.box\');  >>转化为jq选择器>> jQuery(document).find(\'xx\');  // find -> sizzle
} else {
  // 处理jq对象的复杂选择器
  $(\'ul\', $(document)).fint(\'li\'); >>转化为jq选择器>> jQuery(document).find(\'xx\');  // find -> sizzle
}
 
【第一个if判断,else if选择dom节点,如(3)种情况】
} else if (选择dom节点) {
  return this;
【第一个if判断,else if选择函数,如(4)种情况】
} else if (选择函数) {
  $(function(){ });
  $(document).ready(function(){ }); // dom加载是怎么做到的?
}
【与第一个if判断平级,另起一个if判断】
if () {
  // 处理如下方式的选择
  $( $(\'#div1\') )  >>转化为jq选择器>> $(\'#div1)
}
【与第一个if判断平级,剩下的情况处理:数组,json】
return jQuery.makeArray( selector, this ); // makeArray(); 内部使用,传两个参数,可将数组转成json,符合this的格式的json;
 
 
 3、jq对于$(\'li\')的源码解析

 

【小知识点梳理】
1、jquery的工具方法:构建库对最底层,实例方法:构建库更高一级的层次,很多实例方法通过调用工具方法实现?
2、jq实现的正负选择:( num < 0 ? this[ this.length + num ] : this[ num ] );
3、对“栈”对理解:先进后出,first push last unshift;

分类:

技术点:

相关文章: