avascript中的this

by Administrator 2012.6.5 14:36
在JavaScript中this变量是一个令人难以摸清的关键字,this可谓是非常强大,充分了解this的相关知识有助于我们在编写面向对象的JavaScript程序时能够游刃有余。对于this变量最要的是能够理清this所引用的对象到底是哪一个,也许很多资料上都有自己的解释,但有些概念讲的偏繁杂。而我的理解是:首先分析this所在的函数是当做哪个对象的方法调用的,则该对象就是this所引用的对象,详细如下:    示例一、var obj = {};obj.x = 100;obj.y = function(){ alert( this.x ); };obj.y();    //弹出 100这段代码非常容易理解,当执行 obj.y() 时,函数是作为对象obj的方法调用的,因此函数体内的this指向的是obj对象,所以会弹出100。  示例二、var checkThis = function(){    alert( this.x); };var x = 'this is a property of window';var obj = {};obj.x = 100;obj.y = function(){ alert( this.x ); };obj.y();    //弹出 100checkThis();    //弹出 'this is a property of window'这里为什么会弹出 'this is a property of window',可能有些让人迷惑。在JavaScript的变量作用域里有一条规则“全局变量都是window对象的属性”。当执行 checkThis() 时相当于 window.checkThis(),因此,此时checkThis函数体内的this关键字的指向变成了window对象,而又因为window对象又一个x属性( 'this is a property of window'),所以会弹出 'this is a property of window'。上面的两个示例都是比较容易理解的,因为只要判断出当前函数是作为哪个对象的方法调用(被哪个对象调用)的,就可以很容易的判断出当前this变量的指向。 this.x 与 apply()、call()通过call和apply可以重新定义函数的执行环境,即this的指向,这对于一些应用当中是十分常用的。示例三:call()function changeStyle( type , value ){    this.style[ type ] = value;}var one = document.getElementById( 'one' ); changeStyle.call( one , 'fontSize' , '100px' );changeStyle('fontSize' , '300px');  //出现错误,因为此时changeStyle中this引用的是window对象,而window并无style属性。注意changeStyle.call() 中有三个参数,第一个参数用于指定该函数将被哪个对象所调用。这里指定了one,也就意味着,changeStyle函数将被one调用,因此函数体内this指向是one对象。而第二个和第三个参数对应的是changeStyle函数里的type和value两个形参。最总我们看到的效果是Dom元素one的字体变成了20px。示例四:apply() function changeStyle( type , value ){    this.style[ type ] = value;}var one = document.getElementById( 'one' ); changeStyle.apply( one , ['fontSize' , '100px' ]);changeStyle('fontSize' , '300px');  //出现错误,原因同示例三 apply的用法和call大致相同,只有一点区别,apply只接受两个参数,第一个参数和call相同,第二个参数必须是一个数组,数组中的元素对应的就是函数的形参。 无意义(诡异)的this用处示例五:var obj = {    x : 100,    y : function(){        setTimeout(            function(){ alert(this.x); }    //这里的this指向的是window对象,并不是我们期待的obj,所以会弹出undefined         , 2000);    }};obj.y();如何达到预期的效果var obj = {    x : 100,    y : function(){        var that = this;        setTimeout(            function(){ alert(that.x); }         , 2000);    }};obj.y();    //弹出100 事件监听函数中的thisvar one = document.getElementById( 'one' );one.onclick = function(){    alert( this.innerHTML );    //this指向的是one元素,这点十分简单..};

Tags:

Web前端

深入理解JavaScript的变量作用域

