JavaScript中的条件编译

本人英文水平有限，不足之处是必然的，欢迎大家批评指正。

 

条件编译介绍

在IE有一个几乎没人知道的特性--“条件编译(Conditional Compilation)”。从IE4开始，IE开始支持这一特性，当它出现在一些Ajax相关的JavaScript中才开始引起人们的注意。它是一种对象探测的绝对形式，条件编译使IE按照用户预先定义在JScript或者JavaScript中的条件逻辑响应你的指令。你也可以把它想成是你脚本的“条件注释(Conditional Comments)”，它一样可以很好的在非IE浏览器中工作。


语法概述：

在脚本中使用 @cc_on 声明来触发条件编译机制启动，也可以直接使用 @if 或 @set 声明作为启动逻辑的一部分。下面是一段例子代码来解释如何启动条件编译机制。

 

<script type="text/javascript">

/*@cc_on
document.write("JScript version: " + @_jscript_version + ".<br>");
   /*@if (@_jscript_version >= 5)
      document.write("JScript Version 5.0 or better.<br \/>");
      document.write("This text is only seen by browsers that support JScript 5+<br>");
   @else @*/
      document.write("This text is seen by all other browsers (ie: Firefox, IE 4.x etc)<br>");
   /*@end
@*/

</script>

 

输出结果：
JScript version: 5.7.
JScript Version 5.0 or better.
This text is only seen by browsers that support JScript 5+

如果你使用的是IE浏览器（任何版本），你至少应该看到第一个 document.write() 输出，如果是IE5以上版本，应当可以看到第二个 document.write() 输出。最后一个document.wirte()输出是提供给非IE5以上版本IE浏览器使用的（这话说的比较绕），比如FireFox, Opera, IE4。条件编译标签依赖注释标签协调工作，类似“条件注释”，二者结合以保证脚本能在所有浏览器中工作正常。

当脚本通过条件编译运行，最好是以 @cc_on 声明开始，因为这样你能够在脚本中包括注释标签(comment tags)来确保浏览器兼容性。

@if, @elif,@else, and @end statements

 

下面是 条件编译 中的语法格式：

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

现在让我们看一些“生僻”的例子。

if else (IE 专有)

/*@cc_on
   @if (@_win32)
      document.write("OS is 32-bit. Browser is IE.");
   @else
      document.write("OS is NOT 32-bit. Browser is IE.");
   @end
@*/

 

上面这段代码只会被IE浏览器解析，而其他所有浏览器都会忽略这段代码，并且这段代码还依赖于你操作系统的位数（and depending on the bit of your OS, 应该是32位还是其他），根据不同的操作系统，这段代码会给出不同的消息。比对一下下面的例子：

 

if else II (其他浏览器专有)

/*@cc_on
   /*@if (@_win32)
      document.write("OS is 32-bit, browser is IE.");
   @else @*/
      document.write("Browser is not IE (ie: is Firefox) or Browser is not 32 bit IE.");
   /*@end
@*/

 

通过注释标签操纵，在如Firefox的非IE浏览器以及非32位的IE浏览器中，该示例 else 块中都将提示消息。

 

if, elseif, else (IE 专有)

 

继续，整个IE版本判断

/*@cc_on
   @if (@_jscript_version >= 5)
      document.write("IE Browser that supports JScript 5+");
   @elif (@_jscript_version >= 4)
      document.write("IE Browser that supports JScript 4+");
   @else
      document.write("Very old IE Browser");
   @end
@*/

 

if elseif, else II (其他浏览器专有)

/*@cc_on
   /*@if (@_jscript_version >= 5)
      document.write("IE Browser that supports JScript 5+");
   @elif (@_jscript_version >= 4)
      document.write("IE Browser that supports JScript 4+");
   @else @*/
      document.write("Non IE Browser (one that doesn't support JScript)");
   /*@end
@*/

 

这是更加明智的处理。 在第二部分的第二个例子中，最后一个 else 语句块 将在非IE浏览器中执行。

 

 

条件编译中的变量

在上面部分的文章中出现了一些像 @_win32 的奇怪变量。 利用这些 条件编译 预定义的变量你可以用来详细的测试IE或者PC某些方面的特征。

 

 

