其他分享
首页 > 其他分享> > 前端开发的历史和趋势

前端开发的历史和趋势

作者:互联网

什么是前端

前后端不分的时代

互联网发展的早期,前后端开发是一体的,前端代码是后端代码的一部分。

  1. 后端收到浏览器的请求
  2. 生成静态页面
  3. 发送到浏览器

后端 MVC 的开发模式

那时的网站开发,采用的是后端 MVC 模式。

前端只是后端 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 技术诞生,改变了一切。

前端不再是后端的模板,可以独立得到各种数据。

Web 2.0

Ajax 技术促成了 Web 2.0 的诞生。

从那时起,前端变得复杂了,对前端工程师的要求越来越高。

 

前端 MVC 框架

前端通过 Ajax 得到数据,因此也有了处理数据的需求。

前端代码变得也需要保存数据、处理数据、生成视图,这导致了前端 MVC 框架的诞生。

 

 

 

Backbone.js

Backbone 将前端代码分成两个基本部分。

 

 

 

前端 Controller

Backbone 只有 M 和 V,没有 C。因为,前端 Controller 与后端不同。

所以,前端 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。

本质: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 类似,但是用法更简单,而且引入了响应式编程的概念。

 

 

前后端分离

这两个原因,导致前端开发方式发生根本的变化。

前端不再是后端 MVC 中的 V,而是单独的一层。

 

REST 接口

前后端分离以后,它们之间通过接口通信。

后端暴露出接口,前端消费后端提供的数据。

后端接口一般是 REST 形式,前后端的通信协议一般是 HTTP。

 

Node

2009年,Node 项目诞生,它是服务器上的 JavaScript 运行环境。

Node = JavaScript + 操作系统 API

 

Node 的意义

标签:历史,前端,Backbone,视图,Controller,MVC,趋势,前端开发,View
来源: https://www.cnblogs.com/caijinghong/p/15158262.html