by Administrator 2012.6.5 14:35
在学习JavaScript的变量作用域之前,我们应当明确几点:    a、JavaScript的变量作用域是基于其特有的作用域链的。    b、JavaScript没有块级作用域。    c、函数中声明的变量在整个函数中都有定义。   详细如下:1、JavaScript的作用域链首先看下下面这段代码: <script type="text/javascript" language="javascript">var rain = 1;function rainman(){    var man = 2;    function inner(){        var innerVar = 4;        alert(rain);    }    inner();    //调用inner函数}rainman();    //调用rainman函数</script> 观察alert(rain);这句代码。JavaScript首先在inner函数中查找是否定义了变量rain,如果定义了则使用inner函数中的rain变量;如果inner函数中没有定义rain变量,JavaScript则会继续在rainman函数中查找是否定义了rain变量,在这段代码中rainman函数体内没有定义rain变量,则JavaScript引擎会继续向上(全局对象)查找是否定义了rain;在全局对象中我们定义了rain = 1,因此最终结果会弹出'1'。作用域链:JavaScript需要查询一个变量x时,首先会查找作用域链的第一个对象,如果以第一个对象没有定义x变量,JavaScript会继续查找有没有定义x变量,如果第二个对象没有定义则会继续查找,以此类推。上面的代码涉及到了三个作用域链对象,依次是:inner、rainman、window。 2、函数体内部,局部变量的优先级比同名的全局变量高。  <script type="text/javascript" language="javascript">var rain = 1;    //定义全局变量 rainfunction check(){    var rain = 100;    //定义局部变量rain    alert( rain );    //这里会弹出 100}check();alert( rain );    //这里会弹出1</script> 3、JavaScript没有块级作用域。这一点也是JavaScript相比其它语言较灵活的部分。仔细观察下面的代码,你会发现变量i、j、k作用域是相同的,他们在整个rain函数体内都是全局的。  <script type="text/javascript" language="javascript">function rainman(){/** * rainman函数体内存在三个局部变量 i j k */    var i = 0;    if( 1 ){        var j = 0;        for( var k = 0 ; k < 3 ; k++ ){            alert( k );    //分别弹出 0 1 2        }        alert( k );    //弹出3    }    alert( j );    //弹出0}</script> 4、函数中声明的变量在整个函数中都有定义。首先观察这段代码。  <script type="text/javascript" language="javascript">function rain(){    var x = 1;    function man(){        x = 100;    }    man();    //调用man    alert( x );    //这里会弹出 100}rain();    //调用rain</script> 上面得代码说明了,变量x在整个rain函数体内都可以使用,并可以重新赋值。由于这条规则,会产生“匪夷所思”的结果,观察下面的代码。 这是由于在函数rain内局部变量x在整个函数体内都有定义( var x= 'rain-man',进行了声明),所以在整个rain函数体内隐藏了同名的全局变量x。这里之所以会弹出'undefined'是因为,第一个执行alert(x)时,局部变量x仍未被初始化。<script type="text/javascript" language="javascript">var x = 1;function rain(){    alert( x );    //弹出 'undefined',而不是1    var x = 'rain-man';    alert( x );    //弹出 'rain-man'}rain()</script> 所以上面的rain函数等同于下面的函数。  function rain(){    var x;    alert( x );    x = 'rain-man';    alert( x );} 5、未使用var关键字定义的变量都是全局变量。 <script type="text/javascript" language="javascript">function rain(){    x = 100;    //声明了全局变量x并进行赋值}rain();alert( x );    //会弹出100</script> 这也是JavaScript新手常见的错误,无意之中留下的许多全局变量。6、全局变量都是window对象的属性 <script type="text/javascript" language="javascript">var x = 100 ;alert( window.x );//弹出100alert(x);</script>等同于下面的代码<script type="text/javascript" language="javascript">window.x = 100;alert( window.x );alert(x)</script>

Tags:

Web前端

javascript的作用域和闭包

by Administrator 2012.6.5 10:23
   闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现。下面我们一起来看看javascript里面的作用域和闭包:一、变量的作用域要理解闭包,首先必须理解Javascript特殊的变量作用域。变量的作用域无非就是两种:全局变量和局部变量。Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量。  var n=999;  function f1(){    alert(n);  }  f1(); // 999另一方面,在函数外部自然无法读取函数内的局部变量。  function f1(){    var n=999;  }  alert(n); // error这里有一个地方需要注意,函数内部声明变量的时候,一定要使用var命令。如果不用的话,你实际上声明了一个全局变量!  function f1(){    n=999;  }  f1();  alert(n); // 999二、如何从外部读取局部变量?出于种种原因,我们有时候需要得到函数内的局部变量。但是,前面已经说过了,正常情况下,这是办不到的,只有通过变通方法才能实现。那就是在函数的内部,再定义一个函数。  function f1(){    n=999;    function f2(){      alert(n); // 999    }  }在上面的代码中,函数f2就被包括在函数f1内部,这时f1内部的所有局部变量,对f2都是可见的。但是反过来就不行,f2内部的局部变量,对f1就是不可见的。这就是Javascript语言特有的"链式作用域"结构(chain scope),子对象会一级一级地向上寻找所有父对象的变量。所以,父对象的所有变量,对子对象都是可见的,反之则不成立。既然f2可以读取f1中的局部变量,那么只要把f2作为返回值,我们不就可以在f1外部读取它的内部变量了吗!  function f1(){    n=999;    function f2(){      alert(n);     }    return f2;  }  var result=f1();  result(); // 999三、闭包的概念上一节代码中的f2函数,就是闭包。各种专业文献上的"闭包"(closure)定义非常抽象,很难看懂。我的理解是,闭包就是能够读取其他函数内部变量的函数。由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成"定义在一个函数内部的函数"。所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。四、闭包的用途闭包可以用在许多地方。它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。怎么来理解这句话呢?请看下面的代码。  function f1(){    var n=999;    nAdd=function(){n+=1}    function f2(){      alert(n);    }    return f2;  }  var result=f1();  result(); // 999  nAdd();  result(); // 1000在这段代码中,result实际上就是闭包f2函数。它一共运行了两次,第一次的值是999,第二次的值是1000。这证明了,函数f1中的局部变量n一直保存在内存中,并没有在f1调用后被自动清除。为什么会这样呢?原因就在于f1是f2的父函数,而f2被赋给了一个全局变量,这导致f2始终在内存中,而f2的存在依赖于f1,因此f1也始终在内存中,不会在调用结束后,被垃圾回收机制(garbage collection)回收。这段代码中另一个值得注意的地方,就是"nAdd=function(){n+=1}"这一行,首先在nAdd前面没有使用var关键字,因此nAdd是一个全局变量,而不是局部变量。其次,nAdd的值是一个匿名函数(anonymous function),而这个匿名函数本身也是一个闭包,所以nAdd相当于是一个setter,可以在函数外部对函数内部的局部变量进行操作。五、使用闭包的注意点1)由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。2)闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。六、思考题如果你能理解下面两段代码的运行结果,应该就算理解闭包的运行机制了。代码片段一。  var name = "The Window";  var object = {    name : "My Object",    getNameFunc : function(){      return function(){        return this.name;      };    }  };  alert(object.getNameFunc()());代码片段二。  var name = "The Window";  var object = {    name : "My Object",    getNameFunc : function(){      var that = this;      return function(){        return that.name;      };    }  };  alert(object.getNameFunc()());

Tags:

Web前端

javascript里面的闭包

by Administrator 2012.6.5 10:22
  闭包是可以包含自由(未绑定)变量的代码块;这些变量不是在这个代码块或者任何全局上下文中定义的,而是在定义代码块的环境中定义。“闭包” 一词来源于以下两者的结合:要执行的代码块(由于自由变量的存在,相关变量引用没有释放)和为自由变量提供绑定的计算环境(作用域)。在 Scheme、Common Lisp、Smalltalk、Groovy、JavaScript、Ruby 和 Python 等语言中都能找到对闭包不同程度的支持,我们来具体 看javscripta的: 一、什么是闭包?   “官方”的解释是:所谓“闭包”,指的是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。   相信很少有人能直接看懂这句话,因为他描述的太学术。我想用如何在Javascript中创建一个闭包来告诉你什么是闭包,因为跳过闭包的创建过程直接理解闭包的定义是非常困难的。看下面这段代码:   function a(){   var i=0;   function b(){   alert(++i);   }   return b;   }   var c = a();   c();   这段代码有两个特点:   1、函数b嵌套在函数a内部;   2、函数a返回函数b。   这样在执行完var c=a()后,变量c实际上是指向了函数b,再执行c()后就会弹出一个窗口显示i的值(第一次为1)。这段代码其实就创建了一个闭包,为什么?因为函数a外的变量c引用了函数a内的函数b,就是说:   当函数a的内部函数b被函数a外的一个变量引用的时候,就创建了一个闭包。   我猜想你一定还是不理解闭包,因为你不知道闭包有什么作用,下面让我们继续探索。   二、闭包有什么作用?   简而言之,闭包的作用就是在a执行完并返回后,闭包使得Javascript的垃圾回收机制GC不会收回a所占用的资源,因为a的内部函数b的执行需要依赖a中的变量。这是对闭包作用的非常直白的描述,不专业也不严谨,但大概意思就是这样,理解闭包需要循序渐进的过程。   在上面的例子中,由于闭包的存在使得函数a返回后,a中的i始终存在,这样每次执行c(),i都是自加1后alert出i的值。   那 么我们来想象另一种情况,如果a返回的不是函数b,情况就完全不同了。因为a执行完后,b没有被返回给a的外界,只是被a所引用,而此时a也只会被b引 用,因此函数a和b互相引用但又不被外界打扰(被外界引用),函数a和b就会被GC回收。(关于Javascript的垃圾回收机制将在后面详细介绍)   三、闭包内的微观世界   如 果要更加深入的了解闭包以及函数a和嵌套函数b的关系,我们需要引入另外几个概念:函数的执行环境(excution context)、活动对象(call object)、作用域(scope)、作用域链(scope chain)。以函数a从定义到执行的过程为例阐述这几个概念。   1、当定义函数a的时候,js解释器会将函数a的作用域链(scope chain)设置为定义a时a所在的“环境”,如果a是一个全局函数,则scope chain中只有window对象。   2、当函数a执行的时候,a会进入相应的执行环境(excution context)。   3、在创建执行环境的过程中,首先会为a添加一个scope属性,即a的作用域,其值就为第1步中的scope chain。即a.scope=a的作用域链。   4、然后执行环境会创建一个活动对象(call object)。活动对象也是一个拥有属性的对象,但它不具有原型而且不能通过JavaScript代码直接访问。创建完活动对象后,把活动对象添加到a的作用域链的最顶端。此时a的作用域链包含了两个对象:a的活动对象和window对象。   5、下一步是在活动对象上添加一个arguments属性,它保存着调用函数a时所传递的参数。   6、最后把所有函数a的形参和内部的函数b的引用也添加到a的活动对象上。在这一步中,完成了函数b的的定义,因此如同第3步,函数b的作用域链被设置为b所被定义的环境,即a的作用域。   到此,整个函数a从定义到执行的步骤就完成了。此时a返回函数b的引用给c,又函数b的作用域链包含了对函数a的活动对象的引用,也就是说b可以访问到a中定义的所有变量和函数。函数b被c引用,函数b又依赖函数a,因此函数a在返回后不会被GC回收。   当函数b执行的时候亦会像以上步骤一样。因此,执行时b的作用域链包含了3个对象:b的活动对象、a的活动对象和window对象,如下图所示:   如图所示,当在函数b中访问一个变量的时候,搜索顺序是先搜索自身的活动对象,如果存在则返回,如果不存在将继续搜索函数a的活动对象,依 次查找,直到找到为止。如果整个作用域链上都无法找到,则返回undefined。如果函数b存在prototype原型对象,则在查找完自身的活动对象 后先查找自身的原型对象,再继续查找。这就是Javascript中的变量查找机制。   四、闭包的应用场景   1、保护函数内的变量安全。以最开始的例子为例,函数a中i只有函数b才能访问,而无法通过其他途径访问到,因此保护了i的安全性。   2、在内存中维持一个变量。依然如前例,由于闭包,函数a中i的一直存在于内存中,因此每次执行c(),都会给i自加1。   以上两点是闭包最基本的应用场景,很多经典案例都源于此。   五、Javascript的垃圾回收机制   在Javascript中,如果一个对象不再被引用,那么这个对象就会被GC回收。如果两个对象互相引用,而不再被第3者所引用,那么这两个互相引用的对象也会被回收。因为函数a被b引用,b又被a外的c引用,这就是为什么函数a执行后不会被回收的原因。

Tags:

Web前端

JavaScript判断浏览器类型及版本(新增谷歌的Chrome)

by Administrator 2012.6.5 10:19
你知道世界上有多少种浏览器吗?除了我们熟知的IE, Firefox, Opera, Safari四大浏览器之外,世界上还有近百种浏览器。        几天前,浏览器家族有刚诞生了一位小王子,就是Google推出的Chrome浏览器。由于Chrome出生名门,尽管他还是个小家伙,没有人敢小看他。以后,咱们常说浏览器的“四大才子”就得改称为“五朵金花”了。        在网站前端开发中,浏览器兼容性问题本已让我们手忙脚乱,Chrome的出世不知道又要给我们添多少乱子。浏览器兼容性是前端开发框架要解决的第一个问题,要解决兼容性问题就得首先准确判断出浏览器的类型及其版本。        详细如下:JavaScript是前端开发的主要语言,我们可以通过编写JavaScript程序来判断浏览器的类型及版本。JavaScript判断浏览器类型一般有两种办法,一种是根据各种浏览器独有的属性来分辨,另一种是通过分析浏览器的userAgent属性来判断的。在许多情况下,值判断出浏览器类型之后,还需判断浏览器版本才能处理兼容性问题,而判断浏览器的版本一般只能通过分析浏览器的userAgent才能知道。        我们先来分析一下各种浏览器的特征及其userAgent。        IE       只有IE支持创建ActiveX控件,因此她有一个其他浏览器没有的东西,就是ActiveXObject函数。只要判断window对象存在ActiveXObject函数,就可以明确判断出当前浏览器是IE。而IE各个版本典型的userAgent如下:         Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0)         Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.2)         Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)         Mozilla/4.0 (compatible; MSIE 5.0; Windows NT)       其中,版本号是MSIE之后的数字。        Firefox        Firefox中的DOM元素都有一个getBoxObjectFor函数,用来获取该DOM元素的位置和大小(IE对应的中是getBoundingClientRect函数)。这是Firefox独有的,判断它即可知道是当前浏览器是Firefox。Firefox几个版本的userAgent大致如下:         Mozilla/5.0 (Windows; U; Windows NT 5.2) Gecko/2008070208 Firefox/3.0.1         Mozilla/5.0 (Windows; U; Windows NT 5.1) Gecko/20070309 Firefox/2.0.0.3         Mozilla/5.0 (Windows; U; Windows NT 5.1) Gecko/20070803 Firefox/1.5.0.12       其中,版本号是Firefox之后的数字。        Opera        Opera提供了专门的浏览器标志,就是window.opera属性。Opera典型的userAgent如下:         Opera/9.27 (Windows NT 5.2; U; zh-cn)         Opera/8.0 (Macintosh; PPC Mac OS X; U; en)         Mozilla/5.0 (Macintosh; PPC Mac OS X; U; en) Opera 8.0       其中,版本号是靠近Opera的数字。        Safari        Safari浏览器中有一个其他浏览器没有的openDatabase函数,可做为判断Safari的标志。Safari典型的userAgent如下:         Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, like Gecko) Version/3.1 Safari/525.13         Mozilla/5.0 (iPhone; U; CPU like Mac OS X) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/4A93 Safari/419.3       其版本号是Version之后的数字。       Chrome       Chrome有一个MessageEvent函数,但Firefox也有。不过,好在Chrome并没有Firefox的getBoxObjectFor函数,根据这个条件还是可以准确判断出Chrome浏览器的。目前,Chrome的userAgent是:         Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13       其中,版本号在Chrome只后的数字。       有趣的是,Chrome的userAgent还包含了Safari的特征,也许这就是Chrome可以运行所有Apple浏览器应用的基础吧。       只要了解了以上信息,我们就可以根基这些特征来判断浏览器类型及其版本了。我们会将判断的结果保存在Sys名字空间中,成为前端框架的基本标志信息,供今后的程序来读取。如果判断出谋种浏览器,Sys名字空间将有一个该浏览器名称的属性,其值为该浏览器的版本号。例如,如果判断出IE 7.0,则Sys.ie的值为7.0;如果判断出Firefox 3.0,则Sys.firefox的值为3.0。下面是判断浏览器的代码:     <script type="text/javascript">         var Sys = {};         var ua = navigator.userAgent.toLowerCase();         if (window.ActiveXObject)             Sys.ie = ua.match(/msie ([\d.]+)/)[1]         else if (document.getBoxObjectFor)             Sys.firefox = ua.match(/firefox\/([\d.]+)/)[1]         else if (window.MessageEvent && !document.getBoxObjectFor)             Sys.chrome = ua.match(/chrome\/([\d.]+)/)[1]         else if (window.opera)             Sys.opera = ua.match(/opera.([\d.]+)/)[1]         else if (window.openDatabase)             Sys.safari = ua.match(/version\/([\d.]+)/)[1];                 //以下进行测试         if(Sys.ie) document.write('IE: '+Sys.ie);         if(Sys.firefox) document.write('Firefox: '+Sys.firefox);         if(Sys.chrome) document.write('Chrome: '+Sys.chrome);         if(Sys.opera) document.write('Opera: '+Sys.opera);         if(Sys.safari) document.write('Safari: '+Sys.safari);     </script>       我们把对IE的判断放在第一,因为IE的用户最多,其次是判断Firefox。按使用者多少的顺序来判断浏览器类型,可以提高判断效率,少做无用功。之所以将Chrome放在第三判断,是因为我们预测Chrome很快会成为市场占有率第三的浏览器。其中,在分析浏览器版本时,用到了正则表达式来析取其中的版本信息。       如果你的JavaScript玩得很高,你还可以将前面的判断代码写成这样:     <script type="text/javascript">         var Sys = {};         var ua = navigator.userAgent.toLowerCase();         window.ActiveXObject ? Sys.ie = ua.match(/msie ([\d.]+)/)[1] :         document.getBoxObjectFor ? Sys.firefox = ua.match(/firefox\/([\d.]+)/)[1] :         window.MessageEvent && !document.getBoxObjectFor ? Sys.chrome = ua.match(/chrome\/([\d.]+)/)[1] :         window.opera ? Sys.opera = ua.match(/opera.([\d.]+)/)[1] :         window.openDatabase ? Sys.safari = ua.match(/version\/([\d.]+)/)[1] : 0;                 //以下进行测试         if(Sys.ie) document.write('IE: '+Sys.ie);         if(Sys.firefox) document.write('Firefox: '+Sys.firefox);         if(Sys.chrome) document.write('Chrome: '+Sys.chrome);         if(Sys.opera) document.write('Opera: '+Sys.opera);         if(Sys.safari) document.write('Safari: '+Sys.safari);     </script>       这样可以使JavaScript代码更精简些。当然,可读性稍差一些,就看你是重视效率还是重视可维护性了。       使用不同特征来判断浏览器的方法,虽然在速度上比用正则表达式分析userAgent要来的快,不过这些特征可能会随浏览器版本而变化。比如,一种浏览器本来独有的特性取得了市场上的成功,其他浏览器也就可能跟着加入该特性,从而使该浏览器的独有特征消失,导致我们的判断失败。因此,相对比较保险的做法是通过解析userAgent中的特征来判断浏览器类型。何况,反正判断版本信息也需要解析浏览器的userAgent的。       通过分析各类浏览器的userAgent信息,不难得出分辨各类浏览器及其版本的正则表达式。而且,对浏览器类型的判断和版本的判断完全可以合为一体地进行。于是,我们可以写出下面的代码:     <script type="text/javascript">         var Sys = {};         var ua = navigator.userAgent.toLowerCase();         var s;         (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :         (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :         (s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :         (s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :         (s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;         //以下进行测试         if (Sys.ie) document.write('IE: ' + Sys.ie);         if (Sys.firefox) document.write('Firefox: ' + Sys.firefox);         if (Sys.chrome) document.write('Chrome: ' + Sys.chrome);         if (Sys.opera) document.write('Opera: ' + Sys.opera);         if (Sys.safari) document.write('Safari: ' + Sys.safari);     </script>       其中,采用了“... ? ... : ...”这样的判断表达式来精简代码。判断条件是一条赋值语句,既完成正则表达式的匹配及结果复制,又直接作为条件判断。而随后的版本信息只需从前面的匹配结果中提取即可,这是非常高效的代码。        以上的代码都是为了打造前端框架所做的预研,并在五大浏览器上测试通过。今后,判断某种浏览器只需用if(Sys.ie)或if(Sys.firefox)等形式,而判断浏览器版本只需用if(Sys.ie == '8.0')或if(Sys.firefox == '3.0')等形式,表达起来还是非常优雅的。

