《JavaScript踩坑指南》JavaScrip-StepPitGuide📖
![]()
《JavaScript踩坑指南》
《JavaScript踩坑指南》
- 三句箴言
一入前端深似海，任何前端小白也可成为大牛，要用心体会前端知识，说前端简单的什么的最变态了！
永远都不要以为自己会了，细心体会基础多去扩展知识永远都需要学习，因为你不知道面试的时候面试官是个什么样的大牛！
你努力，不一定能成功，你不努力，连机会都会没有。
- 注 ：面试为
校招面试
序
- 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基础知识点
JavaScript事件问题
JavaScript通信问题📞
- 跨域问题
- webpack跨域 http-proxy-middleware / npm模块之http-proxy-middleware使用教程（译）
- IE8和IE9上的HTTP access control (CORS) 的实现 --- XDomainRequest
CSS
第一章
- 面试主要问的都是在自我介绍和简历上所写的技能
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);
