【web前端面試題整理02】前端面試題第二彈襲來，接招！

本文轉載自查看原文 2013-06-24 17:52 9352 面試題

前言

今天本來准備先了解下node.js的，但是，看看我們一個小時前與一個小時后的差距：

既然如此，我們繼續來搜集我們的前端面試題大業吧！！！

特別感謝玉面小肥魚提供喲，@玉面小飛魚

題目一覽

JavaScript編程題
1、實現輸出document對象中所有成員的名稱和類型；
2、如何獲得一個DOM元素的絕對位置？（獲得元素位置，不依賴框架）
3、如何利用JS生成一個table？
4、實現預加載一張圖片，加載完成后顯示在網頁中並設定其高度為50px，寬度為50px；
5、假設有一個4行td的table，將table里面td順序顛倒；
6、模擬一個HashTable類，包含有add、remove、contains、length方法；
7、Ajax讀取一個XML文檔並進行解析的實例；
8、JS如何實現面向對象和繼承機制？
9、JS模塊的封裝方法，比如怎樣實現私有變量，不能直接賦值，只能通過公有方法；
10、對閉包的理解，閉包的好處和壞處？
11、對this指針的理解，可以列舉幾種使用情況？
12、對JS中函數綁定的理解？函數綁定可以使用哪兩個函數？
13、jQuery的特點？
14、簡述Ajax的異步機制。Ajax有哪些好處和弊端？

尼瑪題還不少啊，公司一次性問完是要逆天嗎？？？我們來一道一道做下吧，反正不吃虧！

第一題，document所有成員名稱與屬性

1、實現輸出document對象中所有成員的名稱和類型；

拿到這道題，我們來看看他是想考察神馬呢？

PS：我弱弱的差點認為他考察的就是一個for in，我害怕的試了一下：

於是我發現他是一個對象，難道真的for in就完了？

1 for (var k in document) {
2     var v = document[k];
3     alert(v + ':' + typeof (v));
4 }

最后證明確實如此。。。怎么會這么簡單呢？

思考

其實我猜面試官可能會在此上做一點文章，考察面試者對for in細節的認識，因為我們的原型鏈問題，我們會遍歷一個對象的所有屬性包括原型的一直到達object，而這顯然不是我們想要的，所以此點各位可以拿來說下。

第二題，獲取元素位置

2、如何獲得一個DOM元素的絕對位置？（獲得元素位置，不依賴框架）

這道題根本就是送分的（不能編碼、不能設置斷點情況我直接悲劇！），直接上斷點：

所有信息一目了然，代碼都省了，但是萬一有坑怎么辦，所以測試下IE吧：

看我們混雜模式也是這個樣子，所以這個題是沒有問題的，我們直接獲取其屬性即可。

第三題，生成table

3、如何利用JS生成一個table？

這道題是基本的dom操作，我這邊直接略去了。。。。

第四題，圖片加載問題

實現預加載一張圖片，加載完成后顯示在網頁中並設定其高度為50px，寬度為50px；

這道題感覺有點意思，首先是預加載，然后是加載完畢后設置高度與寬度，那么什么是預加載呢？

顧名思義，WEB中的預加載就是在網頁全部加載之前，對一些主要內容進行加載，以提供給用戶更好的體驗，減少等待的時間。
否則，如果一個頁面的內容過於龐大，沒有使用預加載技術的頁面就會長時間的展現為一片空白，直到所有內容加載完畢。
圖片的預加載技術使用較為廣泛，一般的效果是網頁中的圖片由模糊變得清晰。

在說一個比較齪的問題，比如我們要讓一張圖片居中顯示我們該怎樣干？我們必須知道其尺寸才行，不然該功能是無法實現的。

圖片的高寬必須要其加載結束時候才能獲取，於是我們這里來做一個實驗，先來張本地圖片吧：

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3     <title></title>
 4 </head>
 5 <body>
 6     <img src="1.png" id="img" />
 7     <script type="text/javascript">
 8         var img = document.getElementById('img');
 9         var s = '';
10     
11     </script>
12 </body>
13 </html>

這張圖片在本地，他加載速度是非常快的，所以我們這里問題不大，我們現在換成網絡文件吧：

http://t1.baidu.com/it/u=3208399380,3492442390&fm=21&gp=0.jpg

這張圖片很大滴喲，我們來試試：

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3     <title></title>
 4 </head>
 5 <body>
 6     <img src="http://t1.baidu.com/it/u=3208399380,3492442390&fm=21&gp=0.jpg" id="img" />
 7     <script type="text/javascript">
 8         var img = document.getElementById('img');
 9         var s = '';
10     
11     </script>
12 </body>
13 </html>

各位請看，我們這里神馬都米有了！！！這個原因大家應該比較清楚了：

頁面開始形成dom根據dom與css形成渲染樹，這個過程結束后才會加載圖片，所以我們這里獲取不到圖片信息很正常的。

一種簡單的做法：

 1 var imgLoad = function (url, callback) {
 2     var img = new Image();
 3     img.src = url;
 4     if (img.complete) {
 5         callback(img.width, img.height);
 6     } else {
 7         img.onload = function () {
 8             callback(img.width, img.height);
 9             img.onload = null;
10         };
11     };
12 };
13 imgLoad('http://t1.baidu.com/it/u=3208399380,3492442390&fm=21&gp=0.jpg');

這是一種比較常見的做法，便是等圖片完全加載后再顯示。

但是根據這個文章：http://www.planeart.cn/?p=1121

我們看到作者有不一樣的做法，而且這里是值得我們思考與學習的：

