你值得了解的JavaScript“继承之jquery”使用方法（代码详解）

本篇文章给大家了解一下JS-继承之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

//实现readyready: 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()