升级打怪-精读javascript高级程序设计(第九章)

最新推荐文章于 2024-05-12 23:38:18 发布
最新推荐文章于 2024-05-12 23:38:18 发布
阅读量170 收藏
点赞数
分类专栏： 高级程序设计 前端 javascript 文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ken_ding/article/details/109627661
版权

客户端检测

能力检测

定义:识别浏览器的能力

示例:

function getElement(id){
	if(document.getElementById(id)){
		return document.getElementById(id);
	}else if(document.all){
		return document.all[id];
	}else{
		throw new Error("no way to retrieve element")
	}	
}
  • 先检测达成目的的最常用的特性
  • 必须测试实际要用到的特性

可靠的能力检测

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

  let res=isHostMethod(window,"XMLHttpRequest");
  console.log(res);

目前使用isHostMethod方法是比较可靠的

能力检测,不是浏览器检测

在实际开发中,应该将能力检测作为确定下一步解决方案的依据,而不是用它来判断用户使用的是什么浏览器

怪癖检测

目标是识别浏览器的特殊行为

示例一:函数创建一个toString()方法的对象,在正确的ECMAScript实现中,toString应该在for-in循环作为属性返回

function hasDontEnumQuirk(){
      var o={toString:function(){}};

      for(var prop in o){
          if(prop=="toString"){
              return false;
          }
      }
      return true
  }
  console.log(hasDontEnumQuirk());

示例二:Safari 3以前的版本会枚举隐藏的属性,可能会出现toString被枚举两次

function hasDontShadowEnumQuirk(){
      var o={toString:function(){}};
      var cunt=0;
      for(var prop in o){
          if(prop=="toString"){
            cunt++
          }
      }
      return cunt
  }
  console.log(hasDontShadowEnumQuirk());

用户代理检测

用户代理检测通过检测用户代理字符串来确定实际使用的浏览器

用户代理字符串历史

来源:HTTP规范,浏览器应该发送简短的用户代理字符串,指明浏览器的名称和版本号,RFC2616进一步规范了用户代理字符串

早期浏览器
浏览器格式范例
第一款web浏览器标识符/产品版本号Mosaic/0.9
Netscape Navigator 2Mozilla/版本号 [语言] (平台:加密类型)Mozilla/2.02 [fr] (winNT;I)
Netscape Navigator 3Mozilla/版本号 (平台; 加密类型 [;操作系统或cpu说明])Mozilla/3.0 (Win95; U)
Internet Explorer 3Mozilla/2.0 (compatible; MSIE 版本号; 操作系统)Mozilla/2.0 (compatible; MSIE 3.02; Windows 95)
Netscape Communicator 4Mozilla/版本号 (平台; 加密类型 [;操作系统或cpu说明])Mozilla/4.0 (Win98; I)
Internet Explorer 4Mozilla/4.0 (compatible; MSIE 版本号; 操作系统)Mozilla/2.0 (compatible; MSIE 4.0; Windows 98)
IE4.5-7Mozilla/4.0 (compatible; MSIE 版本号; 操作系统)
IE8Mozilla/4.0 (compatible; MSIE 版本号; 操作系统;Trident/ 版本号)Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1;Trident/4.0)
IE9Mozilla/4.0 (compatible; MSIE 版本号; 操作系统;Trident/ 版本号)Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1;Trident/5.0)
主流浏览器
Firefox

Gecko是firefox的引擎,最早采用是Netscape 6,主要用户代理格式:

Mozilla/版本号 (平台; 加密类型; 操作系统或cpu; 语言; 预先发行) Gecko/版本号 应用程序或产品/版本号
//windows XP下的Netscape 6.21
Mozilla/5.0 (windows; U; Windows NT 5.1; en-US;rv:0.9.4) Gecko/2001128 Netscape6/6.2.1

随之firefox4.0发布,Mozilla简化了这个用户代理字符串

  • 删除语言记号
  • 使用强加密
  • 操作系统或cpu始终包含Windows的字符串
  • Gecko版本号固定为Gecko20200101
    例:
Mozilla/5.0 (windows NT 6.1; rv:2.0.1) Gecko/20100101 Firefox 4.0.1
Safari

苹果公司自己的Web浏览器基于webKit