以上需要圖片加載結束才會顯示，他認為其速度慢了一點，其認為瀏覽器獲取了圖片的頭部信息，然后寫了一個js時鍾來做這件事情，其詳細實現我們這里就不去管它了，因為我對使用時鍾是不太贊成的，但是作者的思路還是值得學習。

現在再回國頭來看看我們這道題，我們在callback中實現代碼就可以完成這道題了，但是我這里想再看看，因為原作者說在圖片完全加載完便獲取了圖片的高度與寬度，而且其實驗也證明了這點，於是我們一起來看看圖片加載流程吧。

圖片加載流程

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3     <title></title>
 4 </head>
 5 <body>
 6     <img src="http://c-photo.i-part.com.tw/n1v1/4/1/9/0/780914/photo/book20/12760996629047.jpg" id="img" />
 7     <script type="text/javascript">
 8         var img = document.getElementById('img');
 9         setInterval(function () {
10             var s = '';
11         }, 100);
12     </script>
13 </body>
14 </html>

經過測試，圖片的尺寸確實會先出來，若是不使用定時器，我暫時也想不到辦法。。。

於是，此題暫時如此吧，這里還是貼出原作者的代碼吧，確實不錯了：

 1 // 更新：
 2 // 05.27: 1、保證回調執行順序：error > ready > load；2、回調函數this指向img本身
 3 // 04-02: 1、增加圖片完全加載后的回調 2、提高性能
 4 
 5 /**
 6  * 圖片頭數據加載就緒事件 - 更快獲取圖片尺寸
 7  * @version    2011.05.27
 8  * @author    TangBin
 9  * @see        http://www.planeart.cn/?p=1121
10  * @param    {String}    圖片路徑
11  * @param    {Function}    尺寸就緒
12  * @param    {Function}    加載完畢 (可選)
13  * @param    {Function}    加載錯誤 (可選)
14  * @example imgReady('http://www.google.com.hk/intl/zh-CN/images/logo_cn.png', function () {
15         alert('size ready: width=' + this.width + '; height=' + this.height);
16     });
17  */
18 var imgReady = (function () {
19     var list = [], intervalId = null,
20 
21     // 用來執行隊列
22     tick = function () {
23         var i = 0;
24         for (; i < list.length; i++) {
25             list[i].end ? list.splice(i--, 1) : list[i]();
26         };
27         !list.length && stop();
28     },
29 
30     // 停止所有定時器隊列
31     stop = function () {
32         clearInterval(intervalId);
33         intervalId = null;
34     };
35 
36     return function (url, ready, load, error) {
37         var onready, width, height, newWidth, newHeight,
38             img = new Image();
39         
40         img.src = url;
41 
42         // 如果圖片被緩存，則直接返回緩存數據
43         if (img.complete) {
44             ready.call(img);
45             load && load.call(img);
46             return;
47         };
48         
49         width = img.width;
50         height = img.height;
51         
52         // 加載錯誤后的事件
53         img.onerror = function () {
54             error && error.call(img);
55             onready.end = true;
56             img = img.onload = img.onerror = null;
57         };
58         
59         // 圖片尺寸就緒
60         onready = function () {
61             newWidth = img.width;
62             newHeight = img.height;
63             if (newWidth !== width || newHeight !== height ||
64                 // 如果圖片已經在其他地方加載可使用面積檢測
65                 newWidth * newHeight > 1024
66             ) {
67                 ready.call(img);
68                 onready.end = true;
69             };
70         };
71         onready();
72         
73         // 完全加載完畢的事件
74         img.onload = function () {
75             // onload在定時器時間差范圍內可能比onready快
76             // 這里進行檢查並保證onready優先執行
77             !onready.end && onready();
78         
79             load && load.call(img);
80             
81             // IE gif動畫會循環執行onload，置空onload即可
82             img = img.onload = img.onerror = null;
83         };
84 
85         // 加入隊列中定期執行
86         if (!onready.end) {
87             list.push(onready);
88             // 無論何時只允許出現一個定時器，減少瀏覽器性能損耗
89             if (intervalId === null) intervalId = setInterval(tick, 40);
90         };
91     };
92 })();

View Code

第五題，td順序顛倒

5、假設有一個4行td的table，將table里面td順序顛倒；

這道題又屬於那種不使用jquery比較煩的。。。我們這里獲取td的dom直接向td.parent appendChild即可，但是操作時候需要注意一點兼容性問題。

第六題，模擬HashTable

因為javascript里面的對象字面量就是hashtable，他這么一說反而讓我不知道怎么干了，於是上代碼吧：

 1 var HashTable = function () {
 2     this.data = {};
 3 };
 4 HashTable.prototype.add = function (k, v) {
 5     this.data[k] = v; //不存在便賦值，存在便更新，判斷條件都給省了。。。
 6 };
 7 HashTable.prototype.remove = function (k) {
 8     if (this.data[k]) delete this.data[k];
 9 };
10 HashTable.prototype.contains = function (v) {
11     var exist = false;
12     for (var k in this.data) {
13         if (v == this.data[k]) {
14             exist = true;
15             break;
16         }
17     }
18     return exist;
19 };
20 HashTable.prototype.length = function () {
21     var len = 0;
22     for (var k in this.data) {
23         len++;
24     }
25     return len;
26 };
27 var hs = new HashTable();
28 
29 hs.add('葉小釵', '葉小釵');
30 hs.add('一頁書', '一頁書');
31 hs.add('素還真', '素還真');
32 var c = hs.contains('葉小釵');
33 hs.remove('葉小釵');
34 var d = hs.contains('葉小釵');
35 var a = hs.length();
36 
37 var s = '';