前端开发的历史和趋势
作者：互联网
什么是前端
- 前端：针对浏览器的开发，代码在浏览器运行
- 后端：针对服务器的开发，代码在服务器运行
前后端不分的时代
互联网发展的早期，前后端开发是一体的，前端代码是后端代码的一部分。
- 后端收到浏览器的请求
- 生成静态页面
- 发送到浏览器
后端 MVC 的开发模式
那时的网站开发，采用的是后端 MVC 模式。
- Model（模型层）：提供/保存数据
- Controller（控制层）：数据处理，实现业务逻辑
- View（视图层）：展示数据，提供用户界面
前端只是后端 MVC 的 V。
以 PHP 框架 Laravel 为例。
前端工程师的角色
那时的前端工程师，实际上是模板工程师，负责编写页面模板。
后端代码读取模板，替换变量，渲染出页面。
典型的 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>
Ajax
Ajax 技术诞生，改变了一切。
- 2004年：Gmail
- 2005年：Google 地图
前端不再是后端的模板，可以独立得到各种数据。
Web 2.0
Ajax 技术促成了 Web 2.0 的诞生。
- Web 1.0：静态网页，纯内容展示
- Web 2.0：动态网页，富交互，前端数据处理
从那时起，前端变得复杂了，对前端工程师的要求越来越高。
前端 MVC 框架
前端通过 Ajax 得到数据，因此也有了处理数据的需求。
前端代码变得也需要保存数据、处理数据、生成视图，这导致了前端 MVC 框架的诞生。
- 2010年，Backbone.js
Backbone.js
Backbone 将前端代码分成两个基本部分。
- Model：管理数据
- View：数据的展现
前端 Controller
Backbone 只有 M 和 V，没有 C。因为，前端 Controller 与后端不同。
- 不需要，也不应该处理业务逻辑
- 只需要处理 UI 逻辑，响应用户的一举一动
所以，前端 Controller 相对比较简单。Backbone 没有 C，只用事件来处理 UI 逻辑。
var AppView = Backbone.View.extend({
// ...
events: {
"keypress #new-todo": "createOnEnter",
"click #clear-completed": "clearCompleted",
"click #toggle-all": "toggleAllComplete"
},
});
Router
前端还有一种天然的方法，可以切换视图，那就是 URL。
通过 URL 切换视图，这就是 Router（路由）的作用。以 Backbone 为例。
App.Router = Backbone.Router.extend({
routes: {
'': 'index',
'show': 'show'
},
index: function () {
$(document.body).append("调用了 Index 路由");
},
show: function () {
$(document.body).append("调用了 Show 路由");
},
});
MVVM 模式
另一些框架提出 MVVM 模式，用 View Model 代替 Controller。
- Model
- View
- View-Model：简化的 Controller，唯一作用就是为 View 提供处理好的数据，不含其他逻辑。
本质：view 绑定 view-model，视图与数据模型强耦合。数据的变化实时反映在 view 上，不需要手动处理。
SPA
前端可以做到：
- 读写数据
- 切换视图
- 用户交互
这意味着，网页其实是一个应用程序。
SPA = Single-page application
2010年后，前端工程师从开发页面，变成了开发“前端应用”（跑在浏览器里面的应用程序）。
<div ng-app="">
<p>
姓名 :
<input
type="text"
ng-model="name"
placeholder="在这里输入您的大名"
>
</p>
<h1>你好，{{name}}</h1>
</div>
Vue
Vue.js 是现在很热门的一种前端 MVVM 框架。
它的基本思想与 Angular 类似，但是用法更简单，而且引入了响应式编程的概念。
前后端分离
- Ajax -> 前端应用兴起
- 智能手机 -> 多终端支持
这两个原因，导致前端开发方式发生根本的变化。
前端不再是后端 MVC 中的 V，而是单独的一层。
REST 接口
前后端分离以后，它们之间通过接口通信。
后端暴露出接口，前端消费后端提供的数据。
后端接口一般是 REST 形式，前后端的通信协议一般是 HTTP。
Node
2009年，Node 项目诞生，它是服务器上的 JavaScript 运行环境。
Node = JavaScript + 操作系统 API
Node 的意义
- JavaScript 成为服务器脚本语言，与 Python 和 Ruby 一样
- JavaScript 成为唯一的浏览器和服务器都支持的语言
- 前端工程师可以编写后端程序了
标签：历史,前端,Backbone,视图,Controller,MVC,趋势,前端开发,View 来源： https://www.cnblogs.com/caijinghong/p/15158262.html