自己封装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()方法
总结
通过自己对jQuery的方法进行封装,让我对js更深层次有了一点了解,虽然不多,但是日积月累,慢慢积累吧,也通过这次封装,巩固了自己之前对js基础的知识的了解,也算是简单复习了一下js的基础知识,虽然自己封装有难度,但是这对自己对js结构和深层次的了解会大有帮助。