Javascript高级程序设计 读书笔记（五）

最新推荐文章于 2023-06-02 09:52:29 发布
最新推荐文章于 2023-06-02 09:52:29 发布
阅读量331 收藏 1
点赞数
分类专栏： 前端 文章标签： javascript 浏览器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013096194/article/details/52648587
版权

各路浏览器的兼容问题真的是前端的一大坑啊！！

能力检测

基本格式如下：

if(Object.function){
    //如果这个功能存在的话就执行相应的操作
}else{
    //不存在的话用其他方式解决
}

更可靠的能力检测

function isFuncExist(obj,func){
    return typeof obj[func] == "function";
}

但是这样的代码放在某些IE浏览器也是会出问题的。比如typeof document.createElement会在IE中返回”object”而不是”function”。ActiveX对象var xhr = new ActiveObject("Microsoft.XMLHttp")，使用typeof xhr.open会返回unknown。是不是对IE无语了。现在才知道为什么大家都在喷IE，果然还是Chrome好用。
使用下面的函数可以更准确的判断

function isHostedMethod(obj,property){
    var t = typeof obj[property];
    return t == "function" ||(!!(t=="object" && obj[property])) || t=="unknown".
}

用户代理检测

看了浏览器的用户代理字符串发展历史，觉得这个历史遗留问题也真的是让人无语。下面简单说一下吧
最早出现的浏览器是Mosaic。采用的用户代理处理字符串也很简单：Mosaic/0.9
然后Netscape Communication公司介入浏览器开发。自己的产品标识为Mozilla意思就是Mosaic杀手的意思。然后这个浏览器就火了。。。就是市面上大家都用这个叫做Netscape Navigator的浏览器了。
紧接着，传说中的IE出场了。由于当时大部分网站都会检测浏览器是不是Mozilla，于是IE就很不要脸的把自己的用户代理字符串改成了和Mozilla差不多的代码。目的就是为了让浏览器兼容这个网站，否则可能就打不开某些网站。
随后Fireforx的Gecko引擎，Safari的Webkit引擎，Chrome都纷纷效仿IE老大哥的做法，世风日下啊。。。所以我们现在看到的浏览器标识里都有Mozilla。。然而貌似没有多少人用Netscape的那个软件了吧。
然后Opera更搞笑，他的默认用户代理字符串是这样的

