前端JavaScript学习路线，图书推荐

发布时间：2023-01-12 08:30

一、初级前端

确定基础ok了(比如最常见的HTML标签及其属性、事件、方法；最常见的CSS属性；基础的JavaScript编程能力)，能够完成一些简单的WEB前端需求。

1.1 推荐：《JavaScript Dom编程艺术》

简洁，实用，详细，易懂，书不厚，相信很快就能看完。

读完感受：开始看这个书的名字以为需要多么牛的JS技术，到手之后发现远远不像我之前想象的那样，书中的内容真的非常好懂，讲解方式非常人性化，就好像一个老师在你面前给你讲课一样，没有一些翻译过来的书那样读起来别扭的地方，书中讲到的一些技巧是作者多年总结出来的一些经验，看了这本书后自己会少走很多弯路，上大学的时候就听说过这本书，当时一直没买，现在有相见恨晚的感觉，五星奉上

二、前端初级开发

初级开发首先不要过多苛责代码的对错严谨，毕竟每个程序员都有这样的一个过程。

2.1 推荐：《JavaScript高级程序设计》(第二版)

重点说一下第五章(类型),第六章(OOP),第七章(匿名),多看几遍,至少要完全看明白，能为以后进阶打好基础，个人感觉这几章是本书的精华所在。

读完感受：不建议没有任何编程基础的人直接来看这边书，因为里面有1/3的内容比较专业，javascript高手就需要特别推荐了，很多我们常用的东西，比如函数的参数，我一直以为是数组来着，看完才发现是自己的误区，类似的情况还有这里面讲我们平时操作的变量，作为一个松散类型的符号标记来使用，同时进行的是值传递等概念，都是对已有知识很好的补充。

2.2 推荐：《高性能JavaScript》《JavaScript语言精髓与编程实践》

读完感受：《高性能JS》，这本书还是 Nicholas C.Zakas 所著，经典之作，书中大量举例了各种不同写法的JavaScript在浏览器中的性能情况，对规范JavaScript代码和提升性能有很好的帮助，最后提到了很多工具和性能测试的方法，灰常实用！建议看这本书，言简意赅多了~

都很薄，而且所说的内容只要有基础都不难。相信读完对以后的代码规范和浏览器差异性等高级问题有了新的认识。

三、前端中级开发

高质量的完成工作，并对产品或项目有自己的想法与理解。

3.1强烈推荐：《JavaScript DOM高级程序设计》

异常强大的一本JS巨作，此书不薄，强烈推荐。现在已经买不到正版了，找找电子版

读完感受：说实话，这本书的翻译一般，代码也有少许错误，可是这不影响这本书的强大，通过学习本书，可以理解一个JS的库如何产生，自己动手写一个简单的自己的JS库，如果你打算研究其他的JS库或者正在研究其他的JS库，那么这本书会使你的理解达到新的高度，进阶高级必读，写库必读。

3.2 推荐：《高性能网站建设指南》《高性能网站建设进阶指南》

达到一定程度以后真的合适的书很难找了，更多只有在工作中总结和积累。工作的越久碰到过的问题也就越多

读完感受：书不厚，但是很值得拥有，比起那些大段大段抄袭的书来说，这本可称得上是精髓。前后章节承接紧密，在读完前几本书之后我们对前端的性能和自己的代码的效率已经达到相当的高度了，然后我们在接触一些前端工程师的一些精髓。本书对HTTP请求，CDN，内容缓存和一些web开发中常见问题进行讲解。

一般说高级程序员一般都是至少都3年以上的工作经验，没办法，实践才出真理。（5年以上）的人近两年大概都会有一种感觉到天花板了。这是因为很多东西都已经成为了前端事实上的主流，以前前端没有的基建慢慢的被完善。语言、框架、可视化、跨端、游戏、工具/自动化/工程化这些领域都在发展。但我觉得，未来还会有更多新的东西，学无止境，你我皆有可能为前端贡献新的idea，加油吧，同志们！

有愿意看书的有不愿意看书的，还有想天上掉馅饼的，别傻了，捷径是没有滴，一步步学吧

JavaScript22天学习计划，就这么学，轻松学习JavaScript只需搞定这4部分！

第一部分JavaScript基础 9天

