我第一份Web前端工作能找到12k的工作，就是掌握了这些技术栈

我个人的情况是有1年web前端工作经验+半年的实习经验，2020年毕业，大一的时候学过C语言，所以一直对于编程感兴趣。我是从大三开学后正式开始自学web前端相关的知识，之所以选择前端方向，一方面是自己对于网页更加感兴趣，二是听我哥说目前web前端的发展趋势更好（我哥在网易做程序员），所以我就确立了前端方向为以后我就业的主要方向。从开始自学到大四的实习，我一共花了1年2个月时间，把前端主要的技术点和框架都过了一遍，自己做了三个Vue的项目实战。然后在2019年的10月份进入了杭州当地的一家公司实习半年，一直到2020年4月在这家公司转正，待遇是月薪12K*14薪+五险一金。目前算上实习的时间，我已经在这家公司工作一年半多的时间，我并不打算跳槽，我哥说的意思就是，尽量别因为工资高低的问题频繁跳槽，如果这家公司还有很多成长的空间，还能学到很多东西，就不要轻易跳槽。因为我在自学一年的过程中，我哥给了我很多的帮助，所以他的建议我是一定要听的，而且我觉得确实是这样的道理。因为我是刚毕业一年的，所以这篇文章主要也是写给在校的学弟们一些建议，希望能给大家带来帮助。

给大家总结我一年时间学了哪些前端技术：

说明：下面的内容就是我一年时间全部掌握的内容，为什么我会列得如此之细，重点就在这里，其实这些技术都是大家平时可以接触到的，我们在实际的开发工作中用的也都是这些技术，只不过不同的是大家掌握的程度不一样。我们学的技术名称可能是一样的，但是我们对于这门技术所理解的深度以及掌握的实际操作水平可能相差很多，这就是我一个二本学历为什么可以在毕业后第一份工作就拿到12K，我觉得是这个原因，就是因为我学得非常细，所以希望大家不要抱怨内容太多，你要是真想在前端这个领域成为技术大牛，这都是必须要做的。

一定要看到最后，有所有前端学习资料的链接！

一定要看到最后，有所有前端学习资料的链接！

一定要看到最后，有所有前端学习资料的链接！

一、HTML/CSS3

标签基础

DTD与META

语义化

选择器

权重与优先级

匹配规则

浮动与清除

BFC

类名组合规则

SEO前端技巧

定位

叠加技巧

伪类

伪元素

盒子模型

代码规范

性能优化

渲染原理

CSS Sprites

iconfont字体图标

布局思路

布局定式

css3动画

css3选择器

css3过渡

flex布局

背景渐变

css3实用动效

3D模块

css3变量

em/rem/vw

企业内部多页面项目实战

二、JavaScript

1、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指向偏移、同步与异步、闭包模块化、数据形变处理、性能处理

2、DOM/BOM

DOM对象与方法

节点与遍历树

DOM选择器

DOM节点增删改查

DOM样式操作

DOM位置获取与偏移

DOM对象与标签区别

DOM虚拟化

DOM事件

Event对象

定时器与监听器

事件委托

事件代理

事件分流

事件冒泡

默认行为

事件捕获

防抖

节流

滚动

键盘行为

事件降频

行为锁机制

拖拽模组

碰撞检测

距离判断

三角函数

方向判断

运动框架

弹性运动

重力加速度

DOM树

CSSOM树

渲染解析

加载

回流

重绘

浏览器线程与阻塞

BOM深入

window对象

Navigator

History

Screen

Location

spa概念

本地传参

日期对象使用

日期格式化封装

随机封装

DOM分片容器

3、JS业务应用扩展

JSON对象

数据解析

JSON方法

模板渲染

缓存懒加载

正则表达式RegExp

元字符

修饰符

正向预查

贪婪模式

replace方法

分组与不分组

test、match与exec

正则库封装

表单校验

图片预存懒加载

自定义封装滚动组件

多重轮播（循环、视差、旋转木马）、选项卡切换、楼梯导航、吸顶导航、拖拽导航 、

JavaScript编码风格指南

