Penjelasan terperinci tentang pelaksanaan Jquery untuk acara siap dan ikat_jquery

Sebelum bercakap tentang bahagian ini, mari semak kod sebelumnya:

  (function (win) {
      var _$ = function (selector, context) {
        return new _$.prototype.Init(selector, context);
      }
      _$.prototype = {
        Init: function (selector, context) {
          this.elements = [];
          var context = context || document;
          if (context.querySelectorAll) {
            var arr = context.querySelectorAll(selector);
            for (var i = 0; i < arr.length; i++) {
              this.elements.push(arr[i]);
            }
          }
          ////这一块是选择器的实现,没有写完，可以自己实现
        },
        each: function (callback) {
          if (this.elements.length > 0) {
            for (var i = 0; i < this.elements.length; i++) {
              callback.call(this, i, this.elements[i]);
            }
          }
        }
      }
      _$.prototype.Init.prototype = _$.prototype;
      window.$ = _$;
    })(window || global);

Kami telah melaksanakan carian nod di atas Hari ini kita akan bercakap tentang peristiwa mengikat nod.

TX yang biasa dengan kod sumber Jquery harus tahu: kod kami di atas tidak mempunyai acara sedia, dan hanya menanyakan nod, tanpa mengambil kira objek dokumen. Saya telah bercakap tentang perbezaan antara window.onload dan document.ready sebelum ini, dan juga melanjutkan acara document.ready.

Kini kami menambah kaedah sambungan padanya:

Kaedah Init kami perlu diperbetulkan:

 Init: function (selector, context) {
          this.elements = [];
          if (typeof selector === "function") {
            this.elements.push(document);
            this.ready(selector);
          }
          else {
            var context = context || document;
            var isDocument = function (ele) {
              var tostring = Object.prototype.toString;
              return tostring.call(ele) == "[object HTMLDocument]" || "[object Document]";
            }
            if (isDocument(selector)) {
              this.elements.push(selector);
            }
            else if (context.querySelectorAll) {
              var arr = context.querySelectorAll(selector);
              for (var i = 0; i < arr.length; i++) {
                this.elements.push(arr[i]);
              }
            }
          }
        }

Maksud umum kod ini ialah: jika pemilih parameter yang diluluskan adalah daripada jenis fungsi, laksanakan acara sedia. Jika ia adalah dokumen, masukkan objek dokumen ke dalam tatasusunan this.elements (selepas ini diluluskan, ia akan dinilai dalam acara sedia). Jika ia adalah peralihan aksara, cuma tanya nod dan masukkan ke dalam tatasusunan this.elements dalam gelung. Ia tidak sukar. Pertimbangkan terutamanya kaedah penulisan dua acara sedia, $(document).ready dan $(function(){}).

Kami akan menambah fungsi sedia seterusnya:

  ready: function (callback) {
          var isDocument = function (ele) {
            var tostring = Object.prototype.toString;
            return tostring.call(ele) == "[object HTMLDocument]" | "[object Document]";
          }
          if (isDocument(this.elements[0])) {
            if (document.addEventListener) {
              document.addEventListener('DOMContentLoaded', function () {
                document.removeEventListener('DOMContentLoaded', arguments.callee, false);
                callback();
              }, false);
            }
            else if (document.attachEvent) {
              document.attachEvent('onreadystatechange', function () {
                if (document.readyState == "complete") {
                  document.detachEvent('onreadystatechange', arguments.callee);
                  callback();
                }
              });
            }
            else if (document.lastChild == document.body) {
              callback();
            }
          }
        }

Saya sebenarnya telah bercakap tentang kod ini sebelum ini (perbezaan antara onload dan ready). Jika anda tidak tahu, anda boleh lihat.

Kini kami telah melaksanakan acara sedia. Kemudian anda boleh mendaftarkan acara untuk nod.

Mari laksanakan fungsi bind, kodnya adalah seperti berikut:

 bind: function (type, callback) {
          if (document.addEventListener) {
            this.each(function (i, item) {
              item.addEventListener(type, callback, false);
            });
          }
          else if (document.attachEvent) {
            this.each(function (i, item) {
              item.attachEvent('on' + type, callback);
            });
          }
          else {
            this.each(function (i, item) {
              tem['on' + type] = callback;
            });
          }

        }

Berikut ialah beberapa kod keserasian untuk melaksanakan pendaftaran acara nod. Sebelum setiap satu, anda mungkin tidak tahu untuk apa ia. Ia digunakan di sini sekarang.

Fungsi utama adalah untuk melaksanakan beberapa operasi pada gelung nod.

Kod lengkap, datang ke sini:

    (function (win) {
      var _$ = function (selector, context) {
        return new _$.prototype.Init(selector, context);
      }
      _$.prototype = {
        Init: function (selector, context) {
          this.elements = [];
          if (typeof selector === "function") {
            this.elements.push(document);
            this.ready(selector);
          }
          else {
            var context = context || document;
            var isDocument = function (ele) {
              var tostring = Object.prototype.toString;
              return tostring.call(ele) == "[object HTMLDocument]" | "[object Document]";
            }
            if (isDocument(selector)) {
              this.elements.push(selector);
            }
            else if (context.querySelectorAll) {
              var arr = context.querySelectorAll(selector);
              for (var i = 0; i < arr.length; i++) {
                this.elements.push(arr[i]);
              }
            }
          }
        },
        each: function (callback) {
          var length = this.elements.length;
          if (length > 0) {
            for (var i = 0; i < length; i++) {
              callback.call(this, i, this.elements[i]);
            }
          }
        },
        ready: function (callback) {
          var isDocument = function (ele) {
            var tostring = Object.prototype.toString;
            return tostring.call(ele) == "[object HTMLDocument]" | "[object Document]";
          }
          if (isDocument(this.elements[0])) {
            if (document.addEventListener) {
              document.addEventListener('DOMContentLoaded', function () {
                document.removeEventListener('DOMContentLoaded', arguments.callee, false);
                callback();
              }, false);
            }
            else if (document.attachEvent) {
              document.attachEvent('onreadystatechange', function () {
                if (document.readyState == "complete") {
                  document.detachEvent('onreadystatechange', arguments.callee);
                  callback();
                }
              });
            }
            else if (document.lastChild == document.body) {
              callback();
            }
          }
        },
        bind: function (type, callback) {
          if (document.addEventListener) {
            this.each(function (i, item) {
              item.addEventListener(type, callback, false);
            });
          }
          else if (document.attachEvent) {
            this.each(function (i, item) {
              item.attachEvent('on' + type, callback);
            });
          }
          else {
            this.each(function (i, item) {
              tem['on' + type] = callback;
            });
          }

        }
      }
      _$.prototype.Init.prototype = _$.prototype;
      window.$ = _$;
    })(window);

Fungsi ini pada asasnya boleh melaksanakan pendaftaran acara untuk nod. Beberapa kesan khas yang tinggal masih perlu dikembangkan. Jika anda berminat, anda boleh menambah kaedah pada objek _$.prototype sendiri.

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia dapat membantu semua orang.