引言
關(guān)于面試和筆試，二者是相輔相成的闸英，但是锯岖，不管是哪一個(gè)，都不要好高騖遠(yuǎn)甫何，基礎(chǔ)是最重要的出吹。
- 找準(zhǔn)定位，重視基礎(chǔ)：前端發(fā)展日新月異辙喂，只有基礎(chǔ)打牢捶牢，才能更快的學(xué)習(xí)、適應(yīng)乃至創(chuàng)造新技術(shù)巍耗。根深方能蒂固秋麸。
- 用更遠(yuǎn)的視角去看面試：先做一個(gè)優(yōu)秀的FE，再考慮能去哪些公司炬太。
-
面試注重廣度灸蟆，筆試注重深度。筆試亲族，總而言之就是基礎(chǔ)知識(shí)&邏輯思維的綜合考察炒考。
正文
題目1：編寫一個(gè)函數(shù)將列表子元素順序反轉(zhuǎn)
考察點(diǎn)
- 子元素
- 性能
解答
- 方法1：直接的DOM操作
var ul = document.getElementById('target');
var liLists = ul.getElementsByTagName('li');
var len = liLists.length;
while (len--) {
ul.appendChild(ul.childNodes[len]);
}
缺點(diǎn)：每次循環(huán)都影響dom生成可缚，損耗性能
- 方法2： fragment
var ul = document.getElementById('target');
var liLists = ul.getElementsByTagName('li');
var fragment = document.createDocumentFragment();
for (var i = liLists.length - 1; i >= 0; i--) {
fragment.appendChild(liLists[i]);
}
ul.appendChild(fragment);
優(yōu)點(diǎn)：使用到了createDocumentFragment()
- 方法3：Array reverse
var ul = document.getElementById('target');
var children = Array.prototype.slice.call(ul.getElementsByTagName('li'), 0);
var len = children.length;
var str = '';
children.reverse();
for (var i = 0; i < len; i++) {
str += children[i].outerHTML;
}
ul.innerHTML = str;
優(yōu)點(diǎn)：思路加分，同時(shí)性能較高
- 方法4：innerHTML
var ul = document.getElementById('target');
var liLists = ul.getElementsByTagName('li');
var str = '';
for (var i = liLists.length - 1; i >= 0; i--) {
str += '<li>' + liLists[i].innerHTML + '</li>';
}
ul.innerHTML = str;
優(yōu)點(diǎn)：循環(huán)里不會(huì)影響DOM生成斋枢，效率高
總結(jié)
- 越簡(jiǎn)單的題帘靡，越能區(qū)分水平
- 脫離框架，熟練掌握dom操作
- 出現(xiàn)循環(huán)的地方杏慰，多考慮性能
DOM：查找
getElementsByTagName() // 通過(guò)標(biāo)簽名稱
getElementsByName() // 通過(guò)元素的Name屬性值
getElementById() // 通過(guò)元素Id测柠，唯一性
getElementsByClassName() // 通過(guò)class名稱
DOM ：創(chuàng)建
createDocumentFragment() // 創(chuàng)建一個(gè)DOM片段
createElement() // 創(chuàng)建一個(gè)具體的元素
createTextNode() // 創(chuàng)建一個(gè)文本節(jié)點(diǎn)
DOM ：操作
appendChild() // 添加
removeChild() // 移除
replaceChild() // 替換
insertBefore() // 插入
題目2 ：畫出ajax模型圖
考察點(diǎn)
解答
總結(jié)
- 越開(kāi)放的題，可拓展的知識(shí)點(diǎn)越多
- 形成完整的JS拓?fù)鋱D
- 注意兼容性問(wèn)題
題目3：寫一個(gè)獲取頁(yè)面url參數(shù)的函數(shù)getQuery(key)缘滥，如url是：https://ke.qq.com?name=kevin&age=18 可輸出getQuery('name')為‘kevin’轰胁，getQuery('age')為18
考察點(diǎn)
- BOM
- 字符串處理
- 正則
解答
- 方法1：Array split
function getQuery (key) {
var url = window.location.search;
var result = [];
if (url.indexOf('?') != -1) {
var str = url.substr(1);
strs = str.split('&');
for (var i = 0; i < strs.length; i++) {
var splitArr = strs[i].split('=');
result[splitArr[0]] = splitArr[1];
}
}
return result[key];
}
缺點(diǎn)：數(shù)組操作，不夠優(yōu)雅
- 方法2：正則
function getQuery (key) {
var reg = new RegExp("(^|&)" + name + "=[^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
return r ? r[2] : null;
}
方法1與方法2的遺漏點(diǎn)：轉(zhuǎn)義問(wèn)題
- 方法2：正則（改進(jìn)）
function getQuery (key) {
var reg = new RegExp("(^|&)" + name + "=[^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
return r ? decodeURIComponent(r[2]) : null;
}
總結(jié)
- 熟悉BOM
- 字符串處理朝扼，優(yōu)先嘗試正則
- 涉及URL赃阀，多注意轉(zhuǎn)義問(wèn)題
題目4：寫一個(gè)Tips提示
- 一天之內(nèi)，第一次進(jìn)來(lái)時(shí)顯示擎颖，再次訪問(wèn)時(shí)不顯示
考察點(diǎn)
- 本地存儲(chǔ)
- 日期處理
- localStorage與Cookie
- localstorage有兼容問(wèn)題榛斯，在IE怎么存儲(chǔ)
-
點(diǎn)擊“我知道了”或者“X”后，不再顯示
考察點(diǎn)
- 事件
- 兼容性
解答
- 兼容性代碼
function addEvent (elem, type, fn) {
if (elem.addEventListener) {
elem.addEventListener(type, fn, false);
} else if (elem.attachEvent) {
elem[type + fn] = function () {
fn.call(elem);
};
elem.attachEvent('on' + type.elem[type + fn]);
} else {
elem['on' + type] = fn;
}
}
- 事件處理的一種思路：
var $tips = document.getElementById('tips');
var $tipsClose = document.getElementById('tips-close');
$tipsClose.onclick = ...
缺點(diǎn)：缺少組件化思想（如果頁(yè)面有多個(gè)tips搂捧，不好復(fù)用）
- 改進(jìn)
var Util = {
addEvent: function () {},
save: function () {
// cookie處理
}
}
function Tips () {
...
Util.addEvent(...);
return this;
}
var tips1 = new Tips({
onClose: function () {}, // 關(guān)閉回調(diào)
duration: 24 * 60 * 60 * 1000, // 持續(xù)時(shí)間
...
})
總結(jié)
- 事件的原生封裝
- 多實(shí)例化驮俗、組件化的思想去實(shí)現(xiàn)
結(jié)尾
- 基礎(chǔ)，是筆試的重中之重允跑；脫離框架王凑，回歸本質(zhì)
- 有沒(méi)有多種方法？自己的方法是否是最優(yōu)解
- 邏輯的嚴(yán)密性聋丝，邊緣條件的考慮
- 注意“筆試”與“機(jī)試”的區(qū)別
- 除了JavaScript索烹，不要忘了CSS、算法