console应用技巧

4、ECMAScript5 --- ECMAScript9扩展

版本解读

应用环境

let、const

解构赋值

箭头函数

对象解构

reset参数解构

Class

Set

Get

Extends

Super

Static

private实现

symbo

Promise

proxy代理拦截

async/await

对象新增API

数组新增API

字符串新增API

原型属性

对象修饰

代理拦截

链式询问

空值合并运算符

泡泡龙面向对象游戏开发

三、HTML5 / 移动端开发 部分

1、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使用

禁用缩放设置理想视口

2、常用类库/工具

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 模板化应用 、预处理应用

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

需求分析

业务规则

技术栈选型

文件输出规则

技术分析

MVC模型概念与设计

业务逻辑分类

view层适配方案

原型布局搭建

模板化生成

工具函数开发

面向对象式业务设计

能类日期对象开发

交互业务封装

模块对接

优化设计

面向对象高级程序设计

四、Node与工程化开发

1、Node原生基础

Node基础概念

NPM命令

V8引擎概念

JavaScript模块化 CMD AMD UMD

EventLoop事件循环

同步异步

阻塞非阻塞

任务队列

宏任务

微任务

原生Node模块

核心模块与require

Module

触发器events与path模块

fs模块

Buffer对象

URL模块

HTTP模块

stream流

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

2、Node框架

express框架使用

中间件

核心对象

路由配置

模板引擎

数据脚本

Router核心

CORS配置

错误处理

校验封装

PM2管理

nodemoon管理

MORGAN日志处理

查询正则捕获

中间件开发

bodyParse等第三方中间件使用

文件流上传下载

文件流切分

3、webpack工程化构建

工程化概念

工程化工具介绍

webpack基础知识

webpack配置与运行

plugin插件

loader使用

入口出口配置

模块modules

依赖处理

dev Server

target

文件切分

build打包

热处理

package管理

性能优化

测试处理

第三方插件使用

babel等

4、前后端数据交互

HTTP通信交互原理

请求响应

MIME

URI地址

报文解析

端口

报文流

测试监听抓包

TCP/IP握手机制

网络业务模型

代理

缓存

网关

隧道等概念

method与请求头分类

基础XMLHTTPRequest对象方法属性

方法

ajax异步交互

同源策略原理

原生js封装ajax交互

jquery的ajax封装交互

jsonp跨域处理

cors跨域处理

携带cookie与跨域处理

代理服务器跨域处理

cookie验证与通信

axios库的使用代理

封装

拦截

合并

二次封装

通信加密策略

数据对称加密

数据非对称加密

RSA加密实践

MD5加密实践

登录注册与鉴权机制

Authenticity认证

Token认证

JWT认证

session状态管理

oauth认证

5、RESTful接口设计

RESTful设计原则

状态码设计与规范

服务器响应规则与格式

前后端接口协议制定

传统RESTful改进

API设计规范

资源定位

JSON模式

合约说明

资源标识符

缓存友好API

HTTP头管理

文档定义

松耦合原则

一致性

重用

稳定性原则

6、数据库存储

MongoDB基础概念

NoSQL与SQ

CAP定理

RDBMS

MongoDB语法

指令

监控与GUI

MongoDb驱动

Mongoose应用

数据库创建

集合增删改查

文档增删改查

数据库查询

高级查询操作

通道查询

多条件查询

反向筛选

索引处理

aggregate聚合管道

validation验证

population联表

middleware中间件处理

查询ERROR类二次封装

五、Vue框架

1、vue基础

工具与插件

mvc mvp mvvm设计理念

原生js实现MVVM核心框架

vue设计模式

生命周期

命令与属性

组件化

数据驱动与双向绑定

虚拟DOM概念原理

模板语法

条件与列表

数组监测

计算属性

事件处理

修饰与表单

监听器

过滤器

methods watch computed filter对比

组件化开发

动态组件

组件通信、高级组件通信

插槽

vue动画

实例对象

set

Get

nextTick

vue插件

2、vue工程化

Babel

webpack配置vue

vue单文件组件

vue-cli

工程平台处理

