JavaScript功能检测技术和函数构造
Javascript与很多编程语言不同,它不能够控制其运行环境。再写php代码时,只要在服务器端部署了正确的版本,那么程序就绝对能够运行,对于其他python或ruby后端语言来说,也不存在什么灰色区域。Javascript就不同了,它与所有的前端语言一样,都需要各大浏览器的支持。
前端语言必须通过浏览器渲染页面时才能被运行和执行,服务器与客户端的浏览器通过HTTP请求进行通信,接受资源后的浏览器再进行渲染。有很多因素,诸如浏览器对各项功能的支持程度、网络连接速度、屏幕大小、渲染效率等,都是完全不受开发者的控制。
所以,我们通过功能检测技术对那些不确定因素进行逐一排除,为了避免让浏览器报错和性能原因。在原生中这是一种非常重要的开发方式。
1. 判断是否开启javascript功能
检测用户浏览器是否开启了javascript功能,给予用户友好的提示,以免于用户对网站的抱怨。
<noscript>为了您的浏览体验,请在浏览器设置中开启javascript功能!</noscript>
如果检测浏览器为IE及之前的旧版本,则给予不同的提示(HTML5 boilerplate):
<pclass="chromeframe">您正在使用<strong>过时的</strong>浏览器。请<a
href="http://browsehappy.com/">升级您的浏览器</a>或者<a
href="http://www.google.com/chromeframe/?redirect=true">开启并更新GoogleChromeFrame插件</a>以改善您的浏览体验!</p>
2. 在使用for循环操作时,有必要检测循环的值
For()运算会占用大量的运算性能,所以开始前有必要检测一下:
count = fruit.length,
i;
//阻止默认行为
event.preventDefault(); target.innerHTML = "";
if(count > 0 || searchValue !==""){
for(i = 0;i < count;i++){
var obj = fruit[i],
//将name与searchvalue值相匹配,如果值不等于 -1,那么就与之相匹配
inItfount = obj.name.indexOf(searchValue); //将JSON中匹配的数据写入到DOM
if(isItfount != -1){
target.innerHTML += '<p>'+obj.name+'<a href="mailto:" '+obj.color+'>'+obj.color+'</a></p>'
}
}
}
3. 判断HTML5版本本地存储API
Cookies是一种即难处理,又不安全的一种技术,它总是和隐私追踪程序、恶意软件等东西绑在一起。所以,W3C在HTML5新版本中定义了localStorage和sessionStorage网络存储方案。对于此类HTML5新API,你得考虑浏览器对该功能的支持情况。如果只关注高端设备及浏览器,那也许这就不是问题,但对于剩下的浏览器来说,可就要小心了(http://www.w3school.com.cn/html5/html_5_webstorage.asp):
//判断HTML5版本本地存储API
if(typeof (localStorage) === "undefined"){
//新版API不支持,需要考虑cookies方案
} else{
//使用JSON.stringObject保存字符串数据
var stringObject = JSON.stringify(favoriteSandwiches);
var localStorage = setItem("favoriteSandwiches",stringObject);
//使用JSON.parse提取为JSON数据
var storedItem = localStorage.getItem("favoriteSandwiches");
var convertObject = JSON.parse(storedItem);
}
4. 在IE浏览器中添加事件监听器的所需备用代码
在使用addEventListener()方法时要稍微留心一下浏览器是否支持它。IE 8及更早的版本都不支持addEventListener()方法,但它支持功能相似的attachEvent()方法;这两种方法的支持情况不存在交叠:
// IE浏览器中添加事件监听器的备用代码 var btn = document.getElementById("btn");
//使用最流行的事件监听器,支持世界主流的浏览器 if(btn.addEventListener){ btn.addEventListener("click",function(){ alert("click the button");
},false); //使用第二种事件监听器(ie老版本支持的)
}else {
btn.attachEvent("click", function () { alert("for IE8 AND below");
});
}
5. 选取定位DOM节点的方法
随着HTML5标准的发布,javascript根据需求随即进行标准化,将getElementByClassName()、querySelector()、querySelectorAll()方法加入其中。针对新旧浏览器,需要进行支持度检测。如果你嫌麻烦,可以损失一丁点性能选用程序库的"$()"选择器:
//选取定位DOM节点的方法
if(document.querySelector){
document.querySelector(".btn"); } else if(document.getElementsByClassName()){
document.getElementsByClassName("btn"); } else{
document.getElementById("subtn");
}
6. 创建Ajax通信服务器对象的方法
XMLHttpRequest对象是所有Ajax调用的核心。执行Ajax调用的第一步就是创建XMLHttpRequest对象,这一步非常容易,但是为了适配IE6等老版浏览器,我们需要进行检测:
//创建ajax通信服务器对象 function getHTTPObject(){
"use strict";
var xhr; //使用主流的XMLHttpRequest通信服务器对象
if(window.XMLHttpRequest){ xhr = new window.XMLHttpRequest(); //如果是老版本ie,则只支持Active对象
} else if(window.ActiveXObject){ xhr = new window.ActiveXObject("Msxml2.XMLHTTP");
} //将通信服务器对象返回
return xhr;
}
7. 在获取DOM属性时有必要看看它存不存在
if(document.getElementsByTagName("a").length > 0){
//可以执行for()循环代码
} if(document.getElementById("btn").hasAttribute){
document.getElementById("btn").setAttribute("class","subtn");
}
Typeof方法操作符显而易见,这个工具提供了一个字符串名称,用于表达变量内容的数据类型。这个方法简单、精湛,但是对于数组(array)和对象(object)类型,它就显得无能为力,比如对于一个自定义对象 user,使用Typeof语句返回的结果是object。那么,我们需要一种更加精准的类型检测机制来判断我们变量,这就是 变量.构造函数,这一属性引用的是原本用来构造该对象的那个函数
使用typeof和构造函数属性来判断对象的类型:
//函数重载和类型检查
if(typeof num == "string"){ //如果num 变量是一个字符串类型 num = parseInt( num); //对num变量取整数操作
}
if(typeof arr == "string"){ //如果arr 是一个字符串类型 arr = arr.split(","); //若是,将字符串切分成数组保存
} if(str.constructor == Array){ //用构造函数检查str变量是否是数组类型 str == str.join(","); //将数组归并到字符串中
}
合理的使用功能检测技术能够让我们避开那些本不该踩到的雷区,当然还有更多的功能检测等着我们在实操中去发现。这是一些比较常用的功能检测。另外,我推荐使用火狐浏览器的firebug开发人员工具进行调试代码,总结经验和不足;欢迎大家相互交流!!
JavaScript功能检测技术和函数构造的更多相关文章
- javascript客户端检测技术
1. Firefox Gecko是firefox的呈现引擎.当初的Gecko是作为通用Mozilla浏览器一部分开发的,而第一个采用Gecko引擎的浏览器是Netscape6: 我们可以使用用户代理 ...
- 15个JavaScript本地存储技术的函数库和工具
当构建更复杂的JavaScript应用程序运行在用户的浏览器是非常有用的,它可以在浏览器中存储信息,这样的信息可以被共享在不同的页面,浏览会话. 在最近的过去,这将有可能只被cookies文本文件保存 ...
- 性能:15个JavaScript本地存储技术的函数库和工具
当构建更复杂的JavaScript应用程序运行在用户的浏览器是非常有用的,它可以在浏览器中存储信息,这样的信息可以被共享在不同的页面,浏览会话. 在最近的过去,这将有可能只被cookies文本文件保存 ...
- javascript创建对象之函数构造模式和原型模式结合使用(四)
创建自定义类型的常见方式就是组合使用构造函数模式与原型模式一起使用. 构造函数模式用于定义实例对象的特有的部分(属性和方法),原型模式用于定义共享的部分. 这样最大限度的节省了内存的开销. funct ...
- [Javascript]客户端检测
客户端检测是一种行之有效的开发策略.但不到万不得已,就不要使用客户端检测.先设计通用的方案,然后根据浏览器之间的差异和各自的怪癖quirky,再使用特定于浏览器的技术增强该方案. 能力检测 Featu ...
- 前端html、Javascript、CSS技术小结
简单地总结了一下前端用过的html.javascript.css技术,算是清点一下,做个大略的小结,为进一步的学习给个纲领. 一.HTML 由于HTML5的兴起,简单地判断一个网页是否是html5网页 ...
- Javascript中DOM技术的的简单学习
第十四课DOM技术概述1:DOM概述 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节 ...
- 伪AP检测技术研究
转载自:http://www.whitecell-club.org/?p=310 随着城市无线局域网热点在公共场所大规模的部署,无线局域网安全变得尤为突出和重要,其中伪AP钓鱼攻击是无线网络中严重的安 ...
- 第一百一十二节,JavaScript浏览器检测
JavaScript浏览器检测 学习要点: 1.navigator对象 2.客户端检测 由于每个浏览器都具有自己独到的扩展,所以在开发阶段来判断浏览器是一个非常重要的步骤.虽然浏览器开发商在公共接口方 ...
随机推荐
- Free Slideshow, Gallery And Lightboxes Scripts
http://bootstraphelpers.codeplex.com/SourceControl/list/changesets https://github.com/gordon-matt/Bo ...
- SpringMvc+Mybatis 框架搭建
本文承接上一篇[idea使用maven搭建springmvc] 开篇:在main/resources下新建dbconfig.properties.spring.xml.spring-mybatis.x ...
- [moka同学摘录]Yii2 csv数据导出扩展
yii2-thecsv(Yii2框架csv数据导出扩展) github: https://github.com/13552277443/yii2-thecsv 1.安装 运行 php composer ...
- jdbcTemplate 泛型 查询
1. dao层方法使用泛型 public <T> List<T> findDistinctListByCondition(String str, Class<T> ...
- 由SimpleAyncTaskExecutor到ListenableFutureTask
Spring AsyncExecutor观后感 导语 本来想看下spring关于Async&Sync TaskExecutor的主要内容,看着看着发现ListenableTaskExecuto ...
- 转载Quandl R Package
Quandl R Package 通过Quandl API可以快速准确地获取宏观经济数据.(https://www.quandl.com/docs/api) 分享两个国外的优秀网站 R和Python在 ...
- JavaScript调Java
1.映射Java对象到JavaScript对象上 MainActivity.java package com.example.jsdemo; import android.os.Bundle; imp ...
- FME2014汉化问题
问题:FME2014汉化包安装上不起作用,安装环境是是Win7 64位,FME是64位版本的,默认位置在Program Files\FME下,而汉化包安装默认位置在Program Files (x86 ...
- CRM 2013 系统设置新功能二:Entity images 图像字段
CRM2013系统默认的许多实体都已经有了图像的选择,如 右上角可以设置当前用户的头像. 客户.联系人等都可以,下面将介绍一下此项新功能: 一.实体中新建图像字段,其中系统自动命名entityinag ...
- CRM 2013 系统设置新功能一:界面自动保存 及 SDK 中 Xrm.Page.data.entity.save
CRM 2013 界面会自动保存了..在系统设置中默认“是”,如果不需要可以调整. CRM实体记录在新建时会有出现“保存”按钮,非新建状态下,没有“保存”按钮只有“新建”按钮,系统将会自动为你保存最后 ...