晚上面試螞蟻金服,前端,覺得大廠問的問題就是不一樣,有縱向有橫向,針對下列幾個問題,我面試時候答的不好,現在重新學習,沉思一會...
第一個問題:
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執行必須要執行器