1. 课程介绍

  2. 开发工具

什么是前端?

一般来说,现在会将产品项目分为前端后端两个大的领域。

  • 前端: 负责用户的交互部分,属于用户能看到的部分。不管是网页、APP、智能电视的操作界面,都属于前端。
  • 后端: 负责业务逻辑,数据的处理,一般部署在服务器上,属于用户看不到的部分。

区分前后端的意义

十几年前的很多项目都还是前后端耦合的,比如 PHP 等语言就是前后端写在一起。然而现在则更流行将前后端分离,将项目明显地区分前后端具有以下意义。

  • 更安全: 将业务逻辑与数据隔离到服务器,可以避免敏感的数据被泄露或篡改。
  • 降低耦合度: 前端与后端可以使用不同的语言开发,既提升了灵活性、又降低了项目结构的复杂度。

前端开发

虽然与用户交互的部分比如网页、手机APP等都属于前端,但在编程开发领域一般较为狭义地将前端开发特指为网页开发

对于网页前端开发有一些必备的编程语言需要学习,那就是被并称为前端三剑客的 HTML、CSS、JavaScript。它们是前端开发中的基石,浏览器会通过解释这个三个语言的代码文件来渲染我们看到的网站。

  • HTML: 超文本标记语言(HyperText Markup Language),用以描述网站上的元素内容。
  • CSS: 层叠样式表(Cascading Style Sheets),用来修饰网页元素的样式。
  • JavaScript: 使得网页可以执行一定的功能,响应用户的操作。

现代化的前端开发中,我们通常还会选择一个前端框架,比如现在流行的三大前端框架:Vue、React、Angular。

前端框架会封装底层的细节,可以使得我们的开发可以更专注业务逻辑、更规范、更流程化、更符合现代的开发理念。如果将纯粹 HTML、CSS、JavaScript 开发比喻成手工制作,那使用框架就像一条生产流水线。

由于浏览器只认识 HTML、CSS、JavaScript,所以我们使用前端框架写的项目最终还是会编译成 HTML、CSS、JavaScript。

前端的学习

对于前端的学习,毫无疑问 HTML、CSS、JavaScript 这三剑客是需要认真学习的,之后再过渡到框架的学习,理解框架之后可以学习一些常见库的使用。TypeScript 主要比 JavaScript 多了静态类型,很是推荐学习。再之后就是学习如何部署一个项目了,可以学习反向代理服务器 Nginx。由于绝大部分服务器都是采用的 Linux 系统,这里推荐学习 Debian 这个开源氛围比较活跃的 Linux 系统。

  1. HTML、CSS、JavaScript
  2. Vue
  3. 常见的库(Axios、Vuex 等)
  4. TypeScript
  5. Nginx
  6. Debian 等 Linux 系统

这里推荐的学习顺序是从上至下的,但不推荐完全学完 HTML、CSS、JavaScript 再学 Vue,然后完全理解 Vue 后再学 Typescript。

推荐的学习方式应该是掌握一个知识点的重点之后,就可以开始新知识点的学习。直到能使用这些知识点搭出一个基本的项目结构,再通过往这个项目上添砖加瓦式地学习。反而更能加深我们对这个知识点的理解,明白它的应用场景。

同时在学习的过程中务必注重实战,写代码不需要背。重在能将应用场景与知识点联系起来,懂得处理这个问题需要用哪个知识点,实际写代码的时候完全就可以现查现写。

有一句笑话就是,一个厉害的程序员只需要三个键,CTRL、C 和 V,因为写代码时只需要 CTRL + C (复制)与 CTRL + V(粘贴)。这虽然是一句笑话,但也反映了程序员的实际工作过程,遇到问题分解成关键词,然后谷歌搜索关键词,复制粘贴代码。

image