jquery 中的 ready()方法
无外乎就是简写,最终都是调用的同一个ready(),如:
if ( jQuery.isFunction( selector ) ) {
return rootjQuery.ready( selector );
}
至于其他写法,看源码可以直接调用非官方API:
$.fn.ready(function () {})
$.prototype.ready(function () {});
原理:
- var jQuery = (function (window, undefined) {
- var $ = function (selector, content) {
- return new $.fn.init(selector, content);
- },
- readyBound = false,
- readyList = [],
- DOMContentLoaded,
- hasOwnProperty = Object.prototype.hasOwnProperty;
- if (window.$ === undefined) window.$ = $;
- $.fn = $.prototype = {
- ready: function (callback) {
- $.bindReady();
- if ($.isReady) {
- callback.call(document, $);
- } else if (readyList) {
- readyList.push(callback);
- };
- return this;
- }
- };
- $.fn.init = function (selector, content) {
- if (typeof selector === 'function') return $(document).ready(selector);
- return this;
- };
- $.fn.init.prototype = $.fn;
- // DOM就绪事件
- $.isReady = false;
- $.ready = function () {
- if (!$.isReady) {
- if (!document.body) return setTimeout($.ready, 13);
- $.isReady = true;
- if (readyList) {
- var fn, i = 0;
- while ((fn = readyList[i++])) {
- fn.call(document, $);
- };
- readyList = null;
- };
- };
- };
- $.bindReady = function () {
- if (readyBound) return;
- readyBound = true;
- if (document.readyState === 'complete') {
- return $.ready();
- };
- if (document.addEventListener) {
- document.addEventListener('DOMContentLoaded', DOMContentLoaded, false);
- window.addEventListener('load', $.ready, false);
- } else if (document.attachEvent) {
- document.attachEvent('onreadystatechange', DOMContentLoaded);
- window.attachEvent('onload', $.ready);
- var toplevel = false;
- try {
- toplevel = window.frameElement == null;
- } catch (e) {};
- if (document.documentElement.doScroll && toplevel) {
- doScrollCheck();
- };
- };
- };
- if (document.addEventListener) {
- DOMContentLoaded = function () {
- document.removeEventListener('DOMContentLoaded', DOMContentLoaded, false);
- $.ready();
- };
- } else if (document.attachEvent) {
- DOMContentLoaded = function () {
- if (document.readyState === 'complete') {
- document.detachEvent('onreadystatechange', DOMContentLoaded);
- $.ready();
- };
- };
- };
- function doScrollCheck () {
- if ($.isReady) return;
- try {
- document.documentElement.doScroll('left');
- } catch (e) {
- setTimeout(doScrollCheck, 1);
- return;
- };
- $.ready();
- };
- //-------------end
- return $}(window));