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

相关文章

  • 袋鼠云:基于Flink构建实时计算平台的总体架构和关键技术点

    数栈是云原生—站式数据中台PaaS,我们在github和gitee上有一个有趣的开源项目:FlinkX,FlinkX是一个基于Flink的批流统一的数据同步工具,既可以采集静态的数据,也可以采集实时变化的数据,是全域、异构、批流一体的数据同步引擎。大家喜欢的话请给我们点个star!star!star! github开源项目:https://github.co…

    2023年4月10日
    00
  • 计算存储分离在京东云消息中间件JCQ上的应用

    作者:田寄远 JCQ 全名 JD Cloud Message Queue,是京东云自研、具有 CloudNative 特性的分布式消息中间件。 JCQ 设计初衷即为适应云特性的消息中间件;具有高可用、数据可靠性、副本物理隔离、服务自治、健康状态汇报、少运维或无运维、容器部署、弹性伸缩、租户隔离、按量付费、云账户体系、授权等特性。 演进过程 2017 年中开始…

    2023年4月10日
    00
  • 当Serverless遇到Regionless:现状与挑战

    摘要:本文尝试基于分析现有的学术文章,剖析Serverless与Regionless并存时,在性能提升和成本控制两个方向的现状与挑战 本文分享自华为云社区《当Serverless遇到Regionless:现状与挑战》,作者:云容器大未来。 近年来,Serverless服务崛起的趋势是有目共睹的:从Berkeley将Serverless认定为云计算向用户呈现的…

    云计算 2023年5月8日
    00
  • C# WinForm自动更新程序之文件上传操作详解

    下面是关于“C# WinForm自动更新程序之文件上传操作详解”的完整攻略,包含两个示例说明。 简介 在C# WinForm自动更新程序中,文件上传操作是非常重要的一步。在文件上传操作中,我们需要将本地文件上传到服务器上,以便进行版本比较和更新操作。在本文中,我们将详细讲解如何实现文件上传操作。 实现步骤 以下是在C# WinForm自动更新程序中实现文件上…

    云计算 2023年5月16日
    00
  • asp.net MVC下使用rest的方法

    下面是ASP.NET MVC下使用REST的方法的完整攻略。 理解RESTful API 在开始之前,我们需要先了解RESTful API的概念和原理。RESTful API是一种基于HTTP协议的设计风格,它不依赖于任何特定的技术,可以使用任何语言实现。其主要通过HTTP协议中的不同请求方法(GET、POST、PUT、DELETE等)实现对资源的增删改查操…

    云计算 2023年5月17日
    00
  • 大数据和云计算技术周报(第70期)

    大数据” 三个字其实是个marketing语言,从技术角度看,包含范围很广,计算、存储、网络都涉及,知识点广、学习难度高。      本期会给大家奉献上精彩的:JDK11、spark、redis 、Kylin、海量数据 、Pulsar、量子计算机、容器、工业大数据 。全是干货,希望大家喜欢!!! #大数据和云计算技术社区#希望通过坚持定期分享能帮助同学在大数…

    云计算 2023年4月13日
    00
  • 互联网科技大佬推荐的12本必读书籍

    以下是“互联网科技大佬推荐的12本必读书籍”的完整攻略,包括背景介绍、书籍列表、示例说明等。 1. 背景介绍 互联网科技大佬们经常会推荐一些好书,这些书籍不仅可以帮助我们了解互联网行业的发展趋势,还可以提高我们的思维能力和创新能力。下面是12本互联网科技大佬推荐的必读书籍。 2. 书籍列表 以下是12本互联网科技大佬推荐的必读书籍: 《黑客与画家》:作者是P…

    云计算 2023年5月16日
    00
  • 在Linux+Jexus中发布和部署Asp.Net Core

    在 Linux+Jexus 中发布和部署 Asp.Net Core,需要经过以下步骤: 安装 .NET Core 运行时和 SDK 创建 Asp.Net Core 应用程序 发布 Asp.Net Core 应用程序 配置 Jexus 服务器 部署 Asp.Net Core 应用程序 下面将详细讲解每个步骤的具体操作方法。 1. 安装 .NET Core 运行…

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