jQuery中怎么實現(xiàn)一個構(gòu)造器
這篇文章給大家介紹jQuery中怎么實現(xiàn)一個構(gòu)造器，內(nèi)容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
成都網(wǎng)站建設哪家好，找成都創(chuàng)新互聯(lián)！專注于網(wǎng)頁設計、重慶網(wǎng)站建設公司、微信開發(fā)、微信小程序開發(fā)、集團成都定制網(wǎng)站等服務項目。核心團隊均擁有互聯(lián)網(wǎng)行業(yè)多年經(jīng)驗，服務眾多知名企業(yè)客戶；涵蓋的客戶類型包括：白烏魚等眾多領域，積累了大量豐富的經(jīng)驗，同時也獲得了客戶的一致好評！
2009-01-13發(fā)布的1.3版
init: function( selector, context ) { // Make sure that a selection was provided selector = selector || document; // 處理節(jié)點參數(shù),直接添加屬性到新實例上 if ( selector.nodeType ) { this[0] = selector; this.length = 1; this.context = selector; return this; } // 處理字符串參數(shù) if ( typeof selector === "string" ) { // 判定是否為HTML片斷還是ID var match = quickExpr.exec( selector ); if ( match && (match[1] || !context) ) { // 如果是HTML片斷,轉(zhuǎn)換一個由節(jié)點構(gòu)造的數(shù)組 if ( match[1] ) selector = jQuery.clean( [ match[1] ], context ); // 如果是ID,則查找此元素,如果找到放進空數(shù)組中 else { var elem = document.getElementById( match[3] ); // Make sure an element was located if ( elem ){ // 處理 IE and Opera 混淆ID與NAME的bug if ( elem.id != match[3] ) return jQuery().find( selector ); var ret = jQuery( elem ); ret.context = document; ret.selector = selector; return ret; } selector = []; } } else //使用Sizzle處理其他CSS表達式,生成實例并返回 return jQuery( context ).find( selector ); // 處理函數(shù)參數(shù)，直接domReady } else if ( jQuery.isFunction( selector ) ) return jQuery( document ).ready( selector ); //處理jQuery對象參數(shù)，簡單地將其兩個屬性賦給新實例 if ( selector.selector && selector.context ) { this.selector = selector.selector; this.context = selector.context; } //將上面得到節(jié)點數(shù)組，用setArray方法把它們變成實例的元素 return this.setArray(jQuery.makeArray(selector)); },2009-02-19發(fā)布的1.32版
init: function( selector, context ) { // Make sure that a selection was provided selector = selector || document; // 處理節(jié)點參數(shù),直接添加屬性到新實例上 if ( selector.nodeType ) { this[0] = selector; this.length = 1; this.context = selector; return this; } //處理字符串參數(shù) if ( typeof selector === "string" ) { //判定是否為HTML片斷還是ID var match = quickExpr.exec( selector ); if ( match && (match[1] || !context) ) { // 如果是HTML片斷,轉(zhuǎn)換一個由節(jié)點構(gòu)造的數(shù)組 if ( match[1] ) selector = jQuery.clean( [ match[1] ], context ); else { var elem = document.getElementById( match[3] ); // 如果是ID,則查找此元素,如果找到放進空數(shù)組中 if ( elem && elem.id != match[3] ) return jQuery().find( selector ); //這里對1.3版做了些優(yōu)化,更簡潔 var ret = jQuery( elem || [] ); ret.context = document; ret.selector = selector; return ret; } } else //使用Sizzle處理其他CSS表達式,生成實例并返回 return jQuery( context ).find( selector ); // 處理函數(shù)參數(shù)，進行domReady操作 } else if ( jQuery.isFunction( selector ) ) return jQuery( document ).ready( selector ); //處理jQuery對象參數(shù)，簡單地將其兩個屬性賦給新實例 if ( selector.selector && selector.context ) { this.selector = selector.selector; this.context = selector.context; } //這里對1.3版做了些擴展,允許傳珍上元素集合(HTMLCollection)與節(jié)點集合(NodeList), //元素數(shù)組可能是我們用字符串轉(zhuǎn)換過來的,也可以是用戶直接傳進來的 return this.setArray(jQuery.isArray( selector ) ? selector : jQuery.makeArray(selector)); },2010-01-13發(fā)布的1.4版
init: function( selector, context ) { var match, elem, ret, doc; //處理空白字符串,null,undefined參數(shù)(新增),返回一個非常純凈的實例 if ( !selector ) { return this; } // 處理節(jié)點參數(shù),直接添加屬性到新實例上 if ( selector.nodeType ) { this.context = this[0] = selector;//寫法上優(yōu)化 this.length = 1; return this; } //處理字符串參數(shù) if ( typeof selector === "string" ) { // 判定是否為HTML片斷還是ID match = quickExpr.exec( selector ); if ( match && (match[1] || !context) ) { //如果是HTML片斷 if ( match[1] ) { //取得文檔對象 doc = (context ? context.ownerDocument || context : document); // 如果是單個標簽,直接使用 document.createElement創(chuàng)建此節(jié)點并放入數(shù)組中 ret = rsingleTag.exec( selector ); if ( ret ) { //如果后面跟著一個純凈的JS對象,則為此節(jié)點添加相應的屬性或樣式 if ( jQuery.isPlainObject( context ) ) { selector = [ document.createElement( ret[1] ) ]; jQuery.fn.attr.call( selector, context, true ); } else { selector = [ doc.createElement( ret[1] ) ]; } } else { //改由buildFragment來生成節(jié)點集合(NodeList) ret = buildFragment( [ match[1] ], [ doc ] ); selector = (ret.cacheable ? ret.fragment.cloneNode(true) : ret.fragment).childNodes; } } else { // 如果是ID,則查找此元素,如果找到放進空數(shù)組中 elem = document.getElementById( match[2] ); if ( elem ) { // 處理 IE and Opera 混淆ID與NAME的bug if ( elem.id !== match[2] ) { return rootjQuery.find( selector ); } //這里也做了一些優(yōu)化,原來是很傻地再生成一個jQuery實例 this.length = 1; this[0] = elem; } this.context = document; this.selector = selector; return this; } // 如果字符是很簡單的標簽選擇器,那基本沒有必要走Sizzle路線,直接getElementsByTagName,很好的優(yōu)化 } else if ( !context && /^\w+$/.test( selector ) ) { this.selector = selector; this.context = document; selector = document.getElementsByTagName( selector ); // 如果第二個參數(shù)不存在或者是jQuery對象,那么用它或rootjQuery調(diào)用find查找目標節(jié)點(走Sizzle路線) } else if ( !context || context.jquery ) { return (context || rootjQuery).find( selector ); // HANDLE: $(expr, context) // (which is just equivalent to: $(context).find(expr) } else { //如果第二個參數(shù)已指定為某元素節(jié)點,轉(zhuǎn)為jQuery對象,走Sizzle路線 return jQuery( context ).find( selector ); } // 處理函數(shù)參數(shù)，直接domReady } else if ( jQuery.isFunction( selector ) ) { return rootjQuery.ready( selector ); } //處理jQuery對象參數(shù)，簡單地將其兩個屬性賦給新實例 if (selector.selector !== undefined) { this.selector = selector.selector; this.context = selector.context; } //這里又做了些許修改,緣于makeArray可以接受第二個參數(shù)(可以是數(shù)組或類數(shù)組,這時相當合并操作) return jQuery.isArray( selector ) ? this.setArray( selector ) ://內(nèi)部用push方法,迅速將一個普通對象變成類數(shù)組對象 jQuery.makeArray( selector, this ); },接著是廣受歡迎的2010-02-13發(fā)布的1.42版
init: function( selector, context ) { var match, elem, ret, doc; // 處理空白字符串,null,undefined參數(shù) if ( !selector ) { return this; } // 處理節(jié)點參數(shù) if ( selector.nodeType ) { this.context = this[0] = selector; this.length = 1; return this; } // 處理body參數(shù)(新增) if ( selector === "body" && !context ) { this.context = document; this[0] = document.body; this.selector = "body"; this.length = 1; return this; } // 處理字符串參數(shù),分七種情形： //①單個標簽,帶對象屬性包 ---> jQuery.merge //②單個標簽,不帶對象屬性包 ---> attr + jQuery.merge //③復雜的HTML片斷 ---> buildFragment + jQuery.merge //④ID選擇器,與找到的元素的ID不同 ---> getElementById + Sizzle + pushStack //⑤ID選擇器,與找到的元素的ID相同 ---> getElementById + 簡單屬性添加 //⑥標簽選擇器 ---> getElementsByTagName + jQuery.merge //⑦其他CSS表達式 ---> Sizzle + pushStack if ( typeof selector === "string" ) { match = quickExpr.exec( selector ); if ( match && (match[1] || !context) ) { if ( match[1] ) { doc = (context ? context.ownerDocument || context : document); ret = rsingleTag.exec( selector ); if ( ret ) { if ( jQuery.isPlainObject( context ) ) { selector = [ document.createElement( ret[1] ) ]; jQuery.fn.attr.call( selector, context, true ); } else { selector = [ doc.createElement( ret[1] ) ]; } } else { ret = buildFragment( [ match[1] ], [ doc ] ); selector = (ret.cacheable ? ret.fragment.cloneNode(true) : ret.fragment).childNodes; } return jQuery.merge( this, selector ); } else { elem = document.getElementById( match[2] ); if ( elem ) { if ( elem.id !== match[2] ) { return rootjQuery.find( selector ); } this.length = 1; this[0] = elem; } this.context = document; this.selector = selector; return this; } } else if ( !context && /^\w+$/.test( selector ) ) { this.selector = selector; this.context = document; selector = document.getElementsByTagName( selector ); return jQuery.merge( this, selector ); } else if ( !context || context.jquery ) { return (context || rootjQuery).find( selector ); } else { return jQuery( context ).find( selector ); } // 處理函數(shù)參數(shù)，直接domReady } else if ( jQuery.isFunction( selector ) ) { return rootjQuery.ready( selector ); } //處理jQuery對象參數(shù) if (selector.selector !== undefined) { this.selector = selector.selector; this.context = selector.context; } //無論是數(shù)組還是類數(shù)組（如NodeList），統(tǒng)統(tǒng)使用jQuery.makeArray來為實例添加新的元素 return jQuery.makeArray( selector, this ); },另附上makeArray方法與merge方法，merge方法好神奇啊
makeArray: function( array, results ) { var ret = results || []; if ( array != null ) { // The window, strings (and functions) also have 'length' // The extra typeof function check is to prevent crashes // in Safari 2 (See: #3039) if ( array.length == null || typeof array === "string" || jQuery.isFunction(array) || (typeof array !== "function" && array.setInterval) ) { push.call( ret, array ); } else { jQuery.merge( ret, array ); } } return ret; }, merge: function( first, second ) { var i = first.length, j = 0; if ( typeof second.length === "number" ) { for ( var l = second.length; j < l; j++ ) { first[ i++ ] = second[ j ]; } } else { while ( second[j] !== undefined ) { first[ i++ ] = second[ j++ ]; } } first.length = i; return first; },2011-01-23發(fā)布的1.5版，其init方法與1.42的變化不大：只有兩處做了改動：
//1.42 - ret = buildFragment( [ match[1] ], [ doc ] ); - selector = (ret.cacheable ? ret.fragment.cloneNode(true) : ret.fragment).childNodes; //1.5 + ret = jQuery.buildFragment( [ match[1] ], [ doc ] ); + selector = (ret.cacheable ? jQuery.clone(ret.fragment) : ret.fragment).childNodes; //1.42 - return jQuery( context ).find( selector ); //1.5 + return this.constructor( context ).find( selector );//目的就是為了不再生成新實例
2011-05-02發(fā)布的jquery1.6，變化不大，只是對HTML片斷進行了更嚴密的判定：
// Are we dealing with HTML string or an ID? if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) { // Assume that strings that start and end with <> are HTML and skip the regex check match = [ null, selector, null ]; } else { match = quickExpr.exec( selector ); }關(guān)于jQuery中怎么實現(xiàn)一個構(gòu)造器就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
當前名稱：jQuery中怎么實現(xiàn)一個構(gòu)造器
本文網(wǎng)址：http://www.muchs.cn/article44/ijsiee.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、網(wǎng)站收錄、網(wǎng)站維護、網(wǎng)站導航、全網(wǎng)營銷推廣、用戶體驗
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
- 網(wǎng)站快照不更新的原因與提高網(wǎng)站收錄 2016-12-30
- 做網(wǎng)站建設應該注意什么 2021-07-01
- 做網(wǎng)站優(yōu)化時做內(nèi)鏈優(yōu)化有什么用？ 2023-04-10
- 什么樣的公司需要做網(wǎng)站 2016-08-04
- 百度傾向于什么樣的用戶體驗？ 2014-05-20
- 創(chuàng)新互聯(lián)教您這樣提高網(wǎng)站的用戶體驗度 2014-02-21
- 做網(wǎng)站前這些問題要了解透徹 2022-10-01
- 泉州做網(wǎng)站好嗎-泉州網(wǎng)站建設哪個好 2022-11-08
- 做網(wǎng)站不同階段的責任有哪些 2023-02-21
- 剛開始做網(wǎng)站建設大概需要多少資金 2021-08-14
- 怎么設計成都網(wǎng)站設計？怎么成都做網(wǎng)站呀？如何做網(wǎng)站成都？ 2022-08-10
- 網(wǎng)站策劃之如何提高用戶參與度-評論篇 2015-08-02