重学前端
程劭非(winter)
前手机淘宝前端负责人
立即订阅
32956 人已学习
课程目录
已完结 58 讲
0/4登录后,你可以任选4讲全文学习。
开篇词+学习路线+架构图 (3讲)
开篇词 | 从今天起,重新理解前端
免费
明确你的前端学习路线与方法
列一份前端知识架构图
模块一:JavaScript (15讲)
JavaScript类型:关于类型,有哪些你不知道的细节?
JavaScript对象:面向对象还是基于对象?
JavaScript对象:我们真的需要模拟类吗?
JavaScript对象:你知道全部的对象分类吗?
JavaScript执行(一):Promise里的代码为什么比setTimeout先执行?
JavaScript执行(二):闭包和执行上下文到底是怎么回事?
JavaScript执行(三):你知道现在有多少种函数吗?
JavaScript执行(四):try里面放return,finally还会执行吗?
JavaScript词法:为什么12.toString会报错?
(小实验)理解编译原理:一个四则运算的解释器
JavaScript语法(预备篇):到底要不要写分号呢?
JavaScript语法(一):在script标签写export为什么会抛错?
JavaScript语法(二):你知道哪些JavaScript语句?
JavaScript语法(三):什么是表达式语句?
JavaScript语法(四):新加入的**运算符,哪里有些不一样呢?
模块二:HTML和CSS (16讲)
HTML语义:div和span不是够用了吗?
HTML语义:如何运用语义类标签来呈现Wiki网页?
CSS语法:除了属性和选择器,你还需要知道这些带@的规则
HTML元信息类标签:你知道head里一共能写哪几种标签吗?
CSS 选择器:如何选中svg里的a元素?
CSS选择器:伪元素是怎么回事儿?
HTML链接:除了a标签,还有哪些标签叫链接?
CSS排版:从毕升开始,我们就开始用正常流了
HTML替换型元素:为什么link一个CSS要用href,而引入js要用src呢?
HTML小实验:用代码分析HTML标准
CSS Flex排版:为什么垂直居中这么难?
CSS动画与交互:为什么动画要用贝塞尔曲线这么奇怪的东西?
HTML语言:DTD到底是什么?
CSS渲染:CSS是如何绘制颜色的?
CSS小实验:动手做,用代码挖掘CSS属性
HTML·ARIA:可访问性是只给盲人用的特性么?
模块三:浏览器实现原理与API (9讲)
浏览器:一个浏览器是如何工作的?(阶段一)
浏览器:一个浏览器是如何工作的?(阶段二)
浏览器:一个浏览器是如何工作的(阶段三)
浏览器:一个浏览器是如何工作的?(阶段四)
浏览器:一个浏览器是如何工作的?(阶段五)
浏览器DOM:你知道HTML的节点有哪几种吗?
浏览器CSSOM:如何获取一个元素的准确位置
浏览器事件:为什么会有捕获过程和冒泡过程?
浏览器API(小实验):动手整理全部API
模块四:前端综合应用 (5讲)
性能:前端的性能到底对业务数据有多大的影响?
工具链:什么样的工具链才能提升团队效率?
持续集成:几十个前端一起工作,如何保证工作质量?
搭建系统:大量的低价值需求应该如何应对?
前端架构:前端架构有哪些核心问题?
特别加餐 (9讲)
新年彩蛋 | 2019,有哪些前端技术值得关注?
用户故事 | 那些你与“重学前端”的不解之缘
期中答疑 | name(){}与name: function() {},两种写法有什么区别吗?
答疑加餐 | 学了这么多前端的“小众”知识,到底对我有什么帮助?
加餐 | 前端与图形学
加餐 | 前端交互基础设施的建设
期末答疑(一):前端代码单元测试怎么做?
期末答疑(二):前端架构中,每个逻辑页面如何可以做到独立发布呢?
加餐 | 一个前端工程师到底需要掌握哪些技能?
尾声 (1讲)
尾声 | 长风破浪会有时,直挂云帆济沧海
重学前端
登录|注册

明确你的前端学习路线与方法

