在此我以一个经历过的人的身份写下这篇文章。像我一样，直到快毕业或者出去找工作的时候才知道知识和技能的重要性。我只有大学学历，主修机械工程。大一的时候，老老实实上课，参加低年级的各种社团活动，感觉还是蛮有成就感的。大二的时候，可能是受同学的影响，每天沉迷网吧，白天睡觉，晚上熬夜，玩得不亦乐乎。大学毕业后，随机找了一家物流公司实习。上班后才知道社会是多么的残酷，工资低开销大，很多地方都需要钱。工资都是月光，更别提存款了。专业，现在从事前端开发工作，薪水相当不错。他告诉我，他身边有很多同事不是计算机专业的，让我试试自己学前端吧。于是我从去年9月开始自学WEB前端，大概用了8个月的时间。现在在南京一家软件公司做开发，技术部大概有30个人。工资12K，五险一金。我觉得很幸运，在大学里浪费了那么多时间，毕业后还能找到一份月薪过万的工作。根据我的自学经验，给大家提几点建议：1、准备一个系统的视频教程。我自学用的视频教程是朋友给我的。他告诉我，一般教程ajax前后端交互，学完js会直接讲API方法和XMLHttp的使用，跨域和封装只限于讲解和库的使用。他为我找到的教程扩展了这些基础HTTP理论、交互式通信原理、服务器端http服务器构建、MIME、消息端口、监控和数据包捕获、网络业务模型、代理缓存和cookie会话身份验证。认证、安全加密、Token、JWT、oauth、session管理、RESTful接口设计、协商契约、资源标识等原理和常识可以让我真正了解整个交互的来龙去脉，而不是简单的照搬方法和按照教程编写代码。之所以能找到12K的工作，很大一部分原因是教程内容足够详细，技术扎实。如果找不到系统的教程，可以用我当时自学的那个。这个教程在我的网盘里，因为网盘的链接会提示修改。如果有需要，你可以加入我们的学习裙。前三个484，中间三个757，后三个760，找我要，我免费分享给你。2、在学习过程中，一定要多练习敲代码。刚开始自学的时候，总觉得代码能看懂，但是手写不会。和朋友交流后，我发现自己的学习方式有问题。正常的学习方式应该是写代码比看视频长。只有输入更多的代码，我们才能理解应用程序。很多人学完之后，能看懂代码却写不出来，或者学了后面的忘记前面的了。根本原因是他们修炼的太少了。假设每天学习前端的时间是6个小时，那么至少要花3个小时或更多的时间来练习编码。只看视频而不敲代码是浪费时间。3、多与专业人士交流，避免闭门造车。人们可以一起交流和学习。真的会事半功倍，效率会大大提高。如果你身边没有可以和你一起探讨学习的朋友，可以加入一些学习氛围好的前端交流学习群。和有经验的人交流，可以学到很多好的学习方法和技巧，提高我们的学习效率。如果找不到好的学习群，可以加入我朋友创建的这个前端学习交流群。前面三个是484，中间三个是757，后面三个是760。有很多已经上班的大佬，每天不忙的时候在群里回答问题。也有很多人每天都在学习交流学习心得。气氛很好，大家可以在群里一起监督学习。自己能找到一份12K的工作，离不开群里这些大佬的帮助。最后给大家分享一个系统的前端学习路线。我是按照这个学习路线来学习的。掌握了以上70%的知识点后，我找到了一份12K的工作。老板说，如果你能掌握这条学习路线上的所有知识点，就可以准备去大厂面试了。HTML/CSS3和工具部分：vscode开发工具使用markdown文档工具使用浏览器平台环境标签基础DTD和META语义选择器权重和优先级匹配规则浮动和清除、BFC、类名组合规则SEO前端技巧定位叠加技巧伪-类伪元素框模型代码规范性能优化渲染原理CSSspritesiconfont字体图标，布局思路布局公式css3动画css3选择器css3过渡flex布局背景渐变css3实用动态效果3D模块css3变量em/rem/vw学完这些就可以完成一个企业内部多页面项目实战（非仿站）有完整的PSD和切图，然后是JavaScript部分，需要掌握以下知识点：JavaScript概念基本认知发展历史应用范围优缺点ECMAScript语言概述语句语法数据类型运算符ors隐式转换操作规则controlprocessscopescopechainscopeanalysisjs解释引擎字符串属性方法forof/forin数组属性方法对象广义对象概念对象特征存储机制深拷贝对象实际应用工厂模式构造器原型原型链原型指向封装各种继承封装对象thisthis指向js数据处理垃圾GC闭包原理及应用调试方法论浏览器控制台工具应用面向对象开发函数式开发纯函数递归函数回调函数组合函数缓存函数curried函数偏函数函数防抖节流高级函数IIFE函数模块化数学对象高级数组方法（reduce、filter、map、every、some、forEach、find、findIndex、include）和其他高级对象方法（entires、defineProperty、freeze、fromEntries,assign),keys,create,hasOwnProperty)等this通过bind,call,applypointtooffset,同步和异步,闭包模块化,数据变形处理,性能处理DOM/BOMDOM对象和方法节点和遍历树DOM选择器DOM节点增加删除、修改、检查DOM样式操作DOM位置获取与偏移DOM对象和标签差异频率行为锁定机制拖拽模块碰撞检测距离判断三角函数方向判断运动框架弹性运动重力加速度DOM树CSSOM树渲染分析加载回流重绘浏览器线程和阻塞BOMDeepwindowobjectnavigatorhistoryscreenlocationspa概念局部参数传递日期对象使用日期格式化封装随机封装DOM分片容器JS业务应用扩展JSON对象数据解析JSON方法模板渲染缓存懒加载正则表达式RegExp元字符修饰正预查询贪心模式替换方法分组Ungroupedtestmatch和exec正则库封装表单验证图片预存懒加载自定义封装滚动组件多轮播（loop,parallax,carousel）tab切换楼梯导航天花板导航拖拽导航JavaScript编码风格指南控制台应用技巧ECMAScript5---ECMAScript9扩展版本解读应用环境letconst解构赋值箭头函数对象解构重置参数解构类setgetextendssuperstaticprivate实现symbolpromiseproxy代理拦截async/await对象newAPI数组新API字符串新API原型属性对象修改代理拦截链查询空合并运算符BubbleBobble面向对象游戏开发HTML5/移动端开发HTML5标签和APIHTML5概念定义新特性DTD对比新H5标签新语义H5标签新H5表单H5拖动事件videoaudiofullScreenFileReader文件流Blob对象sessionStoragelocalStorage网络状态页面生命周期网页状态监控地理信息和定位canvasworker多线程Notifications桌面通知播放器开发canvas交互特效开发移动端适配/事件移动端适配概念尺寸和分辨率原则PPI和DPI计算DIP和DPR设备像素概念视口视口概念布局视口视觉视口理想视口视口适配方案（元视口）缩放设置屏幕窗口大小API媒体查询@mediarem适配vwvh适配mobile适配方案flexiblerem方案vhvw方案复合方案高清适配方案手机字体缩放解决1px边框问题解决半像素线图高清适配image-setsrcsetjs拼接URL技巧屏幕回退输入框问题输入法空格问题ck使用禁用缩放来设置理想的视口。常用类库/工具jquery：元素选择、增删改查、事件处理、位置获取、动画转场、高级方法、特效应用zepto：移动jquery、DOM操作、移动事件、点击延迟处理、触摸事件组基础UI库：layerUI、easyUI、bootStrap、UI模块化、UI库使用技巧、文档解读、案例调试、表单系统iScroll、touchjs等移动事件库使用swiper：移动网站触摸滑动、Carousel插件、模块化应用、源码解读art-template：模板引擎模板语法、渲染方式、原生模板引擎实现CSS预处理：sass、lessusestylus深入学习、预处理语法、css编程、敏信、预处理函数、继承、嵌套vscode高级插件-入并配置liveserversass模板化应用，预处理应用date-picker移动端原生组件ent开发需求分析业务规则、技术栈选择、文件输出规则、技术分析MVC模型概念与设计、业务逻辑分类视图层适配方案原型布局构建模板生成工具功能开发、面向对象业务设计功能数据对象开发交互业务封装模块对接优化设计面向对象高级编程Nodejs与工程开发部分NodeNative基础Node基础概念NPM命令V8引擎概念JavaScript模块化CMDAMDUMDEventLoop事件循环同步异步阻塞非阻塞任务队列宏任务微任务原生Node模块核心module和requiremodule触发事件和路径modulefsmoduleBufferobjectURLmoduleHTTPmodulestreamNodeNative封装HTTP和FileServersNodeFrameworkExpressFramework使用中间件CoreObjectRoutingConfigurationTemplateEngineDataScripting使用文件流上传下载文件流拆分webpack工程构建工程概念工程工具介绍使用babel等前后端测试处理第三方插件数据交互HTTP通信交互原理请求响应MIMEURI地址消息解析端口消息流测试监听抓包TCP/IP握手机制网络业务模型代理缓存网关隧道等概念方法和请求头分类基础XMLHTTPRequest对象方法属性方法Ajax异步交互同源策略原理原生js封装ajax交互jqueryajax封装交互jsonp跨域处理cors跨域处理携带cookie和跨域处理代理服务器跨域处理cookie校验和通信使用axios库代理封装拦截merge二次封装通信加密策略数据对称加密数据非对称加密RSA加密实践MD5加密实践登录注册与认证机制真实性认证Token认证JWT认证sess离子状态管理oauth认证RESTful接口设计RESTful设计原则状态码设计和规范服务器响应规则和格式前端接口协议制定传统RESTful改进的API设计规范资源位置JSON模式契约描述资源标识符缓存友好APIHTTP头管理文档定义松散耦合原则一致性重用稳定性原则数据库存储MongoDB基本概念NoSQL和SQLCAP定理RDBMSMongoDB语法指令监控和GUIMongoDb驱动Mongoose应用创建集合增删改查查询增删改查查询数据库查询高级查询,操作,通道查询,多条件查询,反向过滤,索引处理,聚合聚合管道,校验,人口,表,中间件,中间件处理,查询,ERROR类,二次包装,博客,后台工程,实战,数据库设计服务端口路由接口设计及API管理通信交互管道封装注册登录路由导航前端路由管理权限管理用户管理分类管理标签管理文章管理模块化功能封装验证库封装承诺链行为封装异步模块处理SPA单页应用初级实现原生集中行为控制器模板+模块化+预处理+工程实现前端页面组件化封装组件化基本概念组件设计原则组件封装组件耦合与解耦工程+模板化+模块化实现原生组件化功能vue框架部分vue基础知识vue开发准备工具及插件-insmvcmvpmvvm设计理念原生js实现MVVM核心框架vue设计模式生命周期命令与属性组件化数据驱动与双向绑定虚拟DOM概念原理模板语法条件和列表数组监控计算属性事件处理修改和表单监听器过滤方法watchcomputedfilter比较组件开发动态组件组件通信高级组件通信槽Vue动画实例对象setgetnextTickvuePluginVue工程BabelwebpackConfigurationVuevue单文件组件vue-cli工程平台处理postCssanimatecoresocketlodash工具vue-cliPluginPreset静态资源处理环境变量和膜或开关工程DeploymentEngineeringConstructionVueRoutervue路由概念嵌套路由路由视图动态路由路由匹配程序化导航历史hash模式管理命名视图重定向和别名导航守卫路由元信息滚动和延迟加载导航故障处理vuexvuex核心概念EventBus对比状态管理模式Storestategettermutationactionmoudulvuex辅助函数和API函数vuex环境选择vuex模块化处理规则和技术对象样式提交方法模块复用等vue项目实战vue博客项目实战PC+手机元素UIvantUIwebsocket聊天室虚拟傀儡vueScrollstoreqsnprogresseditor文章分类词云效果spa单页应用移动PC无缝切换完成注册登录vue加密认证http封装管理错误处理封装vuex核心状态管理本地存储状态更新token处理文章富文本编辑如收藏访问评论组件封装组件复用组件混合高级组件开发复合组件通信vue原生处理DOM行为vue常见错误处理重置vue数据响应个人信息修改头像上传通知组件打包postcss应用
