《JavaScript踩坑指南》JavaScrip-StepPitGuide📖

《JavaScript踩坑指南》

• 三句箴言

1. 一入前端深似海，任何前端小白也可成为大牛，要用心体会前端知识，说前端简单的什么的最变态了！

2. 永远都不要以为自己会了，细心体会基础多去扩展知识永远都需要学习，因为你不知道面试的时候面试官是个什么样的大牛！

3. 你努力，不一定能成功，你不努力，连机会都会没有。

• 注 ：面试为校招面试

---

序

• loading

---

目录

第一章 面试经历

01-012018校招阿里面试提前批-前端开发工程师-8.7

01-022018校招腾讯面试提前批-前端开发工程师-8.14

第二章 问题总结

02-01阿里面试问题总结

02-02腾讯面试问题总结

第三章 实习总结

03-01实习总结

附录：知识点

自己总结的知识

• TYRMars/JSLearn JavaScript基础知识学习总结

• TYRMars/JSLearn-ES6 ES6知识学习总结

• TYRMars/ReactLearn React基础知识学习总结

• TYRMars/WebsafeLearn Web安全知识学习总结

• TYRMars/ResponsiveWeb 响应式开发学习总计

JavaScript基础知识点

• MDN - 最标准的Web前端文档
• script标签要放到哪里
• 深入理解javascript原型和闭包 - 王福朋

JavaScript事件问题

• 深入浅出JS事件
• JQuery ready和load的 区别
• JQuery ready和load的 区别 - 慕课网
• zepto的tap事件点透分析

JavaScript通信问题📞

• 跨域问题
• webpack跨域 http-proxy-middleware / npm模块之http-proxy-middleware使用教程（译）
• IE8和IE9上的HTTP access control (CORS) 的实现 --- XDomainRequest

CSS

• CSS知多少
• 利用HTML和CSS实现常见的布局
• 前端移动端页面开发（布局篇）
• 手机网站📱常见六种布局
• Flex 布局教程：语法篇
• Flex 布局教程：实例篇

---

第一章

• 面试主要问的都是在自我介绍和简历上所写的技能

01-01

阿里面试

• 此次面试，面试的是阿里巴巴国际UED的前端团队

• 面试的主要问题：

  • DOM事件
  • 实习项目中常用的API
  • Web安全
  • 前端性能优化
  • 跨域问题

01-02

腾讯面试

• 此次面试，面试的是腾讯QQ音乐前端开发

• 面试主要问题：

  • DOM事件
  • 页面加载<script>标签放到哪里
  • 对比load和ready (考察点在与页面加载DOMContentLoaded)与script标签问题同在一个知识链条上
  • 跨域问题
  • 页面性能优化 localStorage

第二章

02-01

阿里面试总结

• 阿里面试是我第一次面试大公司，虽然说有提前准备，但是还是有很多不足。从这次面试我懂得了，自己在基础知识上的不足。有些东西可能你自己懂了，但是如果让你讲给别人，如何去讲清楚才是最重要的问题。
• 体会到阿里还是很喜欢新技术

02-02

腾讯面试总结

• 隔了一个星期面试了腾讯，从问题当中感觉到对于IE兼容的看重，可能和QQ音乐的业务有关。我一开始并没有从宏观上理解面试官为什么问这些问题。回来思考一下，所有的问题还是有联系的，只不过我自己有很多知识点片段的断裂，自己连接不起来。
• 感觉腾讯有的业务技术栈确实偏老旧，可能是为了更符合受众所致

02-03

以上综述

• 面试了以后。我都查了相关部门的社招信息，他们都没有在招普初级前端工程师，而是急切需要招聘高级工程师对标阿里的P6和腾讯T2.3、T3.1。说明他们需要的是更有能力的人，他们希望能吧一个应届生培养成这样的人。

alibaba tencent

02-04

学习总结

• 我兴致勃勃的去学习了React框架，但其实学习路径上出现了一些错误。学习完HTML、CSS、JavaScript这些基础内容，我并没有先去学习一下ES6和Node，直接去学习React。从中感觉到有的东西只是会用，但并不知道其中的原理，学习了ES6以后在回来看React，发现很多React设计思想都有了很好的理解。不仅仅是当初那种会用的感觉，知道了其中的原理。所以自己还需要多多的学习只是，去真正理解React这个框架为什么出现，而且在不同场景下对于框架的选择。

第三章

03-01

实习总结

• 触摸事件封装

(function() {
    var TOUCHSTART, TOUCHEND;
    if (typeof(window.ontouchstart) != 'undefined') {
        TOUCHSTART = 'touchstart';
        TOUCHEND = 'touchend';
        TOUCHMOVE ='touchmove';
    } else if (typeof(window.onmspointerdown) != 'undefined') {
        TOUCHSTART = 'MSPointerDown';
        TOUCHEND = 'MSPointerUp';
        TOUCHMOVE = 'MSPointerMove';
    } else {
        TOUCHSTART = 'mousedown';
        TOUCHEND = 'mouseup';
        TOUCHMOVE = 'mousemove';
    }
    function NodeTouch(node) {
        this._node = node;
    }
    function tap(node,callback,scope) {
        node.addEventListener(TOUCHSTART, function(e) {
            x = e.touches[0].pageX;
            y = e.touches[0].pageY;
        });
        node.addEventListener(TOUCHEND, function(e) {
            e.stopPropagation();
            e.preventDefault();
            var curx = e.changedTouches[0].pageX;
            var cury = e.changedTouches[0].pageY;
            if (Math.abs(curx - x) < 6 && Math.abs(cury - y) < 6) {
                callback.apply(scope, arguments);
            }
        });
    }
    function longTap(node,callback,scope) {
        var x,y,startTime=0,endTime=0,in_dis=false;
        node.addEventListener(TOUCHSTART, function(e) {
            x = e.touches[0].pageX;
            y = e.touches[0].pageY;
            startTime=(new Date()).getTime();
        });
        node.addEventListener(TOUCHEND, function(e) {
            e.stopPropagation();
            e.preventDefault();
            var curx = e.changedTouches[0].pageX;
            var cury = e.changedTouches[0].pageY;
            if (Math.abs(curx - x) < 6 && Math.abs(cury - y) < 6) {
                in_dis=true;
            }else{
                in_dis=false;
            }
            endTime=(new Date()).getTime();
            if (endTime - startTime > 300 && in_dis) {
                callback.apply(scope, arguments);
            }
        });
    }
    NodeTouch.prototype.on = function(evt, callback, scope) {
        var scopeObj;
        var x,y;
        if (!scope) {
            scopeObj = this._node;
        } else {
            scopeObj = scope;
        }
        if (evt === 'tap') {
            tap(this._node,callback,scope);
        } else if(evt === 'longtap'){
            longTap(this._node,callback,scope);
        } else {
            this._node.addEventListener(evt, function() {
                callback.apply(scope, arguments);
            });
        }
        return this;
    };
    window.$ = function(selector) {
        var node = document.querySelector(selector);
        if (node) {
            return new NodeTouch(node);
        } else {
            return null;
        }
    }
})();

var box=$("#box");
box.on("longtap",function(){
    console.log("你已经长按了");
},box);