动态语言 ruby 前端的“前世今生”(2)

后端代码读取模板，替换变量，渲染出页面。

<html>

<head>

<title>Car {{ $car-&gt;id }}</title>

</head>

<body>

<h1>Car {{ $car-&gt;id }}</h1>

<ul>

<li>Make: {{ $car-&gt;make }}</li>

<li>Model: {{ $car-&gt;model }}</li>

<li>Produced on: {{ $car-&gt;produced_on }}</li>

</ul>

</body>

</html>

Ajax 技术诞生，改变了一切。

2004年：Gmail

2005年：Google 地图

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

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

Web 1.0：静态网页，纯内容展示

Web 2.0：动态网页，富交互，前端数据处理

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

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

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

2010年，Backbone.js

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

Model：管理数据

View：数据的展现

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"
    },
  });

前端还有一种天然的方法，可以切换视图，那就是 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 模式，用 View Model 代替 Controller。

Model

View

View-Model：简化的 Controller，唯一作用就是为 View 提供处理好的数据，不含其他逻辑。

本质：view 绑定 view-model，视图与数据模型强耦合。数据的变化实时反映在 view 上，不需要手动处理。

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/jisuanjixue/article-69348-2.html