专科学历不能从事前端开发？机械专科自学8个月找到12K的工作，分享我的学习经历

在这里我以过来人的身份写下这篇文章，希望刚刚进入大学或者即将进入大学的学弟学妹们千万不要像我一样，等到快要毕业或者出去找工作的时候才知道知识技能的重要性。

我只有专科学历，专业学的是机械工程专业。大一的时候还老老实实地上上课，参加下学校的各种社团活动，感觉还挺充实。到了大二可能受身边同学的影响，天天沉迷于网吧，白天睡觉晚上通宵，玩得不亦乐乎。大学毕业就随便找了个物流公司实习。

上班后才知道社会多残酷，工资低开销大，很多地方都需要用到钱，工资月光，更别说什么存款，心里其实挺慌的；偶然一次机会，了解到一个高中同学大学学的是计算机专业，现在从事前端开发的工作，薪资待遇挺好的。他和我说他身边也有很多同事也不是计算机专业出身，让我尝试自学一下前端。

于是我从去年9月份开始自学WEB前端，差不多用了8个月的时间吧，现在是在南京的一家软件公司做开发，技术部大约是30多人。薪资是12K，五险一金。我觉得自己挺幸运，大学荒废了那么多时间，毕业后还能找到一份月薪过万的工作。

根据我自学的经验给大家几点建议：

1.准备一份系统的视频教程。

我自学用的视频教程是我朋友给我的，他跟我说普通教程ajax前后端交互会在学完js后直接讲XMLHttp的API方法和使用, 跨域和封装也只限于前端代码部分的讲解和库的使用。而他给我找的这份教程，在这些基础上拓展了HTTP理论、交互通信原理、服务端http服务器搭建、MIME、报文端口、监听抓包、网络业务模型、代理缓存、cookie session 鉴权认证、安全加密、Token、JWT、oauth、session管理、RESTful接口设计、协商合约、资源标识等原理规则性知识，能够让我真正清楚整个交互的来龙去脉，而不只是单纯地抄方法、跟着教程写代码。我能找到12K的工作，很大一部分原因就是这份教程讲得内容够详细，技术学的扎实。

如果大家找不到一份系统的教程，可以用我当时自学的这份，这份教程在我的网盘里面，因为网盘链接放上来会被建议修改，有需要可以加入我们的学习裙，前面三位484，中间三位757，后面三位760。找我要，我免费分享给你。

2.学习过程中一定要多练习敲代码。

我刚开始自学那会，总感觉自己能看懂代码，但动手却写不出来。通过和我朋友沟通才发现，我的学习方式有问题。正常的学习方式应该是写代码的时间要比看视频的时间长。只有多敲代码，才能够理解运用。很多人学完之后，能够看懂代码但是不会写，或者是学了后面的忘了前面的，根本原因都是练得太少。假设每天学习前端的时间是6个小时，那么起码要拿出3个小时以上的时间练习敲代码。只看视频不敲代码，就是在浪费时间。

3.多和专业人士沟通交流，避免闭门造车

有人一起交流学习，真的是事半功倍，效率会提高非常多。身边没有能跟你探讨学习的朋友，可以加一些学习氛围不错的前端交流学习群，跟有经验的人交流可以学到很多好的学习方法和技巧，提高我们的学习效率。找不到好的学习群，可以加入我朋友创建的这个前端学习交流群。前面三位484，中间三位757，后面三位760，里面有好多已经工作的大佬，每天不忙的时候在群里解答问题。也有很多正在学习的人每天交流学习心得。气氛是非常好的，大家可以在群里一起监督学习。我能自学找到12K的工作，离不开群里这些大佬的帮助。

最后给大家分享一份系统的前端学习路线，我就是按照这份学习路线去学的，上面的知识点掌握了百分之七十就找了12K的工作，给我整理这份学习路线的大佬说，能够把这份学习路线上的知识点全部掌握，就可以准备大厂的面试了。

HTML/CSS3 以及工具部分：

vscode开发工具使用

markdown文档工具使用

浏览器平台环境

标签基础

DTD与META

语义化

选择器

权重与优先级

匹配规则

浮动与清除、

BFC、

类名组合规则

SEO前端技巧

定位

叠加技巧

伪类

伪元素

盒子模型

代码规范

性能优化

渲染原理

CSS Sprites

iconfont字体图标、

布局思路

布局定式

css3动画

css3选择器

css3过渡

flex布局

背景渐变

css3实用动效

3D模块

css3变量

em/rem/vw

学完这些可以完成一个企业内部多页面项目实战（非仿站）有完整PSD与切图

然后就是JavaScript 部分，你需要掌握以下知识点：

JavaScript概念

基础认知

发展历史

应用范围

优缺点

ECMAScript

语言概览

语句语法

数据类型

运算符

隐式转换

运算规则

控制流程

作用域

作用域链

作用域解析

js解释引擎

字符串属性方法

for of/for in

数组属性方法

对象

广义对象概念

对象特性

