源码解读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日

相关文章

  • ASP.NET Core MVC中过滤器工作原理介绍

    下面是关于“ASP.NET Core MVC中过滤器工作原理介绍”的完整攻略,包含两个示例说明。 简介 在ASP.NET Core MVC中,过滤器是一种非常常用的技术,它可以在请求处理过程中,对请求进行预处理、后处理、异常处理等操作。本文将详细讲解ASP.NET Core MVC中过滤器的工作原理和使用方法。 过滤器的工作原理 在ASP.NET Core …

    云计算 2023年5月16日
    00
  • .NET实现WebSocket服务端即时通信实例

    下面是”.NET实现WebSocket服务端即时通信实例”的完整攻略: 简介 WebSocket是一种基于TCP协议的新型网络通信协议,适用于客户端与服务端之间实时、双向、高效等特性的通信。本文详细讲解如何使用.NET实现WebSocket服务端即时通信,以满足高性能、高可靠的在线应用需求。 准备工作 我们需要使用Visual Studio来创建项目,所以在…

    云计算 2023年5月17日
    00
  • C#客户端HttpClient请求认证及数据传输

    C#客户端HttpClient请求认证及数据传输 简介 HttpClient是C#中的一个非常常见的HTTP客户端,用于发送HTTP请求并获取响应结果。在很多情况下,我们需要对HTTP请求进行认证,以确保访问资源的安全性。本攻略将介绍如何在C#客户端中使用HttpClient进行HTTP请求认证及数据传输。 前置 在使用HttpClient之前,需要先安装M…

    云计算 2023年5月17日
    00
  • .Net Core WebApi部署在Linux服务器上的方法

    下面是.NET Core WebApi部署在Linux服务器上的详细攻略: 1. 安装相关软件 在Linux服务器上安装.NET Core Runtime和ASP.NET Core Runtime,可以使用以下命令: sudo apt-get update sudo apt-get install dotnet-runtime-3.1 sudo apt-ge…

    云计算 2023年5月17日
    00
  • 腾讯云服务器计算型CN3配置性能与使用场景是什么样的?

    计算型 CN3 计算型 CN3 实例是最新一代计算型实例,最高内网带宽可达25Gbps,拥有更大带宽、更低时延。提供 CVM 中最高基准主频的处理器和最高的性价比,是高计算性能和高并发读写等受计算限制的应用程序的理想选择。 计算型 CN3 实例采用至强®处理器 Skylake 全新处理器,最高内网带宽可支持25Gbps,相比计算型 C3 提升2.5倍。 使用…

    云计算 2023年4月13日
    00
  • 人工智能打造充满创造力的新世界,华为云开发者日无锡站成功举办

    摘要:近日,华为云开发者日HDC.Cloud Day无锡站成功举行,开发者不仅聆听了华为云技术专家在生成式AI、元宇宙、AIoT、工业互联网等领域的前沿技术分享,还在KooLabs工作坊、展台等环节,亲身体验华为云产品的技术魅力。 3月21日,华为云开发者日HDC.Cloud Day无锡站成功举行,开发者不仅聆听了华为云技术专家在生成式AI、元宇宙、AIoT…

    云计算 2023年4月17日
    00
  • 云原生时代顶流消息中间件Apache Pulsar部署实操之轻量级计算框架

    本篇逐层递进了解Pulsar Functions的基本概念和理论,如工作原理、处理保证模式、窗口函数;进一步搭建Pulsar函数运行环境,一步步操作演示函数也包括窗口函数的示例使用,最后通过Java语言实现原生语言接口和Pulsar函数SDK两种方式的代码示例、打包、部署和结果验证。 @ 目录 Pulsar Functions(轻量级计算框架) 基础定义 工…

    云计算 2023年4月13日
    00
  • 云计算模式——IaaS,PaaS和SaaS及其区别+云服务平台

    云计算的三种服务模式:IaaS,PaaS和SaaS Infrastructure(基础设施)-as-a-Service Platform(平台)-as-a-Service Software(软件)-as-a-Service。 基础设施在最下端,平台在中间,软件在顶端。 IaaS: Infrastructure-as-a-Service(基础设施即服务)是第一…

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