當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

jQuery中的几个模块总结

發(fā)布時(shí)間：2023/12/10 编程问答 45 豆豆

生活随笔收集整理的這篇文章主要介紹了 jQuery中的几个模块总结小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

Query插件，以備并希望在前端方面有所長(zhǎng)進(jìn)。請(qǐng)批評(píng)指正。

一，類型判斷全解

JQuery判斷類型擴(kuò)展方法：$.type()

1 /*type: function( obj ) { 2 if ( obj == null ) { 3 return obj + ""; 4 } 5 return typeof obj === "object" || typeof obj === "function" ? 6 class2type[ toString.call(obj) ] || "object" : 7 typeof obj; 8 }*/ $.type()

本質(zhì)：就是運(yùn)用{}.toString.call()或者（Object.prototype.toString.call()）。

自己模仿寫(xiě)出來(lái)一個(gè)方法：

1 function getType(o) { 2 var _target; 3 return ( 4 (_target = typeof (o)) == "object" ? Object.prototype.toString.call(o).slice(8, -1) : _target) 5 .toLowerCase(); 6 } getType

但這個(gè)方法只是判斷繼承Object復(fù)雜類型下的Date Array RegExp等typeof判斷不出的子類型。

1，typeof 2，instanceof 3，constructor 4，{}.toString.call()或者（Object.prototype.toString.call()）

Boolean Number String Function Array Date RegExp Object Error Null Undefined

1 //1，數(shù)據(jù)類型：5種簡(jiǎn)單基本類型：Undefined Boolean String Number Null 1種復(fù)雜類型Object 2 //2，但根據(jù)返回值得到的類型有6種，“undefined” “boolean” “string” “number” “function” “object”。注意將Null去掉，換成“function”。都以小寫(xiě)字母開(kāi)頭 3 //比如操作符操作字符串會(huì)返回上面6種，注意一點(diǎn)：將typeof null會(huì)返回“object”，注意返回object的表示這個(gè)值是對(duì)象（包括Array）或者null, 4 //1Array Date返回object 2Math 數(shù)字返回number 3字符串new返回object 直接定義返回object 5 var arr1 = [1, 2, 3]; 6 var arr2 = new Array() 7 var dat = new Date(); 8 var mat1 = Math.PI; 9 var mat2 = Math.random(); 10 alert(typeof arr1);//object 11 alert(typeof arr2);//object 12 alert(typeof dat);//object 13 alert(typeof mat1);//number 14 alert(typeof mat2);//number 15 16 alert(typeof [])//object 17 alert(typeof null);//object 18 //字符串有點(diǎn)特殊 19 var s1 = 'abc'; 20 var s2 = new String('def'); 21 alert(typeof s1);//string 22 alert(typeof s2);//object 23 24 function fun() { 25 26 } 27 alert(typeof fun);//function 28 //3，一般null==undefined返回true ,null===undefined 返回false 29 if (null == undefined) { alert(true) }//true 30 if (null === undefined) { alert(true) } else { 31 alert(false); 32 } 33 //4，Boolean 轉(zhuǎn)換成false的的類型 “” 0和NaN null undefined typeof 1 //instance 2 var a = "abc."; 3 var b = 1; 4 var c = [1, 2, 3]; 5 var d = new Date(); 6 var e = function () { alert(1); }; 7 var f = function () { this.name = "2"; }; 8 alert(c instanceof Array) //true 9 alert(d instanceof Date) 10 alert(f instanceof Function)//true 11 // alert(f instanceof function)// false 12 //instanceof 后面一定要是對(duì)象類型，注意大小寫(xiě)不能錯(cuò) instanceof 1 function A() { } 2 alert(typeof A);//function 3 var a = new A(); 4 alert(typeof a);//object 5 6 //構(gòu)造函數(shù) 7 //new 1創(chuàng)建實(shí)例 2將函數(shù)的原型賦值給這個(gè)實(shí)例 3執(zhí)行這個(gè)函數(shù) 并且這個(gè)函數(shù)的上下文this就是這個(gè)實(shí)例 8 alert(a.constructor)// function A() { } 9 alert(a.constructor === A)//true ***************注意實(shí)例能直接調(diào)用對(duì)應(yīng)原型中屬性方法。比如a直接調(diào)用原型中的constructor constructor 1 function A() { } 2 var a = new A(); 3 alert({}.toString.call(a))//[object Object] 4 alert({}.toString.call(A))//[object Function] 5 alert(Object.prototype.toString.call([]))//[object Array] 6 alert({}.toString.call([]))//[object Array] 7 alert({}.toString.call(new Date()))//[Object Date] {}.toString.call()或者（Object.prototype.toString.call()）

