今天一位兄弟去面試嘛，大概就問(wèn)到兩道題目。然后他平時(shí)也不怎么喜歡深究基礎(chǔ)的，我在這里呢？就重點(diǎn)來(lái)講一下這兩道題目該怎么作答。
一、 Array.prototype.slice.call(arguments)
Array.prototype.slice.call(arguments)能將具有l(wèi)ength屬性的對(duì)象轉(zhuǎn)成數(shù)組。如下所示：
{
let a={length:2,0:'a',1:'b'};
Array.prototype.slice.call(a);// ["a", "b"]
let a={length:3};
Array.prototype.slice.call(a);// [undefined, undefined,undefined]
}
其實(shí)熟悉小紅書(shū)的人，應(yīng)該都知道這個(gè)原理，我在這里呢？推薦大家好像去深究一下小紅書(shū)。
關(guān)于里面的方法首先call呢？ 我前面一篇文章談一談我如何使用call、apply、bind里面有詳細(xì)的講到call的使用方法。
然后就是slice:slice有兩個(gè)用法，一個(gè)是String.slice,一個(gè)是Array.slice，第一個(gè)返回的是字符串，第二個(gè)返回的是數(shù)組。我在這里呢？主要探究的是后者，關(guān)于slice的源碼
function slice(start, end) {
var len = ToUint32(this.length), result = [];
for(var i = start; i < end; i++) {
result.push(this[i]);
}
return result;
}
所以按照源碼來(lái)探究的話 Array.prototype.slice.call(arguments) 應(yīng)該就是：
Array.prototype.slice = function(start,end){
var result = new Array();
start = start || 0;
end = end || this.length; //call改變了this的指向
for(var i = start; i < end; i++){
result.push(this[i]);
}
return result;
}
我相信經(jīng)過(guò)我的這種深層次的探究，差不多也就明白了，這個(gè)的含義。
二、 vue雙向綁定
關(guān)于數(shù)據(jù)的雙向綁定，這個(gè)我發(fā)現(xiàn)我這里寫(xiě)不了比較復(fù)雜的代碼，原本以為，我可以來(lái)寫(xiě)一個(gè)訂閱-發(fā)布者模式，但是考慮到面試，就寫(xiě)幾個(gè)比較簡(jiǎn)單就可以了。
<!DOCTYPE html>
<head></head>
<body>
<div id="app">
<input type="text" id="a">
<span id="b"></span>
</div>
<script type="text/javascript">
var obj = {};
Object.defineProperty(obj, 'hello', {
get: function() {
console.log('get val:'+ val);
return val;
},
set: function(newVal) {
val = newVal;
console.log('set val:'+ val);
document.getElementById('a').value = val;
document.getElementById('b').innerHTML = val;
}
});
document.addEventListener('keyup', function(e) {
obj.hello = e.target.value;
});
</script>
</body>
</html>
上面是一個(gè)比較簡(jiǎn)單的例子，這是在我們知道dom的id的情況下來(lái)做的一個(gè)數(shù)據(jù)的雙向綁定。代碼比較簡(jiǎn)單，親測(cè)可用
三、 減少http的請(qǐng)求
+ CSS Sprites
CSS Sprites，CSS精靈，合并圖片，通過(guò)指定CSS的backgroud-image和backgroud-position來(lái)顯示元素。
+ 合并JS腳本和CSS樣式表
適當(dāng)?shù)匕讯鄠€(gè)JS腳本合并為一個(gè)腳本，把多個(gè)CSS樣式表合并為一個(gè)樣式表。
+ 使用外部JS和CSS文件
在用戶不帶緩存訪問(wèn)頁(yè)面的時(shí)候，內(nèi)聯(lián)所有的js和css的效率更快，原因是外置js和css帶來(lái)額外的http請(qǐng)求開(kāi)銷，1個(gè)http請(qǐng)求相對(duì)于3個(gè)http請(qǐng)求要更快一些。
其實(shí)，使用外部JS和CSS文件會(huì)產(chǎn)生更快的訪問(wèn)速度，這是由于外部JS和CSS文件能被瀏覽器緩存，當(dāng)下次再請(qǐng)求相同的JS和CSS時(shí)，瀏覽器將不會(huì)再發(fā)出HTTP請(qǐng)求，而是使用緩存的JS和CSS文件，減少了HTTP請(qǐng)求數(shù)。
+ 配置多個(gè)域名和CDN加速
通常瀏覽器對(duì)于一個(gè)域名的并發(fā)請(qǐng)求是有限的，比如：有100個(gè)文件要加載，但瀏覽器一次只可能并發(fā)請(qǐng)求10個(gè)文件，這樣并發(fā)多次就會(huì)耗時(shí)。因此配置多個(gè)域名能夠最大限度的增加并發(fā)請(qǐng)求量。
說(shuō)在最后
我雖然暫時(shí)沒(méi)有換工作的意向，但是多去總結(jié)他們的面試經(jīng)驗(yàn)也是一件好事兒。至少也讓我學(xué)習(xí)和回憶了很多，也讓我發(fā)現(xiàn)了許多不足，我期待他們下次跟我聊天的時(shí)候會(huì)跟我講述更多有趣的面試題目...
