web页面是图片的代码_互联网开发技能树——Web前端

前端一直以来是一个颇具争议的领域，有人极其喜爱，有人避而远之，记得2001年刚工作的时候，我在公司用ASP做了一个简易版的OA，大家都称我是“卖网页”的。Web前端技术，和当时高大尚的C/C++开发技术相比，是完全不在一个档次上的。

直到十几多年后的今天，前端依旧饱受争议：四火老师在《全栈工程师修炼指南》中，总结了以下两个原因：

第一，某些技术人员或管理者单项技术进步，但思想却依然陈旧迂腐，停留在“前端就是改改页面”这样老旧的思维程度，认为前端没有技术含量且无法创造显著价值。

第二，相对于软件领域的通用技术，前端极低的入门门槛，导致号称“懂前端”的工程师技术水准严重参差不齐，这反向影响了整个技术群体的形象。

那么Web前端到底是什么，它包括哪些技能，前端技术的发展的历程又是怎么样的？以下就自己的理解回答一下这几个问题：

Web前端是什么

我把前端理解为一个应用程序，像Android原生应用程序运行在Android平台上，借助Android OS Framework层提供的API运行；

Web前端应用程序，则是运行在浏览器中，浏览器引擎类似操作系统，做了以下工作：

• 解析前端应用程序脚本；

• 为前端JavaScript提供运行环境；

• 提供Http等相关接口。

当前端获取到服务端的数据，经过业务逻辑处理，就能浏览器中渲染出Web页面。

上图可以说明前端做的工作：

• Web浏览器浏览一个url地址，首先将前端应用(也就是Angular JS框架编写的应用)，下载到浏览器端；

• Web前端在浏览器端运行，发送Request请求给服务端，获取服务端Response响应；

• Web前端根据业务逻辑，组织Response数据，在浏览器端生成整个HTML DOM树，将页面渲染出来，就形成了用户可见的网页。

Web前端技能树

Web前端的基础是 HTML、CSS 和 JavaScript，也被称为前端三架马车。

HTML通过标签勾勒整个页面的布局，包括哪里放置按钮，哪里放置图片等；

CSS是页面的外衣，用来指定标签的样式，比如颜色，位置，大小等；

JavaScript用来处理页面事件，比如按钮点击事件，页面加载事件等。

我们再用奥特曼做一个类比：

HTML相当于奥特曼的身体；CSS就是他的战衣，而JavaScript，则是奥特曼的必杀技。

其中JavaScript虽然用的也是Java语言，但和同样使用Java语言的Android开发和后端开发，却有着本质的不同。其中有两个比较显著的不同点。

(1)事件驱动编程

Javascript是单线程模式，在整个 JavaScript 的世界里，引起代码运行的行为是通过事件驱动的，并且全部是通过这唯一的一个勤奋的工作线程来执行的。

进而就有了EventLoop的概念：当有事件产生的时候，这个工作线程不一定空闲，这就需要一个机制来让新产生的事件排队“等一等”，等当前的工作完成之后，再来处理它。这个机制就是 Event Loop，这个等一等的事件，就被放在一个被称为事件(回调)队列的数据结构中。

这个机制，和我们烂熟于胸的多线程编程，存在着巨大的差异，以下是基于多线程和事件驱动的不同点。

(2)大量的声明式代码

熟悉Jenkins的同学，还记得Jenkins pipeline的声明式语法和脚本式语法吗？

声明式代码：比如HTML脚本，脚本本会告诉浏览器，这里显示一个按钮，那里显示一个文本输入框，随着程序员对代码的阅读，可以形象地在脑海里勾勒出这个页面的样子，这也是声明式代码的一大特点。(是不是想起了Pipeline声明式语法的一个个stage)

命令式代码：它会一条一条语句告诉计算机下一步该做什么，这个过程就是命令式的。我们绝大多数的代码都是命令式的。(是不是想起了Pipeline中的Script块，Script块里面就是命令式代码)

总结：声明式代码是告诉计算机“什么样”，而不关注“怎么做”；命令式代码则是告诉计算机“怎么做”，而不关注“什么样”。

前端技术的发展的历程

通过前端技术的发展历程，我们可以了解到，前端技能树中的库和框架，是怎么来的。

