Analisis mendalam tentang cara fungsi sedia jQuery berfungsi (prinsip kerja)_jquery

Artikel ini menyediakan analisis mendalam tentang cara fungsi sedia jQuery berfungsi. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

jQuery ialah perpustakaan skrip yang hebat, versi pertama dikeluarkan oleh John Resig di BarCamp NYC pada Januari 2006. Anda boleh memuat turun versi terkini di http://jquery.com/ Setakat penerbitan artikel ini, ia telah dikemas kini kepada jQuery versi 2.1.4. Di sini kita mengambil jQuery1.8.3 sebagai contoh.

Terdapat banyak cara untuk mempelajari jQuery Hari ini kita mulakan dengan fungsi sedia jQuery. Kod dalam contoh ini datang daripada perpustakaan skrip jQuery.

Jika anda telah menggunakan jQuery, anda mesti telah menggunakan fungsi sedia, yang digunakan untuk mendaftarkan fungsi yang boleh dilaksanakan apabila halaman itu sedia.

Persoalannya, bilakah halaman kami akan siap?

1. acara onload

Kaedah pemprosesan yang paling asas ialah acara pemuatan halaman Apabila kita mengendalikan acara ini, terdapat banyak cara, iaitu, kita boleh menulisnya terus dalam teg permulaan elemen badan melalui HTML, atau kita boleh menggunakan. kaedah pendaftaran acara untuk digunakan, yang boleh dibahagikan kepada kaedah DOM0 dan kaedah DOM2. Dengan mengambil kira keserasian penyemak imbas, tuliskannya dalam mod DOM2, seperti yang ditunjukkan di bawah.

if (document.addEventListener) {
  // A fallback to window.onload, that will always work
  window.addEventListener("load", jQuery.ready, false);
  // If IE event model is used
} else {
  // A fallback to window.onload, that will always work
  window.attachEvent("onload", jQuery.ready);
}

2. Acara DOMContentLoaded

Walau bagaimanapun, acara onload tidak akan dicetuskan sehingga semua elemen halaman dimuatkan, termasuk imej pada halaman, dsb. Jika terdapat sejumlah besar gambar pada halaman web, kesannya boleh dibayangkan Pengguna mungkin telah mula mengendalikan halaman sebelum melihat gambar Pada masa ini, halaman kami belum dimulakan dan acara itu belum didaftarkan . Betul ke dah terlambat!

Selain acara onload yang terkenal, yang serupa dengan acara onload dalam DOM, kami juga mempunyai acara DOMContentLoaded untuk dipertimbangkan oleh penyemak imbas berasaskan Standard ini akan dicetuskan apabila semua DOM dihuraikan .

Dengan cara ini, untuk pelayar berasaskan standard, kami juga boleh mendaftarkan pengendalian acara ini. Dengan cara ini, kami mungkin menangkap acara penyiapan pemuatan lebih awal.

if (document.addEventListener) {
  // Use the handy event callback
  document.addEventListener("DOMContentLoaded", DOMContentLoaded, false);
  // A fallback to window.onload, that will always work
  window.addEventListener("load", jQuery.ready, false);
}

3. onreadystatechange event

Apa yang perlu dilakukan dengan penyemak imbas bukan standard?

Jika penyemak imbas mempunyai acara document.onreadystatechange, apabila peristiwa itu dicetuskan, jika document.readyState=complete, ia boleh dianggap bahawa pokok DOM telah dimuatkan.

Walau bagaimanapun, acara ini tidak boleh dipercayai Sebagai contoh, apabila terdapat imej dalam halaman, ia mungkin tidak dicetuskan sehingga selepas acara onload, dalam erti kata lain, ia hanya boleh dilaksanakan dengan betul apabila halaman tersebut tidak mengandungi binari sumber atau sangat sedikit atau dicache Sebagai alternatif.

if (document.addEventListener) {
  // Use the handy event callback
  document.addEventListener("DOMContentLoaded", DOMContentLoaded, false);
  // A fallback to window.onload, that will always work
  window.addEventListener("load", jQuery.ready, false);
  // If IE event model is used
} else {
  // Ensure firing before onload, maybe late but safe also for iframes
  document.attachEvent("onreadystatechange", DOMContentLoaded);
  // A fallback to window.onload, that will always work
  window.attachEvent("onload", jQuery.ready);
}

Apakah yang dilakukan oleh fungsi DOMContentLoaded? Akhirnya, fungsi jQuery.ready perlu dipanggil.

DOMContentLoaded = function() {
  if ( document.addEventListener ) {
    document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false );
    jQuery.ready();
  } else if ( document.readyState === "complete" ) {
    // we're here because readyState === "complete" in oldIE
    // which is good enough for us to call the dom ready!
    document.detachEvent( "onreadystatechange", DOMContentLoaded );
    jQuery.ready();
  }
}

4. kaedah pengesanan doScroll

MSDN mempunyai pepatah yang tidak mencolok tentang kaedah JScript Apabila DOM halaman tidak dimuatkan, pengecualian akan dijana apabila kaedah doScroll dipanggil. Kemudian kami menggunakannya secara terbalik Jika tidak ada pengecualian, maka halaman DOM telah dimuatkan!

