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

￡神魔★判官ぃ 2023-01-05 12:48 166阅读 0赞

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

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

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

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

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

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

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

##### 1，HTML： #####

*  [常用标签][Link 1]（div标签，p标签，span标签，a标签，img标签）
 *  锚点
 *  [列表标签][Link 2]（有序列表，无序列表，自定义列表）
 *  [表单标签][Link 3]
 *  [表格标签][Link 4]
 *  标签分类
 *  [标签语义化][Link 5]
 *  注释
 *  字符实体

##### 2，CSS： #####

*  [CSS介绍][CSS]
 *  全局样式
 *  行内元素
 *  内联元素
 *  选择器  
    （1）基础选择器（标签选择器，类选择器，ID选择器）  
    （2）复合选择器（后代选择器，兄弟选择器，相邻元素选择器，交集选择器，并集选择器）  
    （3）选择器优先级
 *  [字体样式值][Link 6]
 *  [文本样式值][Link 6]
 *  颜色样式值
 *  盒模型（标准盒模型，怪异盒模型）
 *  控制台使用
 *  [清除默认样式][Link 7]
 *  [盒模型居中][Link 8]
 *  [标准文档流][Link 9]
 *  块元素
 *  行内元素
 *  行内块元素
 *  多种伪类元素
 *  浮动  
    （1）浮动元素脱离文档流  
    （2）外边距塌陷问题  
    （3）N种清除浮动的方式
 *  定位(相对定位，固定定位，绝对定位，z-index)
 *  [CSS面试题总结][CSS 1]

### **第三个阶段，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面试题总结][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使用

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

![022910ba96ca0acf0ae9e72302bc7766.png][]

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

[Link 1]: https://www.jianshu.com/p/7929e4c9ff48
[Link 2]: https://www.jianshu.com/p/1ed4518165d6
[Link 3]: https://www.jianshu.com/p/b31bb5a7b953
[Link 4]: https://www.jianshu.com/p/54a0f2e6db7c
[Link 5]: https://www.jianshu.com/p/67318c924310
[CSS]: https://www.jianshu.com/p/27977214b2f5
[Link 6]: https://www.jianshu.com/p/6aac3485307e
[Link 7]: https://www.jianshu.com/p/83ac6ee72dbb
[Link 8]: https://www.jianshu.com/p/1162c4f9590c
[Link 9]: https://www.jianshu.com/p/a905aaa7d264
[CSS 1]: https://www.jianshu.com/p/f1592762ba31
[JavaScript]: https://www.jianshu.com/p/fe7a16e3fd19
[Link 10]: https://jq.qq.com/?_wv=1027&k=n3fRmyCT
[022910ba96ca0acf0ae9e72302bc7766.png]: /images/20221119/d564f078327747d79a78d864690846bc.png