winter 2019-01-17
你好,我是 winter。今天我们一起来聊聊前端的学习路线与方法。
在“开篇词”中,我和你简单回顾了前端行业的发展,到现在为止,前端工程师已经成为研发体系中的重要岗位之一。可是,与此相对的是,我发现极少或者几乎没有大学的计算机专业愿意开设前端课程,更没有系统性的教学方案出现。大部分前端工程师的知识,其实都是来自于实践和工作中零散的学习。
这样的现状就引发了一系列的问题。
首先是前端的基础知识,常常有一些工作多年的工程师,在看到一些我认为很基础的 JavaScript 语法的时候,还会惊呼“居然可以这样”。是的,基础知识的欠缺会让你束手束脚,更限制你解决问题的思路。
其次,技术上存在短板,就会导致前端开发者的上升通道不甚顺畅。特别是一些小公司的程序员,只能靠自己摸索,这样就很容易陷入重复性劳动的陷阱,最终耽误自己的职业发展。
除此之外,前端工程师也会面临技术发展问题带来的挑战。前端社区高度活跃,前端标准也在快速更新,这样蓬勃发展对技术来说无疑是好事,但是副作用也显而易见,它使得前端工程师的学习压力变得很大。
我们就拿 JavaScript 标准来说,ES6 中引入的新特性超过了过去十年的总和,新特性带来的实践就更多了,仅仅是一个 Proxy 特性的引入,就支持了 VueJS 从 2.0 到 3.0 的内核原理完全升级。
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《重学前端》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(193)

  • 问题一提出来不知道怎么回答,看评论区才反应过来,我的认识中前端就是html负责骨架,css负责外表和js负责行为
    2019-01-17
    119
  • 新哥
    前端不是切页面的吗?
    2019-01-17
    1
    64
  • CC
    在阅读这篇文章之前,我对于前端知识结构的划分是基于「语言」:

    前端 = HTML + CSS + JavaScript

    每种语言下,又混杂了基础知识以及相关的工具。

    比如我之前认为的 JavaScript 包括:
    * JavaScript 基础
    * Package Manager (NPM, Yarn)
    * Build tools (NPM Scripts, ESLint, Webpack...)
    * Frameworks (React, Vue.js, Angular)
    * Testing tools (Jest ...)

    现在知道自己的认识有两个误区:

    1. 这个知识架构没有完备性,这样划分,总有在这个结构之外的知识;

    2. 学习的时候会疲于奔命,总想“完整”的学完所有的知识,却走了弯路。

    感谢 winter 老师。

    作者回复: 我觉得你不妨思考下,如果我要讲Package Manager、Build tools,你猜我会放到哪个部分?

    2019-01-17
    1
    53
  • 周群华
    建议正式开始的时候能够图文并茂 而不只是纯粹的文字 还有音频和看文字区别不大
    2019-01-17
    1
    46
  • 芳玥
    我所认为的前端的话,基础系列html+css+js,进阶一点就css3+js高级应用+前端框架+构建工具。工作快近2年,最近觉得焦虑。是自己太水,看看面试要求,反省自己,一看只会基础的但又不精。现在跟着课程体系,想建立好自己的知识体系,把握19年,不至于荒废时光。
    2019-01-17
    40
  • YUANWOW
    大家都觉得HTML容易,非常简单
    就算不会,坐下来花一天时间看看MDN几乎都能写出来了
    我们都知道写HTML要语义化,但是HTML5的语义我感觉非常复杂
    有多少人能保证写出来的网页完完全全遵循了正确的语义?
    能达到屏幕阅读器理解的程度?
    我们想写语义正确的网页,但是也不想被语义复杂性所拖累(本来读的也不是文科,div一分钟能写出来的东西在语义上要纠结好久)
    程老师,我的问题是,作为一名前端工程师,平常工作的时候写HTML究竟要语义化到哪种程度呢?

    作者回复: 这是个好问题,在语义化部分我有讲这个问题,很快你就能看到了。

    2019-01-17
    1
    37
  • jviLee
    粗鄙认为前端知识架构可以分为渲染层和网络层两方面,不论前端如何发展变化,比如react,vue,ng,还是flutter,小程序等等,本质上脱离不了这两方面,另外前端工程师在接触一个新语言或新框架,最难不是学习语言本身(官方文档可以解决),反而棘手的是如何去工程化(更好组织代码,打包工程)和去优化,这是做前端两年的感受

    作者回复: 渲染层和网络层这个分法听起来是有一定思考了,不过可以再想想,是不是还有别的层?

    另外就是,如何定义渲染层呢?

    2019-01-17
    29
  • nbili
    如果让自己描述前端的知识结构,大致会按照下面这个roadmap来。

    https://github.com/kamranahmedse/developer-roadmap/blob/master/readme.md

    winter老师第一种建立知识架构的方式,更像是做了进一步抽象。

    作者回复: 要自己整理才行哦。

    2019-01-17
    22
  • 把那个产品经理祭天
    对于科班出身的学技术都是这一套思路吧!
    感觉 winter 叔这篇主要是站在非科班出身或半路出家的前端从业者的角度来看的,确实我刚开始接触前端这一陌生领域来说就是这样,没有知识体系,都是知识点拼接的一张记忆网络,很多点觉得不可思议,难以记忆。实际是上不了解本质,不了解来龙去脉,所以很多知识在脑海中就不够形象。
    期待接下来 winter 的思路!
    2019-01-17
    20
  • reece
    1.1,代码打包,如何打包代码发送到服务器。
    1.1.1,资源加载
    1.1.2,webpack打包
    1.1.3,摇树优化

    1.2,网络传输,因为传统上是浏览器发起页面请求,然后服务器端发送html页面。
    1.2.1,资源加载
    1.2.2,首屏页面加载优化

    1.3,浏览器端的页面渲染。
    1.3.1,浏览器如何渲染一张html页面
    1.3.2,渲染性能优化

    1.4代码编写
    1.4.1,html页面架构
    1.4.1.1 .....
    ...
    1.4.2,css页面样式
    1.4.2.1, ......
    .....
    1.4.3,js交互
    1.4.3.1,.....
    .....

    作者回复: 不错,比较认真了,但是你有没考虑过除了打包、传输还有什么?它们跟代码编写是一个维度的概念吗?

    2019-01-17
    18
  • Jake
    首先特别认同大佬现在的图形化学习的重要性,比如谷歌出的flutter,flutter的野心在于他想统一所有端的开发模式,他的核心思想就是抛开一切html, css, js,xml等的束缚(flutter也在计划支持web端了),用户界面即画布,用户想要得到的视觉,画给用户就可以了,而现在无论是web端还是ios,安卓其实都只是图形学的其中一个分支,想要彻底攻克其本质,其实对于底层语言的学习,学习计算机绘图原理可能是大前端的终极的学习目标。
       前端发展到现在,无论是jquery时代,还是现在三大框架,还是说vue in all的时代,归根结底这些工具的产生都是为了解决工作效率等问题。结合现在互联网行业的发展来看,后期的前端生存之道可能更多的是思考如何把前端当成一个应用来做,不仅仅局限于网页。而应用可能要思考的是易用性,可扩展性,可维护性,甚至可移植性,那么这一切都需要夯实的基础来支撑。
     
    2019-02-14
    14
  • Destroy、
    说实在,我现在知识体系都是乱的。都是东看一点西看一点拼凑起来的。
    2019-01-17
    13
  • _1024
    17年大学毕业之后开始接触前端,刚接触的时候觉得JavaScript特别简单,容易上手,但用了半年之后,发现不行了,就像 winter 老师所说的,经常会有“XX,还有这种用法”的感叹,于是,在 18 年,我自己把 JavaScript 的基础恶补了一遍,于是把一些概念开始聚合起来,有了一些比较清晰的脉络,学习的主要内容也是阮一峰老师的一些教程,在去年一年,也形成了自己的知识体系,有了一些落地的笔记,当然也还需要很多时间去修补
    https://docs.itellboy.wang/es5/
    共勉
    2019-02-13
    11
  • 棚头傀儡
    我是黑马出身,emmm我的知识体系是初级前端要会哪些,中级要会哪些,又比如原型链和this之类的是中级必会的
    2019-01-17
    11
  • st
    以前认知是html cds js,后来认识一些大佬,和他们同一个项目,日常的点滴,渐渐规范起来,才明白,这只是非常浅显的认知。

    首先,前端项目的搭建要合理清晰,

    其次,组件的复用性,最好的组件方式就是只负责UI层面的渲染,不涉及业务,业务抽离出来做成service等;而且组件最好细小化,只负责一小块,

    然后,页面尽量语义化,scss,sass尽量少,能全局的放在全局,比如Mixin, normalize,当设计变来变去,也要和设计师沟通协商调整,不可能他今天一个样式,明天换一个,

    接着,组件,service什么的写完了,确保自己代码测试覆盖率,记得写unit test,可以向别人下保票,自己写的99%是没问题的,如果别人想来challenage你代码,也会理直气壮有理有据。

    尽量减少自己的代码量,html css js文件,
    业界有很多成熟的框架,结合自己的业务,结合项目要求,能用的就用,时间精力思考广度,远远优于自己去手写一个,不然很容易会出现各种各样的问题和bug,

    用别人的框架,有时间就了解一下原理,看看源码啥的,知其然也要知其所以然,面试也有帮助,加身功能理解,以后业务方面也会更清晰,

    然后呢,肯定任何人写的代码都有值得优化的,要有这个思想存在,想着变得更好,

    还有其他的细节吧,先这样啦,个人体会就是这样啦,也是在每天进步,观察,思考,实践,层层递进,
    2019-04-21
    10
  • 岑中归月
    工作一年多,我对前端的知识架构的认识就是:顶层目录html+css+javascript,二级目录是把这三个里面的知识点生硬并且毫无关联的列出来,三级目录是继续划分,,,,,,看了老师的讲解,觉得这样划分的知识架构毫无逻辑可言,期待老师后面的课程。
    2019-01-17
    7
  • 王智
    学习后端的我也来蹭点经验.无论是前端还是后端,我感觉学习方法都是相通的,甚至有时候我觉得前端的更新以及新技术的出现会更甚于后端,所以学习方法很有必要.我觉得老师说的两个方法都很好,追本溯源了解技术出现的背景和解决的问题,可以更快地了解这个技术以及进行学习,根据自己的问题来学习技术. 同样,构建知识架构也是很有必要的,我一直想总结一下后端的知识体系,一直没有思路,等下篇文章看看前端的知识体系来总结一下吧. (•̀ᴗ•́)و

    加油加油!!!
    2019-01-17
    7
  • 大蓝
    前端5年,正如文章讲浪费了学习的时间的小公司前端,学前端完全是野路子,前面三年都惧怕前端杂乱和混杂的方向,各种源码解读,各种原型解读,到最后都看不下去~没有清晰的方向,今年发觉并非自己笨,而是前端这条路子自己走的太坎坷了,没有名师,没有团队,凭个人智力 摸索打滚,也只是坐井观天
    2019-01-21
    6
  • 梁山伯与伏地魔
    看了后 我心中浮现的结构大概如下吧:
    1.html 骨架
    2.css css3 外观
    3.js 行为
    4.浏览器(
       1.插件 草料二维码 vue dectools这类
       2.http协议
       3.工具 network console...
       4.window对象等
       5.兼容
       6.渲染模式)
    5.工具(
       1.编辑器 webstorm vscode hbuilder
       2.git/webpack
    6.框架(vue react...
    7.插件库/ui库(axios moment 富文本编辑器 element antd

    大概就是这个样子吧..
    希望可以看到后面的课程取精华去糟粕有所进步
    2019-01-18
    6
  • 远恒之义
    刚看完了老师的直播,学到了很多的东西。
    又重新复习了一遍今天的内容:学习路径和学习方法。

    学习路径就是看书和建设性网站,购买老师的专栏,我觉得看不错的视频教程也是一种路径。

    学习方法就是搭建知识架构和追本溯源。
    老师讲解的学习方法都是三个维度(what、how、why)一步步由浅入深,从概念到方法再到收获,逻辑清晰同时具有完备性。

    我是做 iOS 开发,知识架构是通过印象笔记中 iOS 功能知识点划分的笔记本加标签共同构建的目录和索引。学习了老师的方法之后,后面重新思考再梳理一下有逻辑具有完备性的知识体系吧。
    2019-01-17
    6
收起评论
99+
返回
顶部