關於前端面試的一些知識點2
上一篇主要寫了一些基礎的知識但面試中常被問到的點，這一篇來點概念性的東西。本篇內容是我邊看JavaScript高階程式設計邊寫的，大家可以去看一下，不過那本書可比我這篇文章長的多，也可先看我的文章。最後祝大家前程似錦
1.HTML CSS JS的一些基礎概念
1.1 瞭解BOM
ECMAScript是JavaScript的核心，但如果要在Web中使用JavaScript，那麼BOM則無疑是真正的核心 ——《JavaScript高階程式設計》 而BOM的核心物件是window,還有loaction,navigator,screen,history. 其中window物件的重要性不言而喻,屬性太多我就不寫了。 loaction物件，我想類似下面的這種跳轉應該經常用吧，還有其他的一些屬性可以自行了解
location.href = "https://blog.csdn.net/weixin_43264048";
navigator物件,這個東西用的最多的就是使用者代理檢測了，常見的場景應該就是檢測使用者的終端是PC還是手機了
function browserRedirect(){ var UserAgent = navigator.userAgent.toLowerCase(); var bIsIpad = UserAgent.match(/ipad/i) == 'ipad'; var bIsIphone = UserAgent.match(/iphone os/i) == 'iphone os'; var bIsMidp = UserAgent.match(/midp/i) == 'midp'; var bIsUc7 = UserAgent.match(/rv:1.2.3.4/i) == 'rv:1.2.3.4'; var bIsUc = UserAgent.match(/ucweb/i) == 'web'; var bIsCE = UserAgent.match(/windows ce/i) == 'windows ce'; var bIsWM = UserAgent.match(/windows mobile/i) == 'windows mobile'; var bIsAndroid = UserAgent.match(/android/i) == 'android'; if(bIsIpad || bIsIphone || bIsMidp || bIsUc7 || bIsUc || bIsCE || bIsWM || bIsAndroid ){ return false; } return true; }
Screen物件，這個東西實際程式設計的時候基本沒用過，書中也是這麼說的,就不介紹了。 history物件，這個東西儲存著使用者上網的記錄，但是獲取不了訪問的URL。下面是一個基本的使用
history.back(); //後退一頁
history.forward(); 前進一頁
1.2 事件
1.事件冒泡 指的是事件由最具體的元素接收，逐級向上傳播。
<body onclick="fn()">
<button id="div">123</button>
</body>
<script> document.getElementById("div").onclick = function(e){ // e.stopPropagation(); //可以阻止冒泡 alert(1); } function fn(){ alert("我冒泡到body了"); } </script>
2.事件捕獲和事件冒泡 看如下程式碼
<body>
<button id="div">123</button>
</body>
var a = document.getElementById("div");
var b = document.getElementsByTagName("body")[0];
a.addEventListener("click",function(){
alert(1);
},false);
b.addEventListener("click",function(){
alert(2); //先彈出
},true);
var a = document.getElementById("div");
var b = document.getElementsByTagName("body")[0];
a.addEventListener("click",function(){
alert(1);
},false);
b.addEventListener("click",function(){
alert(2); //後彈出
},false);
兩段程式碼就是修改了第二個addEventListener中的布林值。 JavaScript高階程式設計對這個布林值的解釋是true則函式在捕獲階段呼叫,false則函式在冒泡階段呼叫 3.load事件 Javascript中最常用的一個事件就是load,當頁面完全載入後(包括所有影象,JavaScript檔案,CSS檔案等外部資源)就會觸發window上面的load事件
window.onload = function(){}
你用JQ的時候是不是經常這麼寫
$(function(){})
那麼兩者有什麼區別呢？不知道趕緊搜一下。
Image中load事件的用法
<img src="byf.jpg" onload="fn()"/>
function fn(){
alert("img已經載入好了");
}
假設你的web小遊戲中有個背景圖片，遊戲人物也是個圖片，那麼現在你應該知道遊戲開始的邏輯應該要怎麼寫了。load還可以作為動態載入Img圖片的回撥函式，以及動態載入JS檔案的回撥函式。 4.移動端touch事件 touchstart:當手指觸控式螢幕幕時觸發；即使已經有一個手指放在螢幕上也會觸發 touchmove:當手指在螢幕上滑動時連續觸發。在這個事件發生的期間，呼叫preventDefault()可以阻止滾動 touchend:當手指從螢幕上移開時觸發 click:最後觸發 JavaScript中說click比touchend先觸發，我測試的是click最後觸發。不當之處請指出。 記得我在用VUE搭我的個人網站的時候手指滑動寫一個快速切換頁面的效果，下面是程式碼
touchstart:function(ev){
this.changepage = false; //讓變數變為false
if(ev.touches.length == 1) { //tounches類陣列，等於1時表示此時有隻有一隻手指在觸控式螢幕幕
this.startX = ev.touches[0].clientX; // 記錄開始位置
}
},
touchMove:function(ev) {
ev = ev || event;
if(ev.touches.length == 1) {
this.moveX = ev.touches[0].clientX; //滑動時距離瀏覽器左側的距離
this.disX = this.moveX-this.startX; //實時的滑動的距離-起始位置=實時移動的位置
if(this.disX>65 || this.disX<-65){ //滑動的距離，距離太小會導致摸一下就切換頁面
this.changepage = true; //定義的變數判斷是否切換頁面
ev.preventDefault();
}
}
},
touchend:function(ev){
if(this.changepage){
ev = ev || event;
ev.preventDefault();
if(this.disX>65) {
this.delPage();
}else if(this.disX<-65){
this.addPage();
}
}
}
這裡面有幾個細節，因為我要實現滑動切換頁面的效果，所以我的事件是繫結在body中的，如果你在touchstart裡面寫了ev.preventDefault()這個東西，那麼頁面上所有的click事件失效。如果你在touchMove或touchend中不判斷就寫ev.preventDefault,那麼抱歉你的頁面滾動條失效。當然這個方法還有一個BUG，如果你切換頁面切換的非常快會報一個Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.的錯誤。原因是我的切換頁面時會有一個動畫，切換時會有滾動條，這個時候你又去切換頁面觸發ev.preventDefault()事件就會報錯。用一個截流函式就可以搞定，後面會寫哦。 5.事件委託 利用事件冒泡，將子元素的事件繫結在父元素上面。 本章就寫到這裡了，又回顧了一遍JavaScript高程看得頭有點暈，真的有點厚。歡迎大家留言交流