Perkara yang perlu anda ketahui tentang penggunaan JavaScript "warisan jquery" (penjelasan kod terperinci)

Dalam artikel sebelumnya "Analisis mendalam kaedah pengurangan tatasusunan dalam JS (dengan kod) ", saya akan memberi anda pemahaman tentang kaedah pengurangan tatasusunan dalam JS. Artikel berikut akan mengajar anda cara menggunakan jquery dalam JS-inheritance Rakan boleh merujuknya.

jquerySetakat ini, ia adalah versi 3.3.1 Pada masa kini, dengan populariti pelbagai pelayar, rangka kerja bahagian hadapan muncul satu demi satu , dan jquery adalah unik Di dunia ini, hari kegemilangan apabila saya hanya menggunakan jquery untuk menulis kod, dan hanya mengambil kod dan mula bekerja, telah berlalu.

Pada tahun 2006, versi pertama jQuery telah dikeluarkan dan disukai oleh pembangun kerana gaya pengaturcaraannya yang ringkas dan fleksibel. Dan ia sendiri ialah rangka kerja JavaScript, dan tujuan reka bentuknya ialah "write Less, Do More", yang menyokong menulis kurang kod dan melakukan lebih banyak perkara. Ia merangkum JavaScript kod fungsi yang biasa digunakan, menyediakan corak reka bentuk JavaScript ringkas dan mengoptimumkan HTML operasi dokumen, pemprosesan acara, reka bentuk animasi dan interaksi Ajax.

telah berubah daripada popular kepada ditinggalkan sekarang, ramai jurutera bahagian hadapan berkata bahawa untuk jQuery, sejumlah besar operasi DOM, walaupun mudah, akan mengorbankan banyak prestasi halaman. Sebaliknya, rangka kerja hadapan arus perdana semasa seperti React, Vue dan Angularjs tidak bergantung pada jQuery dan boleh digunakan secara bebas. Selain itu, semakin sedikit isu keserasian penyemak imbas semakin berkurangan Apabila keserasian penyemak imbas tidak lagi menjadi masalah, nilai jQuery dikurangkan dengan banyaknya

Pada hari ke-52 selepas Microsoft memperoleh github, github perubahan turut berlaku. . jquery telah ditinggalkan, dan alternatif yang ganjil ialah menggunakan js asli:

• Gunakan querySelectorAll untuk menanyakan nod DOM; >

Gunakan
• bukannya

  ; 🎜> untuk menyeragamkan penulisan fetch; ajax

• menggunakan elemen tersuai.

• DOMpolyfillJika anda tidak menggunakannya, anda masih boleh mempelajarinya

Artikel ini adalah pelaksanaan kasar

Inisialisasi

jqueryready、each、bind、``$.fn.extend、$.extend

$

(function (win) {
  var _$ = function (selector, context) {
    /**
     * 通常咱们定义一个 函数 var Fun = function(){}
     * 然后定义一个 Fun.prototype.init = function(){}
     * 那么咱们调用init 的时候 得先要实例化对象 var f = new Fun()
     * 然后f.init()
     * 这里就省去了 var $ = new $()
     */
    return new _$.prototype.Init(selector, context);
  };
  _$.prototype = {
    //初始化$
    Init: function (selector, context) {
      this.elements = [];
      /**
       * 传入的类型是function 就执行ready事件，如果是document 就将document对象插入到this.elements
       * 主要就是判断$(document).ready  和 $(function(){}) 这两种的ready事件的写法
       */
      if (typeof selector === "function") {
        this.elements.push(document);
        this.ready(selector);
      } else {
        var context = context || document;
        var isDocument = (ele) =>
          Object.prototype.toString.call(ele) == "[object HTMLDocument]" ||
          "[object Document]";
        if (isDocument(selector)) {
          this.elements.push(selector);
        } else {
          /**
           * 如果是字符串的话就查询该节点 $('.class') | $('#id')
           */
          if (context.querySelectorAll) {
            var arr = context.querySelectorAll(selector);
            for (var i = 0; i < arr.length; i++) {
              this.elements.push(arr[i]);
            }
          }
        }
      }
    },
    //实现each
    each: function (callback) {},
    //实现ready
    ready: function (callback) {},
    //实现bind
    bind: function (type, callback) {},
  };
  /**
   * 让两个作用域不一样的对象共享一个方法，让他们的原型指向一致，即Init.prototype = _$.prototype
   * 那么原型一致之后 就可以共享this.elements 属性了。
   */
  _$.prototype.Init.prototype = _$.prototype;
  window.$ = _$;
})(window || global);

ready

//实现ready
ready: function (callback) {
  var isDocument = (ele) => Object.prototype.toString.call(ele) == '[object HTMLDocument]' || '[object Document]'
  //如果已经取得了节点
  if (isDocument(this.elements[0])) {
    if (document.addEventListener) { //判断火狐、谷歌
      /**
       * DOM树构建完成的时候就会执行DOMContentLoaded
       * 页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成了，才会触发window.onload
       * 这也就是$(document).ready() 比 window.onload 执行早的原因
       *
       * arguments.callee 博客里面有一篇文章 [js-递归] 里面专门讲到了，这里不再解释了
       */
      document.addEventListener('DOMContentLoaded', function () {
        document.removeEventListener('DOMContentLoaded', arguments.callee, false)
        callback()
      }, false)
    } else if (document.attachEvent) { //判断IE
      document.attachEvent('onreadystatechange', function () {
        if (document.readyState == 'complete') {
          document.detachEvent('onreadystatechange', arguments.callee);
          callback()
        }
      })
    } else if (document.lastChild == document.body) { //body已经加载完了，就直接回调了
      callback()
    }
  }
},