用户代理字符串具备如下格式:
Mozilla/5.0 (平台; 加密类型; 操作系统或cpu; 语言) AppleWebKit/版本号 (KHTML,like Gecko) Version/版本号 Safari/版本号

Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en) AppleWebKit/124 (KHTML,like Gecko) Version/3.0.3 Safari/125.1
Chrome

谷歌公司的浏览器以webkit作为呈现引擎,但是使用了不同的javascript引擎.

用户代理字符串具备如下格式:
Mozilla/5.0 (平台; 加密类型; 操作系统或cpu; 语言) AppleWebKit/版本号 (KHTML,like Gecko) Chrome/版本号 Safari/版本号

Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en) AppleWebKit/534.7 (KHTML,like Gecko)  Chrome/7.0.517 Safari/534.7
Opera

用户代理字符串具备如下格式:
Opera/版本号 (操作系统或cpu; 加密类型) [语言] Persto/版本号 Version/版本号

Opera/7.54 (Windows NT 5.1; U) [en] Persto/2.6.30 Version/10.63
IOS和Android

移动操作系统IOS和Android默认浏览器都是基于WebKit

用户代理字符串具备如下格式:
Mozilla/5.0 (平台; 加密类型; 操作系统或cpu; 语言) AppleWebKit/版本号 (KHTML,like Gecko) Version/版本号 Mobile/版本号 Safari/版本号

Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en) AppleWebKit/124 (KHTML,like Gecko) Version/3.0.3 Mobile/7A341 Safari/125.1

Android浏览器中的默认格式与IOS的格式相似,但没有移动版本号(但有Mobile记号)

Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en) AppleWebKit/124 (KHTML,like Gecko) Version/3.0.3 Mobile Safari/125.1

用户代理字符串检测技术

  • 识别呈现引擎
  • 识别浏览器
    -识别系统,平台
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,
    };
  };
