人工封装jquery

最新推荐文章于 2023-07-12 15:39:49 发布

原创最新推荐文章于 2023-07-12 15:39:49 发布 · 135 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #javascript #ecmascript

本文详细介绍了jQuery（jq）的封装过程，包括构造函数、原型链的设置，以及如何实现基本的DOM操作如点击事件、切换显示、添加删除类和隐藏显示。同时，文中还展示了jQuery的ready方法和extend方法的使用，帮助读者深入理解jQuery的工作原理。

jq介绍

官网

jQuery是一个高效、精简并且功能丰富的JavaScript工具库
jquery极大简化了DOM操作，让编程变得更加简单高效，比单纯用js写方便的多
在jQuery中，只有一个全局变量$，jQuery的特点，避免了全局变量的污染，不用js那样一个一个的确定变量

jq封装原理

js的全局代码区只有一个，这样就会造成同名变量的值会被覆盖。‘
使用对象封装，将代码封装到对象中，但对象如果被覆盖，则全部失效，风险极高。
使用工厂模式，将代码进行封装，但是并没有解决问题。
将封装的函数名字去除，避免覆盖，但是函数没有办法调用了
匿名自调用。’可以在页面加载的时候调用一次，但是不能重复调用，并且数据没有办法获取。
使用闭包，在全局区中不能够获取函数体内的数据。使用更大作用域的变量来记录小作用域变量的值。

接下来我们手动封装一下 jq

jq的构造函数

(function () {
  // 匿名函数自执行
  // jq的构造函数
  function jQuery(selector) {
    // 返回new 一个初始化函数
    return new jQuery.fn.init(selector);
  }
})();

定义jq构造函数的显示原型

jQuery.fn = jQuery.prototype = {
    constructor: jQuery,
    jquery: "9.0.0",
    length: 0,
    get(index) {
      return this[index];
    },
}

jq初始化函数

jQuery.fn.init = function (selector) { };

让new init 产生对象拥有jq显示原型上的所有方法

jQuery.fn.init.prototype = jQuery.fn;

全局对jQuery与$可以访问

window.$ = window.jQuery = jQuery;

jq封装

(function () {
  // 匿名函数自执行
  // 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];
    },
    click(callback) {
      // 点击事件
      // 单击时让this的每个元素执行callback回调函数
      for (var i = 0; i < this.length; i++) {
        this[i].addEventListener("click", callback);
      }
    },
    toggle() {
      // 切换
      // 遍历每个元素如果display不是none就隐藏，否则就显示
      for (var i = 0; i < this.length; i++) {
        if (this[i].style.display != "none") {
          this[i].style.display = "none";
        } else {
          this[i].style.display = "block";
        }
      }
      return this;
    },
    addClass(data) {
      // 添加类
      for (var i = 0; i < this.length; i++) {
        this[i].classList.add(data);
      }
    },
    removeClass(data) {
      // 删除类
      for (var i = 0; i < this.length; i++) {
        this[i].classList.remove(data);
      }
    },
    hide() {
      // 隐藏
      for (var i = 0; i < this.length; i++) {
        this[i].style.display = "none";
      }
    },
    show() {
      // 显示
      for (var i = 0; i < this.length; i++) {
        this[i].style.display = "block";
      }
    },
  };
  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];
      }
    }
  };
  // 让new init 产生对象拥有jQuery显示原型上的所有方法
  jQuery.fn.init.prototype = jQuery.fn;
  // 全局对jQuery与$可以访问
  window.$ = window.jQuery = jQuery;
})();

jq方法使用

<body>
    <h1>jquery还是大哥么？</h1>
    <p>是的</p>
    <h1>市场占用96.8%</h1>
    <button class="qiehuan">切换</button>
    <button class="addclass">添加类</button>
    <button class="removeclass">移除类</button>
    <button class="hide">hide</button>
    <button class="show">show</button>
</body>
 
<script>
    // 给button注册一个点击事件
    $(".qiehuan").click(function () {
        // 让h1切换显示与隐藏
        $("h1").toggle();
    })
    // 添加类
    $(".addclass").click(function () {
        $("h1").addClass("active");
    })
    // 删除类
    $(".removeclass").click(function () {
        $("h1").removeClass("active");
    })
    // 隐藏
    $(".hide").click(function () {
        $("h1").hide();
    })
    // 显示
    $(".show").click(function () {
        $("h1").show();
    })
    // ready方法
    $(function () {
        alert("jq已经加载完毕")
    })
</script>

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