each

ialah kaedah sambungan untuk objek nod pertanyaan, yang merupakan sambungan prototaip kaedah berdasarkan

//实现each
 each: function (callback) {
    if (this.elements.length > 0) {
        for (var i = 0; i < this.elements.length; i++) {
        callback.call(this, this.elements[i], i);
        }
    }
 },

bind
ialah kaedah tetap lanjutan dan kaedah statik $

//实现bind
bind: function (type, callback) {
  if (document.addEventListener) { //判断火狐、谷歌
    this.each(function (item, i) {
        item.addEventListener(type, callback, false)
    })
    } else if (document.attachEvent) { //判断IE
    this.each(function (item, i) {
        item.attachEvent('on' + type, callback)
    })
    } else {
    this.each(function (item, i) { //其他浏览器 egg: item.onclick = function(){}
        item['on' + type] = callback
    })
  }
}

Penjelasan rasmi ialah: $.fn.extend/$.extend

$.fn.extend: Gabungkan kandungan dua atau lebih objek bersama-sama ke dalam objek pertama (Gabungkan dua atau lebih objek ke dalam yang pertama) $

:Gabungkan kandungan objek pada prototaip jQuery untuk menyediakan yang baharu. Kaedah contoh jQuery .(Lekapkan objek pada atribut $.extend

untuk melanjutkan kaedah contoh

baharu) Niat asal kaedah

ialah selepas kami memanjangkannya, kita boleh menggunakan

untuk mengaksesnya seperti ini , yang sebenarnya bermakna menambah kaedah jQuery.extend() pada prototaip

.

di tengah sebenarnya serupa dengan peranan ruang nama dan tidak mempunyai kepentingan praktikal. Untuk membezakannya daripada jQuery.fn.extend()jQueryprototypejQuery

$.fn.extend$("").newMetod()$extendfn Mereka kelihatan sama, tiada bezanya dalam ulasan, $.extend menunjukkan mata yang berbeza. Mari kita lihat contoh:

$.fn.extendSekarang sudah jelas.

memanjangkan kelas

; (function (win) {
  ...
  _$.prototype.Init.prototype = _$.prototype;

   _$.fn = _$.prototype; //把对象挂载到jQuery的prototype属性

  var isObj = (o) => Object.prototype.toString().call(o) === '[object Object]';
  $.fn.extend = function (obj) {
    if (isObj(obj)) {
      for (var i in obj) {
        this[i] = obj  //注意这里的this指向是 $.prototype
      }
    }
  }

itu sendiri dan menambah kaedah baharu pada dirinya sendiri.

$.extend

var isObj = (o) => Object.prototype.toString().call(o) === '[object Object]';
...
_$.extend = function (obj) {
    if (isObj(obj)) {
        for (var i in obj) {
            this[i] = obj[i]; //注意这里的this指向是 $
        }
    }
}

Tambah kaedah pada

objekthis

<!DOCTYPE html>
<html>
  <head>
    <title>jQuery.extend()与jQuery.fn.extend()区别</title>
    <meta charset="utf-8" />
    <script type="text/javascript" src="jquery.js"></script>
    <!-- 开始扩展 -->
    <script type="text/javascript">
      (function ($) {
        $.extend({
          sayHello: function () {
            console.log("Hello");
          },
        });
        $.fn.extend({
          sayHello: function () {
            console.log("Hello");
          },
        });
      })(jQuery);
    </script>
    <!-- 调用 -->
    <script type="text/javascript">
      $(document).ready(function () {
        //$.extend扩展调用
        $.sayHello();

        //$.fn.extend扩展调用
        $("#test").sayHello();
      });
    </script>
  </head>
  <body>
    <div id="test"></div>
  </body>
</html>

jQuery.extend(object);Penggunaan biasajQuery$.xxx()

jQuery.fn.extend(object);Kod lengkapjQuery$('#test').xxx()

[Tamat]$.extendPembelajaran yang disyorkan: Tutorial video jQuery

//在jquery全局对象中扩展一个net命名空间。
$.extend({ net: {} });

//方法扩展到之前扩展的Jquery的net命名空间中去。
$.extend($.net, {
  sayHello: function () {
    console.log("Hello");
  },
});

//extend方法还有一个重载原型
//extend(boolean,dest,src1,src2,src3...),第一个参数boolean代表是否进行深度拷贝
var a = { protocol: "http", hash: { a: 1, b: 2 } };
var b = { host: "chuchur.com", hash: { b: 1, c: 2 } };

var result = $.extend(true, {}, a, b);
console.log(result); //{ protocol: 'http',host: 'chuchur.com', hash: { a: 1, b: 1,c:2 } }

var result = $.extend(false, {}, a, b);
console.log(result); //{ protocol: 'http',host: 'chuchur.com', hash: { b: 1, c:2 } }

Atas ialah kandungan terperinci Perkara yang perlu anda ketahui tentang penggunaan JavaScript "warisan jquery" (penjelasan kod terperinci). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!