面试 | 蚂蚁金服面试经历

晚上面试蚂蚁金服，前端，觉得大厂问的问题就是不一样，有纵向有横向，针对下列几个问题，我面试时候答的不好，现在重新学习，沉思一会...

第一个问题：

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执行必须要执行器