原生手写jquery的学习

115 阅读 0 评论 76 点赞

我是靠谱客的博主可爱流沙，最近开发中收集的这篇文章主要介绍原生手写jquery的学习，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

jquery的编写
jQ的构造函数

  function jQuery(selector) {
    // 返回new 一个初始化函数
    return new jQuery.fn.init(selector);
  }

显示与隐藏
定义JQuery构造函数的显示原型

  jQuery.fn = jQuery.prototype = {
    constructor: jQuery,
    jquery: "9.0.0",
    length: 0,
    get(index) {
      return this[index];
    },
    each(callback) {
      for (var i = 0; i < this.length; i++) {
        callback(this[i]);
      }
      return this;
    },
    click(callback) {
      // item指向的被遍历的每个元素
      this.each(function (item) {
        // 让每个元素注册click事件 执行callback方法
        // 也就是click 括号里面的回调函数
        item.addEventListener("click", callback);
      });
      return this;
    },
    toggle() {
      this.each(function (item) {
        if (item.style.display != "none") {
          item.style.display = "none";
        } else {
          item.style.display = "block";
        }
      });
    },
  };

如何让new init 产生对象拥有JQuery显示原型上的所有方法呢？

 jQuery.fn.init.prototype = jQuery.fn;
 // 全局对jQuery与$可以访问
 window.$ = window.jQuery = jQuery;

ready方法

var isReady = false; //当前dom是否加载完毕
var readyList = []; //等待要被执行的函数礼包

监听domcontentLoade事件

document.addEventListener("DOMContentLoaded", function () {
    //文档加载完毕
    //alert( "DOMcontentLoaded");
    //改变isReady
    isReady = true;
    //遍历readyList里直面的的数开执行
    readyList.forEach((item) => item());
    //做完后清空
    readyList = [];
  });
  // jq初始化函数
  jQuery.fn.init = function (selector) {
    //如果传递的是一个函数
    if (typeof selector === "function") {
      //如果jQuery已经准备完毕
      if (isReady) {
        selector();
      } else {
        //把它加入的readylist列表中
        readyList.push(selector);
      }
    } else {
      // 获取到选择列表
      var list = document.querySelectorAll(selector);
      // 当前对象的长度
      this.length = list.length;
      for (var i = 0; i < list.length; i++) {
        //遍历类别对 this赋值
        this[i] = list[i];
      }
    }
  };

html编写

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <script src="js/jquery-9.0.0.js"></script>
  <script>
    //jq中的多态
    $(function () {
      alert("jq已经加载完毕")
    })
    $(function () {
      alert("jq已经加载完毕2")
    })
  </script>
</head>

<body>
  <h1>jquery还是大哥吗？</h1>
  <p>是的</p>
  <h1>市场占用96.8%</h1>
  <button>切换</button>
  <script>
    // jq实现链式操作
    // 给button注册一个点击事件
    // each函数编写
    $("button").click(function () {
      // 让h1切换显示与隐藏
      $("h1")
        .toggle()
        .click(function () {
          alert(this.innerText);
        });
    });
    $(function () {
      alert("jq已经加载完毕3")
    })

  </script>
</body>

</html>

效果图
请添加图片描述
点击切换后

extend方法

jQuery.extend = jQuery.fn.extend = function () {
    //方法体...
    var options, name, src, copy, copyIsArray, clone,
      target = arguments[0] || {},
      i = 1,
      length = arguments.length,
      deep = false;
    if (typeof target === "boolean") {
      deep = target;

      target = arguments[i] || {};
      i++;
    }
    if (typeof target !== "object" && !isFunction(target)) {
      target = {};
    }
    if (i === length) {
      target = this;
      i--;
    }
    for (; i < length; i++) {
      if ((options = arguments[i]) != null) {
        for (name in options) {
          src = target[name];
          copy = options[name];
          if (target === copy) {
            continue;
          }
          if (deep && copy && (jQuery.isPlainObject(copy) ||
            (copyIsArray = Array.isArray(copy)))) {
            if (copyIsArray) {
              copyIsArray = false;
              clone = src && Array.isArray(src) ? src : [];
            } else {
              clone = src && jQuery.isPlainObject(src) ? src : {};
            }
            target[name] = jQuery.extend(deep, clone, copy);
          } else if (copy !== undefined) {
            target[name] = copy;
          }
        }
      }
    }
    // 返回修改后的对象
    return target;
  }