`
nuysoft
  • 浏览: 522032 次
  • 性别: Icon_minigender_1
  • 来自: 北京
博客专栏
91bd5d30-bd1e-3b00-9210-87db1cca0016
jQuery技术内幕
浏览量:201226
社区版块
存档分类
最新评论

[原创] jQuery源码分析-06浏览器测试-Support

阅读更多

作者:nuysoft/高云 QQ:47214707 EMail:nuysoft@gmail.com

声明:本文为原创文章,如需转载,请注明来源并保留原文链接。 

 

读读写写,不对的地方请告诉我,多多交流共同进步,本章的的PDF下载在最后。

 

6. 浏览器测试 Support

浏览器之间的差异太让人头大了,本章也仅仅介绍jQuery实现浏览器兼容的基本思路,以及封装了种种差异后的接口。$.support中的众多属性和实现方式,超出了本文的写作初衷(一个头两个大啊),有兴趣的可以自行搜索、翻阅相关的资料。

兼容各种主流浏览器是JavaScript库的必修课之一,一般来说检测浏览器有两种方法:

l  检测navigator.userAgent,用户代理检测法

l  检测浏览器的功能特性,即功能特性检测法

6.1        用户代理检测法

window.navigatorNavigator对象,包含了正在使用的浏览器的信息:

属性

说明

appCodeName

代码名

appName

名称

appVersion

平台和版本信息

platform

操作系统和硬件平台

userAgent

用于HTTP请求的用户代理头

再看看navigatorIE和火狐下的测试:

l  IE8

属性

IE8

appCodeName

Mozilla

appName

Microsoft Internet Explorer

appVersion

4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0)

platform

Win32

userAgent

Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0)

l  Firefox

属性

Firefox

appCodeName

Mozilla

appName

Netscape

appVersion

5.0 (Windows)

platform

Win32

userAgent

Mozilla/5.0 (Windows NT 6.1; rv:5.0) Gecko/20100101 Firefox/5.0

 

测试结果让人纠结,既然。。。,ChromeSafariOpera就不测了!

不过,我们也发现userAgent似乎包含了较全的信息。浏览器在发起HTTP请求时,会把userAgent的信息作为请求头中User-Agent的值。服务器需要的话可以据此检测浏览器类型,对响应的内容进行适配,比如适配各种型号的手机浏览器。

jQuery就是根据userAgent属性来检测浏览器的类型,并提供了$.browser对象,通过$.browser,我们可以获取当前浏览器的类型和版本。

$.browser包含四种最流行的浏览器标记(IE,Mozilla,Webkit, Opera)和版本,对应的有效标记有:

l  webkit

l  safari(deprecated)

l  opera

l  msie

l  mozilla

$.browser不需等待$(document).ready就可以获取。使用示例:

$.browser.msie/mozilla/webkit/opera

$.browser.version

由于$.browser基于navigator.userAgent检测浏览器类型,很容易被用户和浏览器欺骗,并且缺乏灵活性和不够全面。因此最好避免编写基于特定浏览器的代码。相对于$.browser$.support针对浏览器特定特性的检测则更为有效。

API文档中可以看到,未来jQuery.browser可能会移到一个插件中

$.browser的实现代码如下:

// 用户代理检测正则表达式定义

var ...

rwebkit = /(webkit)[ \/]([\w.]+)/,

ropera = /(opera)(?:.*version)?[ \/]([\w.]+)/,

rmsie = /(msie) ([\w.]+)/,

rmozilla = /(mozilla)(?:.*? rv:([\w.]+))?/,

// 到处都是把属性取出来,作为局部变量使用,可以减少跨作用域查询,提高性能

userAgent = navigator.userAgent,

// 用户代理匹配结果

browserMatch,

// 实际执行匹配的函数

uaMatch: function( ua ) {

    ua = ua.toLowerCase();

    // 依次匹配各浏览器

    var match = rwebkit.exec( ua ) ||

       ropera.exec( ua ) ||

       rmsie.exec( ua ) ||

       ua.indexOf("compatible") < 0 && rmozilla.exec( ua ) ||

       [];

    // match[1] || "" match[1]false(空字符串、nullundefined0等)时,默认为""

    // match[2] || "0" match[2]false(空字符串、nullundefined0等)时,默认为"0"

    return { browser: match[1] || "", version: match[2] || "0" };},

// 将测试结果保存至jQuery.browser

browserMatch = jQuery.uaMatch( userAgent );

if ( browserMatch.browser ) {

    jQuery.browser[ browserMatch.browser ] = true;

    jQuery.browser.version = browserMatch.version;

}

// 不推荐使用safari标记,用webkit代替

if ( jQuery.browser.webkit ) {

    jQuery.browser.safari = true;

}

6.2        功能特性检测法

即根据浏览器是否支持某项特定的功能特性,来决定程序的执行分支,这种方法不考虑浏览器类型和版本,也不考虑浏览器升级带来的变化,更加安全、灵活,同时减少了维护工作,因此成为了当下主流的检测方法。例如绑定load事件的代码:

// 兼容事件模型,通过检测浏览器的功能特性,而非嗅探浏览器

if ( document.addEventListener ) {

    // Use the handy event callback

    // 使用较快的加载完毕事件

    document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );

 

    // A fallback to window.onload, that will always work

    // 注册window.onload回调函数

    window.addEventListener( "load", jQuery.ready, false );

 

// If IE event model is used

// 如果是IE事件模型

} else if ( document.attachEvent ) {

    // ensure firing before onload,

    // maybe late but safe also for iframes

    // 确保在onload之前触发onreadystatechange,可能慢一些但是对iframes更安全

    document.attachEvent( "onreadystatechange", DOMContentLoaded );

 

    // A fallback to window.onload, that will always work

    // 注册window.onload回调函数

    window.attachEvent( "onload", jQuery.ready );

 

    // If IE and not a frame

    // continually check to see if the document is ready

    var toplevel = false;

 

    try {

       toplevel = window.frameElement == null;

    } catch(e) {}

 

    if ( document.documentElement.doScroll && toplevel ) {

       doScrollCheck();

    }

}

6.3        盒模型

盒模型是CSS中的一个概念,CSS 将所有的网页元素都看做是一个矩形框,这个框由元素的内容(content)、内边距(padding)、边框(border)和外边距(margin)组成,如下图(摘自http://www.w3.org/TR/css3-box/):




两种盒模型

l  IE传统模型:widthheight属性包括内边距和边框宽度

l  W3C标准模型:widthheight属性不包含边距和边框宽度

jQuery.boxModel

jQuery提供了boxModel属性,jQuery.boxModeltrue时,表示支持W3C盒模型,false表示支持IE传统盒模型。

尺寸封装

jQueryn封装了这两种盒模型的差异,统一为W3C标准模型,并提供了修正后的接口:

接口

计算公式

width, height

content

innerWidth, innerHeight

content+padding

outerWidth, outerHeight

content+padding+border+可选的margin

最后附个有趣的图,Chrome发布的时候看到的,会心一笑,不解释:


  • 大小: 9.5 KB
  • 大小: 214.4 KB
0
0
分享到:
评论

相关推荐

    jQuery源码分析-01总体架构分析

    4. 浏览器测试(Support):用于检测浏览器的兼容性,提供一系列检查方法,确保代码能够在不同的环境中正确运行。 5. 数据缓存(Data):为DOM元素提供一个可以存储任意数据的方式,而不会影响DOM元素本身的属性。 ...

    jQuery 源码分析笔记(5) jQuery.support

    ### jQuery 源码分析:深入理解jQuery.support 在前端开发中,浏览器兼容性问题是一个长期存在的挑战。随着互联网的快速发展,各种不同的浏览器层出不穷,每种浏览器都有自己的特性和Bug。为了帮助开发者屏蔽这些...

    jQuery源码分析系列_1.6

    ### jQuery源码分析系列_1.6 #### 一、前言 在现代Web开发领域,jQuery无疑是一款具有里程碑意义的JavaScript库。它通过简洁、强大的API极大地简化了DOM操作、事件处理、Ajax交互以及动画等功能,使得前端开发变得...

    jQuery 1.9.1源码分析系列(十四)之常用jQuery工具

    在详细分析jQuery 1.9.1源码系列的文章中,我们集中于探讨了jQuery库中常用工具函数的实现原理及其应用。这些工具函数广泛用于动画处理、事件处理、数据操作和性能优化等场景。本篇文章详细解释了多个核心工具函数的...

    jquery弹出层兼容所有浏览器.zip

    《jQuery弹出层在所有浏览器中的兼容性实现详解》 在网页开发中,弹出层是一种常见的交互元素,用于展示信息、提示用户或进行复杂的操作。jQuery作为一个强大的JavaScript库,为开发者提供了便捷的方式来创建和控制...

    Jqurey 源码分析

    jQuery源码的结构清晰,包括工具函数、异步处理(Deferred)、浏览器检测(Support)、数据缓存(Data)、队列管理(queue)、属性操作(Attribute)、事件处理(Event)、选择器引擎(Sizzle)、DOM遍历和操作、CSS...

    jQuery网页视频播放器源码

    **jQuery网页视频播放器源码详解...通过分析源码,我们可以学习到如何使用jQuery处理媒体元素,以及如何设计和实现一个功能完善的视频播放器。这不仅加深了对jQuery的理解,也对前端开发中的媒体处理有了更全面的认识。

    jQuery 源码分析笔记

    "jQuery 源码分析笔记"探讨了jQuery的核心设计和实现,特别是其如何简化JavaScript开发,并且深入研究了jQuery的源码结构。 jQuery的创建方式是一个自执行的匿名函数,这样做的好处在于它不会污染全局命名空间,...

    JQUERY技术内幕:深入解析QUERY架构设计与实现原理 完整版 共两个包

    接着详细分析了底层支持模块的源码实现,包括:选择器sizzle、异步队列deferred、数据缓存data、队列queue、浏览器功能测试support;最后详细分析了功能模块的源码实现,包括:属性操作attributes、事件系统events、...

    jQuery技术内幕 深入解析jQuery架构设计与实现原理

    接着详细分析了底层支持模块的源码实现,包括:选择器sizzle、异步队列deferred、数据缓存data、队列queue、浏览器功能测试support;最后详细分析了功能模块的源码实现,包括:属性操作attributes、事件系统events、...

    jQuery facebook表情符号插件特效源码.zip

    7. **源码分析** - 解压后的文件`132689965370235563`可能包含HTML、CSS和JavaScript文件,其中JavaScript文件是插件的核心。 - 阅读源码,可以了解如何初始化插件、定义表情符号、绑定事件以及实现动画逻辑。 8....

    jquery技术内幕:深入解析jquery架构设计与实现原理 完整版第二个包

    接着详细分析了底层支持模块的源码实现,包括:选择器sizzle、异步队列deferred、数据缓存data、队列queue、浏览器功能测试support;最后详细分析了功能模块的源码实现,包括:属性操作attributes、事件系统events、...

    非常有创意的jQuery幻灯效果源码

    4. **兼容性**:确保代码在不同浏览器和设备上的表现一致,可能需要考虑使用jQuery的`.support()`方法或Modernizr这样的库来检测浏览器特性。 通过对s3Slider的源码进行学习和实践,开发者不仅可以掌握jQuery幻灯...

    jQuery实现的QQ下载页面通栏焦点图切换效果源码.zip

    9. **源码分析**: 解压提供的`132677876326515255`文件,可以看到具体的HTML、CSS和JavaScript代码实现。通过阅读和理解这些代码,可以学习到如何结合HTML结构、CSS样式和jQuery脚本来实现焦点图切换效果。 总结...

    jQuery实现对简洁大气的日程安排日历特效源码.zip

    7. **源码分析** 对于提供的源码132692096996253435,我们需要详细解读每个部分的功能。它可能包含了HTML模板、CSS样式表、JavaScript逻辑和可能的数据结构。通过逐行分析,我们可以理解如何组合这些元素以构建日程...

    jquery实现的带动画效果幻灯片插件源码.zip

    6. **兼容性处理**:为了确保在各种浏览器上的兼容性,开发者可能会使用`.support`属性或者Modernizr等工具来检测浏览器特性,并进行相应的适配。 在压缩包内的文件“132686872834921072”,可能是源代码文件,如...

    jQuery下通过$.browser来判断浏览器.

    在源码分析中,我们看到jQuery是如何通过正则表达式匹配userAgent字符串的。例如,它会检查字符串中是否包含"msie"来判断是否为IE浏览器,并提取版本号。类似的逻辑也适用于其他浏览器的识别。 尽管如此,随着W3C...

Global site tag (gtag.js) - Google Analytics