• <nav id="cwumo"><code id="cwumo"></code></nav>
  • <menu id="cwumo"><strong id="cwumo"></strong></menu>

    騰訊web前端開發筆試題和答案

    時間:2020-12-04 17:27:03 筆試題目 我要投稿

    騰訊web前端開發筆試題和答案

       1 請實現,鼠標點擊頁面中的任意標簽,alert該標簽的名稱.(注意兼容性)

    騰訊web前端開發筆試題和答案

    1

    2

    3

    4

    5

    6

    7

    <script type="text/javascript"> 

    document.onclick=function(e){ 

         var e=(e||event); 

         var o=e["target"]||e["srcElement"]; 

         alert(o.tagName.toLowerCase()); 

    </script>

      2 請指出一下代碼的性能問題,并經行優化。

    1

    2

    3

    4

    5

    6

    7

    8

    9

    var info="騰訊拍拍網(www.paipai.com)是騰訊旗下知名電子商務網站。"; 

    info +="拍拍網于2005年9月12日上線發布,"; 

    info +="2006年3月13日宣布正式運營,"; 

    info +="是目前國內第二大電子商務平臺。"; 

    info=info.split(","); 

    for(var i=0; i<info.length; i++) 

        alert(info[i]); 

    }

      這題初看純屬折騰,因為后面要根據逗號分隔再alert每項,何不構造一個數組對象來存放文本內容,而要用個臨時變量info才存放。

      如var info=["騰訊拍拍網(www.paipai.com)是騰訊旗下知名電子商務網站。","拍拍網于2005年9月12日上線發布,","2006年3月13日宣布正式運營,","是目前國內第二大電子商務平臺。"] 。可是后來想如果是優化的話這個題目就出的沒意義了。

      仔細觀察info這個變量,發現它每次都要自加字符串,如果字符串很大的又很多的話會非常影響性能的。

      對于js中的string類型,屬于基本類型,因此一般情況下他們是存放在棧上的。如果字符串很大,info會每次變成一個很長的字符串,會很慢。

      如果用引用類型數組來存放則好很多,如:

    1

    2

    3

    4

    5

    6

    7

    8

    var temp=[]; 

    temp.push("騰訊拍拍網(www.paipai.com)是騰訊旗下知名電子商務網站。"); 

    //temp只是一個指向堆上數組的指針 

    temp.push("拍拍網于2005年9月12日上線發布,"); 

    temp.push("2006年3月13日宣布正式運營,"); 

    temp.push("是目前國內第二大電子商務平臺。"); 

    temp.join(""); 

    alert(temp);

      最后一招temp.join(“”)搞定。對處理大字符串連接問題都可以采取這種思路。

      3 請給出異步加載js方案,不少于兩種。

      異步加載方式:

      (1) defer,只支持IE

      (2) async:html5中script標簽才有的屬性

      (3) 創建script,插入到DOM中,加載完畢后callBack,見代碼:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    function loadScript(url, callback){ 

       var script = document.createElement("script") 

       script.type = "text/javascript"; 

       if (script.readyState){ //IE 

          script.onreadystatechange = function(){ 

             if (script.readyState == "loaded" || 

                script.readyState == "complete"){ 

                script.onreadystatechange = null; 

                callback(); 

             } 

          }; 

       } else { //Others: Firefox, Safari, Chrome, and Opera 

          script.onload = function(){ 

              callback(); 

          }; 

       } 

       script.src = url; 

       document.body.appendChild(script); 

    }

      4 請寫出jQuery綁定事件的方法,不少于兩種。

    1

    2

    3

    4

    5

    6

    7

    $("#obj").click(function(){}); 

      

    $("#obj").change(function(){}); 

      

    $("#obj").bind("click",function(){}); 

      

    $("#obj").live("submit",function(){});

      5 請設計一套方案,用于確保頁面中JS加載完全。

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    var n = document.createElement("script"); 

    n.type = "text/javascript"; 

    //以上省略部分代碼 

    //ie支持script的readystatechange屬性 

    if(ua.ie){ 

       n.onreadystatechange = function(){ 

           var rs = this.readyState; 

           if('loaded' === rs || 'complete'===rs){ 

               n.onreadystatechange = null; 

               f(id,url); //回調函數 

           } 

    }; 

    //省略部分代碼 

    //safari 3.x supports the load event for script nodes(DOM2) 

       n.addEventListener('load',function(){ 

           f(id,url); 

       }); 

    //firefox and opera support onload(but not dom2 in ff) handlers for 

    //script nodes. opera, but no ff, support the onload event for link 

    //nodes. 

    }else{ 

       n.onload = function(){ 

           f(id,url); 

       }; 

    }

      6 請優化某網頁的加載速度。

      7 對string對象經行擴展,使其具有刪除前后空格的.方法。

    1

    2

    3

    4

    5

    String.prototype.trim =function(){ 

      

        return this.replace(/(^\s*)|(\s*$)/g,''); 

      

    }

      8 完成一個正則表達式,驗證用戶輸入是否身份證號碼。

      var Expression=/\d{17}[\d|X]|\d{15}/;

      var objExp=new RegExp(Expression);

      一道騰訊js面試題

      題目如下:

      f = function() {return true;};

      g = function() {return false;};

      (function() {

      if (g() && [] == ![]) {

      f = function f() {return false;};

      function g() {return true;}

      }

      })();

      alert(f()); // true or false ?

      按網友的描述猜測,這應該是QQ招聘的題目,既考查了ECMAScript知識,又需要被面試者的應用實踐,題目本身無標準答案,在不同瀏覽器下表現不同。

      這是一道難度較大,并且出題角度比較刁鉆的面試題。

      正趕上最近在研究Javascript這部分的內容,便對該題目涉及的考察點進行了更深入的研究。以下給出簡單分析。

      考察點

      對作用域鏈(scope chain)、執行環境(execution context)、變量對象(variable object)的理解

      命名函數表達式,參見這里

      以上知識點在不同瀏覽器(主要為:IE和Firefox)的實現差異

      相等操作符的隱式類型轉換規則

      首先,代碼簡化為(1):

      f = function() {return true;};

      g = function() {return false;};

      (function() {

      alert(g());

      function g() {return true;}

      })();

      上面的例子中,當控制器進入匿名函數的執行環境后,初始化活動對象,函數聲明g被放到了執行環境的變量對象集合中,property為g,值為g函數對象,當執行g(),返回true。

      將上面的代碼稍加改變(2):

      f = function() {return true;};

      g = function() {return false;};

      (function() {

      alert(g());

      if (true) {

      function g() {return true;}

      }

      })();

      上面代碼,結果應該與(1)相同,但Firefox處理結果出現了不同返回false,暫且把這看作是Firefox的bug(雖然Firefox不認為這是個Bug)。

      分析:在Firefox中,出現在條件語句中的代碼塊不做活動對象初始化的處理(Firefox把它當作塊作用域??),即把上例的if (true) 修改為 if (false) 結果是一樣的。

      到此為止,已經可以確定g()執行后的值是true還是false了。

      整合一下(3):

      f = function() {return true;};

      g = function() {return false;};

      (function() {

      if (g()) {

      alert("能看到這個警告框,說明你的瀏覽器不是Firefox");

      function g() {return true;}

      }

      })();

      繼續分解代碼(4):

      f = function() {return true;};

      g = function() {return false;};

      (function() {

      f = function() {return false;};

      })();

      alert(f());

      代碼運行,無一例外的返回false,這正是我們想要的結果。

      然后稍作改變(5):

      f = function() {return true;};

      g = function() {return false;};

      (function() {

      f = function f() {return false;};

      })();

      alert(f());

      經過稍加修改后,這次掉鏈子的輪到IE了,IE竟然返回了true!!!這是IE的Bug,參見:

      http://www.cn-cuckoo.com/main/wp-contenthttps://p.9136.com/28/l/2009/12/named-function-expressions-demystified.html#named-expr

      http://www.w3help.org/zh-cn/causes/SJ9001

      至于[]==![]的結果,請參考本人《Javascript類型轉換規則》一文,回過頭來你就會輕易得出結論。

      最后大整合。

      我們不僅知道結果,而且知道為啥是這結果了(6):

      f = function() {return true;};

      g = function() {return false;};

      (function() {

      if (g() && [] == ![]) {

      f = function f() {return false;};

      function g() {return true;}

      }

      })();

      alert(f());

      沒有問題的瀏覽器會返回:false

      Firefox不會執行到if條件內部,返回:true

      IE會執行到if條件內部(但把if內部的f作為局部變量處理了),最后返回:true

    【騰訊web前端開發筆試題和答案】相關文章:

    騰訊WEB前端筆試題和面試題答案06-26

    如何面試Web前端開發12-12

    web前端開發簡歷范文08-23

    騰訊前端筆試題目01-15

    web前端開發崗位職責范文06-16

    芒果Web前端開發的面試經歷12-12

    Web前端開發個人求職簡歷11-20

    芒果Web前端開發面試經歷11-13

    Web前端開發css基礎樣式總結11-11

    web前端開發工程師簡介11-08

    日韩激情