淘寶網前端開發面試題(二)--JS 面試題

 

全部答案僅供參考，不負責答案對錯（^_^）

1.js 是什麼，js 和 html 的開發如何結合？

js是javascript的縮寫，是一種基於對象的、事件驅動的腳本語言。它一共由三個部分組成：分別是DOM，BOM，ECMAscript。
HTML 是超文本標記語言。HTML裏的每個標籤就是JS裏面的DOM節點。JS操做DOM節點就是在操做HTML的標籤。

2.怎樣添加、刪除、複製、建立和查找節點？

添加節點：appendChild()

刪除節點：removeChild()

複製節點：cloneNode()

建立元素：createElemen()

查找節點：getElementById()、getElementsByTagName()、getElementsByName()

3.怎樣使用事件？IE 和 DOM 事件模型之間存在哪些主要差異？

怎樣使用事件：

1).直接在DOM元素上綁定事件處理器

2).FF等瀏覽器遵循W3C標準來制定瀏覽器事件模型，使用addEventListener和removeEventListener兩個函數

3).IE本身的事件模型，但主要是經過attachEvent和detachEvent兩個函數來實現的。

主要差異：

DOM事件模型

使用addEventListener和removeEventListener兩個函數：

window.addEventListener(‘load’,function(){…},false);

document.body.addEventListener(‘keypress’,function{…},false);

obj.addEventListener(‘mouseover’,MV,true);

function MV(){…}

addEventListener帶有三個參數，第一個參數是事件類型，就是咱們熟知的那些事件名字去掉前面的’on’，第二個參數是處理函數，能夠直接給函數字面量或者函數名，第三個參數是boolean值，表示事件是否支持Capturing。

W3C的事件模型優勢是Bubbling和Capturing都支持，而且能夠在一個DOM元素上綁定多個事件處理器，各自並不會衝突。而且在處理函數內部，this關鍵字仍然可使用只想被綁定的DOM元素。另外function參數列表的第一個位置(無論是否顯示調用)，都永遠是event對象的引用。

至於它的缺點，很不幸的就只有在市場份額最大的IE瀏覽器下不可以使用這一點。

IE事件模型

IE本身的事件模型跟W3C的相似，但主要是經過attachEvent和detachEvent兩個函數來實現的：

window.attachEvent(‘onload’,function(){…});

document.body.attachEvent(‘onkeypress’,myKeyHandler);

能夠發現它跟W3C的區別是沒有第三個參數，並且第一個表示事件類型的參數也必須把’on’給加上。這種方式的優勢就是能綁定多個事件處理函數在同一個DOM元素上。

至於它的缺點，首先IE瀏覽器自己只支持Bubbling不支持Capturing；並且在事件處理的function內部this關鍵字也沒法使用，由於this永遠都只想window object這個全局對象。要想獲得event對象必須經過window.event方式，最後一點，在別的瀏覽器中，它顯然是沒法工做的。

最後推薦兩個必須知道的IE和W3C標準的區別用法—

1)、當咱們須要阻止瀏覽器某DOM元素的默認行爲的時候在W3C下調用e.preventDefault()，而在IE下則經過window.event.returnValue＝false來實現。

2)、當咱們要阻止事件冒泡的時候，在W3C標準裏調用e.stopPropagation()，而在IE下經過設置window.event.cancelBubble=true來實現。

4.面向對象編程:b 怎麼繼承 a？

function A{

  this.say=function{alert("javascript");}

}

function B{}

B.prototype=new A();

Var C= new B();

C.say();

5.看看下面 alert 的結果是什麼？

view sourceprint?1.function b(x, y, a) {

.arguments[2] = 10;

.alert(a);

}

b(1, 2, 3);//輸出10

 

若是凼數體改爲下面，結果又會是什麼？

a = 10;

alert(arguments[2] );//輸出10

 

6. 請編寫一個 JavaScript 凼數 parseQueryString，它的用途是把 URL 參數解析爲一個對象

var obj = parseQueryString(url);

alert(obj.key0) // 輸出 0

 

 1  function parseQueryString(url) {
 2      var pos;
 3      var obj = {};
 4      if (pos = url.indexOf("?") != -1) {
 5          var urlstring = url.substring(pos + 1, url.lenght - 1);
 6          var urlArr = urlstring.split("&");
 7          var keyValue = [];
 8          for (var i = 0; i < urlArr.lenght; i++) {
 9              keyValue = urlArr[i].split("=");
10              obj[keyValue[0]] = keyValue[1];
11          }
12      }
13      return obj;
14  }
15  var objUrl = parseQueryString(url);

 

7.ajax 是什麼?   ajax 的交互模型? 同步和異步的區別? 如何解決跨域問題?

AJAX 指異步JavaScript及XML（Asynchronous JavaScript And XML），是一種無須刷新整個頁面就能爲頁面中的某一部分加載數據的技術。

交互模式：交互模型就是Ajax在瀏覽器端引入一個執行引擎，它一邊應付user的請求，一邊把某些必須交給服務器處理的東西傳送給服務器，同時把結果準備好，展示給user的技術模式

同步：腳本會停留並等待服務器發送回覆而後再繼續

異步：腳本不停留並處理可能的回覆

解決跨域問題：

a.Web服務器上的代理文件

b.利用JSONP：在頁面中添加一個<script>元素，由該元素來從其餘服務器加載JSON數據，這種方式之因此有效是由於<script>元素的腳本沒有受到限制(目前我只接觸使用到這一種)

c.跨來源資源共享

8.什麼是閉包？下面這個 ul，如何點擊每一列的時候 alert 其 index?

<ul id=」test」>

<li>這是第一條</li><li>這是第二條</li><li>這是第三條</li> </ul>

 1 function a() {
 2      var ul = document.getElementById("test");
 3      var li = ul.getElementsByTagName("li");
 4      for (var i = 0; i < li.length; i++) {
 5          (function (_i) {
 6              li[_i].onclick = function () {
 7                  alert(_i);
 8              }
 9          })(i);
10      }
11  }

9.說說 YSlow

YSlow是由Yahoo開發者團隊發佈的一款基於Firebug的插件。而Firebug 又是一款基於FireFox的插件。因此說YSlow是一款基於FireFox插件的插件。

微軟的IE系列瀏覽器不能使用YSlow。YSlow只能使用在FireFox瀏覽器上。若是要想使用YSlow，那麼你必須先安裝FireFox而且安裝FireFox上的Firebug插件。

推薦博客：http://lusongsong.com/reed/362.html