封装jQuery的方法和心得体会

最新推荐文章于 2023-04-23 13:41:33 发布

·歪腻·

最新推荐文章于 2023-04-23 13:41:33 发布

阅读量887

点赞数 1

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/wzy199982/article/details/128007235

版权

自己封装jQuery的方法

为了让匿名函数具有自治性，通常封装jQuery的时候要先进性jQuery的构造函数，这时候也就需要返回new的一个初始化的函数，为后面的封装做准备

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

js的方法通常都是定义在显式原型上的，所以就需要定义jQuery构造函数的原型，通常需要定义constructor，jQuery的版本号，长度等

jQuery.fn = jQuery.prototype = {
    constructor: jQuery,
    jquery: "9.0.0",
    length: 0,
}

如何让new init 产生对象拥有jQuery显示原型上的所有方法呢？
答案就是：把init的prototype原型指向jQuery的原理，让init创建出的对象拥有的jQuery原型链上的所有方法

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

全局对jquery和$管用

 window.$ = window.jQuery = jQuery;

三个基础的jQuery方法

get

定义get方法，传入形参index，通过get(index)方法，返回获取到的对应的元素，index对应着元素的下标

get(index) {
      return this[index];
    },

click

定义click方法，通过传入callback回调函数，内部对获取到的元素进行遍历，来给当前的元素添加click事件

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

toggle

定义toggle方法，来控制对元素的显示与隐藏操作，方法内部也是对元素进行遍历，判断，如果元素的display不为none的话，那就让其style的display变为none，否则就变为block，这个方法也是最简单的一种封装，通过控制css的属性display的值，来控制元素的显示与隐藏。

toggle(){
        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;
    },

到这里，通过两次的封装，会发现一个问题，每次封装方法都需要进行遍历，这就会很麻烦。所以，我们就想到了对遍历进行封装，封装出来一个遍历的方法，从而简化封装的代码，提高可用性

简化click方法和toggle方法

each

简化的前提是对遍历方法进行封装，后面需要用到遍历的时候直接引用这个遍历方法即可，减少了代码的冗余性。

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

调用each方法简化click和toggle

click(callback) {
      this.each(function (item) {
        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";
        }
      });
    },

关于callback

在这里插入图片描述
如图：each方法中的callback就是调用each方法是传进去的函数，即function(item){}，而each方法中的this[i]就是函数的item，click方法的callback则是调用click方法时传进来的函数，通俗的说就是形参和实参之间的关系，只是这里稍微有点复杂，不太容易理解。

dom加载完成时执行函数

需要先定义一个变量isReady，判断dom是否加载完毕，然后定义一个空的数组readyList用来存放等待要被执行的函数列表。
初始化一个jq函数，如果调用该函数时，传入进去的是一个函数，则判断jQuery是否准备好，如果准备好，就加入到之前定义的空数组readyList内，等待被执行，如果传入的不是函数，就获取选择的元素列表，对其进行遍历，并对this赋值。
浏览器默认有个DOMContentLoaded事件，我们可以通过监听DOMContentLoaded事件进行操作，执行回调函数，说明dom已经加载完毕，将isReady的值改变，然后遍历readyList内的函数，并执行，在readyList内部的函数执行完毕后清空readyList列表。

  var isReady = false;//当前dom是否加载完毕
  var readyList = [];//等待要被执行的函数列表
  //监听DOMContentLoaded事件
  document.addEventListener("DOMContentLoaded",function(){
    //改变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];
      }
    }
  };

jQuery中的extend方法

方法代码：

