拜讀jQuery(1)--globalEval

anyway 發布于2019-08-19 17:55 / 2755人閱讀

摘要：去年暑假的時候開通了博客園，然后開始找工作，至今為止只寫了一篇文章。慚愧啊今天興致來了，投身博客園，尼瑪，密碼忘記了。即有所謂的函數名函數名。獲取對的使用去除字符串兩端的空格說明是嚴格模式，不能直接使用函數非嚴格模式

今天第一次在segmentfault里寫文章。去年暑假的時候開通了博客園，然后開始找工作，至今為止只寫了一篇文章。慚愧啊！今天興致來了，投身博客園，尼瑪，密碼忘記了。看了那么無聊的找回密碼，果斷轉投于此，但愿我以后能夠堅持寫點東西。畢竟，好好記性不如爛筆頭。
公司不讓去實習，在學校待的無聊，前兩天再寫東西的時候，突然意識到，已經大半年沒有寫過jQuery了。但看到那么多熟悉API，不想再去做重復的工作，果斷找到源碼，投入分析。
看源碼的進程緩慢，但收獲確實挺大，尤其有利于扎實js底層知識。今天看到了源碼里面globalEval方法的實現。雖然用的不多，但是實現方法著實讓人眼前一驚（大神不算）。所以就從這里開始我的文章生涯吧！！

eval和window.eval

對于eval基本的用法，對于任何一位前端來說，都不會陌生。jQuery源碼里面也有其基本使用，但是用法。可視我第一次見啊啊啊啊。
我們知道，當我們在全局聲明一個函數的時候，就相當于在window對象上面添加了一個方法。即有所謂的：函數名===window.函數名。以前在使用eval()函數的時候，也想當然的認為eval===window.eval。其實，兩者的用法差距挺大的。

function create()
{
    eval("var a = 2");   //和在函數里面直接var a = 2;的效果是一樣的
    window.eval("var b = 3");  //這種其實是在全局作用域里面聲明了變量 b
}

//調用函數
create();
consoole.log(a);  //報錯：a is not defined
console.log(b);   // 3

從上面的函數里面，我們就可以看出eval就是把其參數在當前的作用域里面運行。而window.eval無論其處于什么作用域里，都會把其參數在全局作用域里面運行。

除了直接使用window.eval外，我們也可以使用一個變量對其進行引用

function create(){
{
    var ev = eval;   //js就是這么神奇，這里的eval指的是window.eval,而非對eval的直接引用
    ev("var c = 4");
}
create();
console.log(c); //4

js果然是一門神奇的語言，那么小的一個玩意竟然會有那么多想不到的用法。
其實啊，eval在多帶帶使用的時候，js語言其實是把它作為一個結構體來看待，而window.eval在使用的時候，卻真真是一個函數。

下面附上jQuery里面globalEval的源碼

//自己試著寫的，順便使用了經常使用的去除兩端空格的方法。
String.prototype.trim = function(){
    return this.replace(/^(s+)|(s)+$/g,"");
};
jQuery.globalEval = function(code){
    var newScript,
        newEval = eval;   //獲取對eval的使用
     
     code = code.trim();  //去除字符串兩端的空格
     
     if(code){
         if(code.indexOf("use strict")){
             //說明是嚴格模式，不能直接使用window.eval函數
             newScript = document.createElement("script");
             newScript.createTextNode(code);
             document.head.appendChild(newScript).parentNode.removeChild(newScript);
         }else{
             //非嚴格模式
             newEval(code);
         }
     }
}

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78982.html

jQuery源碼解讀：部份jQuery工具方法實現

摘要：作為前端最流行的類庫，沒有之一，源碼必須得讀一讀。本博將不定期更新源碼解讀內容，如果解讀不正確的地方，還請同學們在評論中指正。這里使用的是改變的指向為實例。其實就是中常見的四判斷是否是數字函數用于檢查其參數是否是無窮大。 jQuery作為前端最流行的類庫，沒有之一，源碼必須得讀一讀。本博將不定期更新源碼解讀內容，如果解讀不正確的地方，還請同學們在評論中指正。本系列文章基于jquer...

Rindia 2019-08-21 10:24 評論0 收藏0
原生js替換jQuery各種方法-中文版

摘要：本項目總結了大部分替代的方法，暫時只支持以上瀏覽器。返回指定元素及其后代的文本內容。從服務器讀取數據并替換匹配元素的內容。用它自己的方式處理，原生遵循標準實現了最小來處理。當全部被解決時返回，當任一被拒絕時拒絕。是創建的一種方式。原文https://github.com/nefe/You-D... You Dont Need jQuery showImg(https://segmen...

lylwyy2016 2019-08-23 12:14 評論0 收藏0
jQuery is out of date

摘要：注同時移除元素上的事件及數據。其他對象通過其屬性名進行迭代。原始數組不受影響。檢查對象是否為空不包含任何屬性。返回一個數字，表示當前時間。兩者性能差不多接受一個標準格式的字符串，并返回解析后的對象。在我看來，jQuery確實已經過時了。本項目總結了絕大部分 jQuery API 替代的方法，類似項目You-Dont-Need-jQuery，并會再此基礎上進行很多的補充。寫這個項目主要...

duan199226 2019-08-21 11:30 評論0 收藏0
jQuery源碼分析-整體架構（轉）

摘要：文章出處拜讀一個開源框架，最想學到的就是設計的思想和實現的技巧。利用下的簡單工廠模式，來將所有對于同一個對象的操作指定同一個實例。所以的中提供了以上中擴展函數。文章出處 http://www.cnblogs.com/aaronjs/p/3278578.html 拜讀一個開源框架，最想學到的就是設計的思想和實現的技巧。廢話不多說，jquery這么多年了分析都寫爛了，老早以前就拜讀過，...

voidking 2019-08-21 10:39 評論0 收藏0