预定义的条件编译变量

变量 描述

@_win32	如果运行在Windows 32位操作系统上返回 true, 否则 NaN.
@_win16	如果运行在Windows 16位操作系统上返回 true ，否则 NaN.
@_mac	如果运行在苹果Mac操作系统上返回 true，否则 NaN.
@_alpha	如果运行在DEC Alpha处理器上返回 true，否则 NaN.
@_x86	如果运行在Intel处理器上返回 true， 否则 NaN.
@_mc680x0	如果运行在Motorola 680x0处理器上返回 true， 否则 NaN.
@_PowerPC	如果运行在Motorola PowerPC处理器上返回 true， 否则 NaN.
@_jscript	总是 返回 true.
@_jscript_build	JScript脚本引擎build代号
@_jscript_version	JScript的版本号  IE4 支持 JScript 3.x IE5.x 支持 JScript  5.5 or less IE6 支持 JScript 5.6
@_debug	如果在Debug下编译返回 true， 否则 false.
@_fast	如果在快速模式下编译返回 true， 否则 false.

 

 大多数情况下，有可能仅仅只使用到 @_win 和 @jscript_build 变量

/*@cc_on
   @if (@_win32)
      document.write("OS is 32-bit. Browser is IE.");
   @else
      document.write("OS is NOT 32-bit. Browser is IE.");
   @end
@*/

 

用户自定义变量

 

用户也可以在 条件编译 代码块中 定义 自己的变量， 使用下面的语法：

@set @varname = term

 

条件编译 同样支持数字类型和布尔类型的变量，但是不支持 字符串 变量。例如：

@set @myvar1 = 35
@set @myvar3 = @_jscript_version

 

条件编译 中的标准 逻辑运算符 集合：

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

 

可以测试一下如果用户定义一个变量，并且值为NaN：

@if (@newVar != @newVar)
//this variable isn't defined.

 

只用NaN是它的唯一值并且不等于变量本身的时候才会起作用。

 

 

条件编译举例 - try catch 语句块

在本文的开始，作者提到了条件编译是开始出现在Ajax相关的JavaScript脚本当中。下面将演示作者所提到的场景。一段Ajax脚本通常会包含一段创建一个在IE和Firefox中使用的异步传输request请求的对象，而创建该对象的方法通常是固定的。

 

典型Ajax方法：

 

function HttpRequest(url, parameters){
var pageRequest = false; //variable to hold ajax object
   if (window.XMLHttpRequest) // if Mozilla, Safari etc
      pageRequest = new XMLHttpRequest()
   else if (window.ActiveXObject){ // if IE
      try {
      pageRequest = new ActiveXObject("Msxml2.XMLHTTP")
      } 
      catch (e){
         try{
         pageRequest = new ActiveXObject("Microsoft.XMLHTTP")
         }
         catch (e){}
      }
   }
   else
   return false
}

 

很多人都会认为在Ajax代码中使用 "try/catch" 块是很优雅的做法，很不幸，事实上并非如此。浏览器并不支持 "throw/catch"， 就像 IE4.x，在IE4.x中运行以上代码将会报错。 要解决这一问题，可以使用 条件编译 创建一个真正跨浏览器的友好的 Ajax 解决方法：

 

Truly cross browser ajax function:

function HttpRequest(url, parameters){
var pageRequest = false //variable to hold ajax object
/*@cc_on
   @if (@_jscript_version >= 5)
      try {
      pageRequest = new ActiveXObject("Msxml2.XMLHTTP")
      }
      catch (e){
         try {
         pageRequest = new ActiveXObject("Microsoft.XMLHTTP")
         }
         catch (e2){
         pageRequest = false
         }
      }
   @end
@*/

if (!pageRequest && typeof XMLHttpRequest != 'undefined')
pageRequest = new XMLHttpRequest()
}

 

 使用 条件编译，整个 try/catch 块仅在IE5以上版本有效， 某些浏览器如IE4或非IE浏览器无法识别。Firefox明显会使用XMLHttpRequest来替代。使用以上代码，就可以实现跨浏览器创建ajax对象的方法。 

 

 

 

原文地址：http://www.javascriptkit.com/javatutors/conditionalcompile.shtml