阿里前端二面（笔试/机试）总结

 

这一轮答的并不理想，很有可能挂掉。回来之后自己又答了一遍，没有参考任何资料，居然全部答上了。

到底还是自己的基本功不扎实，遇见没做过的东西，没有调试环境就慌了，再努力提高吧。

 

一、实现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>