应届生前段学习路线

绪论

前段曾经是被戏称为游戏语言，但是现在用途也越来越多了，多的也不赘余，我比较推荐应届生学习路线和学习内容就写在下面，毕竟是第一次写，写的不够严谨，笔者一直都是看官方文档没有报名过一些培训课程，所以有些东西也讲不清楚，哪些课程其实值得一看。
补充一下，前段的内容很多很杂，很多东西需要平时多看博客和别人的文章进行积累，当然如果您是大牛已经把MDN烂熟于心那我此言就是妄语了。

需要看的书/博客/网站：

1. 菜鸟教程｜html
   这个东西不多赘余，主要需要看html+css+js，当然这些内容都只是基础，必须会但是实际开发用的少
   注意，前段开发语言也就是html/css/js单纯只看这些肯定是不够的

2. 前段各类对象
   包括JS对象，Browser对象，DOM对象，这些是深入开发必须要会的东西，JS对象不多赘余，写代码控制逻辑肯定用的到，但是浏览器（Browser）对象经常会被人忽略，这个很重要，尤其是windows对象，history对象和存储对象，windows对象处理浏览器逻辑，打开浏览器，关闭浏览器，跳转指定位置（这个使用锚点【#】也可以），浏览器屏幕大小等都要用到，history对象是记录浏览记录，多页面应用肯定用的不多，但是现在流行的React和Vue都是SPA单页面应用，他们的路由配置会分成hash配置和history配置，要想理解和正常使用这两种配置，自然就需要深入理解history对象，至于DOM对象，那就是重中之重，所有的页面元素操作都与DOM操作相关，像是React基础的render，就是使用了createElement去创建对应的DOM元素然后在其prototype上添加内容实现双绑等特性，Vue也是如此，总之，再复杂好用的框架也没脱离基础，所以基础是重中之重

3. ES5
   ES5和ES5其实是历史原因的命名，现在都有ES2017了，所以想了解的同学可以去百度一下就ok，网道的这本书其实不错，当然最好用的书是红宝书（JavaScript高级程序设计），只是这本书没有线上资源，我把这本书看作圣经hh，讲的十分全面，既有基础又有拓展，网道这本书优点是很好的把js需要学会的内容分了类，但是里面也有一些局限性，比如this讲的就有点怪，所以涉及this指向的还是建议多看看其他博客，但是异步，强调一下，异步编程！！！这个部分很重要，基础的异步编程实现方法，定时器，后面的promise，async/await等一定得掌握，主要是因为现在前段逐渐成熟，页面首开速度和资源加载等成了一直被关心重视的部分，所以实际开发中会用好多好多的异步操作，甚至包括js资源的加载也要在实际应用中考量进行异步加载

4. ES6
   阮一峰ES6，真的好看，里面东西讲的简单易懂，又很有用，建议多看看

5. JS介绍
   MDN文档里面一个很好的博客，介绍了js的一些你很难找到的知识，这些知识在开发中却又会经常用到，不过最后那部分介绍的闭包，建议多找博客了解

6. MDN
   这里面介绍的超级全，可以作为参考网站，不过如果能全部看完熟练掌握，请允许我叫一声大神

7. Vue
   Vue官方文档，对于Vue的学习我是看官方文档进行学习的，不过里面有些东西没有讲到，比如ES6的模块（modules）和CommonJS，这些内容在开发中会用到，不过文档默认是Vue2，现在3的使用也逐渐多了起来，想学习的最好是3也学习一下，包括一直在更新的Vite，同样的Vue Router/Vuex 这两个路由和状态存储也看一下，不过Vuex太重，可能实际开发会逐渐去除使用。

8. React
   React是我正在学的，现在只是学会了基础的使用方法（class继承使用），Hook正在学习中。。。所以并不能说明什么，一起看，一起努力！

后文：对于Vue，React这两个MVVM模式框架最好是深入了解生命周期的使用

需要关注的概念（临时能想到的，有一些不常用也就忘了，后续有时间更新相关概念）

