【長坑慎入】2014阿里前端線上筆試題解答-2

No.9

題目：

實現如下圖所示的佈局，要求：

1. sidebar 固定寬度200px，content和header寬度自適應；
2. 當window寬度小於600px時，變成三行佈局。

預設如下

寬度小於600px時如下

下面是html結構：

<div class='header'>
    <h1>header</h1>
</div>
<div class="sidebar>
    <h1">sidebar"</h1>
</div>
<div class="content">
    <h1>content</h1>
</div>

請寫出其css程式碼：（提示，可以使用media query來檢測瀏覽器視窗寬度）

解答：

這裡涉及到CSS的media query檢測，這裡有篇文章詳細介紹了其中的引數型別，而這篇文章則饒有性質的探討了不同裝置下應該如何編寫media query，有興趣的讀者可以詳細看一下。針對這個題來說，只要用到 screen and (min-width) 即可。程式碼如下：

h1 {
    margin: 0;
}
section div{
    height: 100px;
}
section div:nth-of-type(n+2) {
    margin-top: 20px;
}
.header {
    background-color: red;
}
.sidebar {
    background-color: green;
}
.content {
    background-color: blue;
}

@media screen and (min-width: 600px) {
    .sidebar {
        width: 200px;
        position: absolute;
    }
    .content {
        margin-left: 220px;
    }
}

這裡還需要注意一個問題：sidebar的寬度固定，而content填充剩餘的全部。針對這種一邊固定而一邊液態的情況，最好的解決辦法就是將固定的部分浮動出來，然後將液態的部分使用margin來填充固態部分浮動而產生的空隙。這裡使用了絕對定位，以滿足題目中的要求。

No.10

題目：

寫一段指令碼，實現：當頁面上任意一個連結被點選的時候，alert出這個連結在頁面上的順序號，如第一個連結則alert(1), 依次類推。

解答：

起初做這個題目的時候簡單的認為所有連結應該指的就是 <a> ，所以很快寫出了程式碼如下：

var body = document.getElementsByTagName("body")[0]
,   links = document.getElementsByTagName("a")
,   len = links.length
,   foo = function(e){
    if (e.target.tagName.toLowerCase() !== 'a') //注意這裡的tagName是大寫
        return
    for (var i = 0; i < len; i++) {
        if (links[i] === e.target) 
            alert(i + 1)
    }
}

body.addEventListener('click', foo, false)

但是後來看到網上有一個本題的解答：最英俊的程式設計師 阿里巴巴2013年校園招聘前端工程師筆試題詳解，解答中使用了 document.links 的方法，查了一下發現這個陣列返回的是所有有 href 的和標籤，才知道連結不止有一種，那麼可以把程式碼改成如下的樣式：

var body = document.getElementsByTagName("body")[0]
,   links = document.getElementsByTagName("a")
,   len = links.length
,   foo = function(e){
    var tagName = e.target.tagName.toLowerCase()
    if ((tagName === 'a' || tagName === 'area') && e.target.href) {
        for (var i = 0; i < len; i++)
            if (links[i] === e.target) {
                alert(i + 1)
            }
    }
}

body.addEventListener('click', foo, false)

當然也可以採用網上最英俊的程式設計師的解答，在頁面中每一個連結都繫結事件監聽，只不過這樣顯得有些效率不高，特別是在頁面連結過多的情況下。個人認為相同效果的事件監聽還是在父級元素上繫結為好，要不就可惜了JS冒泡的監聽機制啊。

No.14

題目：

(new Date).getTime() 和 +new Date() 都可以取到當前時間戳，它們的實現原理是什麼，哪個效率更高？

解答：

這個題目挺有趣，起初我認為應該是第二個寫法的效率更高……因為寫起來更容易，但是經過實際的檢驗我意識到了我的錯誤，第一種寫法所耗的時間基本上只有第二種寫法的一半。後來查閱了MDN：Date.getTime 發現這個函式本身實際上等價於 valueOf ，那麼結論也呼之欲出了。因為第一種方法實際上直接呼叫了 valueOf ，而第二種方法涉及到JS內部的型別轉換（可以參見我的這篇文章：【WEB前端】百度前端面試經歷小研究1——JavaScript 型別轉換），儘管最終的結果也是呼叫了 valueOf 函式，但是畢竟有個轉換的過程，所以效率理應比前者要來的低下吧。

No.16

題目：

請寫一個 getParents 方法讓它可以獲取某一個 DOM 元素的所有父親節點。

解答：

第一反應就是想到jQuery裡面的 getParents() ，自己想了一下JS中可以獲取 parentNode ，所以應該迴圈獲取就可以了。解答如下：

function getParents(ele) {
    var matched = []
    // 防止獲取 document
    while ( (ele = ele.parentNode) && ele.nodeType !== 9) {
        matched.push(ele)
    }
    return matched
} 

No.20

題目：

有一個陣列，其中儲存的都是小寫英文字串，現在要把它按照除了第一個字母外的字元的字典順序(字典順序就是按首字母從a-z順序排列，如果首字母相同則按第二個字母……)排序，請編寫程式碼

例：["abd","cba","ba",]，排序後["ba","cba","abd"]

解答：

這個題目是專門凸顯JS函數語言程式設計特點的題目，結果原作者居然用C語言解答了……捂臉。這裡給出JS的寫法，十分簡潔明瞭。

var bySecLetter = function(x, y) {
    if (typeof x === 'string' && typeof y === 'string') {
        var a = x.slice(1)
        ,   b = y.slice(1)
        if (a > b) return 1
        else if (a < b) return -1
    }
    return 0
}

var a = ["abd","cba","ba"]
a.sort(bySecLetter)

這裡只需要呼叫sort的比較函式，大於返回正數，小於返回負數，等於返回0即可。而作為字串，本身的比較順序就是字典順序，所以只需要擷取從第二個字元開始的字串進行比較，就可以得出比較結果。更多關於sort函式的資訊可以參見MDN的連結。