jQuery静态方法globalEval使用和源码分析

Eval函数大家都很熟悉，但是globalEval方法却很少使用，大多数参考手册也没有相关api，下面就对其用法和源码相应介绍：

 

jQuery.globalEval()函数用于全局性地执行一段JavaScript代码。

示例：

var name = "全局变量";

function test(){
    var name = "局部变量";
    
    alert(name);                     // 局部变量
    
    eval( "alert(name);" );          // 局部变量
    
    $.globalEval( "alert(name);" );  // 全局变量
}

test();

 

可以看到该方法跟eval方法相比有一个作用域的范围差异即始终处于全局作用域下面，下面进行源码分析：

// Evaluates a script in a global context
// Workarounds based on findings by Jim Driscoll
// http://weblogs.java.net/blog/driscoll/archive/2009/09/08/eval-javascript-global-context
globalEval: function( data ) {
    if ( data && rnotwhite.test( data ) ) {
         // We use execScript on Internet Explorer
         // We use an anonymous function so that context is window
         // rather than jQuery in Firefox
            ( window.execScript || function( data ) {
                window[ "eval" ].call( window, data );
            } )( data );
     }
 },

 

注释里的意思是提到了此方法的实现是在Jim Driscoll的基础之上的而且把相关的文章链接还附了上面，索性链接还可以打开瞅瞅，里面大致介绍了怎么让js代码在全局执行的方法，对于ie浏览器而言则提供了一个不太常用的方法（反正我是第一次听到）---window.execScript

window.execScript 方法会根据提供的脚本语言执行一段脚本代码。window.execScript 方法有两个参数，第一个参数指定被执行的脚本代码段，第二个参数指定脚本代码语言类别 (缺省值为 JScript)，execScript 方法执行后的代码位于全局作用域下。举例：

 var str='全局'; 
    (function(){
        var str='局部';
        window.execScript('alert(str)');  //ie 全局
}());  

 

但是此方法现在只有ie支持，早期的chrome版本也支持现在已经放弃，具体的此方法介绍请参考http://ued.sina.com/?p=789；

打开注释中的网址是一个英文网站四级英语水品的我毫不犹豫的使用了谷歌网页翻译功能,可以谷歌不给力告诉我无法翻译，那没办法只能硬着头皮读下去，怕译错把原文附上请以原文为准

For more standards-respecting browsers, the way to do this should be to use the call function, which is a standard function attached to every Function object. So, eval.call(window, src) should work. But to understand why, it's important to know about context, in addition to scope. Every function call has it's own context: this is the object that's represented by the special value this. When we use the call function, the first parameter is the context object we'll use for this. This is handy for all kinds of purposes, but for us, it's just nice to use to set the context to the window object - which, you'll recall, is the global.

 

这段是提供解决方法的，对于标准浏览器而言可以采用eval函数解析js代码字符串，然后通过对象冒充的方式把作用域指向window，下面就是自己的测试：

var str='全局'; 
(function(){
     var str='局部';
     eval.call(window, "alert(str)"); 
}());  

经过测试ie9及以上和非ie均弹出“全局“ ，ie9以下弹出局部，说明这个方法有见兼容性有问题啊，但是这个方法本来就是给非IE用的，你ie爱咋咋地吧

Sadly, eval.call(window,src) breaks on Chrome - it complains about contexts not matching. Odd - and I was unable to Google up why this might be so. But a couple lucky guesses later, and I discovered that window.eval.call(window,src) works on all non-IE browsers. Now, when I say "var j = 1", the window[j] is the variable that's set... So, that's good. Why do we have to add the extra window. on Chrome? Not sure - I could guess, but it's too likely to be wrong.

 

该文作者用了多次用了”odd“，我也觉得很”odd",作者说在谷歌中报错了，然后把代码修改为window.eval.call(window,src)就可以啦，正如作者所困惑的，全局方法是不需要加window直接调用的这个大家都清楚，但是我做检测的时候是没有出现问题的，应该是年代久远了谷歌已经解决了，最后作者还提到火狐在执行解析this存在问题

 

At this point, I thought we'd licked the problem. No such luck. Sure, global variables are getting set, but it turns out that if you say: alert(this) - then you would correctly receive the global object back on Chrome and Safari, but not Firefox - there, you'd get back the object that was the enclosing object before the call function got called. Very odd, and likely a bug in their implementation.

 

既然全局解析alert(this)肯定是window才对，而火狐弹出最近的作用链的对象，对于需要测试下，代码如下：

 var str='全局'; 
      (function(){
           var str='局部';
           window.eval.call(window, "alert(this)"); 
  }());  

经检测火狐没有问题，估计火狐也是早把这个问题处理了，在文章的最后作者留了一个方法

var globalEval = function globalEval(src) {
    if (window.execScript) {
        window.execScript(src);
        return;
    }
    var fn = function() {
        window.eval.call(window,src);
    };
    fn();
};

可以说这个方法已经够用了，但是回过头来看看我们的jQuery源码会发现精简了很多

data && rnotwhite.test( data )

该条件保证有数据而且是不带空格的数据，当然你也可以不传字符串但是没什么意义rnotwhite的定义在构造函数中

// Check if a string has a non-whitespace character in it
    rnotwhite = /\S/,

至于为什么要检测不能有空格还是这篇外文中有其他开发者指出了如果是空白的在ie8出现错误

 

by vesperaba - 2012-10-18 08:54
If src is a blank string you will get an error in IE8. To avoid that I added the following check at the beginning:

if (src == undefined || src == '') {
     return;
}

//The whole function will be:
var globalEval = function globalEval(src) {
if (src == undefined || src == '') {
     return;
}
if (window.execScript) {
    window.execScript(src);
       return;
   }
   var fn = function() {
       window.eval.call(window,src);
   };
   fn();
};

 

通过逻辑或运算来选择何种方式解析，如果是采用eval则是处在一个自执行的匿名函数中，结构很精简

( window.execScript || function( data ) {
      window[ "eval" ].call( window, data );
 } )( data );

另需注意的事该方法没有返回值，或者可以理解为返回undefined