生活随笔
收集整理的這篇文章主要介紹了
前端面试题（五）
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
1、absolute生成絕對定位的元素，相對于值不為 static的第一個父元素進(jìn)行定位。
2、fixed （老IE不支持）生成絕對定位的元素，相對于瀏覽器窗口進(jìn)行定位。
3、relative生成相對定位的元素，相對于其正常位置進(jìn)行定位。
4、static默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中。
5、inherit規(guī)定從父元素繼承 position 屬性的值。
6、sticky粘性定位，該定位基于用戶滾動的位置。它的行為就像 position:relative; 而當(dāng)頁面滾動超出目標(biāo)區(qū)域時，它的表現(xiàn)就像 position:fixed;，它會固定在目標(biāo)位置。 在Javascript中this總是指向調(diào)用它所在方法的對象。因為this是在函數(shù)運行時，自動生成的一個內(nèi)部對象，只能在函數(shù)內(nèi)部使用。
1
、對于全局的方法調(diào)用，this指向的是全局對象window,即調(diào)用方法所在的對象。
2
、通過對象定義的函數(shù)的this指向該實例化對象
3
、構(gòu)造函數(shù)內(nèi)部定義的函數(shù)中，this指向該構(gòu)造函數(shù)：
4、箭頭函數(shù)中this的指向與外層函數(shù)的this指向一致：
HTTP報文就是瀏覽器和服務(wù)器間通信時發(fā)送及響應(yīng)的數(shù)據(jù)塊。
瀏覽器向服務(wù)器請求數(shù)據(jù)，發(fā)送請求(request)報文；服務(wù)器向瀏覽器返回數(shù)據(jù)，返回響應(yīng)(response)報文。
報文信息主要分為兩部分
1.包含屬性的首部(header)--------------------------
附加信息（cookie，緩存信息等）與緩存相關(guān)的規(guī)則信息，均包含在header中
2.包含數(shù)據(jù)的主體部分(body)-----------------------HTTP請求真正想要傳輸?shù)牟糠?
- http緩存機制有哪些？緩存機制的執(zhí)行過程是什么？
HTTP緩存有多種規(guī)則，根據(jù)是否需要重新向服務(wù)器發(fā)起請求來分類，將其分為兩大類(強制緩存，對比緩存（協(xié)商緩存）)
對于強制緩存，服務(wù)器通知瀏覽器一個緩存時間，在緩存時間內(nèi)，下次請求，直接用緩存，不在時間內(nèi)，執(zhí)行比較緩存策略。
對于比較緩存，將緩存信息中的Etag和Last-Modified通過請求發(fā)送給服務(wù)器，由服務(wù)器校驗，返回304狀態(tài)碼時，瀏覽器直接使用緩存。
瀏覽器第一次緩存：
瀏覽器再次請求：
方法一：
div {
position:
absolute;
/* 相對定位或絕對定位均可 */width:
500px;
height:
300px;
top:
50%;
left:
50%;
transform:
translate(-50%, -50%);
background-color:
pink;
/* 方便看效果 */}
方法二：
div {
position:
relative;
/* 相對定位或絕對定位均可 */width:
500px;
height:
300px;
top:
50%;
left:
50%;
margin:
-150px 0 0 -250px;
/* 外邊距為自身寬高的一半 */background-color:
pink;
/* 方便看效果 */}
方法三：
.container {
display:
flex;
align-items:
center;
/* 垂直居中 */justify-content:
center;
/* 水平居中 */}
.container div {
width:
100px;
height:
100px;
background-color:
pink;
/* 方便看效果 */}
1、server通過HTTP Response中的"Set-Cookie: header"
把cookie發(fā)送給client
2
、client把cookie通過HTTP Request 中的“Cookie: header”發(fā)送給server
3、每次HTTP請求，Cookie都會被發(fā)送。
-
JavaScript實現(xiàn)發(fā)布訂閱模式
function Public() {this.handlers =
{};
}
Public.prototype =
{// 訂閱事件on:
function(eventType, handler){var self =
this;if(!(eventType
in self.handlers)) {self.handlers[eventType] =
[];}self.handlers[eventType].push(handler);return this;},// 觸發(fā)事件(發(fā)布事件)emit:
function(eventType){var self =
this;var handlerArgs = Array.prototype.slice.call(arguments,1
);for(
var i = 0; i < self.handlers[eventType].length; i++
) {self.handlers[eventType][i].apply(self,handlerArgs);}return self;},// 刪除訂閱事件off:
function(eventType, handler){var currentEvent =
this.handlers[eventType];var len = 0
;if (currentEvent) {len =
currentEvent.length;for (
var i = len - 1; i >= 0; i--
){if (currentEvent[i] ===
handler){currentEvent.splice(i, 1
);}}}return this;}
};var Publisher =
new Public();//訂閱事件a
Publisher.on('a',
function(data){console.log(1 +
data);
});
Publisher.on('a',
function(data){console.log(2 +
data);
});//觸發(fā)事件a
Publisher.emit('a', '我是第1次調(diào)用的參數(shù)'
);Publisher.emit('a', '我是第2次調(diào)用的參數(shù)');
- Ajax 是什么? 如何創(chuàng)建一個Ajax？（ajax的執(zhí)行流程）
ajax：異步傳輸+js+
xml。所謂異步，在這里簡單地解釋就是：向服務(wù)器發(fā)送請求的時候，我們不必等待結(jié)果，而是可以同時做其他的事情，等到有了結(jié)果它自己會根據(jù)設(shè)定進(jìn)行后續(xù)操作，與此同時，頁面是不會發(fā)生整頁刷新的，提高了用戶體驗。(1
)創(chuàng)建XMLHttpRequest對象,也就是創(chuàng)建一個異步調(diào)用對象(2
)創(chuàng)建一個新的HTTP請求,并指定該HTTP請求的方法、URL及驗證信息(3
)設(shè)置響應(yīng)HTTP請求狀態(tài)變化的函數(shù)(4
)發(fā)送HTTP請求(5
)獲取異步調(diào)用返回的數(shù)據(jù)(6)使用JavaScript和DOM實現(xiàn)局部刷新
?
轉(zhuǎn)載于:https://www.cnblogs.com/strong-FE/p/10940538.html
總結(jié)
以上是生活随笔為你收集整理的前端面试题（五）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