Tags:

Web前端

高度自适应的Iframe

by Administrator 2010.5.11 07:35
同域,高度自适应的iframe,记下备忘<iframe id="FrameRight" name="FrameRight" src="HotelSearch.jsp " style="width:100%;"  frameborder="0" onload="this.height=100" scrolling="no" ></iframe>      <script type="text/javascript">function RightIframe(){var iframe = document.getElementById("FrameRight");try{var bHeight = iframe.contentWindow.document.body.scrollHeight;var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;var height = Math.max(bHeight, dHeight);iframe.height = height;}catch (ex){}}window.setInterval("RightIframe()", 200);</script>

Tags:

Web前端

字符串转JSON对象

by Administrator 2010.4.29 16:56
报错,郁闷了半天,记下备忘  function test()  {       var o="[{sn:'sa',name:'cccme',id:'1234'},{sn:'ab',name:'bbbame',id:'4567'},{sn:'abc',name:'saaae',id:'7889'}]";    var oo=eval("("+o+")");  for(var i=0;i<o.length;i++)  {   alert(oo[i].sn);  } }

Tags:

Web前端

关于博主

      什么都懂一点儿,热衷技术,热爱Programming,每有难题,常夜以继日,每有解决方案,手舞足蹈而欣喜若狂;好读书,不求甚解;每有会意,便欣然忘食;常纵情于山水之间,忘乎于尘世之外,唯程序难释怀尔。
       QQ:51557288

归档

最近的评论

声明

本博所有网友评论不代表本博立场,版权归其作者所有。

© Copyright 2011