logo头像

叩首问路,码梦为生

写给刚接触前端的你

转眼间,我做前端也有两年左右了,从一开始本科毕设用 HDwiki 搭了一个小网站,到现在用 wordpress 搭个人博客;从一开始改 html 的 bug 都得百度一下午,到现在可以试着写一些小插件;从一开始不知道为什么变量不用双引号,到现在将近二十万行的代码量;我承认这两年我进步了很多,但是回想起来还是有很多遗憾和不足,所以在这里想对刚接触前端的你说一些话,以免走弯路。这篇文章只对刚接触前端不到两个月,或者刚从所谓的“速成班”学成归来,对于前端之路比较迷茫的同学有用

前端进阶路线

前端学习路线是典型的先易后难,上手很简单,但是一旦深入就会发现比其他任何语言都要难,内容都要多得多,因为前端需要学的东西实在是太多太多,下面是我总结的进阶路线(我当然仍处于初级阶段):

  1. CSS(CSS3)
  2. HTML(HTML5)
  3. JavaScript(ES6)
  4. HTTP 协议
  5. 代码优化
  6. 性能优化
  7. 框架了解和学习
  8. 自己封装框架并进行模块化组件开发
  9. 全栈 Node.js

接下来我会从以上的方面分别进行总结(有些坑希望你别爬,有些捷径希望你知道),前 5 个阶段我用两年的时间渡过了(代码优化是永久话题,并没有终点),后面的几个阶段我会摘抄一些其他人的总结;如果你没有耐心看下去那么多文字,可以直接看最后的总结O(∩_∩)O

CSS

如果你学习了一段时间前端,可能会觉得 CSS 好简单,但是 CSS 也有瓶颈期,而且运用得当的话会帮我们省去很多 JavaScript 代码,针对于 css 如何学习,我有以下建议:

  1. 只要是前端入门学习,w3c是再好不过的网站,这个网站有大量的实例教程,希望你有时间的话能够过一遍,就算记不住也没关系,有印象即可
  2. MDN上有很多基础知识的文章,CSS入门教程也是 CSS 学习的好材料
  3. CSS3 是一个突破点,因为之前 CSS2 的那些属性大家都已经用烂了,而 CSS3 尚处于开发研究阶段,如果能够熟练使用将会使自己升值不少
  4. 在了解了 CSS 的选择器、属性和值之后,再下一步就是 CSS 布局了,这里有一个专门用来学习 CSS布局的网站,里面的教程很全面,相信你可以学到很多新的知识点
  5. 至少会用一种 CSS 预处理工具(Sass、Less、Stylus),这些工具会让你的 CSS 书写更加快捷

HTML

作为前端界的“领头人”,html 是我们和用户离得最近的代码语言,而 html 也是最容易提升的前端语言了,因为其核心就是语义化和加载速度,而对于前端初学者,我有话要说:

  1. html 基础学习依然推荐 w3cMDN,这两个网站的风格不同,w3c 更书本化一些,可能需要一些耐心才能看下去,而 MDN 从网站的配色到文字描述风格都更“高大上”一些
  2. HTML5 方案已经实施很久了,各大浏览器基本上都已经实现了兼容(IE 我就不吐槽了),所以对于 h5 的学习也是重点内容,尤其是 canvas、audio & video 以及和性能优化相关的各种标签
  3. 一定要从刚写 html 开始就养成“语义化”和减少嵌套的习惯,文本多用 p 标签,代码块多用 pre 标签,表单提交多用 submit……

Javascript

如果说 html 是前端界的“领头人”,那 JS 就是前端界的“大高个”,也是最容易拉开差距的一门语言,所以 JS 的学习对于前端初学者来说就显得尤为重要了:

  1. 依然推荐 w3c,和 html 与 css 不同的是,w3c 上关于 JS 的教程实在是太多,如果真的时间不充足的话可以看的粗一些,知道概念就可以了
  2. 在对 JS 有一些概念之后,如果有比较急得项目需求,我推荐你看一下 jQuery 的相关教程(当然还是 w3c),因为 jQuery 在 JS 框架里属于非常简单的,入门很快,但是能解决大部分项目需求,是一个性价比很高的 js 库
  3. 如果你的项目需要用到 React 以及 Vue.js 等框架,可能需要看一下 ES6 的相关知识,推荐阮一峰的 ECMAScript 6 入门

HTTP

可能你会比较纳闷,为什么还需要知道 HTTP?请记住,前端是和客户端打交道的(至少目前来看是这样的),所以各种和客户端以及服务器相关的协议一定要了解一些,这对于你的前端水平提升尤为重要,可以让你更容易找到 bug 出在哪里(两年的前端经验使我更加明确这一点)

  1. 知道 URL 是怎么回事以及其组成规则
  2. 可以上网查一下 HTTP 各种状态码的含义,在调试代码和找 bug 的过程中会经常用到
  3. cookie & session 的知识在某些类型的网站会经常用到(支付、博客)

