jQuery源碼 support

時間 2019-11-12
原文原文鏈接
support 在jQuery中是個很重要的地方，統一表現形式，搞定兼容性。 support就是幹一件事情，就是功能檢測。 jQuery並無判斷什麼瀏覽器，而是判斷有什麼功能。 檢測一下是否兼容這個功能，沒有這個功能，就兼容就能夠了。 主要是內部使用，外部不多使用。

$(function () {
	var temp = $.support;
	for (var pro in temp) {
		document.write(pro + "  " + temp[pro] + "</br>");
	}
});

/* 測試的事chrome瀏覽器。返回true是支持，返回false是不支持。 checkOn true optSelected true reliableMarginRight true boxSizingReliable true pixelPosition true noCloneChecked true optDisabled true radioValue true checkClone true focusinBubbles false clearCloneStyle true cors true // 跟ajax 有關 跨域 IE（IE9不支持） 和 W3C都支持， ajax true // 跟ajax 有關 boxSizing true */


建立了一個工具方法，返回了一個json。 思路：主要是經過建立一些元素，而後經過這些元素，並給元素添加了一些屬性，來判斷這些屬性，而後進行兼容性獲取。 可是獲取判斷分2種，一種是直接進行獲取的，建立就便可以判斷，另外一種是要等頁面加載完成以後，才能夠判斷。 jQuery是用hooks，鉤子去解決兼容性問題。 support只是檢測的。具體是用hooks（鉤子機制）去解決問題。

 源碼： jQuery.support = (function( support ) { //這裏建立了一些元素，input，文檔碎片，div，下拉菜單，下拉菜單的子項。 var input = document.createElement("input"), fragment = document.createDocumentFragment(), div = document.createElement("div"), select = document.createElement("select"), opt = select.appendChild( document.createElement("option") ); // Finish early in limited environments 　　// 判斷input的type是否存在。默認是有值的，是text。 　　// 最新的jq都已經去掉了。 if ( !input.type ) { return support; } // 改爲複選框。 input.type = "checkbox"; // Support: Safari 5.1, iOS 5.1, Android 4.x, Android 2.3 // Check the default checkbox/radio value ("" on old WebKit; "on" elsewhere) 　　// 這裏的意思是，大部分瀏覽器下面， checkbox的默認值都是on。可是老版本的webkit下面是空的，就是false。 support.checkOn = input.value !== ""; 　　// 這裏統一都返回on。 // Must access the parent to make an option select properly // Support: IE9, IE10 support.optSelected = opt.selected; //下拉菜單的子項。是否被選中。 // Will be defined later 　　// 這幾個屬性，就是等頁面加載結束之後，纔可判斷是否支持。具體在後面($(function () { 檢查 })) support.reliableMarginRight = true; support.boxSizingReliable = true; support.pixelPosition = false; // Make sure checked status is properly cloned // Support: IE9, IE10 　　//　　這裏說明在IE9 和 10 是有兼容性問題。經過hooks去兼容。 input.checked = true; support.noCloneChecked = input.cloneNode( true ).checked; // Make sure that the options inside disabled selects aren't marked as disabled // (WebKit marks them as disabled) 　　//　　 很是老的版本的webkit中，下拉列表被禁止了，子項也被禁止了。 select.disabled = true; support.optDisabled = !opt.disabled; // Check if an input maintains its value after becoming a radio // Support: IE9, IE10 　　// 注意建立時賦值順序，若是value 和 type 賦值順序反了，就不會有問題了。 input = document.createElement("input"); input.value = "t"; input.type = "radio"; support.radioValue = input.value === "t"; // #11217 - WebKit loses check when the name is after the checked attribute input.setAttribute( "checked", "t" ); input.setAttribute( "name", "t" ); fragment.appendChild( input ); // Support: Safari 5.1, Android 4.x, Android 2.3 // old WebKit doesn't clone checked state correctly in fragments 　　// 只有webkit下，在clone一個碎片的時候，cheecked沒法返回一個值。 support.checkClone = fragment.cloneNode( true ).cloneNode( true ).lastChild.checked; // Support: Firefox, Chrome, Safari // Beware of CSP restrictions (https://developer.mozilla.org/en/Security/CSP) 　　// 是否支持focusin 事件， 光標移入事件，可是不具有冒泡的機制。 　　// 可是 onfocusin 具有 冒泡機制的。 support.focusinBubbles = "onfocusin" in window; 　　// 背景剪切 　　// 這裏是克隆的節點，原則上說，新的節點是不會影響之前到節點， 　　// 若是新節點能夠影響之前到節點。div.style.backgroundClip == ''； 　　// 任何跟背景有關的。 　　// 原則上面來講，克隆是不該該影響到之前的節點的。這裏就解決了這個問題。 div.style.backgroundClip = "content-box"; div.cloneNode( true ).style.backgroundClip = ""; support.clearCloneStyle = div.style.backgroundClip === "content-box"; // Run tests that need a body at doc ready 　　// 這裏就是要等到頁面加載之後才能判斷的屬性。進行處理。。。。。。 jQuery(function() { var container, marginDiv, // Support: Firefox, Android 2.3 (Prefixed box-sizing versions). 　　　　　　// -webkit-box-sizing CSS3的屬性，做用就是當前頁面是標準模式，仍是怪異模式。 　　　　　　// content-box就是標準模式。 　　　　　　// 這裏區分一下標準模式和怪異模式 　　　　　　// 標準模式和怪異模式簡單區分，就是對盒模型的影響。 　　　　　　// 怪異模型下，padding和border還有content，跟我W3C裏面的content等價。 　　　　　　// box-sizing:content-box標準。 divReset = "padding:0;margin:0;border:0;display:block;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box", body = document.getElementsByTagName("body")[ 0 ]; 　　　　// body 不存在，就返回。 if ( !body ) { // Return for frameset docs that don't have a body return; } 　　　　// body 存在，就是一個頁面。就進行後續的判斷。 　　　　// 建立了div，設定了樣式。 　　　　// 建立的div，要添加人body中，因此將它的位置設定到瀏覽器看不到的地方。 container = document.createElement("div"); container.style.cssText = "border:0;width:0;height:0;position:absolute;top:0;left:-9999px;margin-top:1px"; /*******這裏添加一下屬性******/ // Check box-sizing and margin behavior. body.appendChild( container ).appendChild( div ); div.innerHTML = ""; // Support: Firefox, Android 2.3 (Prefixed box-sizing versions). // 這裏的 box-sizing:border-box;是怪異模式。 div.style.cssText = "-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:1px;border:1px;display:block;width:4px;margin-top:1%;position:absolute;top:1%"; /********swap函數就是轉換一下CSS樣式。*****/ // Workaround failing boxSizing test due to offsetWidth returning wrong value // with some non-1 values of body zoom, ticket #13543 　　　　// body.style.zoom != null, zoom是設定顯示比例。若是設定1，就是1:1顯示，若是是2，就是放大了2倍。 　　　　// 不等於空，都影響offsetWidth這個屬性，不等於空的時候，就統一一下。 　　　　// swap 內的funciotn() 是一個回調函數，判斷是否支持這個屬性。 　　　　// w3c 和 IE 都支持這個屬性。 /************************boxSizing 還在用 *******************************************************************/ jQuery.swap( body, body.style.zoom != null ? { zoom: 1 } : {}, function() { support.boxSizing = div.offsetWidth === 4; }); /*******判斷這個函數是否存在******/ /************************getComputedStyle 還在用 *******************************************************************/ // Use window.getComputedStyle because jsdom on node.js will break without it. 　　　　// 這裏的意思是node裏面沒有這個函數。在node裏面，就不會用了。瀏覽器都支持。 if ( window.getComputedStyle ) { 　　　　　　// 像素問題。 　　　　　　// w3c 是true ，只有Safari返回 pixelPosition ＝ false; 其餘的瀏覽器返回的都是像素。 　　　　　　// 1% 轉換爲 像素值。 判斷是否支持像素定位。 /************************pixelPosition 還在用 *******************************************************************/ support.pixelPosition = ( window.getComputedStyle( div, null ) || {} ).top !== "1%"; 　　　　　　// IE 下 boxSizingReliable＝false，W3C是true。 　　　　　　// 　　padding:1px; 　　　　　　// IE 下的怪異模式，width ＝ width － padding ＝ 2px; /************************boxSizingReliable 還在用 *******************************************************************/ support.boxSizingReliable = ( window.getComputedStyle( div, null ) || { width: "4px" } ).width === "4px"; // Support: Android 2.3 // Check if div with explicit width and no margin-right incorrectly // gets computed margin-right based on width of container. (#3333) // WebKit Bug 13343 - getComputedStyle returns wrong value for margin-right 　　　　　　// 還原了數據 marginDiv = div.appendChild( document.createElement("div") ); marginDiv.style.cssText = div.style.cssText = divReset; 　　　　　　// 設定了0，又改變了寬度。 marginDiv.style.marginRight = marginDiv.style.width = "0"; div.style.width = "1px"; 　　　　　　// reliableMarginRight 都是true。由於取反了。因此。瀏覽器獲得的都是0. 　　　　　　// webkit老版本，有問題。如今瀏覽器都修正了這個問題。 /************************reliableMarginRight 還在用 *******************************************************************/  support.reliableMarginRight = !parseFloat( ( window.getComputedStyle( marginDiv, null ) || {} ).marginRight ); } 　　　　// 檢測結束之後，將建立的div刪掉。 body.removeChild( container ); }); return support; })( {} );