jquery ready方法实现原理 内部原理

今天闲来无事研究研究jquery.ready()的内部实现,看JQ的源码一头雾水,由于自己很菜了,于是翻了翻牛人的播客,讲述详细,收获颇多。

先普及一下jquery.ready()和window.onload,window.onload事件是在页面所有的资源都加载完毕后触发的. 如果页面上有大图片等资源响应缓慢, 会导致window.onload事件迟迟无法触发.所以出现了DOM Ready事件. 此事件在DOM文档结构准备完毕后触发, 即在资源加载前触发.

我的ready方法写了2版,借鉴了不少前辈的代码,先上代码。

代码2.0问世,代码如下

var $ = ready = window.ready = function(fn){
    if(document.addEventListener){//兼容非IE
        document.addEventListener("DOMContentLoaded",function(){
            //注销事件,避免反复触发
            document.removeEventListener("DOMContentLoaded",arguments.callee,false);
            fn();//调用参数函数
        },false);
    }else if(document.attachEvent){//兼容IE
       IEContentLoaded (window, fn);
    }  

    function IEContentLoaded (w, fn) {
        var d = w.document, done = false,
        // only fire once
        init = function () {
            if (!done) {
                done = true;
                fn();
            }
        };
        // polling for no errors
        (function () {
            try {
                // throws errors until after ondocumentready
                d.documentElement.doScroll(‘left‘);
            } catch (e) {
                setTimeout(arguments.callee, 50);
                return;
            }
            // no errors, fire

            init();
        })();
        // trying to always fire before onload
        d.onreadystatechange = function() {
            if (d.readyState == ‘complete‘) {
                d.onreadystatechange = null;
                init();
            }
        };
    }
}
ready(function(){alert(1)})

jquery ready方法实现原理 内部原理

时间: 2024-10-14 16:17:51

jquery ready方法实现原理 内部原理的相关文章

jQuery ready方法实现

很早之前就留下了这个问题,赶上五一放假,好好研究总结一下吧. 首先jq中ready方法和window的onload方法的不同这里再提一下,首先ready只是dom树加载完毕,一些img等资源可能还没加载完成,而onload则是全部加载成功.而且ready方法可以有多个,而onload只能写一个.还有一个区别是什么了,想起来补上. 一般让我们手写模拟一个jq的ready方法,我大多都是这样写: document.ready = function (callback) { ///兼容FF,Googl

原生js实现jquery ready方法

function ready(fn){ if(document.addEventListener) { document.addEventListener('DOMContentLoaded', function() { //注销事件, 避免反复触发 document.removeEventListener('DOMContentLoaded',arguments.callee, false); fn(); //执行函数 }, false); }else if(document.attachEv

$(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法

$(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法接触JQuery一般最先学到的是何时启动事件.在曾经很长一段时间里,在页面载入后引发的事件都被加载 在”Body”的Onload事件里.对于Body的Onload事件和JQuery的Ready方法相比,有很多弊端.比如:1.加载 多个函数的问题<body ></body>在Onload事件中 只能这样加载,很丑陋…而在JQuery中你可以利用多个JQuery.Ready()

jQuery的ready方法实现原理分析

jQuery中的ready方法实现了当页面加载完成后才执行的效果,但他并不是window.onload或者doucment.onload的封装,而是使用 标准W3C浏览器DOM隐藏api和IE浏览器缺陷来完成的,首先,我们来看jQuery的代码 DOMContentLoaded = function()  {          //取消事件监听,执行ready方法 if ( document.addEventListener ) {      document.removeEventListen

Jquery 扩展方法实现原理

JSONP原理 首先:JSON和JSONP是不一样的概念. JSON是一种数据交换格式,而JSONP是非正式传输协议. 该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据. 其实现细节是使用 Script标签携带一个Callback函数,动态的向服务端请求数据. 如:  <script type="text/javascript"&g

jQuery内部原理和实现方式浅析

这篇文章主要介绍了jQuery内部原理和实现方式浅析,本文试图从整体来阐述一下jQuery的内部实现,需要的朋友可以参考下 这段时间在学习研究jQuery源码,受益于jQuery日益发展强大,研究jQuery的大牛越来越多,学习的资料也比前两年好找了,有很多非常不错的资源,如高云的jQuery1.6.1源码分析系列.这些教程非常细致的分析了jQuery内部原理和实现方式,对学习和理解jQuery有非常大的帮助.但是个人认为很多教程对jQuery的整体结果把握不足,本人试图从整体来阐述一下jQue

jQuery图片插件自动轮播原理解析

经常看到项目要用到图片轮播效果,一般的操作流程都是先到网上找一个好看的JQuery图片轮播插件,然后看下demo,再配下参数.好了,关机下班回家 其余的就交给插件吧. 是不是感觉有了jQuery,世界变得那么美好呢. 本人最近用的一个插件是 jquery.carousel.js,官方网站是:http://richardscarrott.co.uk/posts/view/jquery-carousel-plugin 下面,我们来讨论一下图片轮播原理. 首先来个简单的demo 效果图如下: 这是个导

深入理解javascript作用域系列第一篇——内部原理

× 目录 [1]编译 [2]执行 [3]查询[4]嵌套[5]异常[6]原理 前面的话 javascript拥有一套设计良好的规则来存储变量,并且之后可以方便地找到这些变量,这套规则被称为作用域.作用域貌似简单,实则复杂,由于作用域与this机制非常容易混淆,使得理解作用域的原理更为重要.本文是深入理解javascript作用域系列的第一篇——内部原理 内部原理分成编译.执行.查询.嵌套和异常五个部分进行介绍,最后以一个实例过程对原理进行完整说明 编译 以var a = 2;为例,说明javasc

【转载】深入研究Windows内部原理绝对经典的资料

原文:深入研究Windows内部原理绝对经典的资料 另一篇资料:深入研究Windows内部原理系列 (为了方便大家下,我打包了放在一下地址: 1-6:http://download.csdn.net/detail/wangqiulin123456/4601530 7-12:http://download.csdn.net/detail/wangqiulin123456/4601508 13-16:http://download.csdn.net/detail/wangqiulin123456/4