jQuery 百分网手机站

jQuery 源码分析和Ready函数

时间:2018-04-20 16:53:02 jQuery 我要投稿

jQuery 源码分析和Ready函数

  这个功能在 jQuery的文档中提到了三种等价的形式:

  复制代码 代码如下:

  // 定义在jQuery.fn.ready

  $(document).ready(handler);

  // 和上一个是同一个,不推荐

  $().ready(handler);

  // 单独在jQuery对象中处理

  $(handler);

  // 以上这个形式的定义:

  if(jQuery.isFunction(selector) {

  return rootjQuery.ready(selector);

  }

  因此实际上都归结与一个形式:jQuery.fn.ready(fn)。定义如下:

  复制代码 代码如下:

  ready: function(fn) {

  // 绑定事件到DOM上

  jQuery.bindReady();

  // 触发回调函数

  readyList.done(fn);

  // 返回jQuery对象

  return this;

  }

  实际上jQuery内部并不仅仅只有一个对fn的引用。这里用到了 Deferred功能。在75行,为jQuery对象定义了readyList成员。而在442行在bindReady函数中初始化了这个变量:

  复制代码 代码如下:

  if(readyList) {

  return;

  }

  readyList = jQuery._Deferred();

  bindReady函数除了初始化readyList之外,主要处理了浏览器对于绑定事件的区别。IE使用attachEvent而其他浏览器使用addEventHandler。这两个步骤完成后,ready函数使用readyList.resolveWith 触发回调函数。除了这个工作外,ready还处理了holdReady。这个API 的`作用是延迟ready事件的回调,主要目的是在ready事件前做点事情。holdReady设置了一个标志位readyWait。当这个标志位被设置之后,ready在调用readyList.resolveWith之前不停地调用setTimeout(jQuery.ready, 1)。即每隔固定时间就递归调用自己(不知道hold时间久了,js引擎会不会栈溢出),这样最后被holdReady释放的时候, setTimeout会沿着调用栈回来的。为了在这个栈完成之前不触发ready回调函数。在每次调用setTimeout的时候,会递增readyWait变量。用来指示被holdReady函数延误了几次调用。

  ###几个基础辅助函数

  在543行开始,定义了几个值得注意的辅助函数:parseJSON,parseXML和globalEval。parseJSON把一个字符串变成JSON对象。我们一般使用的是eval。parseJSON封装了这个操作,但是eval被当作了最后手段。因为最新JavaScript标准中加入了JSON序列化和反序列化的API。如果浏览器支持这个标准,则这两个API是在JS引擎中用Native Code实现的,效率肯定比eval高很多。目前来看,Chrome和Firefox4都支持这个API。parseJSON使用如下:

  复制代码 代码如下:

  // 原生JSON API。反序列化是JSON.stringify(object)

  if(window.JSON && window.JSON.parse) {

  return window.JSON.parse(data);

  }

  // ... 大致地检查一下字符串合法性

  return (new Function("return " + data))();

  parseXML函数也主要是标准API和IE的封装。标准API是DOMParser对象。而IE使用的是Microsoft.XMLDOM的 ActiveXObject对象。定义:

  复制代码 代码如下:

  if(window.DOMParser) {

  tmp = new DOMParser();

  xml = tmp.parseFromString(data, "text/xml");

  } else {

  xml = new ActiveXObject("Microsoft.XMLDOM");

  xml.async = "false";

  xml.loadXML(data);

  }

  globalEval函数把一段脚本加载到全局context中。IE中可以使用window.execScript。其他浏览器需要使用eval。因为整个jQuery代码都是一整个匿名函数,所以当前context是jQuery。主要代码:

  复制代码 代码如下:

  (window.execScript || function(data) {

  window["eval"].call(window, data); // 在window context下运行

  })(data);

【jQuery 源码分析和Ready函数】相关文章:

1.jQuery 源码分析笔记小结

2.JQuery的ready函数与JS的onload区别详解

3.关于Jquery的核心函数

4.jQuery中的read和JavaScript中的onload函数的区别在哪

5.JQuery中serialize()用法实例分析

6.jQuery中parent()和siblings()的问题

7.关于jQuery学习笔记之jQuery的分析

8.JQuery中Text方法用法实例分析