引言
关于面试和笔试，二者是相辅相成的，但是，不管是哪一个，都不要好高骛远，基础是最重要的。
- 找准定位，重视基础：前端发展日新月异，只有基础打牢，才能更快的学习、适应乃至创造新技术。根深方能蒂固。
- 用更远的视角去看面试：先做一个优秀的FE，再考虑能去哪些公司。
-
面试注重广度，笔试注重深度。笔试，总而言之就是基础知识&逻辑思维的综合考察。
正文
题目1：编写一个函数将列表子元素顺序反转
考察点
- 子元素
- 性能
解答
- 方法1：直接的DOM操作
var ul = document.getElementById('target');
var liLists = ul.getElementsByTagName('li');
var len = liLists.length;
while (len--) {
ul.appendChild(ul.childNodes[len]);
}
缺点：每次循环都影响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);
优点：使用到了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;
优点：思路加分，同时性能较高
- 方法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;
优点：循环里不会影响DOM生成，效率高
总结
- 越简单的题，越能区分水平
- 脱离框架，熟练掌握dom操作
- 出现循环的地方，多考虑性能
DOM：查找
getElementsByTagName() // 通过标签名称
getElementsByName() // 通过元素的Name属性值
getElementById() // 通过元素Id，唯一性
getElementsByClassName() // 通过class名称
DOM ：创建
createDocumentFragment() // 创建一个DOM片段
createElement() // 创建一个具体的元素
createTextNode() // 创建一个文本节点
DOM ：操作
appendChild() // 添加
removeChild() // 移除
replaceChild() // 替换
insertBefore() // 插入
题目2 ：画出ajax模型图
考察点
解答
总结
- 越开放的题，可拓展的知识点越多
- 形成完整的JS拓扑图
- 注意兼容性问题
题目3：写一个获取页面url参数的函数getQuery(key)，如url是：https://ke.qq.com?name=kevin&age=18 可输出getQuery('name')为‘kevin’，getQuery('age')为18
考察点
- 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];
}
缺点：数组操作，不够优雅
- 方法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的遗漏点：转义问题
- 方法2：正则（改进）
function getQuery (key) {
var reg = new RegExp("(^|&)" + name + "=[^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
return r ? decodeURIComponent(r[2]) : null;
}
总结
- 熟悉BOM
- 字符串处理，优先尝试正则
- 涉及URL，多注意转义问题
题目4：写一个Tips提示
- 一天之内，第一次进来时显示，再次访问时不显示
考察点
- 本地存储
- 日期处理
- localStorage与Cookie
- localstorage有兼容问题，在IE怎么存储
-
点击“我知道了”或者“X”后，不再显示
考察点
- 事件
- 兼容性
解答
- 兼容性代码
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 = ...
缺点：缺少组件化思想（如果页面有多个tips，不好复用）
- 改进
var Util = {
addEvent: function () {},
save: function () {
// cookie处理
}
}
function Tips () {
...
Util.addEvent(...);
return this;
}
var tips1 = new Tips({
onClose: function () {}, // 关闭回调
duration: 24 * 60 * 60 * 1000, // 持续时间
...
})
总结
- 事件的原生封装
- 多实例化、组件化的思想去实现
结尾
- 基础，是笔试的重中之重；脱离框架，回归本质
- 有没有多种方法？自己的方法是否是最优解
- 逻辑的严密性，边缘条件的考虑
- 注意“笔试”与“机试”的区别
- 除了JavaScript，不要忘了CSS、算法