第一阶段：前端发展早期：

Ajax 技术尚未被发明或引进，页面是一次性从服务端生成的，即便有视图层的解耦，页面聚合也是在服务端生成的(服务端聚合，指的是在服务端同时准备好模板和数据，聚合形成最终的页面，再返回给浏览器)。也就是说，整个页面一旦生成，就可以认为是静态的了。文章开头提到的ASP，以及同时代的PHP，JSP，都属于服务端聚合的技术。

第二阶段：客户端聚合时代：

等到 Ajax 技术成熟，客户端聚合发展起来了(客户端聚合，指的是浏览器先从服务端获取模板和静态资源(如脚本、样式、图片等)，以达到快速展示页面的目的；而动态的数据则在后续加载，数据抵达浏览器以后，再完成聚合)。

这种情况和服务端聚合不同：代表视图的 HTML 模板和代表数据的 JSON 报文，分别依次抵达浏览器，JavaScript 再把数据和模板聚合起来展示。

架构上，客户端聚合实现了两个目的：

• 客户端 - 服务端分离；

• 模板 - 数据聚合。

客户端服务端的分离，促成了Web技术前后端分离。从此以后，Web前端技术作为一项独立的技术体系，逐渐发展起来。

第三阶段：前端库JQuery时代：

JQuery是一个JavaScript依赖库，大大简化了JavaScript操作DOM的工作。它的出现，主要是为了解决了以下几个问题：

• 消除浏览器差异：你不需要自己写冗长的代码来针对不同的浏览器来绑定事件，编写AJAX等代码；

• 简洁的操作DOM的方法：写$('#test')肯定比document.getElementById('test')来得简洁；

• 轻松实现动画、修改CSS等各种操作。

jQuery的理念“Write Less, Do More“，让你写更少的代码，完成更多的工作！

第四阶段：前端框架时代：

曾经 jQuery 是最流行的 JavaScript 库，但是如今随着前端业务的复杂性剧增，一个单纯的库已经不能很好地解决问题，而框架开始扮演更重要的地位，比如 Angular，React和Vue.js。我们来看看这几个主流框架的特性：

Angular：

特性：视图页面和数据对象的双向绑定，依赖注入和过滤器(类似Linux的管道)。

Angular框架在从1.0到2.0升级过程中，进行了一次“彻头彻尾”的重构，即从原来的JavaScript语言直接转换为typeScript语言，原因是为了让框架能够更好的支持移动端。

参考资料：Angular中文站

https://angular.cn/ React + Redux： React是用户界面的库，Redux是JavaScript状态容器，这两个合起来，才构成了React框架。 特性：

• JSX(将Javascript代码和界面代码放在一起)
• Redux 对状态的管理，实现了数据和视图的绑定

React参考资料：官方中文翻译文档 https://zh-hans.reactjs.org/docs/getting-started.html Vue.js： 这是一个由个人主导开发和维护的前端开源框架，并且仅关注web端视图层。它没有前两个框架那么全面，但却在短时间内，快速流行起来，连阿里的移动端框架weex，都全力支持Vue.js框架，原因是它的如下三个特性： 易用 在有HTML CSS JavaScript的基础上，快速上手。 灵活 简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。 高效 20kb min+gzip 运行大小、超快拟 DOM 、最省心的优化。 在Vue.js官网上(https://cn.vuejs.org/) 有一个视频介绍—— Why Vue.js，视频不长，但我觉得说得挺明白，有兴趣可以看一下。 总结：至此，Web前端技术基本介绍完了，前端技术这几年发展极快，当然技术变更和淘汰的速度也是惊人的。但没有一种技术或框架是十全十美的，需要从多个角度做技术选型，适合的才是最好的。 最后再提一点：从我个人的角度来看，想要从移动开发领域拓展到Web前端领域，可以考虑拿微信小程序作为一个过渡，原因如下：

• 微信小程序可以看成一个简化版的Web前端三驾马车，它的WXML，介于HTML标签和Android XML Layout之间，WXSS类似于CSS，同样使用JavaScript实现业务逻辑。它也具备视图页面双向绑定的特性。
• 微信小程序的学习门槛和开发成本都比较低，可以快速上手，随着实际产品的不断完善，也就更有学习的动力和激情。