ken_ding
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
JavaScript高级程序设计
禅与计算机程序设计艺术
09-23 1901
作者：禅与计算机程序设计艺术 1.简介 JavaScript（简称JS）是一种直截了当、简单易用的动态脚本语言。它最初由Netscape公司的Brendan Eich（布兰登·艾奇）于1995年创建，但后来逐渐成为事实上的通用编程语言。目前，JS已经成为世界上最流行的客户端脚本语言，广泛用于网页开发、移
javascript高级程序设计
Jin0319的博客
06-16 1701
JavaScript高级程序设计 第1章 什么是JavaScript 1.1 简短的历史回顾 1995年网景公司发布了Mocha(后来改名为LiveScript)。为了赶上发布时间与Sun公司结为开发联盟，共同完成LiveScript的开发。发布前改名为JavaScript。不久后微软发布了IE3,其中包含自己命名为JScript的JavaScript实现。这就意味着出现了两个版本的JavaScript。 1997年，第39技术委员会承担了"标准化一门通用、跨平台、厂商中立的脚本语言的语法和语义"的任务。他
javascript高级程序编程,javascript高级编程设计
2301_79533350的博客
11-10 234
在ES3之前JavaScript代码执行的过程中，一旦出现错误，整个JavaScript代码都会停止执行，这样就显的代码非常的不健壮。在Java或C#等一些高级语言中，都提供了异常处理机制，可以处理出现的异常，而不会停止整个应用程序Python中的所有运算符号。从ES3开始，JavaScript也提供了类似的异常处理机制，从而让JavaScript代码变的更健壮，即使执行的过程中出现了异常，也可以让程序具有了一部分的异常恢复能力。
JavaScript进阶篇之高级程序设计
最新发布
2401_84092727的博客
05-12 735
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
javascript高级程序设计及总结（持续性）
m0_59157023的博客
03-09 234
javascript高级程序设计及总结（持续性）
Javascript高级程序设计（一）
zy451的博客
07-19 951
严格模式‘ES5’中增加，是一种不同的JS解析和执行模型，通过在脚本开头或者函数体内部增加‘usestrict’字符这个预处理命令，一些不规则的（ECMA3）写法在这里会抛出异常。关键字和保留字‘ECMAScript’保留的如控制语句、特定操作、系统属性等一系列不允许自定义为标识符的名称、例如‘break’‘do’‘export’等等。由于js的单线程特性，所有非异步脚本都会按照文档顺序加载执行，所以推荐script标签放在body后面，在body加载完之后对js进行解析。4.不能保证执行顺序。...
基于devc++开发打怪游戏（面向对象程序设计）【100013027】
07-21
**基于DevC++开发的打怪游戏：面向对象程序设计详解** 在计算机编程领域，面向对象程序设计（Object-Oriented Programming，OOP）是一种重要的编程范式，它以对象作为基本的组织单元，强调数据和操作数据的方法相...
设计模式程序员升级打怪路上不得不打的拦路虎
11-07
设计模式是软件工程中的一种重要概念，它是经验丰富的软件开发者在解决常见问题时总结出的最佳实践。...掌握设计模式是成为高级程序员的必经之路，只有理解并灵活运用，才能在编程世界中游刃有余。
MJXQ.rar_打怪升级
09-20
《MJXQ.rar_打怪升级》是一款初步尝试3D技术的游戏DEMO，它主要展现了角色扮演游戏(RPG)的核心元素——打怪升级和任务系统。在这个DEMO中，玩家可以控制一个角色在虚拟世界中与各种怪物战斗，通过战胜敌人获得经验值...
【前端素材】小游戏-打怪升级副本.zip
03-29
JavaScript，是一种轻量级的解释型编程语言； jQuery，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互； Bootstrap 是快速开发 Web 应用程序的前端工具包。它是一个 CSS...
高级运维工程师打怪升级之路.txt
09-05
高级运维工程师打怪升级之路 ┣━━1.打怪篇.mp4 ┣━━2.师门任务篇.mp4 ┣━━3.升级篇.mp4 ┣━━4.修仙篇.mp4 ┗━━高级运维工程师打怪升级之路.pdf
《javascript高级程序设计》,javascript高级编程设计
阿发狗伪原创
11-09 111
5种基本数据类型：string， number，Boolean，undefined，null复杂数据类型：object声明未赋值为undefined，未声明的变量只能进行一种操作：用typeof检测数据类型为undefined，但它确实不等于undefined2.nullnull是一个空对象指针，所以,undefined派生于null,所以但bool值为false的情况：空字串，0和nan,null,undefined3.number。
JavaScript高级程序设计——读书笔记
淡水瑜的博客
05-03 842
想要全面理解和掌握JavaScript，关键在于弄清楚它的本质、历史、局限性。ECMAScriptECMAScript（简称ES）是一种用于编写Web浏览器脚本语言的标准，它定义了JavaScript语言的核心规范。它由Ecma International 标准化组织负责管理和更新。JavaScript是ECMAScript标准的一种实现，其他还有JScript和ActionScript等。ECMAScript的目标是提供一种可以跨平台、可靠、高效、强大的脚本语言。
《javascript高级程序设计》,javascript高级程序编程
chatgpt001的博客
11-07 206
对象是一个属性的无序集合，每个属性都有名字和值对象不仅仅是简单的字符串到值的映射，除了维持自己的属性之外，JS对象也可以从其他对象继承属性，这个其他对象称其为“原型”。对象的方法通常是继承来的属性。有时候， 区分直接定义在对象上的属性和那些从原型对象上继承的属性很重要。JS使用术语“自有属性”指代非继承属性。除了名字和值之外，每个属性还有3个属性特征：① writable（可写）特性指定是否可以设置属性的值。
《JavaScript高级程序设计》学习笔记 JavaScript基本（1）
volit的博客
07-15 929
ECMAScript的语法很大程度借鉴了C语言和其他类C语言，如Java和Perl。
javascript高级程序设计和权威指南两本书
wenangou的博客
10-14 131
核心（ECMAScript）文档对象模型（DOM）浏览器对象模型（BOM）
JS基础及高级程序设计笔记
weixin_43642894的博客
03-06 362
JavaScript高级程序设计笔记
JavaScript高级程序设计（第3版）中文 高清 完整
qqyouhappy的博客
07-23 1736
下载地址：英文版 下载地址：中文版
高级运维工程师的打怪升级之路
05-19
以下是一些打怪升级的建议： 1. 学习新技术：了解最新的技术趋势和工具，例如自动化、云计算和容器化等，这些新技术可以提高您的效率和能力。 2. 掌握编程技能：学习编程语言，例如Python、Perl和Shell等，可以让...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值