IE中jscript/javascript的条件编译


Posted in Javascript onSeptember 07, 2006

IE中jscript/javascript的条件编译

  • 作者:JavaScript Kit
  • 译者:子乌(Sheneyan)
  • 翻译日期:2006-02-12
  • 英文原文:Conditional Compilation of JScript/ JavaScript in IE
  • 版权:翻译未经过javascript kit同意,我只对我所翻译的中文部分负责。版权归原作者所有。

条件编译概述

在IE中,有一个鲜为人知的功能叫做条件编译。自从IE4开始支持这个功能,它由于在一些Ajax相关的javascript脚本中出现而受到一些关注。条件编译作为一种独立形式的对象判断,使得IE可以根据预定义或用户定义的条件来决定你的jscript或javascript代码特定部分是否编译。也可以把它看成是你的代码的条件注释,使你的代码能够在非IE浏览上也顺利运行。

语法概述

通过在你的脚本中使用@cc_on来激活条件编译,或者直接使用@if或者@set等等作为CC逻辑中一部分的句子来激活它。这里是一个示范例子:

Language:javascript, parsed in: 0.007 seconds, using GeSHi 1.0.7.12
  1. <script type="text/javascript">
  2.  
  3. /*@cc_on
  4. document.write("JScript 版本: " + @_jscript_version + ".<br>");
  5.    /*@if (@_jscript_version >= 5)
  6.       document.write("JScript 版本 5.0+.<br \/>");
  7.       document.write("只有当浏览器支持JScript5+的时候你才能看到这些文字.<br>");
  8.    @else @*/
  9.       document.write("当你使用其他浏览器(比如: Firefox, IE 4.x 之类)的时候看到这行文字<br>");
  10.    /*@end
  11. @*/
  12.  
  13. </script>
  14.  
例子:
JScript 版本: 5.6.
JScript 版本 5.0+.
只有当浏览器支持JScript5+的时候你才能看到这些文字。

如果你使用IE(任何版本),你应该能够看到第一个document.write()的输出,如果是IE5+,接下来的两个document.write()你也能够看见(因为从IE5开始支持JScript 5)。最后一个document.write()方法是为了其他非IE5+浏览器服务的,无论是Firefox,opera,IE4,或者什么别的。条件编译依赖于类似在条件注释中使用的注释标签,以确保它在所有浏览器中都能工作顺畅。

当使用条件编译的时候,最好先通过@cc_on语句来激活它,只有这样你才能在你的脚本中包含注释标签以保证浏览器兼容,、就好像上面例子中所显示的那样。(子乌注:这句英文我翻译的不是很顺...看起来似乎与上面的句子矛盾)

@if, @elif, @else,@end 语句

在这个奇怪的开场白之后,这里是一些用于条件便于的条件语句:

  • @if
  • @elif
  • @else
  • @end

现在让我们看一些“古怪”的例子。

if else 逻辑 (排除IE外的浏览器)
Language:javascript, parsed in: 0.001 seconds, using GeSHi 1.0.7.12
  1. /*@cc_on
  2.    @if (@_win32)
  3.       document.write("操作系统是32位windows。浏览器是IE。");
  4.    @else
  5.       document.write("操作系统不是32位windows。浏览器是IE。");
  6.    @end
  7. @*/
  8.  

这是一段完整的脚本,只被ie浏览器所识别并忽略其他所有浏览器,这段脚本在不同的操作系统上将显示不同的内容。对比一下下面这个例子……

if else 逻辑2 (包含其他浏览器)
Language:javascript, parsed in: 0.004 seconds, using GeSHi 1.0.7.12
  1. /*@cc_on
  2.    /*@if (@_win32)
  3.       document.write("操作系统是32位windows。浏览器是IE。");
  4.    @else @*/
  5.       document.write("浏览器不是IE (如: Firefox)或者浏览器不是在32位windows下的IE。");
  6.    /*@end
  7. @*/
  8.  

熟练使用注释标签,这个例子中的else部分能够包含所有的非ie浏览器(如firefox),以及非32位windows下的IE。努力的研究这段注释,直到你脑袋发昏,你就会明白这个逻辑了:)

if, elseif, else逻辑 (排除IE外的浏览器)

继续吧,可以看全部内容了:

Language:javascript, parsed in: 0.001 seconds, using GeSHi 1.0.7.12
  1. /*@cc_on
  2.    @if (@_jscript_version >= 5)
  3.       document.write("IE Browser that supports JScript 5+");
  4.    @elif (@_jscript_version >= 4)
  5.       document.write("IE Browser that supports JScript 4+");
  6.    @else
  7.       document.write("Very old IE Browser");
  8.    @end
  9. @*/
  10.  
