面試 | 螞蟻金服面試經歷

晚上面試螞蟻金服，前端，覺得大廠問的問題就是不一樣，有縱向有橫向，針對下列幾個問題，我面試時候答的不好，現在重新學習，沉思一會...

第一個問題：

1、先問熟悉jq嗎？解釋一下jq的架構，

　　jq源碼的 new jQuery 中return jQuery.fn.init

　　jQuery.extend 與jq.fn.exend的區別：jQuery.extend只給jQuery構造函數的擴展，而jQuery.fn.exend，是給jQuery構造函數的原型擴展方法

2、說一下jq的事件綁定

　　on bind delegate

3、完了嗎？

　　就這些。

4、先說下事件綁定，監聽，委托的區別

        window.onload =function(){
            var btn4 = document.getElementById("btn4");
            btn4.onclick  = function(){
                console.log(1); // 不執行
            }
            btn4.onclick = function(){
                console.log(2); //執行
            }
        }

　　事件綁定：只執行第二個事件 

        window.onload =function(){
            var btn4 = document.getElementById("btn4");
            btn4.addEventListener("click",hello1)
            btn4.addEventListener("click",hello2)
        }
            function hello1(){
             alert("hello 1");
            }
            function hello2(){
             alert("hello 2");
            }

　　監聽事件：兩次事件都執行

        window.onload = function(){
            var li = document.getElementsByTagName("li");
            var body = document.getElementById("body");
            for(var i = 0;i<li.length;i++){
                (function(i){
                    li[i].onclick=function(){
                        console.log(this.innerHTML);
                    }
                })(i)
            }
            var newLi = document.createElement("li");
            newLi.innerHTML = "4";
            body.appendChild(newLi);
        }

　　事件綁定：傳統事件無法就添加的元素加事件

        window.onload=function(){
            var body = document.getElementById("body");
            var li = document.getElementsByTagName("li");
            document.addEventListener("click",function(event){
                event = event || window.event;
                var target = event.target || event.srcElement;
                // console.log(target);
                for(var i=0;i<li.length;i++){
                    (function(i){
                    if(target == li[i]){
                    console.log(target.innerHTML);
                    }
                    })(i)
                }
            })
            var newLi = document.createElement("li");
            newLi.innerHTML = "4";
            body.appendChild(newLi);
        } 

　　　　事件委托：事件委托可以給新添加的元素加事件

　　　　事件委托的含原理：事件執行，事件冒泡，把事件加到父元素或根元素上面去，誰觸發執行誰的效果，document觸發執行ducument觸發的結果，li觸發執行li觸發的結果

5、說下jquery on和bind的區別

　　bind 和on都支持綁定多個事件，但是bind不支持事件委托，也就是無發在新增加的元素中綁定同一事件，而on可以事件委托，

    $(document).ready(function(){
            $("li").bind( "click",function(){
                console.log(this.innerHTML);
            })
            var li = document.createElement("li");
            li.innerHTML = "4";
            $("body").append(li);
})

　　　　用bind綁定事件，無法事件委托，新產生的標簽無法綁定click事件

    $(document).ready(function(){
            $("body").on("click","li",function(){
                console.log(this.innerHTML);
            })
            var li = document.createElement("li");
            li.innerHTML = "4";
            $("body").append(li);
})

　　　用on綁定事件，可以事件委托，新產生的標簽可以綁定click事件

        $(document).ready(function(){
            $("body").delegate("li","click",function(){
                console.log(this.innerHTML);
            })
            var li = document.createElement("li");
            li.innerHTML = "4";
            $("body").append(li);
        })

　　用delegate綁定事件，則也可以事件委托，但與on傳入的第一、二個參數相反

        $(document).ready(function(){
            $(".clickme").bind("click1", function (event, message1, message2) {
              alert(message1 + ' ' + message2);
            }).trigger("click1", ["Hello","World!"]);
        })

trigger，可指定綁定參數的形參的值，前提是綁定事件名與trigger的事件名一致

第二個問題：

1、js異步操作有哪些

　　回調函數

　　監聽事件

　　定時器

　　ajax

　　Promise 

　　generator （下來查資料才知道的）

　　async/await（下來查資料才知道的）

2、分別解釋一下

　　回調函數：執行一個函數時，在函數內部處理操作，把操作結果以參數形式傳入回調函數中。

　　監聽事件：js操作dom就是事件機制，可以異步操作，addEventListener("click",function(){},false)

　　定時器：這個問題我給我自己挖了一個坑

　　ajax：典型的異步操作

　　Promise：ES6出的異步操作

　　generator：調用generator就是調用generator內部的指針，調用generator的next就是讓指針移動，可暫停恢復執行，函數體內部數據交換，錯誤處理，但generaor執行必須要執行器