经常会在群里或论坛上看到有人问:“学习前端有什么捷径?”,一般都是卖油翁式的回答:“无他唯手熟尔”。那么该如何让手熟练呢?其实也就是该如何系统的学习前端。在本文中,我会结合自身的经历,分享一下自己学习前端的过程,期间会穿插引用我过去各个阶段所写的博文。

一、启蒙

  刚出来混的时候并不是专门做前端的,只是兼顾一下。那时候使用的编程软件是微软的Visual Stadio 2005,开发网页都是拖封装好的控件,做个系统后台,使用的也是简单的模板,改动HTML、JavaScript和CSS的机会也都比较少,这个时候其实对前端还没有什么意识。
  然后过了一年,和朋友一起帮人做网站,那个时候就算是正式接触前端了。有一件事印象很深刻,当时负责写静态页面的朋友一直没时间写,于是我就想自己动手,但是完全无从下手,只能等待。在他写了几张页面之后,我就开始研究他的源码,这时候也仅仅是能看懂,再做点小修改,还无法独立布局。
  在接下来的几年里,陆续呆了多家公司,无一例外的我都会兼顾前端页面,这也大大提升了我对前端的理解。不过,虽然做了那么多的页面,但总有一种感觉,就是怎么每次布页面都会碰到这样那样的问题,好像永远都无法驾驭布局。现在想想,最主要的还是自己的地基不牢固,很多时候的布局并不难,但会涉及到很多细节,而这些细节很容易产生问题,例如CSS中的百分数计算规则、JavaScript中的全等和相等比较的区别、HTML元素表格的特点等等。这些在开发过程中都会碰到的,我那时候都是碰到了,再去翻资料,很是被动。如果事先就学会了或准备好了文档的话,那么就能提升工作效率,减少开发周期。我将这个混沌的时期称为启蒙阶段。

二、博学

  博学就是广泛的学习,吸收知识。我当时首先学习的就是HTML、CSS和JavaScript,然后是数据结构、简单的算法和网络,接着是性能、设计模式和安全,最后还学习了调试工具、营销推广等各类知识,有的与编程有关,有的与编程无关。下面会依次列举学习过程中所涉及的相关知识。

1)HTML

  HTML很容易被忽略,因为总觉得这个不难。其实的确不难,只是有时候会给人留坑,让人踩进去防不胜防。比如常用的表格,在全方位的了解了它的特点之后,就能知道表格布局的缺点、它的属性有哪些、它的CSS样式该怎么重置、各个浏览器的呈现有何区别等。再比如iframe,在过去常用来异步上传文件,在知道它的特性之后,就能明白其中的原理,碰到此类问题时就能游刃有余了。
  如果要系统的学习HTML的话,我推荐阅读《HTML5权威指南》、MDN元素参数,还有W3C官方规范,但这个比较拗口,理解起来会有难度。过去写的一篇《前端基础学习分享》也可以参考。

2)CSS

  CSS要学的内容比HTML要多一些,在CSS2时代,提供的CSS属性并不多,但自从CSS3发布之后,引入了众多新属性,大大提升了CSS的操控性。学习CSS首先要了解该属性或概念是属于CSS2还是CSS3,因为页面要考虑浏览器的兼容性,即对CSS的支持度有差异,很多时候需要权衡。比如动画属性,这是CSS3新增的,不仅能让页面生动真实,还能摆脱对Flash的依赖,远离大段的JavaScript脚本。虽然效果很强大,但像IE8、IE9等浏览器并不支持,在这些浏览器中要么降级,要么干脆去掉这些特效。还有一些基础概念,例如盒模型、BFC、选择器、层叠、定位等,也是必须要了解的。
  如果要系统的学习CSS的话,我推荐阅读《CSS权威指南》,目前英文已经出到了第四版,中文的第四版今年肯定会出。第三版没有讲到CSS3的属性,只是列举了CSS2和CSS的基础概念,讲的还是很细的,可以将这本书当做词典来用,需要的时候翻一下。这部书要细读,才能发现平时不注意的CSS细节。当然,MDN是肯定用的到的,也少不了W3C规范。再分享一个,我平时会用到的在线CSS参考手册,如果开发PC端的网页,还可以参考我以前的一篇CSS分享
  目前非常流行的CSS预处理器也有必要了解一下,例如SASSLESS等。简单地说,它们就是为CSS设计的编程语言,可以减少工程师的开发量,提升效率。