代码优化

对于程序猿来说,代码就像自己的门面,如果代码一团糟,就会让同行笑话甚至会因此丢掉工作,所以代码优化对于程序猿来说就属于必经阶段了:

1. css

  • 减少选择器的叠加层数
  • 少用 !important
  • 注意 CSS 书写顺序
  • 命名规则尽量语义化
  • 少用内联样式
  • 注释、注释、注释!

具体可以参考我的另一篇文章:CSS书写规范

2. html

  • 减少 div 的嵌套层数
  • 多用语义化标签(h5 标签居多)
  • 少用 id
  • 注释、注释、注释!

3. JavaScript

  • 按照功能进行命名
  • 尽可能面向对象编程
  • 注释、注释、注释!

性能优化

前端是直接和用户打交道的,而浏览器的响应速度更会直接影响到用户体验,如果一个网站打开需要两秒钟,可能会有百分之 30 的用户直接关掉页面;如果一个网站打开需要五秒钟,可能以后就没有这家网站了,所以性能优化是一个优秀的前端工程师必备技能,同时也是终极目标;关于性能优化,首先你必须看过雅虎军规,没看过可以看看这篇文章-毫秒必争,前端网页性能最佳实践。除此之外,你需要知道,性能优化包括以下几个方面:

  1. 针对浏览器渲染页面原理的 CSS、JavaScript 语法层面优化
  2. 针对 HTTP 协议特性网络性能优化(合并资源、压缩、多个域名等)
  3. 用户体验层面性能优化(懒加载之类)

在现在计算机运行速度下,只要代码写的不是特别过分,第一点对性能优化能做的很少,我们使用了更好的语法也不会对网页提速很多。第二点是必须要做的,而第三点现在主要成了性能优化的主要发力点

框架了解和学习

前端和所有计算机工作一样,终极目标都是解决问题,所以千万不要沉迷于框架或者语言的无谓之争上。对于前端来说,各种框架层出不穷,各种知识学都学不完,所以将 html、css 和 js 的基础掌握牢固才能以不变应万变,当然,框架也是为了方便书写代码和优化才产生的,其存在必有其合理之处,如果你已经开始从事前端工作,请听从领导的安排,一句话就是之前用什么框架现在就用什么框架吧。。除非决定要更换框架,否则不要轻易换框架,因为可能代价会比较高 如果你只是在校学生,还有很久的时间用来学习,我希望你能够把更多的精力放在基础学习上,不会因为各种各样的框架而不知道学什么;只要将基础知识掌握牢固,就什么框架都不在话下了,学习起来会很快

自己封装插件并进行模块化组件开发

暂无

全栈 Node.js

不得不说,Node.js 在前端领域已经火的不要不要的了,因为其具备其他框架没有的特性——用 js 写后台;试想一下,一家公司只需要雇一个前端工程师就能完成前后端的所有工作,这将节省多少成本(有时候,前后端沟通联调也需要很长的时间成本),同时在 Node.js 基础上开发的插件也越来越多,使 Node.js 的功能愈加强大,似有一统前端之势。所以,如果前端基础学习遇到瓶颈或者想去用 Node.js 的公司,可以尝试一下,不仅可以学到 ES6 的各种新知识还可以了解到异步编程、按需加载等比较新的技术

其他

推荐书籍

其他需要掌握的技术

  • git:代码托管工具
  • Markdown:github 御用格式,语法简单实用,养成多写文档的习惯大有裨益
  • vi命令:界面简单但是功能强大的编辑器-Vim,知道一些常用命令可以事半功倍
  • Linux:Linux 即使在今天依然发挥着强大的优势

多看、多想、多做

作为前端初学者,一定要多看、多想、多做

多看:经常浏览一些做得比较好的网站,看他们的 html 结构、页面布局、class 命名以及各种动画设计和实现,会不时地发现新的创意和灵感
多想:碰到 bug 一定要多想,多尝试;从我自身而言,我觉得找 bug 是提升最快的一种方式,而很多初学者都很怕找 bug,以至于上次遇到的 bug 这次遇到了还是不会解决,这会严重阻碍你的进步!
多做:和所有语言一样,只看不做是不会记得久的,所以在看文字教程和视频教程的同时,一定要多在编辑器里敲一敲代码,同时也要尝试着做一下笔记,对于个人的成长也会很有帮助

忌浮躁

不要为框架而烦恼,只要学好了基础,框架就不是难题;但如果基础学不好,用框架的时候也会碰到各种麻烦,所以作为前端工程师,一定要戒骄戒躁,遇到不会的问题先自己思考,实在想不出来了再去询问前辈或者上网找答案,这样才能提升自己的水平

了解一门后台语言

最好了解一门后台语言,最起码读得懂后台写的什么,这样会省去很多前后台沟通的时间

支付宝打赏 微信打赏

听说赞过就能年薪百万