JavaScript "jquery 상속"사용에 대해 알아야 할 사항 (자세한 코드 설명)

이전 글 "JS의 배열 축소 방식 심층 분석(코드 포함)"에서는 JS의 배열 축소 방식에 대한 이해를 드렸습니다. 다음 글에서는 JS 상속에서 jquery를 사용하는 방법을 알려드리겠습니다. 친구들이 참고할 수 있습니다.

jquery는 현재 버전 3.3.1입니다. 요즘에는 다양한 브라우저의 인기로 프론트엔드 프레임워크가 끝없이 등장하고 있으며 jquery는 독특합니다. 세상에서 나는 코드를 작성할 때 jquery만 사용합니다. 코드를 집어 들고 실행하는 영광스러운 시절은 끝났습니다. jquery截止到当前已经 3.3.1 版本了，如今随着各种浏览器的盛行，前端的框架层出不穷，jquery独步天下，老夫写代码只用jquery，拿起代码就是干的辉煌时代已经过去了。

2006 年，jQuery的第一个版本的面世，凭借着简洁、灵活的编程风格受到了开发者的喜爱。而它本身是一个JavaScript框架，它的设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装了JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

从之前的风靡到如今的被抛弃，究其原因，不少前端工程师表示，对于jQuery来说，大量的操作DOM虽然方便，但是会牺牲很多页面的性能。另一方面，现阶段React、Vue和Angularjs等主流前端框架并不依赖jQuery，都可以独立使用。况且浏览器的兼容问题越来越少，当浏览器兼容不再是问题时，jQuery的价值就大打折扣了

就在微软收购github的 52 天，github改变也已经放弃了jquery，奇替代方案使用了原生的 js：

• 使用querySelectorAll来查询DOM节点；

• 使用fetch来代替ajax；

• 事件处理使用了事件代理；

• 使用DOM标准化写了polyfill；

• 使用了自定义元素。

假如不用，学习下还是可以的

本文粗燥的实现jquery的ready、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

//实现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

//实现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
    })
  }
}

$.fn.extend/$.extend

$.fn.extend是为查询的节点对象扩展方法，是基于$的原型扩展的方法

$.extend是扩展常规方法，是$的静态方法

官方给出解释：

jQuery.extend(): Merge the contents of two or more objects together into the first object.（把两个或者更多的对象合并到第一个当中）

jQuery.fn.extend():Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods.（把对象挂载到jQuery的prototype属性，来扩展一个新的jQuery实例方法）

$.fn.extend方法的初衷是我们扩展之后可以用$("").newMetod()这样访问，实际上就是给$原型加一个extend方法。这中间的fn其实类似于命名空间的作用，没什么实际的意义。为的是和$.extend作区分

$.fn.extend

; (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
      }
    }
  }

$.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指向是 $
        }
    }
}

这俩看上去一模一样啊，没啥区别，注释里面已经说了，this指向不同。咱们来看个例子：

<!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); 为扩展jQuery类本身，为自身添加新的方法。$.xxx()

jQuery.fn.extend(object);给jQuery对象添加方法$('#test').xxx()

$.extend2006년 jQuery의 첫 번째 버전이 출시되었으며 간결하고 유연한 프로그래밍 스타일로 개발자들의 사랑을 받았습니다. 그 자체는 JavaScript 프레임워크이며, 디자인 목적은 "write Less, Do More"입니다. 이는 적은 코드 작성을 옹호한다는 의미입니다. 더. 일반적으로 사용되는 함수 코드를 JavaScript로 캡슐화하고 간단한 JavaScript 디자인 패턴을 제공하며 HTML 문서 작업, 이벤트 처리, 애니메이션 디자인 및 HTML을 최적화합니다. code>Ajax상호작용.

