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 相关文章推荐
Ext 表单布局实例代码
Apr 30 Javascript
JavaScript学习笔记(一) js基本语法
Oct 25 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
Apr 02 Javascript
angular.element方法汇总
Jan 07 Javascript
jquery中change()用法实例分析
Feb 06 Javascript
jQuery简单实现遍历数组的方法
Apr 14 Javascript
AngularJS 使用 UI Router 实现表单向导
Jan 29 Javascript
JavaScript中setTimeout的那些事儿
Nov 14 Javascript
移动端js图片查看器
Nov 17 Javascript
jQuery实现发送验证码并60秒倒计时功能
Nov 25 Javascript
jQuery File Upload文件上传插件使用详解
Dec 06 Javascript
vue组件横向树实现代码
Aug 02 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
Ping服务的php实现方法,让网站快速被收录
2012/02/04 PHP
php摘要生成函数(无乱码)
2012/02/04 PHP
php构造方法中析构方法在继承中的表现
2016/04/12 PHP
Yii2 hasOne(), hasMany() 实现三表关联的方法(两种)
2017/02/15 PHP
javascript下给元素添加事件的方法与代码
2007/08/13 Javascript
页面中iframe相互传值传参
2009/12/13 Javascript
JavaScript自定义事件介绍
2013/08/29 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
2014/06/16 Javascript
如何通过js实现图片预览功能【附实例代码】
2016/03/30 Javascript
jQuery多级联动下拉插件chained用法示例
2016/08/20 Javascript
js实现将json数组显示前台table中
2017/01/10 Javascript
JavaScript基本语法_动力节点Java学院整理
2017/06/26 Javascript
详解JS构造函数中this和return
2017/09/16 Javascript
Vue结合后台导入导出Excel问题详解
2019/02/19 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
2019/06/28 Javascript
JavaScript Date对象功能与用法学习记录
2020/04/28 Javascript
python中定义结构体的方法
2013/03/04 Python
Python最基本的数据类型以及对元组的介绍
2015/04/14 Python
python自动翻译实现方法
2016/05/28 Python
Python装饰器的执行过程实例分析
2018/06/04 Python
tensorflow实现图像的裁剪和填充方法
2018/07/27 Python
Python3数字求和的实例
2019/02/19 Python
Python后台开发Django的教程详解(启动)
2019/04/08 Python
keras slice layer 层实现方式
2020/06/11 Python
AmazeUI底部导航栏与分享按钮的示例代码
2020/08/18 HTML / CSS
canvas版人体时钟的实现示例
2021/01/29 HTML / CSS
公积金单位接收函
2014/01/11 职场文书
师范学院教师自荐书
2014/01/31 职场文书
班级入场式解说词
2014/02/01 职场文书
环保倡议书400字
2014/05/15 职场文书
垃圾分类的活动方案
2014/08/15 职场文书
2014年大学生预备党员思想汇报1000字
2014/09/13 职场文书
客房服务员岗位职责
2015/02/09 职场文书
2015年宣传思想工作总结
2015/05/22 职场文书
谢师宴学生致辞
2015/07/27 职场文书
5个pandas调用函数的方法让数据处理更加灵活自如
2022/04/24 Python