Opera/版本号 (操作系统或CPU；解密类型）[语言]

是不是感觉Opera是一个很单纯的好孩子。才不是呢，Opera使用了一个其他浏览器都没有用到的大招。他可以在不经过用户操作的情况下自动切换自己的用户代理字符串。。。微笑脸。。。于是乎，Opera可以看做是他会自动伪装成任何浏览器。。。
这里写图片描述
由于书上关于这个检测的写的非常详尽，代码贴在下面


var client = function(){

    //rendering engines
    var engine = {            
        ie: 0,
        gecko: 0,
        webkit: 0,
        khtml: 0,
        opera: 0,

        //complete version
        ver: null  
    };

    //browsers
    var browser = {

        //browsers
        ie: 0,
        firefox: 0,
        safari: 0,
        konq: 0,
        opera: 0,
        chrome: 0,

        //specific version
        ver: null
    };


    //platform/device/OS
    var system = {
        win: false,
        mac: false,
        x11: false,

        //mobile devices
        iphone: false,
        ipod: false,
        ipad: false,
        ios: false,
        android: false,
        nokiaN: false,
        winMobile: false,

        //game systems
        wii: false,
        ps: false 
    };    

    //detect rendering engines/browsers
    var ua = navigator.userAgent;    
    if (window.opera){
        engine.ver = browser.ver = window.opera.version();
        engine.opera = browser.opera = parseFloat(engine.ver);
    } else if (/AppleWebKit\/(\S+)/.test(ua)){
        engine.ver = RegExp["$1"];
        engine.webkit = parseFloat(engine.ver);

        //figure out if it's Chrome or Safari
        if (/Chrome\/(\S+)/.test(ua)){
            browser.ver = RegExp["$1"];
            browser.chrome = parseFloat(browser.ver);
        } else if (/Version\/(\S+)/.test(ua)){
            browser.ver = RegExp["$1"];
            browser.safari = parseFloat(browser.ver);
        } else {
            //approximate version
            var safariVersion = 1;
            if (engine.webkit < 100){
                safariVersion = 1;
            } else if (engine.webkit < 312){
                safariVersion = 1.2;
            } else if (engine.webkit < 412){
                safariVersion = 1.3;
            } else {
                safariVersion = 2;
            }   

            browser.safari = browser.ver = safariVersion;        
        }
    } else if (/KHTML\/(\S+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua)){
        engine.ver = browser.ver = RegExp["$1"];
        engine.khtml = browser.konq = parseFloat(engine.ver);
    } else if (/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)){    
        engine.ver = RegExp["$1"];
        engine.gecko = parseFloat(engine.ver);

        //determine if it's Firefox
        if (/Firefox\/(\S+)/.test(ua)){
            browser.ver = RegExp["$1"];
            browser.firefox = parseFloat(browser.ver);
        }
    } else if (/MSIE ([^;]+)/.test(ua)){    
        engine.ver = browser.ver = RegExp["$1"];
        engine.ie = browser.ie = parseFloat(engine.ver);
    }

    //detect browsers
    browser.ie = engine.ie;
    browser.opera = engine.opera;


    //detect platform
    var p = navigator.platform;
    system.win = p.indexOf("Win") == 0;
    system.mac = p.indexOf("Mac") == 0;
    system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);

    //detect windows operating systems
    if (system.win){
        if (/Win(?:dows )?([^do]{2})\s?(\d+\.\d+)?/.test(ua)){
            if (RegExp["$1"] == "NT"){
                switch(RegExp["$2"]){
                    case "5.0":
                        system.win = "2000";
                        break;
                    case "5.1":
                        system.win = "XP";
                        break;
                    case "6.0":
                        system.win = "Vista";
                        break;
                    case "6.1":
                        system.win = "7";
                        break;
                    default:
                        system.win = "NT";
                        break;                
                }                            
            } else if (RegExp["$1"] == "9x"){
                system.win = "ME";
            } else {
                system.win = RegExp["$1"];
            }
        }
    }

    //mobile devices
    system.iphone = ua.indexOf("iPhone") > -1;
    system.ipod = ua.indexOf("iPod") > -1;
    system.ipad = ua.indexOf("iPad") > -1;
    system.nokiaN = ua.indexOf("NokiaN") > -1;

    //windows mobile
    if (system.win == "CE"){
        system.winMobile = system.win;
    } else if (system.win == "Ph"){
        if(/Windows Phone OS (\d+.\d+)/.test(ua)){;
            system.win = "Phone";
            system.winMobile = parseFloat(RegExp["$1"]);
        }
    }


    //determine iOS version
    if (system.mac && ua.indexOf("Mobile") > -1){
        if (/CPU (?:iPhone )?OS (\d+_\d+)/.test(ua)){
            system.ios = parseFloat(RegExp.$1.replace("_", "."));
        } else {
            system.ios = 2;  //can't really detect - so guess
        }
    }

    //determine Android version
    if (/Android (\d+\.\d+)/.test(ua)){
        system.android = parseFloat(RegExp.$1);
    }

    //gaming systems
    system.wii = ua.indexOf("Wii") > -1;
    system.ps = /playstation/i.test(ua);

    //return it
    return {
        engine:     engine,
        browser:    browser,
        system:     system        
    };

}();

这个代码里面呢，相当于client是执行函数之后的返回值，在网页中只需要用client这个变量就可以获得浏览器的属性。

