阿里前端二面（筆試/機試）總結

 

這一輪答的並不理想，很有可能掛掉。回來之后自己又答了一遍，沒有參考任何資料，居然全部答上了。

到底還是自己的基本功不扎實，遇見沒做過的東西，沒有調試環境就慌了，再努力提高吧。

 

一、實現jsonp，傳入URL，callback和callbackName 三個參數

 

我先說下思路，jsonp是借由script標簽發起的跨域GET請求。服務器返回的是一段js腳本，返回后可以立即執行。通過調用前端預先准備好的回調函數來獲取數據，進行下一步操作。

整個流程大概分為三個步驟：發起請求、執行服務器返回的script和垃圾回收。

需要注意的主要是服務器在調用函數的時候，我們的函數未必是暴露在全局之下的，所以要做一個指向，並在操作完成后進行清理。

var index = {

    doSomething: function() {
        console.log('ok')
    },

    jsonp: function(url, callbackName, callback) {

        var script = document.createElement('script')
        var body = document.querySelecotor('body')

        script.src = url + '?type=jsonp&callbackName=' + callbackName
        script.id = 'jsonp'
        script.onload = callback

        window[callbackName] = index.doSomething

        body.appendChild(script)
    }
}

index.jsonp('http://www.sunken.me/content', 'doSomething', function(name, script) {
    delete window[name]
    script.parentNode.removeChild(script)
})

 

 

二、實現一個計時器timer，只暴露start、stop和reset方法

 

這里考察的主要是函數作用域的概念，通過var聲明的變量是函數私有的，通過對象本身無法訪問。

function timer() {

    var second = 0
    var loop = null

    var clear = function() {

        if (loop !== null) {

            clearInterval(loop)
            loop = null
        }
    }

    this.start = function() {

        loop = setInterval(function() {

            console.log(second)
            ++second

        }, 1000)
    }

    this.stop = function() {
        
        clear()
        loop = null
    }

    this.reset = function() {

        second = 0
        clear()
    }
}

// 啟用timer
var t = new timer()
t.start()

// 關閉timer
setTimeout(function() {
    t.stop()

}, 5000)

 

 

三、當點擊頁面鏈接時，驗證鏈接是否在*.taobao.com下，如果不是彈出確認提示

 

這道題主要考察兩個步驟，一是事件的綁定、處理。另一個是字符串的驗證，這里我使用了一個偷懶的做法，因為*.taobao.com應該出現在字符串首部。要考慮http/https和有http://和無幾種情況

ES 6的String.contains() 方法也可以用來做包含驗證。

 

<a class="link" href="http://www.taobao.com">淘寶</a>
<a class="link" href="http://www.jd.com">京東</a>

<script>
    

var link = document.getElementsByClassName('link')
var listener = function(event) {

    var e = event || window.event
    var href = e.target.getAttribute('href')

    if (href.indexOf('.taobao.com') === -1) {

        var c = confirm('確定離開嗎')

        if (c === false) {

            e.preventDefault()
            e.stopPropagation()
        }
    }
}

// 綁定事件
for (var i = 0, len = link.length; i < len; i++) {

    link[i].addEventListener('click', listener, false)
}




</script>