然这篇文章花了很长时间,肯定也有其局限性;希望各位不吝指出。
入题
我们俨然能感受到前端岗位现在已经发展成了最重要的研发岗位之一,所以对我们提出的要求也就越来越高。所以我们需要学的也就不仅仅只是 CSS & HTML & JavaScript 了。但这三大件一直都是前端的根本,这一点从未改变。而这三大件中 JavaScript 又是重中之重。
接下来我会结合我的一点经验,给出前端学习路线的一些具体建议。
目录
三大件学习
现在每年依旧有很多初级入门的前端开发。所以对初入门的朋友也给出一点意见。
刚入门的朋友,我觉得不应该一开始就学习像 Vue、TypeScript、Webpack 等知识。应该把重点放在 CSS & HTML & JavaScript 基础知识的学习上。
CSS & HTML
对于刚入门的朋友我依旧建议先将 CSS(3) & HTML(5) 的知识点认真学习一边。学习的途中最好是学习完一部分就自己在敲一遍代码,加深自己的记忆。
当然如果你愿意,建议你可以先仿一个网站的静态页面(掘金、知乎等都可以),有一些属性就可以了解他实际的实现场景。
当然刚开始敲代码的时候还是不要过分依赖自动补全功能,一开始就使用自动补全对你记忆一些属性时没有帮助的;踏实点学习,日后会有回报的。
关于 CSS(3) 你需要了解的一些知识点
CSS 说容易也容易,说复杂也复杂;因为 CSS 总是能给你意外的惊喜。
HTML(5) 你需要了解的一些知识点
说到 HTML 我想有很多人是 div 一把梭。因为 div 用的爽,不用担心默认样式。
有人说 HTML 语义化的优点很多,比如清晰的页面结构、有利于 SEO、便于团队开发和维护;这些我都承认,不过我还是喜欢 div 一把梭。
JavaScript
JavaScript 一直都是我们前端的基石,一定程度上 JavaScript 的理解深度决定了你的发展。所以一定要用心学习。
现在很多人一看到闭包、原型链、作用域链、继承之类的文章都是直接跳过,你现在可以自问一下你的确理解这些基础的知识点吗?
JavaScript 的基础知识点确实很多,所以《JavaScript 高级程序设计》 写了 700 多页;不过当你 JS 基础扎实后,你会发现你在学习框架、亦或是学习框架源码的时候会轻松许多。
JavaScript(ES6+) 你需要了解的一些知识点
上面说的 CSS & HTML & JavaScript 的基础知识点并不需要你一入门就全部都理解透彻;有些虽然是基础,但却也有它的难度。就算是高级也不敢说自己全都掌握了,有句话说的挺好 —— 书读百遍、其义自见。
我们第一遍学习不可能尽懂,到最少可以给我留下一个印象。过一段时间再学习这块知识点的时候,你肯定会有一个全新的理解。学习只一个需要一直在线的任务,重复的学习可以帮助你保持持续的竞争力。
我先声明一点,我并没有说其他技术不需要去学习,只不过初入门最好重点是先将基础夯实。
其实三大件的学习不需要花费多少时间,有基础的大概 3 个月就可以大致的看一遍。 是否真的理解这是后话,不过已经算是入门了。
CSS & HTML & JavaScript 推荐书籍/网站
HTML 不知道推荐什么书。我个人觉得看教程和动手实践就基本没什问题。
接下来我们就可以学习一些工具类的库了。
库工具
对于库工具而言我们常用的有 JQuery、underScore、zepto、Moment 等
这些库给我们提供了很大的便利,省去了我们编写相关方法的时间,同时也是我们的程序更加稳健 —— 我们自己写的方法很可能在某些情况下就出 bug 了。
当然对于这些库我们不仅仅只是去了解 API,我们需要去学习它的源码。看看如果自己写相关方法的话是不是也想到了这种方式,这些库工具是也是一个很好地学习工具,我们不应该忽略。
这种问题的答案不就在 Underscore 源码里面吗?
我们在学习库工具的时候,必定是需要回头看 JavaScript 基础的;这也就进一步夯实了基础。
前端框架( MVVM )的学习
当下最火的框架想必一定是 React 和 Vue,如果 JQuery 的存在是是我们更加方便的操作 DOM,那么现在 MVVM 框架则是让我们从手动更新 DOM 的繁杂操作中解放出来。
至于 React 和 Vue 该学习哪一个,更多的还是看当下公司使用的是哪一个(也不是必然)。对于 Vue(React) 该如何使用其实不用多久就能上手,我们更应该关心的是他们背后的设计思想和实现原理。
一些问题
我们对于框架的 API 使用没必要花太多时间,应该多研究他们背后的设计思想和实现原理。
Vue 和 React 我该选择哪一个?
对于这个问题相比很多人都有困扰(有些人两个都学,也就没有这个困扰),这个问题已经有很多人回答了。但我还是觉得不是非要选择哪一个才是政治正确,选择你需要的。
感兴趣的可以看看这篇文章:
React or Vue: Which Javascript UI Library Should You Be Using?
以下是提炼的文中观点:
Vue的优势是:
React的优势是:
Vue 相关资料
对于框架的一些学习资料我个人更倾向于推荐官方文档,有很多问题官方文档已经说得很清楚了。市面上有些书籍也就是对官方文档进行了一个扩写(不排除有精良之作)。
浏览器 & 计算机基础
如果你希望能能快速进阶到高级工程师,那么对于浏览器 & 计算机基础的知识你就必要又有一定的掌握。因为这能让你更好的理解前端。
浏览器一直是 JavaScript 最重要的宿主环境,所以我们必须去了解 JavaScript 在浏览器中是如何执行的。
我们前端开发接触最多的应该就是浏览器了,记得工作第一年最头痛的就是处理 IE 的兼容问题。工作中出现的很多问题都和浏览器有关,所以我觉得了解浏览器工作原理是非常有必要的。
为何要学习浏览器工作原理?
计算机基础
对于计算机基础我们需要做到大体了解,这样的话我们对整体的流程会有一个大概的把握。在实际开发过程中不会过于被动。
需要了解的一些知识点
这里仅仅列出了一部分知识点,如果想全面的学习可以看下面推荐的资料。
浏览器 & 网络基础推荐书籍/资料
前端工程化
从事前端稍微久一点的开发就一定会有这个感受 —— 前端开发越来越工程化,越来越复杂。
对于前端开发来说,现在前端要做的不只是切页面调接口这么简单,我们需要了解的技术无疑更加广泛。
前端工程化的一点浅见
由于项目的复杂度越来越高,前端需要做的工作就越来越繁重。当项目复杂就会产生许多问题,比如:
前端工程化细分的话我觉得可以分成模块化、组件化、规范化三个方向。或者说一切能提升前端开发效率,提高前端应用质量的手段和工具都是前端工程化的实践。
模块化
组件化
从 UI 拆分下来的每个包含模板(HTML)+样式(CSS)+逻辑(JS)功能完备的结构单元,我们称之为组件。
也就是将复杂页面按功能拆分成多个独立的组件。
规范化
前端工程化一些知识点
性能优化
提起性能优化,大家最先想到的是什么?我最先想到的是一道面试题:
从输入 URL 到页面加载完成的具体过程
因为从直观层面来看,我们前端需要优化的步骤基本都在这个加载工程当中。
性能优化现在对于前端来说已经是必不可少的技能了,当然现在有些所谓的性能优化的技巧现在都成为了一种需要遵从的规范。
我们需要关注两个方向的性能优化:
性能优化一些知识点
推荐资料
Nodejs
我们知道由于 Nodejs 的出现,前端开发出现了一个新的高潮。JS 开始可以涉及后端领域,JS 的可能性更大了。
Nodejs 一些知识点
数据结构和算法
这一点我也比较薄弱,就不展开了。关于这部分你可以刷 leetcode。
另外推一本书《学习 JavaScript 数据结构与算法》(第三版)
依葫芦画瓢
我们在项目开发的过程中可以接触到很多优秀的库工具或者是 UI 库。如 lodash、underscore、moment、element-ui、antd design 等。
我们可能自己设计不出来这么优秀的工具,但是我们完全可以依葫芦画瓢自己按着这些工具写一遍,你就会发现里面有很多不可思议的技巧、优秀的思想。
依葫芦画瓢对学习来说也是一个非常有用的技巧。
序员书库(ID:OpenSourceTop)综合整理
综合自:https://space.bilibili.com/511221970?spm_id_from=333.788.b_765f7570696e666f.2、https://www.zhihu.com/people/zhou-bo-lei
上个月,香港中文大学(CUHK)信息工程系助理教授周博磊在知乎上表示自己有一个大胆的想法:每周把每节课用中文在B站上直播《强化学习》课程:
近日,经过一番内心挣扎的周博磊终于在B站上上传了第一课。
这门课讲了什么?
该课程分为基础部分和高阶强化部分,基础部分是由8个小节组成,每一节可能会有两个课时左右,首先从强化学习的基础开始。
第二部分是高阶的课程内容,如围棋AI AlphaGo、游戏AI AlphaStar、OpenAI Five以及强化学习的分布式构建、生成模型等。课程使用的编程语言是Python,深度学习框架则是PyTorch为主。
此外,周博磊老师还推荐读者使用《深度学习》这本书,这本书的英文版是开源的,可以免费下载,《深度学习》下载地址:http://incompleteideas.net/book/the- book- 2nd.html
课程适合人群
这门课程面向大三大四以及研一的同学。你应该具备一些线性代数的背景知识,上过概率论、机器学习相关的一门课程(数据挖掘、模式识别、深度学习等)。有Python和PyTorch编程经验。
第一节课部分PPT展示
第一课包含上下两个部分,主要介绍强化学习的基本概念、序列决策入门、强化学习编程实践等内容。部分PPT展示如下:
课程地址:https://space.bilibili.com/511221970?spm_id_from=333.788.b_765f7570696e666f.2
最后,课程的PPT和代码都会上传到Github上,需要的同学也可以前往下载。(Github地址:https://github.com/zhoubolei/introRL)
下面的技巧,后三个,请谨慎用于团队项目中(主要考虑到可读性的问题),不然,leader 干你没商量。
这个技巧用的很多,也非常的简单
通过两个取反,可以强制转换为Boolean类型。较为常用。
这个也特别简单,String转化为Number
会自动转化为number类型的。较为常用。
这个其实非常有实用价值,不算是装逼。只是其他语言里没有这么玩的,给不太了解js的同学看那可牛逼大了。
实用价值在于可以防止全局污染。不过现在随着ES2015的普及已经没什么必要用这个了,我相信五年之后,这种写法就会逐渐没落。
自己干五年,在实习生面前装逼用也是蛮不错的嘛~
闭包嘛,js 特别好玩的一个地方。上面的立即执行函数就是对闭包的一种运用。
不了解的回去翻翻书,知乎上也有很多讨论,可以去看看。
闭包用起来对初学者来说简直就是大牛的标志(其实并不是)。
上面用到了闭包,看起来还挺装逼的吧。不过好像没什么实用价值。
那么这样呢?
通过高阶函数很轻松的实现判定类别。(别忘了有判定Array的Array.isArray())
当然,很明显,这只是基础,并不能更装逼一点。来看下一节
事件响应前端肯定都写烂了,一般来说如何写一个计数器呢?
好像是没什么问题哦,但是!变量times为什么放在外面,就用了一次放在外面,命名冲突了怎么办,或者万一在外面修改了怎么办。
这个时候这样一个事件监听代码就比较牛逼了
怎么样,是不是立刻感觉不一样了。瞬间逼格高了起来!
通过创建一个闭包,把times封装到里面,然后返回函数。这个用法不太常见。
高能预警
从这里开始,下面的代码谨慎写到公司代码里!
parseInt
这个函数太普通了,怎么能装逼。答案是
~~
现在摁下
F12
,在console里复制粘贴这样的代码:
这个技巧十分装逼,原理是
~
是一个叫做按位非的操作,会返回数值的反码。是二进制操作。
原因在于JavaScript中的number都是double类型的,在位操作的时候要转化成int,两次~就还是原数。
十六进制操作。其实就是一个Array.prototype.toString(16)的用法
看到这个词脑袋里冒出的肯定是CSS的颜色。
做到随机的话可以这样
底下的原文链接非常建议去读一下,后三个技巧都是在那里学到的。
注:
此随机数会产生五位,四位,甚至一位的颜色。所以严谨的话还是要做一下判定的
@yangfch3
,
然后其实也有了很多改进的地方。详细请看下面的评论
@scar
,
谢谢
@mitsunchieh
的勘误, 真的从各位大神身上学到了很多
«
左移操作。这个操作特别叼。一般得玩 C 玩得多的,这个操作会懂一些。一般半路出家的前端码农可能不太了解(说的是我 ☹)。
这个也是二进制操作。将数值二进制左移
解释上面的
1<<24
的操作。
其实是1左移24位。
000000000000000000000001
左移24位,变成了
1000000000000000000000000
不信?
试着在console粘贴下面的代码
其实还有一种更容易理解的方法来解释
二进制操作。
不安逸,不浮躁。任何学习都不是一蹴而就的,牛B就是一个学习积累的过程,别指望两三个月,你的水平就多么厉害。倚天屠龙记里面的武功最牛B的是张三丰,而不是张无忌。
任何工作都需要多种技能,别忽略了html,css等其他知识的学习。
javascript学习是一个时时刻刻需要思考的技能,他并不是一劳永逸的,所以学习javascript需要自己有一个持续学习的心。
*请认真填写需求信息,我们会在24小时内与您取得联系。