源码解读jQ中浏览器兼容模块support第2/2页

了解您的需求,针对该攻略,以下是详细讲解:

源码解读jQ中浏览器兼容模块support第2/2页

背景介绍

在开发网页时,我们经常需要根据不同浏览器的兼容性需求去针对不同浏览器进行适配,这个过程是比较繁琐的。为了解决这个问题,jquery库中提供了叫做支持模块的工具 - support模块support模块可以检测浏览器是否支持某个指定功能,以此来解决浏览器兼容性的问题。而本攻略将主要介绍jQ中浏览器兼容模块support的相关内容。

解读过程

一、 模块代码位置

在jQuery源码中,support模块的代码位于jquery/src/support.js文件中,我们可以从这里开始了解到support模块的相关内容。

二、 代码具体实现

在support模块实现代码中,主要做了以下几件事:

  1. 创建一个空的对象jQuery.support,并赋值给support变量。
var support = {};

jQuery.support = support;
  1. 创建一个空的文档对象,并赋值给变量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对象的事件中触发。

  1. 完成,对外暴露变量
// 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

三、 示例说明

  1. 检测浏览器是否支持HTML序列化

如果想要检测浏览器是否支持HTML序列化,可以使用下面的代码验证jQuery.support.htmlSerialize的值:

console.log(jQuery.support.htmlSerialize); // true or false

如果返回的结果为true,则说明当前浏览器支持HTML序列化特性。

  1. 检测浏览器是否支持box model模型

如果需要检测当前浏览器是否支持box model模型,可以使用下面代码检测:

console.log(jQuery.support.boxModel); // true or false

如果返回的结果为true,则说明当前浏览器支持box model模型。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:源码解读jQ中浏览器兼容模块support第2/2页 - Python技术站

(0)
上一篇 2023年5月17日
下一篇 2023年5月17日

相关文章

  • python 爬取京东指定商品评论并进行情感分析

    下面我将详细讲解“Python 爬取京东指定商品评论并进行情感分析”的完整攻略。 一、准备工作 在进行爬取京东评论之前,我们需要准备以下工具和库: Python 3.x版本 Requests库 BeautifulSoup库 SNownlp库 其中,Requests库和BeautifulSoup库分别用来进行网页数据的爬取和解析,SNownlp库是用来进行情感…

    云计算 2023年5月18日
    00
  • python 性能提升的几种方法

    Python 性能提升的几种方法 Python 作为一种高级语言,提供了丰富的功能,但是由于其解释型语言的本质,使其在一些任务中性能并不是很高。然而,有一些方法可以优化 Python 代码的运行速度,本文介绍了一些简单但有效的方法。 1. 使用列表生成式代替循环 在 Python 中,使用列表生成式(List Comprehension)能够快速地生成列表。…

    云计算 2023年5月18日
    00
  • 【转】OpenStack和Docker、ServerLess能不能决定云计算胜负吗?

    还记得在十多年前,SaaS鼻祖SalesForce喊出的口号『No Software』吗?SalesForce在这个口号声中开创了SaaS行业,并成为当今市值460亿美元的SaaS之王。今天谈谈『No Server』有关的事。继OpenStack、Docker 、MiscroService、Unikernel、Kubernetes和Mesos之后,Serve…

    云计算 2023年4月11日
    00
  • 云计算环境下安全关键技术研究

    摘 要 云计算已发展成为大数据应用、跨平台应用的主要解决方案,而虚拟化、大规模、开放性等特征,带来了更多安全威胁和挑战,通过分析云计算安全防御模型架构,分别对云计算安全的技术特征、运行特征、保障模式等方面进行了研究,提出了云计算安全能力软件定义、保障服务化、服务智能化、防御动态化等关键技术,支撑云安全防护灵活部署、高效保障、快速响应,提升云计算环境多样化安全…

    云计算 2023年4月12日
    00
  • ASP.NET Web API如何将注释自动生成帮助文档

    ASP.NET Web API提供了一种方便的方式来生成API帮助文档。通过编写XML注释并启用XML文档文件生成,我们可以自动生成API帮助文件。下面是生成API帮助文档的完整攻略: 步骤一:启用XML文档文件的生成 在Visual Studio中,打开对应的Web API项目,然后右键单击项目名称,在弹出的菜单中选择“属性”选项。打开“生成”选项卡,勾选…

    云计算 2023年5月17日
    00
  • 浅析.netcore中的Configuration具体使用

    浅析.NET Core中的Configuration具体使用 在.NET Core中,Configuration是一个非常重要的组件,它可以帮助我们管理应用程序的配置信息。本文将提供一个完整的攻略,包括如何使用Configuration、如何读取配置信息、如何使用示例代码内容。 使用Configuration 在.NET Core中,我们可以使用Config…

    云计算 2023年5月16日
    00
  • 【AWS】AWS云计算赋能数字化转型专题研讨会圆满落幕

     大会精彩回顾: 查看原文 大会使用的PPT下载地址:点击下载  

    云计算 2023年4月11日
    00
  • 云计算 学习笔记(1) Hadoop简介 – 完美de幸福

    云计算 学习笔记(1) Hadoop简介 Hadoop 简介 Hadoop 是一个开源的可运行于大规模集群上的分布式并行编程框架,由于分布式存储对于分布式编程来说是必不可少的,这个框架中还包含了一个分布式文件系统 HDFS( Hadoop Distributed File System )。也许到目前为止,Hadoop 还不是那么广为人知,其最新的版本号也仅…

    云计算 2023年4月13日
    00
合作推广
合作推广
分享本页
返回顶部