/1typeof:判斷除了Null的5個(gè)基本類型準(zhǔn)確，但是想Date Array Regexp不準(zhǔn) 2先知道類型，再判斷是否是這個(gè)類型
//instaneceof，準(zhǔn)確，但必須先知道類型，然后判斷是否為這個(gè)類型
//constructor（得到構(gòu)造函數(shù)
//跨iframe時(shí)候 instanceof 和constructor有問(wèn)題，具體什么問(wèn)題不清楚
//用jquery.type(),把null undefined 復(fù)雜類型和除null和undefined外的4中基本類型都包含了。核心代碼{}.toString.call(obj) //[object ...]

二，創(chuàng)建對(duì)象全解

jQuery創(chuàng)建$(),這$()是個(gè)方法，里面renturn一個(gè)對(duì)象，new的時(shí)候，覆蓋構(gòu)造函數(shù)的對(duì)象。運(yùn)用構(gòu)造函數(shù)+寄生創(chuàng)建對(duì)象，核心理解原型鏈。

1 var jQuery = function( selector, context ) { 2 // The jQuery object is actually just the init constructor 'enhanced' 3 return new jQuery.fn.init( selector, context ); 4 } 5 6 jQuery.fn = jQuery.prototype = { 7 init: function( selector, context ) { 8 var match, elem, ret, doc; 9 10 // Handle $(""), $(null), or $(undefined) 11 if ( !selector ) { 12 return this; 13 } 14 ....... 15 16 jQuery.fn.init.prototype = jQuery.fn; $()對(duì)象創(chuàng)建

return new jQuery.fn.init( selector, context );為什么不直接返回new jQuery();應(yīng)為new的時(shí)候，會(huì)調(diào)用jQuery....然后又new..死循環(huán)。
將jquery下的prototype下的init方法的原型=jquery下的prototype。意思：newjQuery.fn.init（）對(duì)象具有 init方法的原型中的所有方法的實(shí)例，就會(huì)具有jquery下的prototype下的所有方法，擴(kuò)展jquery下的prototype下的方法。就等于擴(kuò)展$()的方法。

創(chuàng)建對(duì)象的形式：說(shuō)的3種，5種什么的，沒(méi)什么意思的。其實(shí)看書(shū)之后總結(jié)是7種，不過(guò)沒(méi)什么意思。核心還是構(gòu)造函數(shù)+原型，知道之后其余的稍微看一下就會(huì)的。

原始：var obj={}；或者var obj=new Object() ;obj.attr1=..,obj.attr2=..

工廠：function factory（par1,par2,...）{var obj=new Object();obj.attr=par1..;return obj}

構(gòu)造函數(shù)：function A(){} var a=new A();

構(gòu)造函數(shù)+原型：function A(){} var a=new A(); A.prototype={attr1：..;fun1:...}

動(dòng)態(tài)構(gòu)造函數(shù)：function A(){this.attr1=..;this.attr2=..;if(typeof this.fun1!='function'){A.prototype.fun1=function(){....}}} ? ?var a=new A(); a.fun1();//函數(shù)內(nèi)部沒(méi)有的，我再在原型中創(chuàng)建。這個(gè)整體寫(xiě)法，將原型寫(xiě)到方法體內(nèi)了。就相當(dāng)我們c#的語(yǔ)言一樣了，將類的所有的方法寫(xiě)到一個(gè)類中。

寄生構(gòu)造函數(shù)：function A(){vat a=new ..;this.attr1=... ? return a;}//return的結(jié)果，覆蓋構(gòu)造函數(shù)new時(shí)候默認(rèn)返回的實(shí)例。

穩(wěn)妥構(gòu)造函數(shù)：看高級(jí)編程之后，實(shí)在發(fā)現(xiàn)不出和工廠方法有什么區(qū)別。這都什么飛機(jī)？我簡(jiǎn)單認(rèn)為就是工廠模式。核心為了“安全”，不使用this，不使用new。

三，引用問(wèn)題

//在h5游戲開(kāi)發(fā)中，經(jīng)常會(huì)有這樣的要求：復(fù)制出一個(gè)對(duì)象，但修改原來(lái)的對(duì)象，不會(huì)造成對(duì)復(fù)制出的對(duì)象造成影響。我們需要理解一些基本的東西。

1 //1在閉包內(nèi)，盡量不適用同一個(gè)變量名，比如下面的a。因?yàn)樽饔糜蚓徒易兞俊２粫?huì)按照人眼看到的從上到下執(zhí)行。 2 //2變量和函數(shù)的聲明，放到最上面。因?yàn)閖s程序運(yùn)行的時(shí)候自動(dòng)會(huì)將聲明提升到當(dāng)前作用域的最頂端 3 var a = "global"; 4 function b() { 5 console.log(a);//undefined 1先在當(dāng)前上下文作用域內(nèi)找a，就近原則！。當(dāng)前作用于內(nèi)不存在，就從上級(jí)作用域找...上級(jí) 6 var a = "local";//此時(shí)var a聲明會(huì)提升到當(dāng)前上下文（作用域最頂端） 7 console.log(a);//local 8 } 9 b(); 10 11 var m = "global"; 12 function n() { 13 var m; 14 console.log(m);//undefined 15 m = "local"; 16 console.log(m);//local 17 } 18 n(); 19 var k = "global"; 20 function l() { 21 var k; 22 console.log(k);//undefined 找到當(dāng)前作用域的k，就不會(huì)再往作用域鏈上繼續(xù)找 23 console.log(k);//undefined 24 } 25 l(); 26 var s = "global"; 27 function t() { 28 console.log(s);//undefined 找到當(dāng)前作用域的k，就不會(huì)再往作用域鏈上繼續(xù)找 29 console.log(s);//undefined 30 } 31 t(); 變量，函數(shù)聲明的習(xí)慣。常出現(xiàn)的錯(cuò)誤

四，擴(kuò)展實(shí)質(zhì)全解

jQuery.extend = jQuery.fn.extend = function() {// copy reference to target objectvar target = arguments[0] || {}, i = 1, length = arguments.length, deep = false, options, name, src, copy;// Handle a deep copy situationif ( typeof target === "boolean" ) {deep = target;target = arguments[1] || {};// skip the boolean and the targeti = 2;}// Handle case when target is a string or something (possible in deep copy)if ( typeof target !== "object" && !jQuery.isFunction(target) ) {target = {};}// extend jQuery itself if only one argument is passedif ( length === i ) {target = this;--i;}for ( ; i < length; i++ ) {// Only deal with non-null/undefined valuesif ( (options = arguments[ i ]) != null ) {// Extend the base objectfor ( name in options ) {src = target[ name ];copy = options[ name ];// Prevent never-ending loopif ( target === copy ) {continue;}// Recurse if we're merging object literal values or arraysif ( deep && copy && ( jQuery.isPlainObject(copy) || jQuery.isArray(copy) ) ) {var clone = src && ( jQuery.isPlainObject(src) || jQuery.isArray(src) ) ? src: jQuery.isArray(copy) ? [] : {};// Never move original objects, clone themtarget[ name ] = jQuery.extend( deep, clone, copy );// Don't bring in undefined values} else if ( copy !== undefined ) {target[ name ] = copy;}}}}// Return the modified objectreturn target; }; jQuery的擴(kuò)展（extend）

注意：$.extend和$().extend,都是用這一個(gè)方法搞定的。

1 //extend 2 var obj1 = $.extend({}, { name: 'lk', age: 18 }, { weight: 120 }) 3 var obj2 = $.extend({}, { name: 'lk', attr: { age: 15, hair: 'red' } }, { weight: 120 }) 4 var obj3 = $.extend(false, { name: 'lk', attr: { age: 15, hair: 'red' } }, { weight: 120 }, { attr: { sight: 5.0 } }) 5 console.log(obj3);//{name: "lk",weight: 120,attr:{sight: 5.0}} 6 var obj4 = $.extend(true, { name: 'lk', attr: { age: 15, hair: 'red' } }, { weight: 120 }, { attr: { age: 18, sight: 5.0 } }) 7 console.log(obj4);//{name: "lk",weight: 120,attr:{age: 18, hair: 'red',sight: 5.0}} extend使用

注意遞歸的使用：

function multi(num) {//終止條件if (num == 1) {return 1;}return num * multi(num - 1);//5*4*3*2*1 }console.log(multi(5))//120 遞歸，先遞后歸

//我們想把這個(gè)對(duì)象真正的復(fù)制一份出來(lái)
var obj1 = { a: 15 }
var obj2 = obj1;
obj1.a = 18;
console.log(obj2); //{a:18 }//想要的是講obj1對(duì)象“拷貝”給obj2之后，改obj1，不會(huì)造成對(duì)obj2的影響。

拷貝就是采用的遞歸：

1 function copy(obj) { 2 var newObj = {} 3 4 for (var key in obj) { 5 newObj[key] = obj[key] 6 } 7 return newObj; 8 9 } 10 var obj4 = copy(obj3); 11 obj3.a = 18; 12 console.log(obj3)//{a:18} 13 console.log(obj4)//{a:20} 通過(guò)這種拷貝的形式，就會(huì)使得不會(huì)相互影響，脫離的“引用問(wèn)題”干擾。模擬一個(gè)淺拷貝 function deepCopy(obj) {//終止條件，當(dāng)不是{key：value}對(duì)象時(shí)if (typeof obj != 'object') {return obj;}var newObj = {}for (var key in obj) {newObj[key] = deepCopy(obj[key]);//“遞”次調(diào)用，最后”歸“一 }return newObj;}var obj8 = deepCopy(obj7);obj7.a.b.c = 18;console.log(obj7);//{ a: { b: { c: 18 } } }console.log(obj8); //{ a: { b: { c: 15 } } } 模擬一個(gè)深拷貝

自己模仿一個(gè)擴(kuò)展。

1 function Bird() { 2 this.wing = 2; 3 this.fly = function () { 4 alert("fly"); 5 } 6 } 7 Bird.kuozhan = Bird.prototype.kuozhan = function (obj) { 8 for (var key in obj) {//{a:5,b:10} 9 this[key] = obj[key] 10 } 11 return this; 12 } Bird.kuozhan=Bird.prototype.kuozhan =function（）{} 1 //函數(shù)：既是方法，又是變量，還是對(duì)象。那么函數(shù)肯定有屬性、方法 2 //擴(kuò)展靜態(tài)方法 3 //var Bird= function () { 4 5 function Bird() { 6 this.wing = 2; 7 this.fly = function () { 8 alert("fly"); 9 } 10 } 11 Bird.say = function () { 12 alert('say'); 13 } 14 Bird.run = function () { 15 alert('run'); 16 } 17 // Bird.fly();//這里出現(xiàn)錯(cuò)誤,只能其實(shí)例調(diào)用 18 var bird = new Bird(); 19 bird.fly(); 20 21 Bird.say();//say 22 Bird.run();//run 23 //對(duì)一個(gè)方法對(duì)象擴(kuò)展同時(shí)擴(kuò)展多個(gè)方法（自己調(diào)用），更為方便的寫(xiě)法 24 //看一些框架中，把擴(kuò)展的多個(gè)方法弄成一個(gè)對(duì)象，整體做參數(shù)，傳進(jìn)去，就把這個(gè)參數(shù)對(duì)象的方法一個(gè)一個(gè)擴(kuò)展到原來(lái)對(duì)象上去了。就類似 25 //{fun1：function(){},fun2：function(){},fun3：function(){}},然后一自動(dòng)對(duì)齊，顯得逼格十足。 26 //要實(shí)現(xiàn)這點(diǎn)，下部如何將一個(gè)對(duì)象的方法一個(gè)一個(gè)擴(kuò)展到原來(lái)對(duì)象上去呢？是的，我們就寫(xiě)出這個(gè)擴(kuò)展方法。少用“=”，多用“：” 27 28 Bird.kuozhan = Bird.prototype.kuozhan = function (obj) { 29 for (var key in obj) {//{a:5,b:10} 30 this[key] = obj[key] 31 } 32 return this; 33 } 34 Bird.kuozhan({ 35 s: function () { 36 alert('1'); 37 }, 38 r: function () { 39 alert('2'); 40 } 41 }) 42 Bird.s(); 43 Bird.r(); 44 Bird.prototype.kuozhan({ 45 m: function () { 46 alert('m'); 47 }, 48 n: function () { 49 alert('n'); 50 } 51 }) 52 var b = new Bird(); 擴(kuò)展使用

五，繼承注意

1 /*引用的問(wèn)題*/ 2 /*********************************************************************/ 3 /*數(shù)組*/ 4 var a=[1,2,3]; 5 var b=a; 6 //a.push(4);//修改的問(wèn)題 7 b.push(4);//修改的問(wèn)題 8 console.log(a);//[1,2,3,4] 9 console.log(b);//[1,2,3,4] 10 11 12 var a=[1,2,3]; 13 var b=a; 14 //=等號(hào) ：重開(kāi)辟新空間重新賦值開(kāi)辟新空間導(dǎo)致就不會(huì)再存在引用類型修改的問(wèn)題 15 a=[7,8,9] 16 console.log(a);//[7,8,9] 17 console.log(b);//[1,2,3,4] 18 19 /*********************************************************************/ 20 /*object*/ 21 var obj1={name:"老李"}; 22 var obj2=obj1; 23 obj2.name="老王" 24 console.log(obj1);//{name:"老王"} 25 console.log(obj2);//{name:"老王"} 26 27 var obj1={name:"老李"}; 28 var obj2=obj1; 29 30 obj2={haha:"笑哈哈"} 31 console.log(obj1);{name:"老李"} 32 console.log(obj2);{haha:"笑哈哈"} 33 34 /*********************************************************************/ 35 /*特殊的方法，不能修改*/ 36 var a=function(){alert('qqqqq')} 37 var b=a; 38 //函數(shù)只能= 函數(shù)不能修改，不存在修改的問(wèn)題 39 b=function(){alert('wwww')} 40 a();//qqqqq 41 b();//wwww 數(shù)組、Object、function，修改、重新賦值的問(wèn)題

//student.prototype = Person.prototype;
student.prototype = new Person();//可以來(lái)個(gè)”父類“實(shí)例，因?yàn)樵玩?/span>
student.prototype.constructor = student;//上面的代碼已經(jīng)破壞了原型的構(gòu)造指向，勿忘修改。

轉(zhuǎn)載于:https://www.cnblogs.com/leee/p/4791364.html

總結(jié)

以上是生活随笔為你收集整理的jQuery中的几个模块总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： python需要掌握的词汇量_北大保安英
下一篇： Super Enhancer(超级增强子