`
xiaozhi7616
  • 浏览: 191305 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

 

 

 

9
0
分享到:
评论
6 楼 晴1天 2009-08-04  
解释性的语言 也要这东西吗   多余
5 楼 windywany 2009-08-04  
程序员都不要求标准,那就更不标准了.
4 楼 xiaozhi7616 2009-07-28  
javaDevil 写道
意义不大,估计也是IE Only


IE Only 倒是真的,在其他浏览器中遇到它就会直接跳过去执行下面的语句,但正式因为这一点可以达到我们的目的,在IE和其他的浏览器中以示区别。

并不是所有的 IE Only 都不好,不能一棒子打死,巧妙的利用还是能解决很多的问题的。
3 楼 xiaozhi7616 2009-07-28  
javaDevil 写道
意义不大,估计也是IE Only


其实主要就是用在创建 XMLHttpRequest 对象的时候,根据不同的浏览器,创建的方法不一样,现在用了很多的框架,像Prototype,Dojo之类的,这个创建过程早就被封装好了,用到这些语句的机会就更少了。

就是看到了这一块,还不是很清楚它的意思,拿出来大家共同看一下
2 楼 javaDevil 2009-07-28  
意义不大,估计也是IE Only
1 楼 liu78778 2009-07-28  
又多了解了一点, 这方面之前还真没看到过, 谢了

相关推荐

    ifdef-loader:用于JavaScriptTypeScript条件编译的Webpack加载器

    Webpack加载器,可直接从Webpack进行JavaScript或TypeScript条件编译( #if ... #elif ... #else ... #endif )。 有条件的编译指令写在///三斜杠注释中,这样它们就不会影响普通JavaScript或TypeScript解析。 ...

    IE中jscript/javascript的条件编译

    IE中jscript/javascript的条件编译 作者:JavaScript Kit 译者:子乌(Sheneyan) 翻译日期:2006-02-12 英文原文:Conditional Compilation of JScript/ JavaScript in IE 版权:翻译未经过javascript kit同意,我只对我所...

    rhubarb:javascript的条件编译工具

    大黄javascript的条件编译工具进行自定义构建的野蛮人方式它有什么作用? 它需要源代码 if ( Whatever . hasFeature ( "foo" ) ) {doFunctionFoo ( ) ;} else {console . log ( "I haven't feature foo!" ) ;}if ( _...

    简单记录C# 条件编译

    您可能感兴趣的文章:C# 编译生成dll文件供程序调用的两种方法C# #define条件编译详解C#实现将javascript文件编译成dll文件的方法C#命令行编译器配置方法C#中尾递归的使用、优化及编译器优化手动编译C#代码的方法

    rollup-plugin-jscc:用于汇总的条件编译和编译时变量替换

    汇总插件jscc 条件编译和编译时变量替换。 rollup-plugin-jscc不是编译器,的包装,这是一个小巧而功能强大的,与语言无关的文件预处理器,在编译时使用JavaScript来基于表达式转换文本。 使用jscc,您可以: 根据...

    JavaScript中文手册CHM

    JScript 基础 什么是 Jscript? 编写 JScript 代码 JScript 变量 JScript 数据类型 JScript 运算符 ...条件编译 条件编译变量 JScript 函数 JScript 对象 固有对象 创建自己的对象 JScript 保留字

    JScript的条件编译

    微软对条件编译的解释... 一般我们在编写JavaScript代码时很少用到条件编译。不过条件编译由于其本身的特性,对我们检测系统,自动识别浏览器编程却提供了方便。 有一段很经典的代码: var isMSIE = /*@cc_on!@*/fa

    preprocessorify:browserify 的条件编译

    预处理Browserify的条件编译。用法通过 npm 安装包: npm i preprocessorify添加它作为一个变换(还与 ): browserify -t preprocessorify example/index.js编写您的代码(参见example.js ): var preprocessorify...

    JavaScript 手册

    JavaScript 微软手册 JScript 基础 什么是 Jscript? 编写 JScript 代码 JScript 变量 JScript 数据类型 ...条件编译 条件编译变量 JScript 函数 JScript 对象 固有对象 创建自己的对象 JScript 保留字

    preprocessor-loader:将令人敬畏的“条件编译”带入Webpack,以及更多

    将令人敬畏的“条件编译”功能带到Webpack等等。 选项 debug _ directives params verbose 内置指令 #!if / #!else / #!elseif / #!endif #!debug 注意事项 带代码的内联指令 林亭 执照 为什么 借助webpack...

    PreprocesssorWizard:用于Java等的WYSIWIG条件编译预处理器-开源

    适用于Java,Perl,C,C ++,Basic,PowerShell,C#,Javascript和其他编程语言的WYSIWYG条件编译预处理器。 许多C和C ++开发人员严重依赖C预处理程序,并对Java,脚本语言和其他编程语言缺少预处理程序感到遗憾。 ...

    javaScript帮助文档

    什么是 Jscript? 编写 JScript 代码 JScript 变量 JScript 数据类型 JScript 运算符 运算符优先级 控制程序流 条件编译 条件编译变量 JScript 函数

    JavaScript参考手册

    什么是 Jscript? 编写 JScript 代码 JScript 变量 JScript 数据类型 JScript 运算符 运算符优先级 ...条件编译 条件编译变量 JScript 函数 JScript 对象 固有对象 创建自己的对象 JScript 保留字

    jscc:强大的微型预处理器,用于条件注释和替换文本文件中的编译时变量

    使用jscc,您可以: 根据编译时变量,有条件地包含/排除块* 具有JavaScript表达式所有功能的编译时变量用编译时的值替换源中的变量Sourcemap支持,对JavaScript源有用。 TypeScript v3定义*此功能使您可以有条件地...

    javaScript函数式编程

    除此之外,附录中还介绍了更多函数式JavaScript。 本书内容全面,示例丰富,适合想要了解函数式编程的JavaScript程序员和学习JavaScript的函数式程序员阅读。 作者简介 · · · · · · Michael Fogus是Dynamic ...

    微软JavaScript手册

    @set 语句 创建用于条件编译语句的变量。 abs 方法 返回一个数的绝对值。 acos 方法 返回一个数的反余弦。 ActiveXObject 对象 启用并返回一个 Automation 对象的引用。 加法运算符 (+) 将两个数字表达式的值...

    pickpick-targeting-compiler:将定位表达式编译为用于pickpick引擎的javascript代码

    将定位表达式编译为用于pickpick引擎的javascript代码 使用解析表达式并将其转换为对给定条件进行评估的javascript函数。 使用vm模块具有隔离的上下文 除了普通的javascript运算符外,还有一些特殊的运算符(例如,...

    frontend-boilerplate:Boilerplate repo提供了一个简单的基本模板,可以快速启动新项目的开发,该项目需要Javascript和SASS编译,Gulp自动化和带有实时重载服务器的文件监视

    前端样板这个样板库提供了一个简单的漂亮模板,可以快速启动新项目的开发,需要满足以下条件: 通过自动前缀支持以两种方式(普通和压缩)将SASS构建和编译为CSS Javascript串联并以两种形式构建(普通和丑陋) 用于...

    javascript文档

    @set 语句 创建用于条件编译语句的变量。 abs 方法 返回一个数的绝对值。 acos 方法 返回一个数的反余弦。 ActiveXObject 对象 启用并返回一个 Automation 对象的引用。 加法运算符 (+) 将两个数字表达式的值...

    JsMinGUI

    JsMinGUI &lt;br&gt;功能介绍: 1、它可以向命令行版本一样,采用图形界面操作来完成压缩一个 JavaScript 脚本文件。 2、输入文件可以和... 7、比原版的 JsMin 增加了对注释中 IE 条件编译语句压缩的支持。

Global site tag (gtag.js) - Google Analytics