【asp源码栏目提醒】:网学会员--在 asp源码编辑为广大网友搜集整理了:jQuery deferred应用dom加载完毕详细源码分析(三)-asp net学习网 - 讲义教程绩等信息,祝愿广大网友取得需要的信息,参考学习。
c.net编程学习网 jQuery deferred应用dom加载完毕详细
源码分析三 jQuery deferred应用dom加载完毕详细
源码分析三 内容 jQuery deferred应用dom加载完毕详细
源码分析三 我承认上章ajax部分写得不好不要怪我它的ajax代码太多了而且跨越大方法跳跃多实在不好排版与讲解但如果你真正想研究
源码并且仔细读了得话你的 收获应该会很大至少你明白了js的ajax是怎么回事.不懂得可以继续参阅ajax和Deferred 其实我更希望你把deferred搞懂了在看这部分. 好吧言归正传这次我讲得是functionconsole.logdom ready 多么简单的一段代码但它是在每个浏览器运行的呢 还是先来个全局展望会用到以下几个方法这里你会知道jQuery是真正的hold住哥因为他要hold dom ready event holdReady一个神奇的方法 fn -- .fn.readyfn --.bindReady -- .readywait .holdReadyhold 下面这个是init函数的一部分代码就是判断里面的参数是函数 1 // 处理: function 简写 document.readyfunction 2 if jQuery.isFunctionselector 3 return rootjQuery.readyselector -所以这里你应该明白了为什么可以fn 替代document.readyfn 4 -- rootjQuerydocument 那document.readyfn后又怎么办呢 难道document不是实例化的一个jQuery对象它当然又要去调用.fn.ready的函数 好来到了.fn.ready好吧这个函数并没有管如何处罚dom ready事件而只是关心callbacks函数队列fn 意思就是你fn1fn2 它靠得还是全局的readyList然后这个readyList是一个Deferred对象知道它的重要了吧 1 /fn-- document.readyfn 为什么是document而不是其他body呢 2 function console.logthis document --true 3 / 4 ready: function fn 5 // Attach the listeners 6 jQuery.bindReady 7 8 //增加fn里的回调函数 以便domready触发时候 readyList.resolveWithdocumentjQuery 这里readyList是全局的变量 9 readyList.donefn 10 11 return this 12 ---这里可以看到继续去调用.bindReady这里不关系dom ready是如何触发的 来到bindReady函数根据不同的函数支持情况进行了不同的处理在这里多少能学点浏览器兼容的知识了吧 其实学了jQuery神马浏览器兼容知识你都学到了.但是这个函数真正关心得只是事件的添加不关心事件如何触发 这里最终的callback触发还是交给了.ready 这里会有一个DOMContentLoaded公用的函数 1 / 从这里可以看出来其实function如果页面存在很多的话也不太会影响性能因为这个.bindReady只执行一次 2 而以后fn进来的函数都通过deferred的done函数添加进来只要这个对象resolve了立马后面所有的fn立即执行 3 / 4 bindReady: function 5 //如果readyList存在直接返回证明这里已经创建了一个deferred对象 6 if readyList 7 return 8 9 //创建jQuery 私有的deferred 10 readyList jQuery._Deferred 11 12 //确保browser event已经触发过后document.ready也将会被调用 13 //这个状态表示Fully loadeddocument已经完全加载了 14 if document.readyState complete --jQuery代码总担心出错但是你不要担心你的回调会因为多处的被添加到事件添加器中去而被多次触发 -- .ready会帮你处理的 _ 15 // Handle it asynchronously to allow scripts the opportunity to delay ready 16 return setTimeoutjQuery.ready 1 17 18 19 // Mozilla Opera and webkit nightlies currently support this event 20 if document.addEventListener 21 //支持DOMContentLoaded事件了这样就简单了 22 document.addEventListenerDOMContentLoaded DOMContentLoaded false 23 24 // A fallback to window.onload that will always work -jQuery代码总担心出错 //但是你不要担心这样会不会多次触发你的回调函数告诉你当然不会 25 window.addEventListenerload jQuery.ready false 26 27 // If IE event model is used 28 else if document.attachEvent 29 //这里主要担心页面内有iframe所以使用onreadystatechange触发 30 document.attachEventonreadystatechange DOMContentLoaded 31 32 // A fallback to window.onload that will always work 33 window.attachEventonload jQuery.ready 34 35 //如果是ie并且页面window是toplevel的继续检查 - ie关心的代码doScrollCheck又是神马呢 36 //MDN: window.frameElement null if the window is top-level 37 var toplevel false 38 39 try 40 toplevel window.frameElement null 41 catch e 42 43 if document.documentElement.doScroll toplevel 44 doScrollCheck 45 46 47 //原来DOMContentLoaded还是在这里最后都是交给了.ready处理而DOMContentLoaded并没有做什么只是又一次的去掉事件监听 if document.addEventListener DOMContentLoaded function document.removeEventListenerDOMContentLoaded DOMContentLoaded false jQuery.ready else if document.attachEvent DOMContentLoaded function // Make sure body exists at least in case IE gets a little overzealous ticket 5443. if document.readyState complete document.detachEventonreadystatechange DOMContentLoaded jQuery.ready / 这里只针对ie当页面DOM未加载完成时调用doScroll方法时会产生异常。
那么我们反过来用如果不异常那么就是页面DOM加载完毕了 这里的想法真的很淫荡 / function doScrollCheck if jQuery.isReady return try // If IE is used use the trick by Diego Perini // http://javascript.nwbox.com/IEContentLoaded/ document.documentElement.doScrollleft catch e setTimeoutdoScrollCheck 1 return //直到没有异常的时候执行.ready jQuery.ready --你最终会发现其实都是交给了.ready处理不管你怎么触发事件 _ 好吧最后所有的重头戏都落到了ready最后的callbacks都是靠他触发的而他里面的readyList又一是一个deferred对象你懂了吧他要 resolveWithdocumentjQuery你知道这个document意味着什么吗functionconsole.logthisdocument _. 1 / .holdReady 原来jQuery才是真正的hold住哥这里它要hold domReady事件 2 .holdReadytrue-- 延迟hold一次延迟domReady事件触发 3 .holdReadyfalse -- 释放hold一次如果释放后.readyWait0则触发domReady事件 4 整个函数的功能就是延迟domReady事件比如你需要动态加载一个jQuery插件神马的然后你又要使用这个插件 5 .holdReadytrue.getScriptmyplugin.js function .holdReadyfalse 6 -使用上面这个语句整个场面都hold住了加载完成后释放 7 / 8 holdReady: function hold --这里你总算看到了神马是hold住哥 9 if hold 10 jQuery.readyWait 11 else 12 jQuery.readytrue 13 14 15 /归根揭底dom树加载完成都是靠它来触发callbacks只是不同的浏览器通过不同的方式来触发.ready 16 / 17 ready: function wait 18 // 释放hold状态或者dom 事件触发 19 if wait true --jQuery.readyWait wait true jQuery.isReady 20 // Make sure body exists at least in case IE gets a little overzealous ticket 5443. 21 if document.body 22 return setTimeoutjQuery.ready 1 23 24 25 // 表面dom树已加载完毕 26 jQuery.isReady true 27 28 //if 一个正常的dom函数事件触发了但是还有hold的状态返回把先不触发 29 if wait true --jQuery.readyWait 0 30 return 31 32 //触发绑定在 readyList.donefn中得函数 33 //函数原来还是在这里触发的 34 readyList.resolveWithdocument jQuery 35 36 //触发任何绑在document ready的事件 37 // document.bindready: function alertdocument ready 38 if jQuery.fn.trigger 39 jQuerydocument.triggerready.unbindready 40 41 42 这上面有个2B的代码 document.bindreadyfunction..不知道哪个2B青年会用这个方法... 好吧如果看懂了上面的代码你完全可以写一个自己的function 而不必为了jQuery为了符合大众的口味去这样实现 ?? 2011 c.net编程学习网 xml地图
上一篇:
信息技术系《项目实训》课程论文
下一篇:
关于XX镇中小企业电子商务应用发展趋势的研究