前端开发必备，【项目实战】

前言

假如有那么残酷的一天，我不小心喝错了一瓶药，一下子抹掉了我这十多年的编程经验，把我变成了一只小白。我想自学前端，并且想要找到一份工作，我预计需要 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)

第三个阶段，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类

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

最后

前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档

[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](()

网络api
相机api
地图api

4，uniapp

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

最后

前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档

[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](()

[外链图片转存中…(img-JA3mtqkY-1650778503229)]

[外链图片转存中…(img-qAOPGfDV-1650778503229)]