if, elseif, else 逻辑2(包含其他浏览器)
Language:javascript, parsed in: 0.004 seconds, using GeSHi 1.0.7.12
  1. /*@cc_on
  2.    /*@if (@_jscript_version >= 5)
  3.       document.write("IE Browser that supports JScript 5+");
  4.    @elif (@_jscript_version >= 4)
  5.       document.write("IE Browser that supports JScript 4+");
  6.    @else @*/
  7.       document.write("Non IE Browser (one that doesn't support JScript)");
  8.    /*@end
  9. @*/
  10.  

全面的处理。在这最后一个例子中,最后一个else语句包含了所有非IE浏览器。

条件编译变量

在之前一部分中你看到了一些奇怪变量比如@_win32。这是一些你能够用来判断IE或计算机大致描述的预定义条件编译变量:

预定义的条件编译变量
变量 描述
@_win32 当运行在一个win32系统中时返回true, 否则返回 NaN.
@_win16 当运行在一个win16系统中时返回true , 否则返回 NaN.
@_mac 当运行在一个Apple的Macintosh系统中时返回 true , 否则返回 NaN.
@_alpha 当运行于DEC aplha处理器上时返回true ,否则返回 NaN.
@_x86 当运行于一个Intel处理上时返回true ,否则返回 NaN.
@_mc680x0 运行于Motorola 680x0处理器上时 true , 否则返回 NaN.
@_PowerPC 运行于Motorola PowerPC处理器上时 true , 否则返回 NaN.
@_jscript 永远返回 true.
@_jscript_build JScript脚本引擎编译次数.
@_jscript_version Jscript版本,以主要版本.次要版本格式展现. IE4 支持JScript 3.xIE5.x 支持 JScript  5.5-IE6 支持 JScript 5.6在JScript.net,这个版本数为7.x.
@_debug 如果编译于debug模式则返回 true ,否则返回false.
@_fast 如果编译于fast模式则返回 true ,否则返回false.

在大多数情况下,你也许只需要使用@_win@jscript_build:

Language:javascript, parsed in: 0.001 seconds, using GeSHi 1.0.7.12
  1. /*@cc_on
  2.    @if (@_win32)
  3.       document.write("OS is 32-bit. Browser is IE.");
  4.    @else
  5.       document.write("OS is NOT 32-bit. Browser is IE.");
  6.    @end
  7. @*/
  8.  

用户自定义变量

你也可以在条件编译块中定义你自己的变量,语法如下:

Language:javascript, parsed in: 0.001 seconds, using GeSHi 1.0.7.12
  1. @set @varname = term
  2.  

在条件编译中,数字布尔类型的变量可以使用,但字符型无法使用。比如:

Language:javascript, parsed in: 0.002 seconds, using GeSHi 1.0.7.12
  1. @set @myvar1 = 35
  2. @set @myvar3 = @_jscript_version
  3.  

在条件编译逻辑中能够使用标准的运算符:

  • ! ~
  • * / %
  • + -
  • << >> >>>
  • < <= > >=
  • == != === !==
  • & ^ |
  • && |

你能够通过判断是否返回NaN来确定是否定义了一个用户自定义变量:

Language:javascript, parsed in: 0.002 seconds, using GeSHi 1.0.7.12
  1. @if (@newVar != @newVar)
  2. //该变量未定义
  3.  

由于NaN是唯一一个不等于其自身的值,所以这段脚本能够正常运行。

条件编译示例--try catch语句

在教程的开始,我曾经提及条件编译如何由于在一些Ajax的JavaScript中的出现而显示出它值得自夸的一面。现在我要告诉你我所指的内容。一个Ajax脚本通常包含一个中心函数用于判断浏览器(ie、ff等)对产生异步请求对象的支持:

典型的ajax函数:

Language:javascript, parsed in: 0.020 seconds, using GeSHi 1.0.7.12
  1. function HttpRequest(url, parameters){
  2. var pageRequest = false //variable to hold ajax object
  3.    if (window.XMLHttpRequest) // if Mozilla, Safari etc
  4.       pageRequest = new XMLHttpRequest()
  5.    else if (window.ActiveXObject){ // if IE
  6.       try {
  7.       pageRequest = new ActiveXObject("Msxml2.XMLHTTP")
  8.       }
  9.       catch (e){
  10.          try{
  11.          pageRequest = new ActiveXObject("Microsoft.XMLHTTP")
  12.          }
  13.          catch (e){}
  14.       }
  15.    }
  16.    else
  17.    return false
  18. }
  19.  

许多人认为try/catch语句能够顺利的测试Ajax支持,很不幸,这不是真的。那些不支持throw/catch的浏览器,比如IE 4.x,实际上会阻塞上面这段代码并返回一个错误。为了克服这个问题,条件编译能够用来粗行减一个真正跨浏览器的友好的Ajax处理函数:

真正的跨浏览器函数:

Language:javascript, parsed in: 0.008 seconds, using GeSHi 1.0.7.12
  1. function HttpRequest(url, parameters){
  2. var pageRequest = false //variable to hold ajax object
  3. /*@cc_on
  4.    @if (@_jscript_version >= 5)
  5.       try {
  6.       pageRequest = new ActiveXObject("Msxml2.XMLHTTP")
  7.       }
  8.       catch (e){
  9.          try {
  10.          pageRequest = new ActiveXObject("Microsoft.XMLHTTP")
  11.          }
  12.          catch (e2){
  13.          pageRequest = false
  14.          }
  15.       }
  16.    @end
  17. @*/
  18.  
  19. if (!pageRequest && typeof XMLHttpRequest != 'undefined')
  20. pageRequest = new XMLHttpRequest()
  21. }
  22.  

使用条件编译,完整的try/catch块只用于IE5+, 其余的浏览器,比如IE4或非IE浏览器则试着破译它(dicipher it...这个dicipher是什么?“破译”这个解释是google到的,个人感觉翻译成“忽略”似乎更好?)。明显的Firefox会继续并使用XMLHttpRequest代替。现在你就得到了它--一个真正跨浏览器的ajax函数!(子乌注:在我翻译的另外一篇文章中,可以看到这个函数更全面的写法。

Javascript 相关文章推荐
用js的document.write输出的广告无阻塞加载的方法
Jun 05 Javascript
基于Jquery easyui 选中特定的tab
Nov 17 Javascript
JavaScript中的return语句简单介绍
Dec 07 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
Jan 10 Javascript
JQuery Mobile实现导航栏和页脚
Mar 09 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
May 27 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
Jul 01 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
Jun 25 Javascript
以BootStrap Tab为例写一个前端组件
Jul 25 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
Jun 17 Javascript
vue+element实现批量删除功能的示例
Feb 28 Javascript
Webpack 4.x搭建react开发环境的方法步骤
Aug 15 Javascript
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
Sep 07 #Javascript
彪哥1.1(智能表格)提供下载
Sep 07 #Javascript
日期函数扩展类Ver0.1.1
Sep 07 #Javascript
js脚本学习 比较实用的基础
Sep 07 #Javascript
prototype 的说明 js类
Sep 07 #Javascript
你的编程语言可以这样做吗?
Sep 07 #Javascript
音乐播放用的的几个函数
Sep 07 #Javascript
You might like
php file_exists 检查文件或目录是否存在的函数
2010/05/10 PHP
php重定向的三种方法分享
2012/02/22 PHP
理解php依赖注入和控制反转
2016/05/11 PHP
php封装的单文件(图片)上传类完整实例
2016/10/18 PHP
Laravel实现定时任务的示例代码
2017/08/10 PHP
jquery的颜色选择插件实例代码
2008/10/02 Javascript
javascript 获取图片颜色
2009/04/05 Javascript
jQuery的链式调用浅析
2010/12/03 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
2013/04/21 Javascript
Javascript级联下拉菜单以及AJAX数据验证核心代码
2013/05/10 Javascript
使用js实现雪花飘落效果
2013/08/26 Javascript
JS获取地址栏参数的几种方法小结
2014/02/28 Javascript
Javascript 数组排序详解
2014/10/22 Javascript
jQuery中scrollTop()方法用法实例
2015/01/16 Javascript
jQuery下拉框的简单应用
2016/06/24 Javascript
文本框只能输入数字的js代码(含小数点)
2016/07/10 Javascript
nodeJs链接Mysql做增删改查的简单操作
2017/02/04 NodeJs
javascript按钮禁用和启用的效果实例代码
2017/10/29 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
2018/09/21 Javascript
微信小程序自定义底部导航带跳转功能
2018/11/27 Javascript
JS实现密码框效果
2020/09/10 Javascript
[03:37]2015国际邀请赛第四日现场精彩集锦
2015/08/08 DOTA
python 合并文件的具体实例
2013/08/08 Python
python实现斐波那契递归函数的方法
2014/09/08 Python
Python pickle模块用法实例分析
2015/05/27 Python
Python使用Pickle模块进行数据保存和读取的讲解
2019/04/09 Python
使用django的objects.filter()方法匹配多个关键字的方法
2019/07/18 Python
Django 反向生成url实例详解
2019/07/30 Python
pytorch逐元素比较tensor大小实例
2020/01/03 Python
python3中datetime库,time库以及pandas中的时间函数区别与详解
2020/04/16 Python
Python如何实现爬取B站视频
2020/05/20 Python
python PIL模块的基本使用
2020/09/29 Python
大学校园活动策划书
2014/02/04 职场文书
建筑工地资料员岗位职责
2015/04/13 职场文书
钓鱼岛事件感想
2015/08/11 职场文书
MySQL一些常用高级SQL语句
2021/07/03 MySQL