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.总结
2413
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
