那些开源程序中让人叹为观止的代码

浏览器特性判断

解决问题：判断某事件/方法在当前浏览器中是否支持

开源程序：Modernizr

众所周知，各个不同的浏览器对于代码渲染的实现也各自为政百花齐放，虽然有W3C在维护着标准，但是由于市面上存在很多浏览器，每个浏览器又有数不尽的历史版本，因此对于浏览器兼容性问题的判断成了在写JS应用中必不可少的技能。

以前大家都倾向于做浏览器类型和版本的检测，现在倾向于做浏览器的特性检测，这样更有实际用处。今天要提到的是通过判断事件是否存在来探测浏览器兼容性支持。比如onmousewheel事件，并不是所有的浏览器都会支持，我们可以这样：

if(document.onmousewheel){ //这里是处理代码
}

这种方式会有一个明显的弊端，如果某恶意用户注入了一段代码，重新定义了document.onmousewheel事件的实现，那么就会偏离我们的预期，执行到了不该执行的代码。

看看Modernizr中是如何来做的。

function is( obj, type ) {return typeof obj === type;
}var isEventSupported = (function() {var TAGNAMES = {'select': 'input', 'change': 'input','submit': 'form', 'reset': 'form','error': 'img', 'load': 'img', 'abort': 'img'};function isEventSupported( eventName, element ) {element = element || document.createElement(TAGNAMES[eventName] || 'div');eventName = 'on' + eventName;var isSupported = eventName in element;if ( !isSupported ) {if ( !element.setAttribute ) {element = document.createElement('div');}if ( element.setAttribute && element.removeAttribute ) {element.setAttribute(eventName, '');isSupported = is(element[eventName], 'function');if ( !is(element[eventName], 'undefined') ) {element[eventName] = undefined;}element.removeAttribute(eventName);}}element = null;return isSupported;}return isEventSupported;
})();

使用方式也很简单：

isEventSupported("mousewheel")// Chrome
-> true
isEventSupported("mousewheel")// Firefox
-> false

转载于:https://www.cnblogs.com/jiji262/p/3656465.html

那些开源程序中让人叹为观止的代码 - 1 浏览器特性判断相关推荐

那些开源程序中让人叹为观止的代码 - 3 保持元素纵横比
本专栏尝试记录并分享一些个人在学习和使用开源程序代码的过程中,经意或者不经意间看到的个人感觉比较有参考价值的代码片段.个人感觉,并不是说能写或者能看得懂一些晦涩难懂的代码段子,就可以成为向别人炫耀的资 ...
php过滑码,小程序中多滑块的实现代码
本篇文章给大家带来的内容是关于小程序中多滑块的实现代码 ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 最近在用原生的代码开发小程序,需要用到多滑块的slider,但是官方的api只 ...
scala 编译插件_使用Scala插件在Griffon应用程序中编译和运行Scala代码
scala 编译插件用于Griffon的Scala插件 0.7.1版本现已发布. 这个插件可以在Griffon应用程序上编译和运行Scala代码. Scala插件使用LangBridge插件与其他J ...
PHP程序中时间戳,php 时间戳常用代码
echo strtotime(date('Y-m-d')); 获取明天凌晨的时间戳代码:echo strtotime(date('Y-m-d',strtotime('+1 day'))); 附上测试 ...
在.NET客户端程序中使用多线程
在.NET客户端程序中使用多线程通常认为在编写程序中用到多线程是一个高级的编程任务,容易发生错误.在本月的栏目中,我将在一个Windows窗体应用程序中使用多线程,它具有实际的意义,同时尽量使事情简单 ...
npm包管理机制引质疑：又一安装程序中发现恶意代码，开发者账户频遭劫持
铜灵发自凹非寺量子位出品 | 公众号 QbitAI npm行不行,包管理机制行不行? 最新的一次npm包被篡改事件,让开发者的这两个疑问更加强烈了. 最新中枪的是纯函数式编程语言Purescr ...
命名空间不能直接包含_C++程序中可以命名的5种元素
C++程序中的许多元素都有用来表示它们的名称(也称为标识符).在C++程序中,可以命名的5种元素是: (1) 函数.函数是自包含的.可执行代码的命名块.第8章将详细讨论如何定义函数. (2) 变量.变 ...
物联网设备模糊：DIANE：识别应用程序中的模糊触发器，为物联网设备生成受限制的输入
本文记录阅读DIANE论文的内容总结和一些阅读过程中不理解地方的补充,我是搬运工. 简介发表会议 IEEE S&P 2021 作者 Nilo Redini∗, Andrea Contin ...
c语言程序中的算数表达式X Y-Z,C语言程序设计实验教程习题1~10.docx
C语言程序设计实验教程习题1~10 第一章一．选择题1.最早开发C语言是为了编写下面那一种操作系统( C) A .Windows B.DOS C.UNIX D.Linux2.下面哪一项不属于C语言的特 ...

那些开源程序中让人叹为观止的代码 - 1 浏览器特性判断

浏览器特性判断

那些开源程序中让人叹为观止的代码 - 1 浏览器特性判断相关推荐

最新文章

热门文章