Diego Perini pada tahun 2007 melaporkan cara untuk mengesan sama ada IE dimuatkan, menggunakan panggilan kaedah doScroll. Arahan terperinci boleh didapati di sini.
Prinsipnya ialah apabila IE berada dalam bukan iframe, ia hanya boleh menilai secara berterusan sama ada DOM dimuatkan sama ada ia boleh melaksanakan doScroll. Dalam contoh ini, cuba laksanakan doScroll setiap 50 milisaat Ambil perhatian bahawa memanggil doScroll akan menyebabkan pengecualian apabila halaman tidak dimuatkan, jadi cuba -catch digunakan untuk menangkap pengecualian.

(function doScrollCheck() {
  if (!jQuery.isReady) {
    try {
      // Use the trick by Diego Perini
      // http://javascript.nwbox.com/IEContentLoaded/
      top.doScroll("left");
    } catch (e) {
      return setTimeout(doScrollCheck, 50);
    }
    // and execute any waiting functions
    jQuery.ready();
  }
})();

5. document.readyState 状态

如果我们注册 ready 函数的时间点太晚了，页面已经加载完成之后，我们才注册自己的 ready 函数，那就用不着上面的层层检查了，直接看看当前页面的 readyState 就可以了，如果已经是 complete ，那就可以直接执行我们准备注册的 ready 函数了。不过 ChrisS 报告了一个很特别的错误情况，我们需要延迟一下执行。

setTimeout 经常被用来做网页上的定时器，允许为它指定一个毫秒数作为间隔执行的时间。当被启动的程序需要在非常短的时间内运行，我们就会给她指定一个很小的时间数，或者需要马上执行的话，我们甚至把这个毫秒数设置为0，但事实上，setTimeout有一个最小执行时间，当指定的时间小于该时间时，浏览器会用最小允许的时间作为setTimeout的时间间隔，也就是说即使我们把setTimeout的毫秒数设置为0，被调用的程序也没有马上启动。

这个最小的时间间隔是多少呢？这和浏览器及操作系统有关。在John Resig的新书《Javascript忍者的秘密》一书中提到

Browsers all have a 10ms minimum delay on OSX and a(approximately) 15ms delay on Windows.（在苹果机上的最小时间间隔是10毫秒，在Windows系统上的最小时间间隔大约是15毫秒），另外，MDC中关于setTimeout的介绍中也提到，Firefox中定义的最小时间间隔（DOM_MIN_TIMEOUT_VALUE）是10毫秒，HTML5定义的最小时间间隔是4毫秒。既然规范都是这样写的，那看来使用setTimeout是没办法再把这个最小时间间隔缩短了。

这样，通过设置为 1, 我们可以让程序在浏览器支持的最小时间间隔之后执行了。

// Catch cases where $(document).ready() is called after the browser event has already occurred.
// we once tried to use readyState "interactive" here, but it caused issues like the one
// discovered by ChrisS here: http://bugs.jquery.com/ticket/12282#comment:15
if (document.readyState === "complete") {
  // 延迟 1 毫秒之后，执行 ready 函数
  setTimeout(jQuery.ready, 1);
}

6. 完整的代码

在 jQuery 中完整的代码如下所示。位于 jQuery 1.8.3 源代码的 #842 行。

jQuery.ready.promise = function( obj ) {
  if ( !readyList ) {
    readyList = jQuery.Deferred();
    // Catch cases where $(document).ready() is called after the browser event has already occurred.
    // we once tried to use readyState "interactive" here, but it caused issues like the one
    // discovered by ChrisS here: http://bugs.jquery.com/ticket/12282#comment:15
    if ( document.readyState === "complete" ) {
      // Handle it asynchronously to allow scripts the opportunity to delay ready
      setTimeout( jQuery.ready, 1 );
    // Standards-based browsers support DOMContentLoaded
    } else if ( document.addEventListener ) {
      // Use the handy event callback
      document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
      // A fallback to window.onload, that will always work
      window.addEventListener( "load", jQuery.ready, false );
    // If IE event model is used
    } else {
      // Ensure firing before onload, maybe late but safe also for iframes
      document.attachEvent( "onreadystatechange", DOMContentLoaded );
      // A fallback to window.onload, that will always work
      window.attachEvent( "onload", jQuery.ready );
      // If IE and not a frame
      // continually check to see if the document is ready
      var top = false;
      try {
        top = window.frameElement == null && document.documentElement;
      } catch(e) {}
      if ( top && top.doScroll ) {
        (function doScrollCheck() {
          if ( !jQuery.isReady ) {
            try {
              // Use the trick by Diego Perini
              // http://javascript.nwbox.com/IEContentLoaded/
              top.doScroll("left");
            } catch(e) {
              return setTimeout( doScrollCheck, 50 );
            }
            // and execute any waiting functions
            jQuery.ready();
          }
        })();
      }
    }
  }
  return readyList.promise( obj );
};

那么，又是谁来调用呢？当然是需要的时候，在我们调用 ready 函数的时候，才需要注册这些判断页面是否完全加载的处理，这段代码在 1.8.3 中位于代码的 #244 行，如下所示：

ready: function( fn ) {
  // Add the callback
  jQuery.ready.promise().done( fn );
  return this;
}

在页面上引用 jQuery 脚本库之后，执行了 jQuery 的初始化函数，初始化函数中创建了 ready 函数。我们在通过 ready 函数注册事件处理之前，jQuery 完成了页面检测代码的注册。这样。当页面完全加载之后，我们注册的函数就被调用了。

补充：jquery ready 简写模式

Jquery ready 函数：

$(document).ready(function(){
  alert(' i am ready');
}
);

可简写为：

$(function(){
  alert("i am in");
}
);

希望本文所述对大家jQuery程序设计有所帮助。