封装jQuery

最新推荐文章于 2024-10-01 20:12:28 发布

m0_64366317

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量167

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/m0_64366317/article/details/128010155

版权

本文深入解析了如何编写一个简单的jQuery框架，包括立即执行函数、构造函数init的使用以及原型链的设置，使得实例对象能够调用jQuery的方法。同时，展示了如何实现click、toggle、addClass、removeClass、show和hide等实用方法。此外，还介绍了jQuery.fn.extend()方法，用于对象的合并和拷贝，以及其在深拷贝和浅拷贝中的应用。

摘要由CSDN通过智能技术生成

编写jQuery框架

闭包

// 立刻执行函数

(function($){

    // code

})(jQuery);

Query.fn.init其实是jQuery函数的原型上的一个方法，它是真正的构造函数，通过它创建对象。
init的实例对象想要使用jQuery的方法，只需要改变原型链指向即可，将自己的原型指向由原本指向init.prototype改为指向jQuery.prototype即可
window.$ = window.jQuery = jQuery; 全局访问

(function(){
    function jQuery(selector){
        return new jQuery.fn.init(selector);
    }
    jQuery.fn=jQuery.prototype={
        constructor:jQuery,
        jquery:"9.9.0",
        length:0,
        get(index){
            return this[index]
        },
//封装each方法
        each(callback){
            for(var i=0;i<this.length;i++){
                callback(this[i])
            }
            return this
        },
        click(callback){
            this.each(function(item){
                item.addEventListener("click",callback)
            })
        },
        toggle(){
         this.each(function(item){
            if(item.style.display!="none"){
                item.style.display="none"
            }else{
                item.style.display="block"
            }
          })
        },
        //封装addClass方法
        addClass(className){
            this.each(function(item){
                item.classList.add(className)

            })
        },
        removeClass(className){
            this.each(function(item){
                item.classList.remove(className);
            })
         
        },
        show(){
            this.each(function(item){
                item.style.display="block";
            })
        },
        hide(){
            this.each(function(item){
                item.style.display="none";
            })
        }
    }

    var isReady=false;
    var readyList=[];
    document.addEventListener("DOMContentLoaded",function(){
        isReady=true;
        readyList.forEach(item=>item());
        readyList=[]
    })
    jQuery.fn.init=function(selector){

        if(typeof selector==="function"){
            if(isReady){
                selector()
            }else{
                readyList.push(selector)
            }
        }else{
            var list = document.querySelectorAll(selector);
            this.length = list.length;
            for (var i = 0; i < list.length; i++) {
              this[i] = list[i];
            }
        }
        
    }
    jQuery.fn.init.prototype=jQuery.fn
    window.$=window.jQuery=jQuery
})()

jQuery.extend()方法

在 jQuery 中如果想要将某个对象拷贝（合并）给另外一个对象可以使用使用 $.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;
  }