이전부터 인기가 있었지만 지금은 버려지기까지 많은 프런트엔드 엔지니어들이 jQuery의 경우 DOM에서 많은 작업을 수행하는 것이 편리하지만 많은 페이지의 성능. 반면, 이 단계에서 React, Vue 및 Angularjs와 같은 주류 프런트엔드 프레임워크는 jQuery에 의존하지 않습니다. ; 독립적으로 사용하세요. 게다가 브라우저 호환성 문제도 점점 줄어들고 있습니다. 브라우저 호환성이 더 이상 문제가 되지 않으면 jQuery의 가치는 크게 줄어들 것입니다Microsoft가 github, github 변경으로 인해 <code>jquery도 포기되었으며 이상한 대안은 기본 js를 사용합니다.

• querySelectorAll을 사용하여 DOM 노드를 쿼리하세요.

• ajax대신 fetch를 사용하세요. >;

• 이벤트 처리는 이벤트 프록시를 사용합니다.
• 🎜 DOM 표준화를 사용하여 polyfill을 작성합니다. li>
• 🎜맞춤 요소 사용. 🎜

🎜🎜🎜사용하지 않더라도 배울 수 있습니다🎜🎜이 글은 jquery의 ready,each,bind,``$를 대략적으로 구현한 것입니다. fn.extend , $.extend🎜🎜🎜초기화$🎜🎜

//在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 } }

🎜준비
🎜

(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) {
      if (this.elements.length > 0) {
        for (var i = 0; i < this.elements.length; i++) {
          callback.call(this, this.elements[i], i);
        }
      }
    },
    //实现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();
        }
      }
    },
    //实现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;
        });
      }
    },
  };
  /**
   * 让两个作用于不一样的对象共享一个方法，让他们的原型指向一直，即Init.prototype = _$.prototype
   * 那么指向之后 就可以共享this.elements 属性了。
   */
  _$.prototype.Init.prototype = _$.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
      }
    }
    //....这里是简写
  };

  _$.extend = function (obj) {
    if (isObj(obj)) {
      for (var i in obj) {
        this[i] = obj[i]; //注意这里的this指向是 $
      }
    }
    //....这里是简写
  };

  window.$ = _$;
})(window || global);

🎜각
🎜rrreee🎜바인딩
🎜rrreee🎜$.fn.extend/$.extend🎜🎜$.fn.extend code>예 쿼리된 노드 개체의 확장 메서드는 <code>$🎜🎜의 프로토타입 확장 메서드를 기반으로 합니다. $.extend는 확장 일반 메서드이고 $의 정적 메서드입니다. 🎜🎜🎜공식 제공 설명: 🎜🎜🎜jQuery.extend(): 두 개 이상의 개체 내용을 첫 번째 개체로 병합합니다(두 개 이상의 개체를 첫 번째 개체로 병합)🎜 🎜 jQuery.fn.extend(): 객체의 내용을 jQuery 프로토타입에 병합하여 새로운 jQuery 인스턴스 메서드를 제공합니다(객체를 jQuery >프로토타입에 마운트 code> 속성을 ​​사용하여 새로운 jQuery 인스턴스 메소드를 확장) 🎜🎜 $.fn.extend 메소드의 원래 의도는 확장 후에 를 사용할 수 있다는 것입니다. ("").newMetod() 이런 방식은 실제로 $ 프로토타입에 extend 메서드를 추가하는 것입니다. 중간에 있는 fn은 실제로 네임스페이스의 역할과 유사하며 실질적인 의미는 없습니다. $.extend🎜🎜$.fn.extend🎜rrreee🎜$.extend🎜rrreee🎜와 구별하려면 이 둘은 다음과 같습니다. 댓글에서 언급했듯이 this는 다른 지점을 가리킵니다. 예를 살펴보겠습니다. 🎜rrreee🎜이제 명확해졌습니다. jQuery.extend(object);는 jQuery 클래스 자체를 확장하고 새 메서드를 추가합니다. $.xxx()🎜🎜jQuery.fn.extend(object);jQuery 개체에 메서드 추가$('#test ').xxx()🎜🎜🎜$.extend공통 사용법🎜🎜rrreee🎜🎜전체 코드🎜🎜rrreee🎜【End】🎜🎜추천 학습: 🎜jQuery 비디오 튜토리얼🎜🎜

위 내용은 JavaScript "jquery 상속"사용에 대해 알아야 할 사항 (자세한 코드 설명)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!