3)JavaScript

  这是前端的核心,刚开始的话,先学习JavaScript的语法。我那时候不重视语法,拿来就是干,写出来的代码没有JavaScript的味道,在看别人的代码时,也经常会感到疑惑,不能理解他们的写法,例如获取变量默认值“a || b”、迭代方法forEach()、every()、some()等。学习语法首推《JavaScript权威指南》、《JavaScript高级程序设计》和《深入理解ES6》,可以先读权威指南,然后再去高级程序设计,它们都可以当成字典来用。深入理解ES6主要是讲ES6标准的,前面两本目前的版本主要是讲ES5标准的,还有一套《你不知道的JavaScript》系列,需要先有前面的基础,然后再去读的话,会好理解很多。关于ES6的学习,还可以关注我正在连载的《ES6躬行记》系列,以基础为主,力求简单而又清晰不遗漏的介绍ES6的方方面面。各大浏览器对ES6的支持,可以参考ECMAScript 6 compatibility table
  我以前学习JavaScript没有那么系统,都是根据项目中碰到了某个知识点,然后再去查相关的资料,例如《触屏touch事件记录》、《typeof、toString、instanceof、constructor与in》等。东一点西一点的这样补,很是费劲。

4)数据结构和算法

  大学里有一门数据结构课,但当时感受不到它的威力,工作后才知道,数据结构是多么的重要。数据结构包括队列、栈、链表、树和图等,具体有什么好处可以参考这篇知乎,里面有各种角度的回答。算法被称为程序的灵魂,经典巨著就是《算法导论》了,我算法太渣,看这本书蛮吃力的。
  我后面还专门去学习了一些数学,想着算法实现基于数学,那么先学习更底层的,可能就会好理解一点。之后就去读了《程序员的数学思维修炼(趣味解读)》、《生活中的数学》、《生活中的概率趣事》和《枕边算法书》等书。大学里还学过一门离散数学,当时觉得枯燥而无用,进了社会后才知道其实很有用,它可以提高抽象思维和严格的逻辑推理能力。现在还在读大学的工科生,真的很有必要将数学打扎实,对以后会有很大的帮助。

5)网络

  网络我只学习了与我的工作相关的内容,例如HTTP、TCP、HTTPS等协议。做前端,至少得看得懂基本的报文,理解TCP的连接、HTTPS的安全性、HTTP的特点等概念。知道这些后,就能方便自己在调试页面的时候,定位BUG,同时也能更和谐的与后端沟通,例如你调个接口,但是没有数据返回,你可以将报文截图,然后发给后端,这样的话,他们就能知道请求和响应的信息,方便他们定位问题。
  大学的网络课很枯燥,等于没学。工作后开始买些网络相关的书看,有《图解HTTP》和《图解TCP/IP》,这两本比较通俗,容易消化。还有一本加《HTTP权威指南》,这本非常专业,内容也很全,就是理解起来费劲一点,可当字典来使用。

6)工具

  作为前端开发,除了要会使用浏览器的Debugger工具之外,还需要会些其它的工具。首推的是Windows上的Fiddler,Mac上可用Charles替代,Fiddler很适合移动端开发,因为手机上的浏览器不像PC上的Chrome、Firefox那样可以打开调试工具,它们在移动端是不存在。如果要抓取手机访问页面时的通信信息,就得借助Fiddler了。再推Wireshark网络抓包工具,这个工具抓取的信息要比Fiddler更加底层,例如能抓取TCP三次握手的通信。
  前端开发目前都需要自动化构建化工具,例如GulpWebpack等。构建工具可以编译JavaScript、CSS和HTML,例如将ES6代码编译成浏览器支持的ES5代码、SASS文件编译成普通的CSS文件、合并和压缩JavaScript脚本等,改变了前端的开发模式,解放生产力、提高生产效率。
  计算机学习需要上机操作,上面所列的知识都需要上机验证,古语云:“纸上得来终觉浅,绝知此事要躬行”,只有真的做了,才能有更深刻的体会。性能、设计模式和安全等知识,对于初学者来说还不适合学习,目前还是以打基础为核心目标。

三、慎思

  慎思就是谨慎的思考,学习不是填鸭式的,需要经常思考,这样才能进步。

