小白编程系列（二）：前端学习路径

发表于

前言

上一篇我们简单的说了一下小白应该如何认识编程这件事，怎么选择编程语言。这一篇我们来说我们选择好了编程语言后，如何学习这门编程语言，它的学习路径应该是怎么样的。这个得分开讲，每一门编程语言的学习路径都不太相同，这篇我们来讲前端的学习。

前端

前端

我们先来说说什么是前端，前端是对于网站或者网络应用来说的，前端是相对后端来说的。前端对于网站来说，通常是指，网站的前台部分包括网站的表现层和结构层。后端对于网站来说，通常是指网站的后台部分包括网站的业务逻辑层、数据持久层、负载均衡等。现在还出来个新名词叫全栈，就是前后端的大多数技能都掌握，不过真能达到那是牛人值得仰望。

因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，现在最新的高级版本HTML5、CSS3，以及SVG等。

前端编程的学习范围

既然我们说学习那就先把学习范围说说，这样大家就先引用阿里前端的大牛@jayli(拔赤)的一张很流行的图，来看看一个比较牛的前端最终是个什么样子。

前端脑图

确实很多内容是不是？真正的前端大牛，需要掌握的技能还是挺多的，不过我们删减一下会少不少：

1.主流浏览器

  • IE6/7/8/9/10/11
  • Firefox
  • Chrome/Chromium
  • Safari
  • Opera

2.编程语言

3.切页面

4.开发工具

  • VIM/Sublime Text2
  • Notepad++/EditPlus
  • WebStorm
  • Eclipse
  • Visual Studio/Visual Studio Code

5.调试工具

  • Firebug
  • Chrome Dev Tools

6.版本管理

7.单元测试

8.前端库/框架

9.前端标准/规范

  • HTTP/1.1: RFCs 7230-7235，HTTP/2
  • ECMAScript 5/6/7
  • W3C: DOM/BOM/XHTML/XML/JSON/JSONP/…
  • HTML5/CSS3

10.编程知识储备

  • 数据结构
  • OOP/AOP
  • 原型链/作用域链
  • 闭包
  • 编程范型
  • 设计模式

11.项目构建工具

12.代码组织

  • CommonJS/AMD/ES6 Module
  • YUI3模块
  • SeaJS/Require.js/Webpack
  • Browserify

13.安全

  • CSRF/XSS
  • CSP

14.移动Web

15.可视化

  • SVG/Canvas
  • D3
  • WebGL/Three.JS

看到这些是否头大了？

前端学习

这些内容原则上来说确实是WEB开发应该必备的技能。但是如果你放到一个WEB开发人员熟练的掌握这些技能需要花费2-3年的时间来看，似乎也没什么，只要你投入的时间足够，可能要不了那么久。

其实最终光是这些分类就够小白们喝一壶的了。

是的编程不光光只是语言 ，为了使用这些开发语言还需要了解开发工具 ，需要了解写完语言以后如何调试 ，如何测试 你写的那些东西是否正确，然后还需要进行版本控制 ，最终还需要进行部署 ，这样才算完成了一个完整的开发过程，这些都是开发中必须要学习的。

所以我们在做汇智网上的课程时，提供了在线的开发环境和工具，将编程、调试甚至部署也都结合在了一起，我们觉得这很适合小白入门学习。

怎么开始

那这么多东西我们怎么开始呢？

核心其实是三个东西，HTML、CSS、JavaScript。只有把这三个基本的前端技能学习好了，才能谈得上其他。

  • HTML、CSS、JavaScript 简介

    1、HTML，超文本标记语言 Hyper Text Markup Language，是用来描述网页的一种语言。

    2、CSS，层叠样式表 Cascading Style Sheets,是指样式定义，确定如何显示HTML元素。

    3、JavaScript是一种脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行。

  • 它们的简单分工

    网页设计思路一般都是把网页分成三个层次，即：结构层(HTML)、表示层(CSS)、行为层(Javascript)。

    对于一个网页，HTML定义网页的结构，CSS描述网页的样子，JavaScript来控制页面的行为和活动。

    一个很经典的例子是说HTML就像一个人的骨骼、器官，而CSS就是人的皮肤，有了这两样也就构成了一个植物人了，加上javascript这个植物人就可以对外界刺激做出反应，可以思考、运动、可以给自己整容化妆（改变CSS）等等，成为一个活生生的人。 。

了解了这些我们就可以开始了。下面我们来看一段代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>我的第一个网页</title>
  <link rel="stylesheet" type="text/css" href="hello.css" />
  <script type="text/javascript" src="hello.js"></script>
</head>
<body>
  <h1>我的第一个标题</h1>
  <p id="demo">我的第一个段落。</p>
  <button type="button" onclick="displayDate()">显示日期</button>
</body>
</html>

这段代码就是一段最简单的HTML代码，代码中有HTML语言的各种标记都是用<>和</>来结对标记的，而且可以起名字，设置类型等，每一种标记都表达不同的意思。