postCss

Animate

Core

Socket

lodash工具

vue-cli插件

Preset

静态资源处理

环境变量与膜还是切换

工程化部署

工程构建

3、vue Router

vue路由概念

嵌套路由

路由视图

动态路由

路由匹配

编程式导航

History

hash模式管理

命名视图

重定向与别名

导航守卫

路由元信息

滚动与懒加载

导航故障处理

4、vuex

vuex核心概念

EventBus对比

状态管理模式

Store

state

Getter

Mutation

Action

moudule

vuex辅助函数与API功能

vuex环境选择

vuex模块化处理规则与技巧

对象风格提交方式

模块重用等

如果学弟们可以掌握上述内容，我认为找到10K以上的工作没有任何问题。根据我的观察，目前网上很多机构的前端课程都是偷工减料，很多前端里面的知识点都是能删就删，400多课时的内容被压缩到180课时，所以就导致了现在很多人学习前端，但是很难找到工作的一个主要原因。如果不是我哥是做这方面的，我感觉自己应该会跟大多数人一样，学的内容都是欠缺很多，可能连工作都找不到，更不要说可以找到12K的前端开发工作。所以我觉得尽量要找一个身边的亲戚朋友做这方面的带带自己，不然一个人真的太容易走弯路。

看我分享的这些前端教程，绝对要比你在网上找的那些好很多倍：

因为链接不让发，想要获取教程的朋友，可以到这个WEB前端学习交流裙，484 757 760 ，裙文件里有全套教程下载链接，可以跟着学，有什么不懂的地方可以随时在里面问，大家都会帮忙解答，学习氛围很好。

这套教程就是对应着我上面总结的前端技术栈，这是我目前看到最好的前端课程，要比网上大部分教程讲得要好，特点就是更加的细致，很多实际开发的问题都有讲到，很注意前端方面的规范问题，这在很多前端教程中都是没有的，所以我认为更加适合新手学习就业。

推荐的前端书籍：

javascript编程精解

javascriptDOM编程艺术

javascript高级程序设计(3/4)

你不知道的javascript(上中下)

javascript权威指南

javascript设计模式与实践应用

喜欢阅读文字的学弟们可以看看这些书籍，这都是我挑出来比较经典的JavaScript技术书籍。

前端到底应该怎么学才好？

如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。学习编程并不是每天光看视频，你学习编程最重要的目的是为了编写软件产品，提供给大众使用，所以用手写出代码实现功能才是我们要做的事情。而很多同学不会学习，只是每天看视频，而不去写代码写项目实践，这样的学习状态是错误的。在整个学习过程中会出现很多问题，不懂就问，忘了就查，学习编程是一个漫长的过程，需要有足够的耐心和学习的决心。自我摸索自学的过程中会有很大的困难，最后能通过自我摸索自学成功的也是极少数。所以尽量要找一个比较有经验的人去带你，这样才不会走弯路。

如何找工作的问题？

在校的大学生一定不能错过大四的秋招，秋招是非常重要的，一般在秋招的时候都是一些比较好的公司，这个时候往往公司的数量也特别多，能走秋招就走秋招。如果秋招没有准备好，就等明年的春招，反正能通过校招进企业就通过校招进，一旦错过了校招，社招就会变得异常艰难。

还有IT圈一个非常重要的规则，就是通过熟人介绍，很多公司都有猎头，这些猎头就是发掘那些技术好的人才，通过各种方式进行挖人，所以通过关系进行内推也是找工作的主要方式，内推要更加容易就业。

再就是自己去投简历，这样找工作的方式就是海投，海投就会比较累，但是如果你技术能力强，也可以找到自己心仪的公司。如果是大学生，我建议一定要通过校招走，在学习的过程中，多认识一些关系，以后打算在这个圈子里面混，少不了认识一些公司的HR资源以及技术方面比较不错的大佬，我是打算干满三年，然后通过我哥在网易的关系把我内推到网易，网易的薪资就高了，去了后直接年薪30万起步，现在就是我积累的过程。

Tags 标签

扩展阅读

加个好友，技术交流