结尾
学习html5、css、javascript这些基础知识,学习的渠道很多,就不多说了,例如,一些其他的优秀博客。但是本人觉得看书也很必要,可以节省很多时间,常见的javascript的书,例如:javascript的高级程序设计,是每位前端工程师必不可少的一本书,边看边用,了解js的一些基本知识,基本上很全面了,如果有时间可以读一些,js性能相关的书籍,以及设计者模式,在实践中都会用的到。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
当然如果你愿意,建议你可以先仿一个网站的静态页面(掘金、知乎等都可以),有一些属性就可以了解他实际的实现场景。
当然刚开始敲代码的时候还是不要过分依赖自动补全功能,一开始就使用自动补全对你记忆一些属性时没有帮助的;踏实点学习,日后会有回报的。
关于 CSS(3) 你需要了解的一些知识点
-
盒模型(标准 & IE )
-
flex、float、Normal Flow 等的理解
-
CSS 常用选择器
-
行内、内部、外部样式的区别
-
CSS 层叠规则
-
BFC 与 IFC 的了解
-
CSS3 的 transform、transition、animation 等属性的运用了解
-
响应式布局的理解
-
……
CSS 说容易也容易,说复杂也复杂;因为 CSS 总是能给你意外的惊喜。
HTML(5) 你需要了解的一些知识点
说到 HTML 我想有很多人是 div
一把梭。因为 div
用的爽,不用担心默认样式。
有人说 HTML 语义化的优点很多,比如清晰的页面结构、有利于 SEO、便于团队开发和维护;这些我都承认,不过我还是喜欢
div
一把梭。
-
HTML 语义化( 不是很理解为什么面试总会问 )
-
canvas
-
本地存储( localStorage、sessionStorage、cookie 的理解 )
-
video 和 audio 的使用
-
应用缓存( cache manifest )
-
……
JavaScript
JavaScript
一直都是我们前端的基石,一定程度上 JavaScript
的理解深度决定了你的发展。所以一定要用心学习。
现在很多人一看到闭包、原型链、作用域链、继承之类的文章都是直接跳过,你现在可以自问一下你的确理解这些基础的知识点吗?
JavaScript
的基础知识点确实很多,所以《JavaScript 高级程序设计》 写了 700 多页;不过当你 JS 基础扎实后,你会发现你在学习框架、亦或是学习框架源码的时候会轻松许多。
JavaScript(ES6+) 你需要了解的一些知识点
-
类型转换
-
this
-
作用域(作用域链)
-
原型链以及继承
-
闭包的理解
-
动态作用域和词法作用域
-
JavaScript 执行机制
-
promise & async
-
……
上面说的 CSS & HTML & JavaScript
的基础知识点并不需要你一入门就全部都理解透彻;有些虽然是基础,但却也有它的难度。就算是高级也不敢说自己全都掌握了,有句话说的挺好 —— 书读百遍、其义自见。
我们第一遍学习不可能尽懂,到最少可以给我留下一个印象。过一段时间再学习这块知识点的时候,你肯定会有一个全新的理解。学习只一个需要一直在线的任务,重复的学习可以帮助你保持持续的竞争力。
我先声明一点,我并没有说其他技术不需要去学习,只不过初入门最好重点是先将基础夯实。
其实三大件的学习不需要花费多少时间,有基础的大概 3 个月就可以大致的看一遍。 是否真的理解这是后话,不过已经算是入门了。
CSS & HTML & JavaScript 推荐书籍/网站
HTML
- 《Head First HTML与CSS》
Head Fisrt系列书你懂的,为入门而生,文笔风趣幽默为主,配图也很丰富,简单易懂就对了。
- 《HTML5 权威指南》
豆瓣评分8.5的书,书是没问题,800
多页的书全面性不用说,但是能不能读得完这是一个问题,就看决心和“手速”了。
-
网络教程
-
https://www.w3school.com.cn/h.asp
-
https://www.runoob.com/html/html-tutorial.html
-
https://developer.mozilla.org/
CSS
- 《CSS权威指南》
放在现在来看是本“老书”了,但是很多基础的东西在那摆着也得学。CSS东西就是细节多,这本就当是给CSS的知识点做了一个大梳理吧,所以这本书当工具书看是可以。
- 《CSS揭秘》
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8qFV7TCz-1605698383286)(//upload-images.jianshu.io/upload_images/9824247-93238fe68fe86206.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)]
这本书展示了47
个CSS的技巧,是一本注重实践的教程,虽然算进阶书,但是内容没那么难,看完对很多实现思路有启发。
-
网络教程
-
https://www.runoob.com/css/css-tutorial.html
-
https://www.w3school.com.cn/css/index.asp
-
https://developer.mozilla.org/
JavaScript语言
- 《你不知道的 JavaScript》
这本书是翻译过来的,分好几卷,黄油油的封面你懂的~ 应该说这本书把JavaScript
里很多复杂且深度的概念进行了细致讲解,比如作用域、闭包、原型、异步等等,网上书评啥的还是可以的。
- 《JavaScript DOM编程艺术》
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kbsH8k1u-1605698383295)(//upload-images.jianshu.io/upload_images/9824247-f3c1b39a305f4770.png?imageMogr2/auto-orient/strip|imageView2/2/w/1052/format/webp)]
这本书并不厚,小白可用,初学时搞定并实践了这本书里的内容,应该入门没啥问题,这样后面就可以找一些经典甚至圣经类的书来加强和巩固了。
- 《JavaScript 高级程序设计》
大名鼎鼎的JS
红宝书,是权威的JavaScript
入门书籍,没错是入门书籍!不要被名字里的“高级”两个字吓跑~ 内容循序渐进,基础且全面,不能指望一遍就过,适合精读也适合回味。
- 《JavaScript权威指南》
上面是“红宝书”,这本是“犀牛书”,据说这两本在一起更搭配哦。
这本书是淘宝前端团队翻译的,也算是JavaScript
开发者的圣经之一,内容太多太全,如果能多通读几遍并有所心得,估计成神之路也就不远了~
-
网络教程
-
菜鸟教程:
https://www.runoob.com/js/js-tutorial.html
-
现代JavaScript教程:
https://zh.javascript.info/
-
MDN文档:
https://developer.mozilla.org/
对于库工具而言我们常用的有 JQuery、underScore、zepto、Moment 等
-
JQuery: 降低开发者操作 DOM 的复杂度
-
UnderScore: 提供实用的函数
-
Zepto: JQuery 的简化版
-
Moment: 日期和时间操作库
这些库给我们提供了很大的便利,省去了我们编写相关方法的时间,同时也是我们的程序更加稳健 —— 我们自己写的方法很可能在某些情况下就出 bug 了。
当然对于这些库我们不仅仅只是去了解 API,我们需要去学习它的源码。看看如果自己写相关方法的话是不是也想到了这种方式,这些库工具是也是一个很好地学习工具,我们不应该忽略。
-
比如让你自己实现节流函数,你会如何实现。
-
过滤对象应该如何实现
-
……
这种问题的答案不就在 Underscore 源码里面吗?
我们在学习库工具的时候,必定是需要回头看 JavaScript 基础的;这也就进一步夯实了基础。
当下最火的框架想必一定是 React 和 Vue,如果 JQuery 的存在是是我们更加方便的操作 DOM,那么现在 MVVM 框架则是让我们从手动更新 DOM 的繁杂操作中解放出来。
至于 React 和 Vue 该学习哪一个,更多的还是看当下公司使用的是哪一个(也不是必然)。对于 Vue(React) 该如何使用其实不用多久就能上手,我们更应该关心的是他们背后的设计思想和实现原理。
一些问题
-
响应式的基本原理是什么
-
发布订阅模式的理解
-
Virtual DOM 的理解
-
前端路由的实现原理
-
nextTick / setState 的实现原理
-
diff 算法
-
单页面应用(SPA)的原理和优缺点
-
……
我们对于框架的 API 使用没必要花太多时间,应该多研究他们背后的设计思想和实现原理。
Vue 和 React 我该选择哪一个?
对于这个问题相比很多人都有困扰(有些人两个都学,也就没有这个困扰),这个问题已经有很多人回答了。但我还是觉得不是非要选择哪一个才是政治正确,选择你需要的。
感兴趣的可以看看这篇文章:
React or Vue: Which Javascript UI Library Should You Be Using?
以下是提炼的文中观点:
Vue的优势是:
-
模板和渲染函数的弹性选择
-
简单的语法和项目配置
-
更快的渲染速度和更小的体积
React的优势是:
-
更适合大型应用和更好的可测试性
-
同时适用于 Web 端和原生 App
-
更大的生态系统,更多的支持和好用的工具
Vue 相关资料
对于框架的一些学习资料我个人更倾向于推荐官方文档,有很多问题官方文档已经说得很清楚了。市面上有些书籍也就是对官方文档进行了一个扩写(不排除有精良之作)。
-
剖析 Vue.js 内部运行机制 掘金小册
如果你希望能能快速进阶到高级工程师,那么对于浏览器 & 计算机基础的知识你就必要又有一定的掌握。因为这能让你更好的理解前端。
浏览器一直是 JavaScript 最重要的宿主环境,所以我们必须去了解 JavaScript 在浏览器中是如何执行的。
我们前端开发接触最多的应该就是浏览器了,记得工作第一年最头痛的就是处理 IE 的兼容问题。工作中出现的很多问题都和浏览器有关,所以我觉得了解浏览器工作原理是非常有必要的。
为何要学习浏览器工作原理?
-
准确评估 Web 开发项目的可行性
-
从更高维度审视页面
-
解决面试中遇到的绝大部分浏览器问题
计算机基础
对于计算机基础我们需要做到大体了解,这样的话我们对整体的流程会有一个大概的把握。在实际开发过程中不会过于被动。
需要了解的一些知识点
-
浏览器缓存机制
-
浏览器中 JavaScript 的执行机制
-
页面渲染原理
-
浏览器安全问题
-
浏览器为什么会跨域
-
如何系统的优化页面
-
HTTP 与 HTTPS 的区别
-
TCP/IP 协议
-
三次握手和四次挥手
-
CDN 的作用和原理
-
正向代理与反向代理的特点
-
……
这里仅仅列出了一部分知识点,如果想全面的学习可以看下面推荐的资料。
浏览器 & 网络基础推荐书籍/资料
-
《浏览器工作原理与实践 》专栏
-
《图解 HTTP》
-
《网络是怎样连接的》
紧跟潮流
大前端和全栈是以后前端的一个趋势,懂后端的前端,懂各端的前端更加具有竞争力,以后可以往这个方向靠拢。
这边整理了一个对标“阿里 50W”年薪企业高级前端工程师成长路线,由于图片太大仅展示一小部分
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】