1)技术引入

  我以前每次学到点新技术,就迫不及待的想引入到项目中,例如2011年的时候刚学Ajax,就把整个网站的数据交互用Ajax实现,页面渲染就用简陋的字符串拼接完成,代码丑陋至极(详见《忆2011年的秋天》)。在项目经历越来越多之后,就会谨慎的看待新技术。对新技术保持旺盛的求知欲,是件毋庸置疑的好事儿,但是把它引用到项目中,就得斟酌一下了,例如要考虑可维护性、与之前代码的兼容度、性能和学习成本等方面。
  如果工作中的项目不行,那么可以自己开辟一个开源项目,把想要的新技术加进来。例如自己以前学习了CSS3,就试着做了个在线简历,用到了阴影、圆角、动画等CSS3新属性。

2)知其然而所以然

  jQuery曾经在前端界有着举足轻重的地位,甚至影响了W3C标准的制订,以前很好奇jQuery是怎么运转的,于是就去查看里面的源码,奈何水平有限,很难读懂。而在移动端有个与之类似的精简DOM库:Zepto.js,这个库的代码量少了很多,还是可以读懂的。接着我就试着写一个类似的库,起名叫“iSelector”。为何要重复造这个轮子,因为在造的过程中,能够了解到以前不知道的Element、Array等相关的方法或属性,加深对DOM的理解,而且在使用Zepto的时候,能够选取最合适的方法。还有一点在《制造自己的榫卯》中曾提到过,即应用自己封装的函数,就好比榫卯,拿来即可用,而不需要特定的钉子。
  除了造轮子之外,研究开源库的源码也是一种理解原理的途径,例如手势插件Hammer.js的分析开源网站流量统计系统Piwik源码分析等。

3)举一反三

  对于同一个问题,会有多种解决方案。在平时的学习中,也有必要举一反三,这样在实际应用时,就能选取最优的方案。自己曾经研究过Loading(加载)动画效果,搜集了网上的4种实现方式,分别是PNG图片+CSS3动画、spin.js、Ladda和Sonic.js。这是一个有趣的过程,不仅可以了解到它们各自的优缺点,还能了解它们不同的实现原理。

4)开发习惯

  开发也是学习的过程,总结出自己独有的开发习惯,能够提升自己的工作效率。我自己在开发中遇到技术或工具都会做个总结,比如项目中用到了HTML5新增的Canvas元素,我就会搜集它的属性、方法和第三方库,再将它的实际应用(如海报生成、图像裁剪、文字合成等)从项目中抽象出来,整理成文。再比如以前为了撰写在线文档而使用了静态页面生成器Jekyll,在事后写了两篇总结(关于安装、配置和应用),以备自己日后阅读。
  对于工作中遇到的问题,我也会记录下来,例如IE6的BUG记录,我入行的早期还是IE6横行的时代,兼容IE6是必须的,它那千奇百怪的问题折磨着一代人。
  程序员要时刻充电,阅读书籍是最好的一个途径之一。每次在阅读完整本书或某个章节后,我也喜欢做个总结,可以简单的把自己感兴趣的内容摘抄下来,也可以根据书中的内容做一次实践,还可以做简单的记录汇总。
  我的开发习惯简单的概括就是:总结和记录。

四、笃行

  笃行就是学以致用,践履所学,做到知行合一。

1)PrimusUI

  在学习了CSS3后,为了能使用到那些新属性,于是就设计了一个UI库,名字叫“PrimusUI”。这是一个轻量、响应式、移动端、易上手、可定制的UI库。包含文本、表单、列表、网格等13个模块,涉及伸缩盒、自定义字体、阴影、伪元素等属性。

2)制作插件

  要制作一个插件不仅需要懂得HTML和CSS,还要熟悉JavaScript。我制作的几个插件都是从实际项目中剥离封装出来的,例如移动端H5通用表单验证插件,可验证文本框的字数、格式等,并且将验证规则作为控件的一个属性,写在控件的html中,有点MVVM模式的味道。

3)抽象共性

  平时我还会想各种方式来提升自己的工作效率,以前曾整理出网站的通用部分,对其中的注册页面做了详细的分解,包括提示、图标、限制和特效等,准备了这些代码,在以后需要时,就能拿来做更新,而不用再重新编写。

4)表述

  很多时候看了不代表就懂了,得用自己的语言描述某个技术或概念,一直到自己觉得准确了为止,这个过程也能检验出自己对知识的理解到底处于哪个深度。还可以将自己的体会整理成一套符合自己需求的知识体系。

Last modification:February 10th, 2020 at 09:51 pm