存储机制

深拷贝

对象实际应用

工厂模式

构造函数

原型

原型链

原型指向

封装

多种继承

包装对象

this

this指向

js数据处理

垃圾GC

闭包原理与应用

debug方法论

浏览器控制台工具应用

面向对象开发

函数式开发

纯函数

递归函数

回调函数

组合函数

缓存函数

柯里化函数

偏函数

函数防抖与节流

高级函数

IIFE函数

模块化

数学对象

高级数组方法（reduce、filter、map、every、some、forEach、find、findIndex、include）等

高级对象方法（entires、defineProperty、freeze、fromEntries、assign、keys、create、hasOwnProperty）等

this通过bind、call、apply指向偏移、同步与异步、闭包模块化、数据形变处理、性能处理

DOM/BOM

DOM对象与方法

节点与遍历树

DOM选择器

DOM节点增删改查

DOM样式操作

DOM位置获取与偏移

DOM对象与标签区别

DOM虚拟化

DOM事件

Event对象

定时器与监听器

事件委托

事件代理

事件分流

事件冒泡

默认行为

事件捕获

防抖

节流

滚动

键盘行为

事件降频

行为锁机制

拖拽模组

碰撞检测

距离判断

三角函数

方向判断

运动框架

弹性运动

重力加速度

DOM树

CSSOM树

渲染解析

加载

回流

重绘

浏览器线程与阻塞

BOM深入

window对象

navigator

history

screen

location

spa概念

本地传参

日期对象使用

日期格式化封装

随机封装

DOM分片容器

JS业务应用扩展

JSON对象

数据解析

JSON方法

模板渲染

缓存懒加载

正则表达式RegExp

元字符

修饰符

正向预查

贪婪模式

replace方法

分组与不分组

test

match与exec

正则库封装

表单校验

图片预存懒加载

自定义封装滚动组件

多重轮播（循环、视差、旋转木马）

选项卡切换

楼梯导航

吸顶导航

拖拽导航

JavaScript编码风格指南

console应用技巧

ECMAScript5 --- ECMAScript9扩展

版本解读

应用环境

let

const

解构赋值

箭头函数

对象解构

reset参数解构

class

set

get

extends

super

static

private实现

symbol

promise

proxy代理拦截

async/await

对象新增API

数组新增API

字符串新增API

原型属性

对象修饰

代理拦截

链式询问

空值合并运算符

泡泡龙面向对象游戏开发

HTML5 / 移动端开发 部分

HTML5标签与API

HTML5概念

定义

新增特性

DTD对比

新增H5标签

新增语义化H5标签

H5表单

H5拖拽事件

video

audio

fullScreen

FileReader文件流

Blob对象

sessionStorage

localStorage

网络状态

页面生命周期

网页状态监听

地理信息与定位

canvas画布

worker多线程

Notifications桌面通知

播放器开发

canvas交互特效开发

移动端适配/事件

移动端适配概念

尺寸与分辨率原理

PPI与DPI计算

DIP与DPR设备像素概念

视口viewport概念

布局视口

视觉视口

理想视口

视口适配方案（Meta viewport）缩放设置

screen窗口大小API

媒体查询@media

rem适配

vw vh适配

移动端适配方案

flexible rem方案

vh vw方案

复合方案

高清适配方案

移动端字体缩放解决

1px边框问题解决

半像素线

图片高清适配

image-set

srcset

js拼接URL技巧

IPhonex刘海屏适配

安全区域

fit与env

Meta权限管理

兼容优化

IOS头部底部闪屏回退输入框问题

输入法空格问题

默认首字母大写问题

滑动卡顿问题等

终端样式美化与访问判断

Touch事件组封装

click延迟处理

FastClick使用

禁用缩放设置理想视口

常用类库/工具

jquery: 元素选择、增删改差、事件处理、位置获取、动画过渡、高级方法、特效应用

zepto：移动端的jquery、DOM操作、移动端事件、click延迟处理、touch事件组

基础UI库: layerUI 、easyUI、bootStrap、UI模块化、UI库使用技巧、文档解读、案例调试、表单系统

iScroll、touchjs等移动端事件库使用

swiper：移动端网站触摸滑动、轮播图插件、模块化应用、源码解读

art-template: 模板引擎 模板语法、渲染方法、原生模板引擎实现

CSS预处理：sass、less使用 stylus深入学习 、预处理语法、css编程、 Minxin 、预处理函数、继承、嵌套

vscode高级插件与配置 liveserver sass

模板化应用 、预处理应用

date-picker移动端原生组件开发

需求分析

业务规则、

技术栈选型、

文件输出规则、

技术分析

MVC模型概念与设计、

业务逻辑分类

view层适配方案

原型布局搭建

模板化生成

工具函数开发、

面向对象式业务设计

功能类日期对象开发

交互业务封装

模块对接

优化设计

面向对象高级程序设计

Nodejs与工程化开发 部分

Node原生基础

Node基础概念

NPM命令