这段内容的意思就是告诉浏览器，我是遵循W3C标准的，我用的是utf8编码，描述我样式的的文件是hello.css，和我有关的JavaScript代码我都放到了hello.js中了。如果你的样式和JavaScript的代码什么都没写，那么这个代码送给浏览器以后，浏览器显示出来就应该是下面这样:



我的第一个标题

我的第一个段落。




如果你的hello.css加了一个内容： 
1
h1 {color:red;}
那浏览器显示出来就是下面这样。

我的第一个标题

我的第一个段落。




如果你在hello.js中加入了这个内容： 那浏览器显示出来就是下面这样。

我的第一个网页

我的第一个标题

Wed Oct 12 2016 18:03:49 GMT+0800 (中国标准时间)

这样看起来编程也不是特别难，对吧。

另外，在写程序的时候，我们推荐使用NotePad++，这个开发工具比较好用，其实开发工具本质上就是个编辑器，大家可以根据自己的喜好选择。

你可以把上面提到的内容用这个开发工具写好，存放到一个目录中，然后用浏览器打开这个html文件。看看，是否是这个效果。

作为一个小白来说，也应该是很简单的。

如何更深入的学习HTML、CSS、JavaScript，我们都有对应的课程，你可以直接点进去看，网络上资源也很多比如W3CSchool就很不错，这里就不多说了。

不过需要多句嘴的是这个期间如果有时间可以看看和标准相关的内容。

另外进行调试的时候建议你使用Chrome浏览器中的Chrome Dev Tools（开发者工具）。

假设你已经基本掌握了HTML、CSS、JavaScript

HTML、CSS、JavaScript

如果你基本上掌握了HTML、CSS和JavaScript那你基本上可以算是入门了，在没有学习数据库知识之前你可以先把要存的数据保存在文件（特别提示学习文件处理时应该学习一下XML、JSON）中，这样你就可以考虑大干一场了。

这时候如果你独立来写一个简单的网站应该是没啥问题了。但是你会发现你做的网站效果和你看到的互联网上那些经常去逛的网站还是有很大的差距。这说明你离现实工作中对web开发人员的要求还有一定的差距。差距主要表现在那些地方？一般来说主要应该集中在两个方面：

  • UI

    你会发现你做的得网站比较丑，总是不如商业网站那么漂亮，交互上也总感觉不如人家的那么顺畅。其实这不怪你，如果你有了这种感觉，那么恭喜你，你还是很上进的，这个时候你就该学习列表中另外的一些内容，例如PhotoShop、Less、Sass、Ajax、Bootstrap。这些内容都不复杂，可以帮你处理图片、页面、css、交互响应等。这其中Bootstrap是必须要熟练掌握的，通过这些技术的学习你会把你的网站UI搞很好，如果掌握了这些技术应该可以搞出一个好用的网站，如果想搞的十分好看网站，那就找个美工配合配合吧。

  • 效率

    你可能还会发现你的开发效率很低，很多东西开发起来十分的费劲，这就对了，前端学习最重要的时刻就是这个时候。有很多的前辈为提高效率为我们提供了很多强大的框架和工具，免去什么都要自己开发的痛苦。

    你可以先从最基本的JQuery开始，这个是 必须掌握 的，然后逐步开始学习Angularjs、React、Vue.js这些最流行的框架，当然其实你只需要熟练了其中的一个，其他的想学习应该就是时间问题了，如果工作中用不到，暂时不学也是可以的。这些框架中最热门的应该是Angularjs。

    这些编程技术的学习过程中，你可能是一个在战斗，但是如果你加入到一个团队中的时候你会发现你必须掌握另外一些知识指其中最重要的就是Git,主要用来做版本控制的，它可以帮助你的团队很多忙，保证开发人员的工作能够顺利开展，特别是相互的开发有交叉的时候。

    随着你加入团队或者自己独立的开始开发一些项目，为了更有效的构建这些项目你也可以借助一些工具Gulp、Webpack。

    还要提到的就是为了保证程序的质量，你可能除了调试意外还需要进行必要的测试，常见的测试工具主要有jslint、jsunit。

到这里你应该对WEB前端的编程路径有了一个基本的认识，随着工作需要的不同和兴趣点的不同，你可以继续学习本文中列表中的其他内容，当然你也可以扩散到更多的内容中，每一个分类中其实还有很多未列出来的内容。

再深入

以上内容如果都已经掌握了，那你基本上是一个合格的web前端了，如果希望再深入的话，基于现在最流行的技术路线，你可以重点学习Node.js,Node.js也是属于必须学习的，可以使你的工作范围扩展到更多的地方，释放你的更多能力。

随着你的技术实力的增长，手机端的开发也是必须要做的，有了HTML5、CSS3，做手机端开发基本上也可以动手，但是要想提高效率的话推荐这几个框架PhoneGap、jQuery Mobile、Ionic、React Native,大家可以试试。

再往后似乎就不用我们来指导了。。

推荐书目

http://xb.hubwiz.com/

推荐在线课程

http://www.hubwiz.com/course/?type=web

Java API

http://man.hubwiz.com


之后就是去实现牛逼的梦想