自学前端，学多久可以自己找到工作？

假如有一天，我不小心失忆了，忘记了所有的编程经验，我变成了一只小白。我想自学前端，并且想要找到一份工作，我预计需要 6 个月的时间，前提条件是每天都处于高效率的学习状态当中，并且每天的学习时间至少在 12 个小时以上。

即便是这样，我敢肯定，找到的工作肯定不会太好，勉强能够维持生活吧，毕竟是零基础入门啊。

如果想更进一步，真正成为一名不可或缺的高级前端工程师，时间需要更久，两年、三年、五年，直到秃的那天。

想着想着，我就觉得有必要为那一天做点准备，以备不时之需。

第一个阶段，开发环境和工具准备

• 浏览器 （Google，FireFox，…）
• 下载，安装前端开发工具vscode，
• 下载、安装 node、npm、webpack、webpack-cli、cnpm，配置前端开发环境
• 下载、配置PHP和MySQL

第二个阶段，前端入门，网页制作

1，HTML：

• 常用标签（div标签，p标签，span标签，a标签，img标签）
• 锚点
• 列表标签（有序列表，无序列表，自定义列表）
• 表单标签
• 表格标签
• 标签分类
• 标签语义化
• 注释
• 字符实体

2，CSS：

• CSS介绍

• 全局样式

• 行内元素

• 内联元素

• 选择器
  （1）基础选择器（标签选择器，类选择器，ID选择器）
  （2）复合选择器（后代选择器，兄弟选择器，相邻元素选择器，交集选择器，并集选择器）
  （3）选择器优先级

• 字体样式值

• 文本样式值

• 颜色样式值

• 盒模型（标准盒模型，怪异盒模型）

• 控制台使用

• 清除默认样式

• 盒模型居中

• 标准文档流

• 块元素

• 行内元素

• 行内块元素

• 多种伪类元素

• 浮动
  （1）浮动元素脱离文档流
  （2）外边距塌陷问题
  （3）N种清除浮动的方式

• 定位(相对定位，固定定位，绝对定位，z-index)

• CSS面试题总结

第三个阶段，JavaScript动态交互

1，JavaScript初阶

• 变量和运算符
  （1）JS用途
  （2）JS书写规则
  （3）内置函数使用
  （4）字面量
  （5）变量
  （6）命名标识符规范
  （7）变量声明提升
  （8）运算符（数学运算符，比较运算符，逻辑运算符，赋值运算符）
  （9）页面修改（innerHTML，innerText，value）
• 逻辑控制
  （1）if关键字（if…else，if…else if…else，多分支条件语句，嵌套if语句）
  （2）for关键字（for循环，双重for循环）
  （3）自增
  （4）自减
  （5）switch条件语句
  （6）累加器
  （7）累乘器
  （8）while（continue关键字，break关键字，while循环语句，do…while循环语句）
  （9）js控制HTML标签
  （10）三目运算符
  （11）运算符优先级
• Math类
  （1）Math属性（Math.PI，Math.E，…）
  （2）Math函数（round，floor，ceil，…）
• 函数
  （1）无参函数
  （2）函数定义
  （3）函数调用
  （4）作用域
  （5）参数（形参，实参，入参，出参）
  （6）不定参函数
  （7）arguments
• Object类
  （1）对象的定义
  （2）对象的使用
• 定时器
• Array类
• String类
• Date类
• JavaScript面试题总结

2，JavaScript进阶

• JavaScript DOM基础
  （1）DOM元素遍历
  （2）DOM元素查找
  （3）DOM元素增加
  （4）DOM元素删除
  （5）DOM元素修改
  （6）DOM元素剪切
  （7）属性操作
  （8）样式操作
  （9）文档碎片
• this（在各个环境下this的指向）
• 事件
  （1）普通事件回顾
  （2）绑定事件
  （3）取消普通事件
  （4）取消绑定事件
  （5）事件类型（键盘事件，鼠标事件，聚焦&失焦事件）
• 事件流
  （1）事件源
  （2）事件流
  （3）事件冒泡
  （4）事件捕获
  （5）事件委托
• JavaScript BOM 基础
  （1）offset
  （2）client
  （3）scroll
  （4）getBoundingClientRect()
  （5）滚动事件
• call&apply&bind
  （1）深入探究作用域
  （2）偏函数的使用
• 自定义属性
• 面向对象编程
  （1）封装
  （2）构造方法
  （3）instanceof
  （4）constructor
  （5）继承（函数继承，构造函数继承，类继承）
  （6）原型
  （7）原型链
  （8）多态

3，ES6

• ECMAScript6简介
• let和const
• ES6+的作用域
• 对象的扩展
• 函数的扩展
• 字符串的扩展
• Symbol
• Set&Map
• Promise对象
• async&awiat
• 箭头函数
• 模板字符串
• rest参数
• Class
• Module模块

