[](

)第三个阶段，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）函数操作

文末

技术是没有终点的，也是学不完的，最重要的是活着、不秃。

零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。

最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

自学最怕的就是缺乏自驱力，一定要自律，杜绝“三天打鱼两天晒网”，到最后白忙活一场。

高度自律的同时，要保持耐心，不抛弃不放弃，切勿自怨自艾，每天给自己一点点鼓励，学习的劲头就会很足，不容易犯困。

技术学到手后，找工作的时候一定要好好准备一份简历，不要无头苍蝇一样去海投简历，容易“竹篮打水一场空”。好好的准备一下简历，毕竟是找工作的敲门砖。

拿到面试邀请后，在面试的过程中一定要大大方方，尽力把自己学到的知识舒适地表达出来，不要因为是自学就不够自信，给面试官一个好的印象，面试成功的几率就会大很多，加油吧，骚年！

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