【IMWeb秋招训练营】【笔试篇】

引言

关于面试和笔试，二者是相辅相成的，但是，不管是哪一个，都不要好高骛远，基础是最重要的。

• 找准定位，重视基础：前端发展日新月异，只有基础打牢，才能更快的学习、适应乃至创造新技术。根深方能蒂固。
• 用更远的视角去看面试：先做一个优秀的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 += '
' + liLists[i].innerHTML + '
';
        }
        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提示

1. 一天之内，第一次进来时显示，再次访问时不显示
   考察点

• 本地存储
• 日期处理
• localStorage与Cookie
• localstorage有兼容问题，在IE怎么存储

2. 点击“我知道了”或者“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、算法