深入理解jQuery封装技术-优快云博客

本文链接：https://blog.youkuaiyun.com/c_l_a_n_n_d/article/details/128010109

本文主要探讨了jQuery的封装过程，包括如何初始化函数，使用each函数遍历元素，实现显示与隐藏的效果，以及如何定义构造函数展示原型。此外，还详细讲解了如何实现全局访问和扩展jQuery方法，特别是extend方法的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

初始化一个函数

function jQuery(selector) {   
return new jQuery.fn.init(selector);  }

each函数

 each(callback) {
      for (var i = 0; i < this.length; i++) {
        callback(this[i]);
      }
      return this;
    },

显示与隐藏

 toggle() {
      this.each(function (item) {
        if (item.style.display != "none") {
          item.style.display = "none";
        } else {
          item.style.display = "block";
        }
      });
    },

定义构造函数显示原型

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

全局访问

window.$ = window.jQuery = jQuery;

方法

 (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];
 	},
 each(callback){
 	for(var i=0;i<this.length;i++){
 		callback(this[i])
 	}
 	return this;
 },
 //简单的一个小例子  第一种
 // click(callback){
 // 	// 单击的时候让this的每个元素执行callback回调函数
 // 	for(var i=0;i<this.length;i++){
 // 		this[i].addEventListener("click",callback);
 // 	}
 // },
 //第二种 使用封装好的each方法节省一层遍历
 click(callback){
 	// 单击的时候让this的每个元素执行callback回调函数
 	this.each(function(item){
 		item.addEventListener("click",callback);
 		return this;
 	})
 },
 
 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"
 		}
 	}
 },
 addClass(clas){
 	this.each(function(item){
 		item.classList.add(clas)
 		return this;
 	})
 	return this;
 },
 removeClass(clas){
 	this.each(function(item){
 		if(item.classList.contains(clas)){
 			item.classList.remove(clas)
 		}
 		return this;
 	})
 	return this;
 },
 show(){
 	this.each(function(item){
 		if(item.style.display=="none"){
 			item.style.display="block"
 		}
 	})
 },
 hide(){
 	this.each(function(item){
 		if(item.style.display=="block"){
 			item.style.display="none"
 		}
 	})
 },
 }

 // jq初始化函数
 jQuery.fn.init=function(selector){
 		// 获取到选择列表
 		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;
 
 })()

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