了解您的需求,针对该攻略,以下是详细讲解:
源码解读jQ中浏览器兼容模块support第2/2页
背景介绍
在开发网页时,我们经常需要根据不同浏览器的兼容性需求去针对不同浏览器进行适配,这个过程是比较繁琐的。为了解决这个问题,jquery库中提供了叫做支持模块的工具 - support模块
。support模块
可以检测浏览器是否支持某个指定功能,以此来解决浏览器兼容性的问题。而本攻略将主要介绍jQ中浏览器兼容模块support的相关内容。
解读过程
一、 模块代码位置
在jQuery源码中,support模块的代码位于jquery/src/support.js文件中,我们可以从这里开始了解到support模块的相关内容。
二、 代码具体实现
在support模块实现代码中,主要做了以下几件事:
- 创建一个空的对象jQuery.support,并赋值给support变量。
var support = {};
jQuery.support = support;
- 创建一个空的文档对象,并赋值给变量doc,并通过点语法设置doc元素的属性。
var doc = document.documentElement,
input = document.createElement("input"),
select = document.createElement("select"),
opt = select.appendChild( document.createElement("option") );
var a = {
leadingWhitespace: ( doc.firstChild.nodeType === 3 ),
tbody: !doc.getElementsByTagName( "tbody" ).length,
htmlSerialize: !!doc.createElement( "link" ).getAttribute( "href" ),
};
// Helper variables
var root = document.documentElement,
completed = false,
table = document.createElement("table"),
tableRow = document.createElement("tr"),
containers = {
"tr": document.createElement("tbody"),
"tbody": table, "thead": table, "tfoot": table,
"td": tableRow, "th": tableRow,
"*": document.createElement("div")
},
container;
function makeClone( elems, isXML ) {
var clone = jQuery.clone( elems, true, isXML ),
i, elem, size;
...
}
-a
support.boxModel = a.boxModel;
support.reliableHiddenOffsets = a.reliableHiddenOffsets;
support.tbody = a.tbody;
support.htmlSerialize = a.htmlSerialize;
support.leadingWhitespace = a.leadingWhitespace;
//IE strip whitespace characters when innerHTML is used
if ( !document.createRange ) {
support.outerHTML = input.outerHTML === "<input>" ||
(getPseudoFn("foo") && getPseudoFn("foo")( input ) === "<input>");
support.checkClone = input.cloneNode( true ).cloneNode( true ).lastChild.checked;
}
if (document.addEventListener) {
document.addEventListener( "DOMContentLoaded", completed, false );
window.addEventListener( "load", completed, false );
} else if (document.attachEvent) {
document.attachEvent( "onreadystatechange", completed );
window.attachEvent( "onload", completed );
}
在上述实现中,我们可以看到jQuery.support对象被初始化创建,然后doc文档元素实例和input、select元素实例用于进行一些兼容性检测。之后,是一些属性的值的设置,在这些变量中,我们可以看到一些具体的内容,比如boxModel,tbody等。接着,是一段IF判断,主要是判断浏览器支持outerHTML的特性。之后是一个事件的注册,绑定方法为completed。这个completed方法将在document对象和window对象的事件中触发。
- 完成,对外暴露变量
// Expose support vars for convenience
jQuery.extend( jQuery.support, {
boxModel: support.boxModel,
reliableHiddenOffsets: support.reliableHiddenOffsets,
tbody: support.tbody,
htmlSerialize: support.htmlSerialize,
checkClone: support.checkClone,
// TODO: Needed for 1.6
// scriptEval: support.scriptEval
});
最后,jQuery.support对象上对外暴露了下面的属性,这些属性是用于检测浏览器是否支持某个特性的开关。
jQuery.support.boxModel
jQuery.support.reliableHiddenOffsets
jQuery.support.tbody
jQuery.support.htmlSerialize
jQuery.support.checkClone
三、 示例说明
- 检测浏览器是否支持HTML序列化
如果想要检测浏览器是否支持HTML序列化,可以使用下面的代码验证jQuery.support.htmlSerialize的值:
console.log(jQuery.support.htmlSerialize); // true or false
如果返回的结果为true,则说明当前浏览器支持HTML序列化特性。
- 检测浏览器是否支持box model模型
如果需要检测当前浏览器是否支持box model模型,可以使用下面代码检测:
console.log(jQuery.support.boxModel); // true or false
如果返回的结果为true,则说明当前浏览器支持box model模型。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:源码解读jQ中浏览器兼容模块support第2/2页 - Python技术站