JavaScript基础从变量的定义与使用、数据类型及相互转换、运算符、流程控制语句、三元运算符、数组、函数、构造函数、内置对象以及对象等基础必备技能。

JavaScript初识导读
初始JavaScript
浏览器执行JS过程
JS三部分组成
JS三种书写位置
JS注释
什么是变量
变量的使用
变量小结
数据类型简介
字符串型String
boolean以及undefined和null
typeof检测变量数据类型
字面量
转换为字符串类型
运算符导读
算数运算符
表达式和返回值
前置递增运算符
后置递增运算符
递增运算符练习
前置递增和后置递增小结
比较运算符
逻辑运算符
逻辑运算符练习
逻辑中断逻辑与
逻辑中断逻辑或
赋值运算符
运算符优先级
流程控制分支结构导读
流程控制
剩余内容

第二部分 WEB APIs 7天

学完JavaScript基础，我们就可以学习JavaScript核心 DOM 和 BOM操作了，真正体会JavaScript的魅力，这里我们会讲解如何获取DOM元素，如何操作DOM 元素，BOM操作，事件，事件对象，事件委托，JS执行队列，定时器，常见网页特效，比如轮播图，tab栏切换等。还会讲解移动端如何制作网页特效，带你进入JavaScript的实际开发应用

js基础和Web APIs两个阶段的关联性
API 和 Web API
DOM导读
DOM简介
getElementById获取元素
getElementsByTagName获取某类标签元素
H5新增获取元素方式
获取body和html元素
事件三要素
执行事件过程
操作元素-修改元素内容
innerText和innerHTML的区别
操作元素-修改元素属性
分时问候案例
操作元素-修改表单属性
仿京东显示隐藏密码明文案例（上）
仿京东显示隐藏密码明文案例（下）
操作元素-修改样式属性
仿淘宝关闭二维码案例
循环精灵图
显示隐藏文本框内容
使用className修改样式属性
密码框验证信息
操作元素总结以及作业
排他思想（算法）
百度换肤效果
表格隔行变色效果
表单全选取消全选（上）
表单全选取消全选（下）
获取自定义属性值
剩余内容

第三部分：jQuery 4天

jQuery是一个优秀的JavaScript代码库。倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理与交互。 jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。

jQuery就是一个js库
如何使用jQuery
jQuery的各版本及区别
jQuery的入口函数
$是一个函数
dom对象和jQuery对象介绍
dom对象和jQuery对象之间的相互转换
案例-开关灯
设置获取文本内容text()
设置获取样式css()
基本选择器
层次选择器
过滤选择器-隔行变色
案例-下拉菜单
mouseenter事件和mouseleave事件
案例-突出展示
案例-手风琴
案例-淘宝服饰精品
Class类操作_01
Class类操作02
案例-tab栏切换
jQuery动画-显示show()隐藏hide()
jQuery动画-滑入slideDown()滑出slideUp()
案例-动画版下拉菜单
jQuery动画-淡入fadeIn()淡出fadeOut()
自定义动画animate()
案例-360开关机动画
动画队列-以及stop参数的含义
动态创建元素-html()和$()
案例-生成表格
jQuery添加节点的几种方式
剩余内容

第四部分综合练习2天

购物车综合案例，本地存储加强，todolist本地存储综合案例，常见jquery插件，瀑布流，懒加载，全屏滚动，bootstrap JS插件使用

淘宝服饰精品案例
jQuery链式编程
jQuery修改样式css方法
jQuery修改样式操作类
tab栏切换案例.
jQuery类操作和className区别
jQuery显示与隐藏效果
jQuery滑动效果以及事件切换
jQuery停止动画排队stop
jQuery淡入淡出以及突出显示案例
jQuery自定义动画animate方法
王者荣耀手风琴案例布局分析
王者荣耀手风琴案例制作
jQuery属性操作
购物车模块-全选（上）
购物车模块-全选（下）
jQuery内容文本值
购物车模块-增减商品数量
购物车模块-修改商品小计（上）
购物车模块-修改商品小计（中）
购物车模块-修改商品小计（下）
jQuery遍历对象each方法
jQuery遍历数据$.each
购物车模块-计算总件数和总额
创建、添加、删除元素
购物车模块-清理购物车
购物车模块-选中商品添加背景颜色
jQuery尺寸方法
jQuery位置方法
jQuery被卷去头部方法
剩余内容