wannomore
关注
专栏目录
JavaScript高级程序设计读书笔记--语言基础
m0_44981797的博客
04-12 1300
1.语法 1.1 标识符 标识符，就是变量、函数、属性或函数参数的名称。标识符按照ECMAScript惯例，采用驼峰命名法，由一或多个下列字符组成： 第一个字符必须是一个字母、下划线（_）或美元符号（$）； 剩下的其他字符可以是字母、下划线、美元符号或数字。 1.2 语句 ECMAScript 中的语句以分号结尾。省略分号就意味着由解析器确定语句在哪结尾。加分号有助于防止因为省略造成的问题，也便于开发者通过删除空行来压缩代码（如果没有结尾的分号，只删除空行，则会导致语法错误），同时加分号也有助于在某些情
javascript 高级程序设计 读书笔记（3）
04-19
《JavaScript高级程序设计》是JavaScript开发者的经典教材，它深入探讨了这门语言的核心概念和技术。这篇读书笔记主要聚焦在第三部分，这部分通常涵盖了更高级的主题，如对象、原型、闭包以及模块化等。结合提供的...
JavaScript高级程序设计——读书笔记
淡水瑜的博客
05-03 1613
想要全面理解和掌握JavaScript，关键在于弄清楚它的本质、历史、局限性。ECMAScriptECMAScript（简称ES）是一种用于编写Web浏览器脚本语言的标准，它定义了JavaScript语言的核心规范。它由Ecma International 标准化组织负责管理和更新。JavaScript是ECMAScript标准的一种实现，其他还有JScript和ActionScript等。ECMAScript的目标是提供一种可以跨平台、可靠、高效、强大的脚本语言。
JavaScript高级程序设计读书笔记-1
最新发布
m0_70033038的博客
06-02 255
JavaScript高级程序设计（第4版）读书笔记
JavaScript高级程序设计读书笔记
qq_45968958的博客
12-01 197
学习目标： JavaScript高级程序设计 学习内容： 什么是JavaScript JavaScript是一门用来与网页交互的脚本语言，包含以下三个组成部分。 1.ECMAScript：由ECMA-262定义并提供核心功能。 2.文档对象模型（DOM）：提供与网页内容交互的方法和接口。 3.浏览器对象模型（BOM）：提供与浏览器交互的方法和接口。 HTML中的JavaScrip script元素 1.在网页中嵌入JavaScript代码 <script> function sayHi
JavaScript高级程序设计读书笔记分享
分享即学习
08-13 366
JavaScript简介 # 文档对象模型DOM 1.为什么要使用DOM 形成统一标准，方便使用 2.基于XML，DOM标准 - SVG（可伸缩矢量图） - MathML（数学标记语言） - SMIL（同步多媒体集成语言） # 浏览器对象模型DOM **Browser Object Model** 从根本上讲，BOM 只处理浏览器窗口和框架；但人们习惯上也吧所...
Javascript高级程序设计读书笔记1
esabeny的博客
01-26 142
1.小结1 1.JavaScript的基本数据类型包括Undefined, Null, Boolean,Number,String 2.与其他语言不同,ECMScript没有整数和浮点数，Number类型可用于表达所有数值 3.不存在重载，函数没有返回值，返回值为undefined 4.我们不能给基本类型添加属性 5.一个变量向另一个变量复制基本类型的值，会在变量对象上新创建一个新值，然后把该值复制到为新变量分配的位置上 6.当一个变量向另一个变量复制引用类型的值时，同样会将存储在变量对象中的值复制一份放到
《JavaScript高级程序设计》读书笔记
mirror_Mx的博客
01-02 230
面向对象的程序设计 面向对象的语言都有一个标志，那就是它们都有类的概念，但ECMAScript中没有类的概念，ECMA-262中把对象定义为：“无序属性的集合，其属性可以包含基本值、对象或者函数”。 每个对象都是基于引用类型创建的，引用类型可以是原生类型，也可以是开发者定义的类型。 理解对象 最简单的创建自定义对象的方法（创建一个object实例），然后再为它添加属性和方法。 var perso...
《JavaScript 高级程序设计》 读书笔记 3 语法
SharkMarine的专栏
05-09 286
《JavaScript高级程序设计》百度王牌下载链接: https://pan.baidu.com/s/18rtBTMyDWLWrgr0bnCXTbg 提取码: 3ibu 1、慎用浮点数做判断 浮点数值的高精度是 17位小数，但在进行算术计算时其精确度远远不如整数。例如，0.1加 0.2 的结果不是 0.3，而是 0.30000000000000004。这个小小的舍入误差会导致无法测试特定的...
JavaScript高级程序设计读书笔记(持续更新)
Chaney__Chen的博客
11-30 445
第四章.变量、作用域和内存问题4.1基本类型和引用类型的值 基本类型值指的是简单的数据段，而引用类型值指那些可能有多个值构成的对象，注意是对象； 以下两段代码说明了只能给引用类型值动态地添加属性，以便将来使用。 var person = new Object(); person.name = "Chaney"; alert(person.name); //Chaney//错误的对比演示 var
javascript高级程序设计读书笔记——事件总结
yinkaihui的博客
08-16 1857
第13章 事件 1.1 事件冒泡     事件开始的时候从最具体的元素接收，然后逐级向上传播到较为不具体的节点。 1.2 事件捕获     事件捕获与冒泡相反，首先由不具体的节点接收，最后是最具体的节点接收事件。     注意： ie的事件流是事件冒泡。由于老版本的浏览器不支持事件捕获，因此更加建议使用事件冒泡，有特殊需要的时候在使用事件捕获。 1.3 DOM事件流     D
JavaScript高级程序设计 读书笔记之八 Function类及闭包
12-11
JavaScript中的Function类是一种特殊的数据类型，它可以用来动态创建或表示任何开发者定义的函数。通过`new Function()`构造函数，我们可以传递参数列表和函数体来创建一个新的函数。例如，`var sayHi = new ...
JavaScript高级程序设计 读书笔记之十一 内置对象Global
12-11
内置对象 定义：由ECMAScript实现提供的、独立于宿主环境的所有对象，在ECMAScript程序开始执行时出现。 由定义可知开发者不必明确实例化内置对象，它已被实例化了。在ECMAScript-262只定义了两个内置对象，即Global...
JavaScript高级程序设计 读书笔记之九 本地对象Array
12-03
这篇读书笔记主要涵盖了Array对象的创建、几个核心的方法以及它们在实际编程中的应用。 首先，创建Array对象有多种方式。第一种是通过`new Array()`，如`var aValues = new Array();`，这将创建一个空数组。第二种...
CSS3实现3D方块旋转
u013096194的博客
08-25 4007
本文是在学习一篇博文后进行总结和一定的修改的，原博文链接这里写链接内容 先贴代码 HTML<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>animation</title> <link rel="stylesheet" type="text/css" href="css/
写代码的时候遇到的BUG小结
u013096194的博客
09-14 664
关于类对象的访问 在学习一个示例的时候，用到利用函数参数访问函数属性的。如下var a = [{ "name":"Bob", "age":12 },{ "name":"Jelly", "age":1 }]; function createComparitionMethod(property){ return function(obj,obj2)
CSS3学习
u013096194的博客
08-23 362
圆角效果语法：border-radius:? ?可以填一个参数、两个参数、四个参数： - 两个参数，代表左上右下和右上左下。 - 四个参数，代表左上、右上、右下、左下。利用圆角效果画半圆div{ height:50px;/*是width的一半*/ width:100px; background:#9da; border-radius:50px 50px 0 0;
小点
u013096194的博客
10-06 352
Javascript中的键（Key）只能是字符串类型，不可以是其他！！！ bind不会修改原来函数的作用域，只是会返回一个被限制了作用域的函数，而且这个函数没办法修改作用娱咯。 setTimeout是非阻塞型的函数。也就是说不会阻碍后续工作进行。按照书上所说，nodeJS是采用了先注册事件然后不断去查询事件是否被分发（即应该被执行了）。也就是说不会影响后续事件执行。这就是非阻塞型，异步的。 N
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值