jQuery.extend( {

	// Unique for each copy of jQuery on the page
	expando: "jQuery" + ( version + Math.random() ).replace( /\D/g, "" ),

	// Assume jQuery is ready without the ready module
	isReady: true,

	error: function( msg ) {
		throw new Error( msg );
	},

	noop: function() {},

	isPlainObject: function( obj ) {
		var proto, Ctor;

		// Detect obvious negatives
		// Use toString instead of jQuery.type to catch host objects
		if ( !obj || toString.call( obj ) !== "[object Object]" ) {
			return false;
		}

		proto = getProto( obj );

		// Objects with no prototype (e.g., `Object.create( null )`) are plain
		if ( !proto ) {
			return true;
		}

		// Objects with prototype are plain iff they were constructed by a global Object function
		Ctor = hasOwn.call( proto, "constructor" ) && proto.constructor;
		return typeof Ctor === "function" && fnToString.call( Ctor ) === ObjectFunctionString;
	},

	isEmptyObject: function( obj ) {
		var name;

		for ( name in obj ) {
			return false;
		}
		return true;
	},

	// Evaluates a script in a provided context; falls back to the global one
	// if not specified.
	globalEval: function( code, options, doc ) {
		DOMEval( code, { nonce: options && options.nonce }, doc );
	},

	each: function( obj, callback ) {
		var length, i = 0;

		if ( isArrayLike( obj ) ) {
			length = obj.length;
			for ( ; i < length; i++ ) {
				if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
					break;
				}
			}
		} else {
			for ( i in obj ) {
				if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
					break;
				}
			}
		}

		return obj;
	},

	// results is for internal usage only
	makeArray: function( arr, results ) {
		var ret = results || [];

		if ( arr != null ) {
			if ( isArrayLike( Object( arr ) ) ) {
				jQuery.merge( ret,
					typeof arr === "string" ?
						[ arr ] : arr
				);
			} else {
				push.call( ret, arr );
			}
		}

		return ret;
	},

	inArray: function( elem, arr, i ) {
		return arr == null ? -1 : indexOf.call( arr, elem, i );
	},

	// Support: Android <=4.0 only, PhantomJS 1 only
	// push.apply(_, arraylike) throws on ancient WebKit
	merge: function( first, second ) {
		var len = +second.length,
			j = 0,
			i = first.length;

		for ( ; j < len; j++ ) {
			first[ i++ ] = second[ j ];
		}

		first.length = i;

		return first;
	},

	grep: function( elems, callback, invert ) {
		var callbackInverse,
			matches = [],
			i = 0,
			length = elems.length,
			callbackExpect = !invert;

		// Go through the array, only saving the items
		// that pass the validator function
		for ( ; i < length; i++ ) {
			callbackInverse = !callback( elems[ i ], i );
			if ( callbackInverse !== callbackExpect ) {
				matches.push( elems[ i ] );
			}
		}

		return matches;
	},

	// arg is for internal usage only
	map: function( elems, callback, arg ) {
		var length, value,
			i = 0,
			ret = [];

		// Go through the array, translating each of the items to their new values
		if ( isArrayLike( elems ) ) {
			length = elems.length;
			for ( ; i < length; i++ ) {
				value = callback( elems[ i ], i, arg );

				if ( value != null ) {
					ret.push( value );
				}
			}

		// Go through every key on the object,
		} else {
			for ( i in elems ) {
				value = callback( elems[ i ], i, arg );

				if ( value != null ) {
					ret.push( value );
				}
			}
		}

		// Flatten any nested arrays
		return flat( ret );
	},

	// A global GUID counter for objects
	guid: 1,

	// jQuery.support is not used in Core but other projects attach their
	// properties to it so it needs to exist.
	support: support
} );

使用
- jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象。
- 这里需要注意：
  1、如果只为$.extend()指定了一个参数，则意味着参数target被省略。此时，target就是jQuery对象本身。通过这种方式，我们可以为全局对象jQuery添加新的函数。
  2、如果多个对象具有相同的属性，则后者会覆盖前者的属性值。
语法
- $.extend( target [, object1 ] [, objectN ] )
- $.extend( [deep ], target, object1 [, objectN ] )（指示是否深度合并）
参数
- deep：可选。 Boolean类型指示是否深度合并对象，默认为false。如果该值为true，且多个对象的某个同名属性也都是对象，则该"属性对象"的属性也将进行合并。
- target：Object类型目标对象，其他对象的成员属性将被附加到该对象上。
- object1：可选。 Object类型第一个被合并的对象。
- objectN：可选。 Object类型第N个被合并的对象。
详情可以参考菜鸟教程：jQuery.extend()方法