• 闭包
• 防抖节流
• 文档流
• 上下文
• HTML页面生命周期
• Script标签【插入JS方法】【主要是看一下defer/async】
• SEO【search engine optimization】，SPA【single-page application 】如何进行优化
• meta属性
• 基本类型和引用类型【栈/堆】【数据不可变】【深拷贝/浅拷贝】
• 作用域和执行上下文【很重要！】
• 变量提升【var/let/const】
• ES5继承/ES6 class【prototype】
• this，箭头函数【箭头函数是ES6引入的概念，通俗说无自己的this环境】【bind/call/apply】
• event loop【事件循环机制】【setinterval/settimeout/promise】【宏任务/微任务】
• Object属性类型【Configurable/Enumerable/Writable/Value】
• 函数式编程【纯函数｜这个特性未来应该是趋势，毕竟react，vue内部用到了这个概念】
• 函数柯里化
• Promise【他的出现是为了解决回调地狱】
• 跨域【jsonp/cors/iframe/nginx】，这是浏览器行为，注意，是浏览器行为
• PWA
• 模块化【CommonJS/AMD/CMD】
• http/https
• 原型原型链
• React diff【diif算法在Vue中也有，主要是为了优化性能，与虚拟Dom相关】
• ES6模块【modules】和CommonJS的差异
• 回流【Reflow】重绘【Repaint】
• http请求方法【通俗的将就是post/get区别和远离】
• type of和instanceof的区别，这两个都是检测类型的，还有constructor，toString【Object的方法，会返回[[Class]]】可以用.
• 浏览器事件模型【DOM事件流-事件捕获阶段，处于目标阶段，事件冒泡阶段】【return false/e.preventDefault阻止事件传播/e.stopPropagation阻止默认行为【比如a标签的打开href，form提交表单等】】
• http缓存【强缓存，协商缓存】
• 盒模型【主要是padding，margin，border，content的界定】
• 虚拟Dom
• new关键字的作用
• 水平垂直居中方案【推荐flexbox，bootstrap栅格都看看】
• 排序算法【需要能直接code出来】
• CDN
• requestAnimationFrame/setInterval
• webpack
• 输入url后发生的事情【DNS域名解析/建立TCP连接/发送http请求/服务器处理请求/返回响应结果/关闭TCP连接/解析HTML/布局渲染】
• 路由实现方式【hash/history】
• 垃圾回收机制【引用计数/标记清除】
• DOM节点类型【文档节点【Document】【整个HTML】，元素节点【Element】【HTML标签】，属性节点【Attribute】【HTML属性】，文本节点【Text】【标签内文字】】
• cookie，localStorage，Session
• null和undefined
• 内存泄漏
• 对象创建方式
• 同源策略是什么【跨域原因】
• Ajax原理【使用window.XMLHttpRequest对象，使用onreadystatechange函数记录状态变化，使用open打开请求，send发送请求】
• eval【了解就好】
• [“1”,“2”,“3”].map(parseInt)结果，这是一个经典题，其实很简单，map是对每个元素操作后返回最终形成新数组，parseInt接受两个参数(num,radix)，map会传入三个参数(item,index,array)这个操作就等于是对1执行了parseInt(1,0)，结果是1【这里0默认10进制】，对2执行parseInt(2,1)，没有1进制，对3执行parseInt(3,2)，2进制只能有01，3不符合所以结果是[1,NAN,NAN].
• argument，伪类
• 数组扁平化
• === 和 ==的区别
• 3+2+‘7’
• 转义字符
• proxy
• XSS【跨网站脚本攻击】
• SQL注入攻击
• DOS/DDos
• CSRF攻击【跨站请求伪造】

需要做的题目

leetcode
牛客网

补充

阮一峰闭包
最后那两个函数，第一个是因为直接用了对象重的function，这时候这个function最后的效果是return this.name这时候的this指向的是全局对象因为本身他返回的function就是匿名函数，但是第二个使用了that绑定了this构成了闭包，所以完美的将自己的name保存了下来