jQuery源码解析_大致结构(上)

准备：

准备JQ源码文件，版本2.0.3，因为在2.x之后不支持ie 6，7，8少了兼容性写法

JQ源码： https://cdnjs.cloudflare.com/...
在线工具： https://tool.lu/js/
在线编辑器： http://jsrun.pro/new?mode=black
Sizzle： https://github.com/jquery/sizzle

开始：

变量污染，闭包

//=>匿名函数自执行
(function(){....})()

(function(){
  var a=2;
})()
  alert(a)
  //=> Uncaught ReferenceError: a is not defined

里面的内容对外面没影响,避免变量污染问题

(function(){
  var a=2;
  function $(){
    alert(a)
  }
})()
$()
=>Uncaught ReferenceError: $ is not defined

提供接口，对外

window.xx=xx

(function(){
  var a=2;
  var mounted='imycode'
  function $(){
    alert(a)
  }
  window.$=mounted
})()
  console.log($)
  //=>imycode

通过 window.变量名挂载出去相当于接口

---

分析代码块结构

21，94 定义变量和函数 jQuery=function(){}
【8826提供interface】 window.jQuery=window.$=jQuery;
96，283 给jQ对象添加方法和属性
【基于面向对象的插件】

---

面向对象：

$(div).css();
var arr=new Aarry()
arr.push();

试比较这两者的写法， 对象.方法;在 JQ 61行
JQ=fn(...){rt new JQ.fn.init(...)}
可以看到这里 返回的就是一个 构造对象

---

285，347 extend:JQ的继承方法
【后期】有利于维护和扩展
349，817 扩展一些工具方法
【静态属性和静态方法】既可以给JQ对象用也可以给原生JS用

$().css() //=>原生不能用 要转换类型$()[index]
            //=> 实例方法
            
$.trim(); //=>原生可以用，有利于后期可以用
$.proxy(); 

可以理解 工具方法静态方法是JQ最底层的东西，而实例方法是更高曾，里面调用的是工具方法
877，2856 Sizzle:复杂选择器的实现

//exp
$('ul li + p input.class[xx]')。css()

2880，3042 Callbacks:回调对象,实现函数的统一管理
如果项目大了很多函数是不利于维护，所以需要函数的统一管理

var fn1(){ alert(1) }
var fn2(){ alert(2) }

var cb=$.Callbacks()

cb.add(fn1,fn2)
cb.fire(); //=>1,2
cb.remove(fn2)
cb.fire(); //=>1

3043,3183 Deferred:延迟对象:对异步的统一管理
exp:定时器,ajax,script,csslink,dom加载

//exp
setTimeout(function(){
    alert(1)
},1000)
alert(2)
//=>异步,同时加载 先2 , 1s后弹1

延迟对象:

就是利用回调来做的,先存,存完触发时在调用

var dfd=$.Deferred();
setTimeout(function(){
    alert(1)
    dfd.resolve(); //=>触发
},1000)
//=>先走这一步 1s后在返回走上面
dfd.done(function(){ //=>这里存储了一个对象 
    alert(2)
})

3184,3295 support:功能检测;通过功能检测来判断不同的浏览器版本;在以前开发时常常是判断浏览器版本,这样在以后浏览器版本越来越快的更新倒不如通过功能检测,每一代的浏览器都是基于后代看法,这样还节省了一些优化和维护

//exp:3200
support.checkOn=input.value!='';

这一句说,在老版本下webkit 这里是 false => ""而其它 是 true =>on