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

 

這一輪答的並不理想，頗有可能掛掉。回來以後本身又答了一遍，沒有參考任何資料，竟然所有答上了。

到底仍是本身的基本功不紮實，碰見沒作過的東西，沒有調試環境就慌了，再努力提升吧。

 

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

 

我先說下思路，jsonp是藉由script標籤發起的跨域GET請求。服務器返回的是一段js腳本，返回後能夠當即執行。經過調用前端預先準備好的回調函數來獲取數據，進行下一步操做。

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

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

 1 var index = {
 2 
 3     doSomething: function() {
 4         console.log('ok')
 5     },
 6 
 7     jsonp: function(url, callbackName, callback) {
 8 
 9         var script = document.createElement('script')
10         var body = document.querySelecotor('body')
11 
12         script.src = url + '?type=jsonp&callbackName=' + callbackName
13         script.id = 'jsonp'
14         script.onload = callback
15 
16         window[callbackName] = index.doSomething
17 
18         body.appendChild(script)
19     }
20 }
21 
22 index.jsonp('http://www.sunken.me/content', 'doSomething', function(name, script) {
23     delete window[name]
24     script.parentNode.removeChild(script)
25 })

 

 

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

 

這裏考察的主要是函數做用域的概念，經過var聲明的變量是函數私有的，經過對象自己沒法訪問。

 1 function timer() {
 2 
 3     var second = 0
 4     var loop = null
 5 
 6     var clear = function() {
 7 
 8         if (loop !== null) {
 9 
10             clearInterval(loop)
11             loop = null
12         }
13     }
14 
15     this.start = function() {
16 
17         loop = setInterval(function() {
18 
19             console.log(second)
20             ++second
21 
22         }, 1000)
23     }
24 
25     this.stop = function() {
26         
27         clear()
28         loop = null
29     }
30 
31     this.reset = function() {
32 
33         second = 0
34         clear()
35     }
36 }
37 
38 // 啓用timer
39 var t = new timer()
40 t.start()
41 
42 // 關閉timer
43 setTimeout(function() {
44     t.stop()
45 
46 }, 5000)

 

 

3、當點擊頁面連接時，驗證連接是否在*.taobao.com下，若是不是彈出確認提示

 

這道題主要考察兩個步驟，一是事件的綁定、處理。另外一個是字符串的驗證，這裏我使用了一個偷懶的作法，由於*.taobao.com應該出如今字符串首部。要考慮http/https和有http://和無幾種狀況

ES 6的String.contains() 方法也能夠用來作包含驗證。

 

 1 <a class="link" href="http://www.taobao.com">淘寶</a>
 2 <a class="link" href="http://www.jd.com">京東</a>
 3 
 4 <script>
 5     
 6 
 7 var link = document.getElementsByClassName('link')
 8 var listener = function(event) {
 9 
10     var e = event || window.event
11     var href = e.target.getAttribute('href')
12 
13     if (href.indexOf('.taobao.com') === -1) {
14 
15         var c = confirm('肯定離開嗎')
16 
17         if (c === false) {
18 
19             e.preventDefault()
20             e.stopPropagation()
21         }
22     }
23 }
24 
25 // 綁定事件
26 for (var i = 0, len = link.length; i < len; i++) {
27 
28     link[i].addEventListener('click', listener, false)
29 }
30 
31 
32 
33 
34 </script>