1.从MVC开发模式说起
如何设计一个程序的结构,这是一门专门的学问,对于中等或者大型项目来说。编码之前设计好软件结构是非常重要的,就像盖房子的时候,我们要先搭建好脚手架。在这个基础上再盖房子。如果我们在编写软件有一个清晰的目录结构,服务器的代码放在那里,前端页面的代码放在哪里对于我们编码会起到事半功倍的效果。
MVC是三个单词的首字母缩写,它们是Model(模型)、View(视图)和Controller(控制)。
这个模式认为,无论什么程序都可以从结构上分为三层。
1)最上面的一层,是直接面向最终用户的"视图层"(View)。对应到我们的前端就是浏览器里面用户最终看到的页面。
2)最底下的一层,是核心的"数据层"(Model),提供/保存数据。
3)中间的一层,就是"控制层"(Controller),它负责根据用户从"视图层"输入的指令,选取"数据层"中的数据,然后对其进行相应的操作,产生最终结果。
从这个MVC模式中其实就可以很清楚地看到前后端工作的不同,前端主要处理用户看到和用户输入,而后端主要是对这些操作进行处理、回应。
2.什么是前端和后端?
- 前端:针对浏览器的开发,代码在浏览器运行
- 后端:针对服务器的开发,代码在服务器运行
3.前后端不分的时代
互联网发展的早期,前后端开发是一体的,前端代码是后端代码的一部分,当时做软件时只需要用后端语言即可。
- 后端收到浏览器的请求
- 生成静态页面
- 发送到浏览器
1.后端的MVC开发模式
刚才说到的MVC开发模式,在这个时期最先被后端语言应用, 那时的网站开发,采用的是后端 MVC 模式。
- Model(模型层):提供/保存数据
- Controller(控制层):数据处理,实现业务逻辑
- View(视图层):展示数据,提供用户界面
前端只是后端 MVC 的 V。
4.前端工程师的角色
那时的前端工程师,实际上是模板工程师,负责编写页面模板。
后端代码读取模板,替换变量,渲染出页面
1.典型的PHP模板
<html>
<head><title>Car {{ $car->id }}</title></head>
<body>
<h1>Car {{ $car->id }}</h1>
<ul>
<li>Make: {{ $car->make }}</li>
<li>Model: {{ $car->model }}</li>
<li>Produced on: {{ $car->produced_on }}</li>
</ul>
</body>
</html>
5.Ajax
Ajax 技术诞生,改变了一切。从此前端也可以发送请求获取数据了。
- 2004年:Gmail
- 2005年:Google 地图
前端不再是后端的模板,可以独立得到各种数据。
Ajax 技术促成了 Web 2.0 的诞生,前端也正式从后端中分离了出来。
6.前端MVC框架
随着Web2.0的发展,前端通过 Ajax 得到数据,因此也有了处理数据的需求,前端代码变得也需要保存数据、处理数据、生成视图,这导致了前端 MVC 框架的诞生。
- 2010年,Backbone.js
7.MVVM 模式
这是现在前端发展的前沿技术,另一些框架提出 MVVM 模式,用 View Model 代替 Controller
- Model
- View
- View-Model:简化的 Controller,唯一作用就是为 View 提供处理好的数据,不含其他逻辑。
本质:view 绑定 view-model,视图与数据模型强耦合。数据的变化实时反映在 view 上,不需要手动处理。
8.常见的MVVM框架
- Angular
- Vue
9.前后端分离
- Ajax -> 前端应用兴起
- 智能手机 -> 多终端支持
这两个原因,导致前端开发方式发生根本的变化。
前端不再是后端 MVC 中的 V,而是单独的一层。
10.总结