V8引擎概念

JavaScript模块化 CMD AMD UMD

EventLoop事件循环

同步异步、

阻塞非阻塞

任务队列

宏任务

微任务

原生Node模块

核心模块与require

module

触发器events与path模块

fs模块

Buffer对象

URL模块

HTTP模块

stream流

Node原生封装HTTP与文件服务器

Node框架

express框架使用

中间件

核心对象

路由配置

模板引擎

数据脚本

Router核心

CORS配置

错误处理

校验封装

PM2管理

nodemoon管理

MORGAN日志处理

查询正则捕获

中间件开发

bodyParse等第三方中间件使用

文件流上传下载

文件流切分

webpack工程化构建

工程化概念

工程化工具介绍

webpack基础知识

webpack配置与运行

plugin插件

loader使用

入口出口配置

模块modules

依赖处理

dev Server

target

文件切分

build打包

热处理

package管理

性能优化

测试处理

第三方插件使用

babel等

前后端数据交互

HTTP通信交互原理

请求响应

MIME

URI地址

报文解析

端口

报文流

测试监听抓包

TCP/IP握手机制

网络业务模型

代理

缓存

网关

隧道等概念

method与请求头分类

基础XMLHTTPRequest对象方法属性

方法

ajax异步交互

同源策略原理

原生js封装ajax交互

jquery的ajax封装交互

jsonp跨域处理

cors跨域处理

携带cookie与跨域处理

代理服务器跨域处理

cookie验证与通信

axios库的使用 代理

封装

拦截

合并

二次封装

通信加密策略

数据对称加密

数据非对称加密

RSA加密实践

MD5加密实践

登录注册与鉴权机制

Authenticity认证

Token认证

JWT认证

session状态管理

oauth认证

RESTful接口设计

RESTful设计原则

状态码设计与规范

服务器响应规则与格式

前后端接口协议制定

传统RESTful改进

API设计规范

资源定位

JSON模式

合约说明

资源标识符

缓存友好API

HTTP头管理

文档定义

松耦合原则

一致性

重用

稳定性原则

数据库存储

MongoDB基础概念

NoSQL与SQL

CAP定理

RDBMS

MongoDB语法

指令

监控与GUI

MongoDb驱动

Mongoose应用

数据库创建

集合增删改查

文档增删改查

数据库查询

高级查询操作

通道查询

多条件查询

反向筛选

索引处理

aggregate聚合管道

validation验证

population联表

middleware中间件处理

查询ERROR类二次封装

博客后台项目实战

数据库设计

服务端路由搭建

接口设计与API管理

通信交互管道封装

注册登录

路由导航

前端路由管理

权限管理

用户管理

分类管理

标签管理

文章管理

模块化功能封装

校验库封装

promise链式行为封装

异步模块处理

SPA单页面应用初级实现

原生集中行为控制器

模板化+模块化+预处理+工程化实现前端页面

组件化封装

组件化基础概念

组件设计原则

组件封装

组件耦合与解耦

工程化+模板化+模块化实现原生组件化功能

vue框架部分

vue基础

vue开发准备

工具与插件

mvc mvp mvvm设计理念

原生js实现MVVM核心框架

vue设计模式

生命周期

命令与属性

组件化

数据驱动与双向绑定

虚拟DOM概念原理

模板语法

条件与列表

数组监测

计算属性

事件处理

修饰与表单

监听器

过滤器

methods watch computed filter对比

组件化开发

动态组件

组件通信

高级组件通信

插槽

vue动画

实例对象

set

get

nextTick

vue插件

vue工程化

Babel

webpack配置vue

vue单文件组件

vue-cli

工程平台处理

postCss

animate

core

socket

lodash工具

vue-cli插件

preset

静态资源处理

环境变量与膜还是切换

工程化部署

工程构建

vue Router

vue路由概念

嵌套路由

路由视图

动态路由

路由匹配

编程式导航

history

hash模式管理

命名视图

重定向与别名

导航守卫

路由元信息

滚动与懒加载

导航故障处理

vuex

vuex核心概念

EventBus对比

状态管理模式

Store

state

getter

mutation

action

moudule

vuex辅助函数与API功能

vuex环境选择

vuex模块化处理规则与技巧

对象风格提交方式

模块重用等

vue项目实战

vue博客项目实战 PC + 移动端

elementUI

vantUI

websocket聊天室

虚拟人偶

vueScroll

store

qs

nprogress

editor

文章分类

词云效果

spa单页面应用

移动PC无缝切换

完整注册登录

vue加密鉴权

http封装管理

错误处理封装

vuex核心状态管理

本地存储状态更新

令牌处理

文章富文本编辑

点赞

收藏

访问

评论

组件封装

组件复用

组件混合

高级组件开发

复合性组件通信

vue中处理原生DOM行为

vue常见错误处理

重置vue数据响应

个人信息修改

头像上传

通知组件封装

postcss应用

Tags 标签

扩展阅读

加个好友，技术交流