360前端星计划-公开课.pdfVIP

大家好，非常感谢大家来参加今天这个公开课。 1 我先自我介绍一下。我叫赵文博，在前端这个圈子也破爬滚打了7年。现在在奇舞 团。 2 今天的公开课会讲些什么呢？首先我会先大概介绍一下前端是什么，前端是怎么一 步步走到现在的；前端应该掌握的技术以及前端该怎么学。最后呢，我会想大家展 示一下我们奇舞团做的一些东西，希望给大家一些启发。 3 那么，到底什么是前端呢？ 4 简单来说，前端就是负责网站的展现和交互的。这里面有几个关键词，一个是网站。 我们这里说的前端就是指网站，而不是一个客户端什么的。另外一个就是展现，也 就是前端必须负责网站的界面展示；还有交互，也就是一个按钮点击了之后，界面 该怎么响应，这些都是前端应该负责实现的。 5 由于我们做的东西是直接面向到用户的，所以我们前端要考虑多个方面的事情。最 核心的当然是网站的功能；除了功能外，我们还要考虑兼容性，你的网站要在不同 的设备和浏览器上都能使用。要考虑安全性，避免用户隐私泄漏，避免网站受到安 全威胁。另外，还要尽可能复原设计师的设计，要把网站做的漂亮。还有可用性， 保证你的网站被所有人正常使用，比如视力不太好的人等。性能就不用多说了，网 站要快。这些综合起来说，就是用户体验。 6 那前端做这么多东西，那怎么界定前端和后端呢？运行在浏览器上的代码都是前端 负责的。前端和服务器端通过http协议连接。 7 具体来说，运行在浏览器上的代码主要分三个层次。第一层为内容层，用HTML来 表示，负责述页面的内容和结构。第二层是外观层，用CSS定义网页的样式。第 三层为交互层或者叫行为层，用JavaScript来实现，用来定义网页的交互行为。 8 除了刚才说的三个层次之外，现在的前端工程师通常也会将触角往外伸一伸。比如 使用NodeJS做一些服务端开发；或者开发一些前端相关的工具；或者使用Web技术 做一些手机APP 。所以说，现在前端的概念包含的范围已经很广了。那么前端是怎 么一步步发展过来到现在这个状态的呢？ 9 接下来我们就一起来简单回顾一下前端这些年的发展历程。 10 在互联网刚刚诞生的时候，网站还没有那么多，页面内容也都比较简单，以文字为 主。这是一张Yahoo ！早期的页面截图。大家可以猜测一下这是哪一年的网站截图？ 95年！显然，这样的页面根本需要专门的前端来做，所以那时候也没有前端这样的 概念。 11 那这是2000年的Yahoo ！。我们发现内容已经丰富了很多，还有很多图片。显然， 我们需要一些方式去实现相对复杂一点的布局。于是，人们发现了table很不错，可 以实现各种复杂布局。