4，JavaScript高阶

• 闭包
  （1）深入理解闭包
  （2）深入理解闭包原理
  （3）闭包面试题权威解析
• 立即执行函数
• 惰性函数
• 插件开发
• 多人协作
• 深复制与浅复制
• 数组扁平化
• 递归
  （1）斐波那契数列详解
  （2）递归深复制与浅复制
  （3）柯里化思想
  （4）柯里化及递归面试题权威解析
• 正则表达式全解
• 函数防抖
• 函数节流

第四阶段，移动端开发技术实战

1，HTML5

• HTML5简介
• HTML5新语法
• HTML5新语义化标签
• HTML5新表单元素属性
• HTML5手机端新事件处理
• HTML5新增多媒体实战
• 本地存储（cookie，localStorage，sessionStorage）
• Canvas
• HTML5地理组件GeoLocation

2，CSS3

• CSS3新增属性
• 圆角制作企业级方案
• CSS3背景属性
• 过渡动画 transition
• 变化属性 transform
• 特效轮播图实战
• 企业级flex布局实战
• grid布局实战

3，Bootstrap

• 响应式
• 媒体查询（媒体类型，媒体特性，媒体查询企业级应用）
• 栅格系统
• 栅格参数
• 组合模式
• 列偏移/列排序/自动列
• 列对齐/列嵌套
• 文本与颜色
• 按钮
• 导航
• 图文混排
• 模态框
• 轮播图

4，移动端开发

• 移动端简介
• 移动端视口约束
• 移动端flex移动端实践
• rem
• vw
• flexible企业级实战

第五阶段，前后端分离技术及常用类库

1，ajax

• AJAX简介
• AJAX作用
• 封装AJAX
• 创建XMLhttpRquest对象
• 同步和异步
• AJAX分页

2,JQuery

• jQuery介绍
• jQuery链式语法
• jQuery选择器
  （1）基础选择器
  （2）复合选择器
  （3）jQuery独有选择器
• jQuery核心
  （1）jQuery核心函数
  （2）jQuery对象访问
  （3）数据缓存
  （4）队列控制
  （5）插件机制
  （6）多库共存
• jQuery工具
  （1）浏览器及特性检测
  （2）数组和对象操作
  （3）函数操作
  （4）测试操作
  （5）字符串操作
  （6）URL
  （7）插件编写
• jQuery事件
  （1）原始事件
  （2）创建事件
  （3）页面载入
  （4）事件处理
  （5）事件委派
  （6）事件切换
  （7）事件
• jQuery事件对象
• jQuery特效(基本，滑动，淡入淡出，自定义，设置)
• jQuery回调函数
• jQuery文档处理（内部插入，外部插入，包裹，替换,删除，复制）
• jQuery筛选（过滤，查找，串联）
• jQuery属性（属性，CSS类，HTML代码/文本/值）
• jQueryCSS（CSS，位置，尺寸）

Echarts

• Echarts概述
• Echarts使用
• 坐标系
• 雷达图/饼状图/折线图

第六阶段，企业级高级WEB架构开发

1，Webpack

Webpack的安装和使用

• 项目模块打包
• 静态打包模块器
• Webpack入口
• Webpack输出
• Webpack插件
• webpack模块

2，Vue

• Vue使用
• Vue响应式
• Vue双向数据绑定
• Vue相关指令
  （1）条件渲染v-if
  （2）v-bind指令
  （3）v-on指令
  （4）v-on的修饰符
  （5）列表渲染
  （6）v-model指令
  （7）v-model详细讲解
  （8）v-cloak
• vue-resource
• axios
• template选项
• Vue生命周期
• Vue组件
  （1）Prop
  （2）监听组件事件
  （3）插槽
  （4）动态组件
  （5）组件通信（父子，子父，其他组件）
  （6）函数式组件
  （7）异步组件
• 自定义指令
• 过滤器
• computed属性
• Vue-cli 2.x和3.x 脚手架配置
• Vue-router
  （1）VueRouter基础
  （2）嵌套路由
  （3）路由重定向
  （4）动态路由
  （5）路由传参
  （6）导航守卫
• Vuex（State，Getter，Mutation，Action，Module）
• Element UI

3，微信小程序

• uni-app
• mpvue
• 微信小程序注册
• APPID申请
• 生命周期
• 小程序调试
• 微信小程序框架组件
• 微信小程序布局框架
• 微信小程序条件渲染和列表渲染
• 媒体组件audio
• 视图容器
• 网络api
• 相机api
• 地图api

4，uniapp

• uniapp基础
• uniapp初始化配置
• uniapp视图模板使用
• uniapp生命周期
• uniapp路由跳转
• uniapp常用组件
• uniappScrollView的使用
• uniapp-ui使用
• uniapp-Vuex使用

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。有需要面试题文档，点击这里可以免费领取。

**结语：**技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。