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实现文本框中焦点在最后位置
Mar 04 Javascript
jQuery动画与特效详解
Feb 01 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
Mar 03 Javascript
JavaScript职责链模式概述
Sep 17 Javascript
AngularJS实现动态添加Option的方法
May 17 Javascript
vue组件实现文字居中对齐的方法
Aug 23 Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
Sep 14 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
Sep 19 Javascript
JS生成随机打乱数组的方法示例
Dec 23 Javascript
js针对图片加载失败的处理方法分析
Aug 24 Javascript
在vue中获取wangeditor的html和text的操作
Oct 23 Javascript
echarts浮动显示单位的实现方法示例
Dec 04 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发明人谈MVC和网站设计架构 貌似他不支持php用mvc
2011/06/04 PHP
ThinkPHP模板Volist标签嵌套循环输出多维数组的方法
2016/03/23 PHP
Laravel与CI框架中截取字符串函数
2016/05/08 PHP
PHP请求远程地址设置超时时间的解决方法
2016/10/29 PHP
详解Yii2 之 生成 URL 的方法
2017/06/16 PHP
Javascript String.replace的妙用
2009/09/08 Javascript
JS清除IE浏览器缓存的方法
2013/07/26 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
2014/04/11 Javascript
javascript面向对象之对象的深入理解
2015/01/13 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
2015/09/21 Javascript
jquery trigger函数执行两次的解决方法
2016/02/29 Javascript
微信小程序 wxapp内容组件 text详细介绍
2016/10/31 Javascript
angularjs实现的前端分页控件示例
2017/02/10 Javascript
jQuery遍历节点方法汇总(推荐)
2017/05/13 jQuery
javascript 缓冲运动框架的实现
2017/09/29 Javascript
JavaScript插入排序算法原理与实现方法示例
2018/08/06 Javascript
创建echart多个联动的示例代码
2018/11/23 Javascript
vue之a-table中实现清空选中的数据
2019/11/07 Javascript
JQuery复选框全选效果如何实现
2020/05/08 jQuery
javascript实现时间日期的格式化的方法汇总
2020/08/06 Javascript
python生成日历实例解析
2014/08/21 Python
通过代码实例展示Python中列表生成式的用法
2015/03/31 Python
Python中的模块和包概念介绍
2015/04/13 Python
详解在Python程序中自定义异常的方法
2015/10/16 Python
Flask解决跨域的问题示例代码
2018/02/12 Python
Python3 翻转二叉树的实现
2019/09/30 Python
python实现小世界网络生成
2019/11/21 Python
python 中值滤波,椒盐去噪,图片增强实例
2019/12/18 Python
伦敦著名的运动鞋综合商店:Footpatrol
2019/03/25 全球购物
日本航空官方网站:JAL
2019/06/19 全球购物
毕业生如何写自荐信
2014/03/26 职场文书
租赁意向书范本
2014/04/01 职场文书
python Tkinter的简单入门教程
2021/04/11 Python
CSS完成视差滚动效果
2021/04/27 HTML / CSS
简单且有用的Python数据分析和机器学习代码
2021/07/02 Python
Grafana可视化监控系统结合SpringBoot使用
2022/04/19 Redis