Backbone.js 是一个流行的前端 JavaScript 库，经常被用来构建单页应用程序。当我们使用 Backbone 构建应用程序时，经常需要理解 Backbone 架构中的各个组件以及它们之间的关系。在这篇文章中，我们将探讨 Backbone 中的 Views 和 Controllers 组件，并讨论 Views 是否真的可以被视为 Controllers 的一种形式。
什么是 Backbone Views
Views 是 Backbone 框架中的一个组件，负责管理用户界面 (UI) 的渲染和事件处理。Views 可以监听数据模型的变化并更新相应的 UI 元素。在 Backbone 约定中，Views 呈现在页面上的可见部分，比如按钮、表单或列表等。Views 是纯粹的 JavaScript 对象而不是实际的 DOM 元素，但它们负责操作 DOM。
以下是一个简单的 Backbone View 示例代码：
--- -------- - ----------------------
--- ------------------
--------- ------------------- ---- ----------
----------- ---------- -
------------------------- --------- -------------
--
------- ---------- -
--- ---- - -----------------------------------
--------------------
-
---
--- ---- - --- ---------------- ----- ----- ---- ---
--- ---- - --- ---------- ------ ---- ---
--------------在这个例子中，我们创建了一个 UserView 对象，它用 el 属性指定了要渲染到的 DOM 元素。View 还定义了一个模板以及一个 render() 方法，该方法使用模型数据更新 HTML。View 还监听与其相关联的模型的 change 事件，并在模型更改时重新渲染 UI。
什么是 Backbone Controllers
Controllers 是另一个常见的前端设计模式。Controller 负责接收用户的输入并采取相应的行动。它们通常与 Views 和 Models 协同工作，以确保视图正确响应用户输入。在 Backbone 中，我们可以使用 Backbone.Router 实例来实现控制器功能。Router 可以解析 URL 并调用相应的处理程序来更新相应的 Views 和 Models。
以下是一个简单的 Backbone Router 示例代码：
--- --------- - ------------------------
------- -
--- -------
-------- -------
--
----- ---------- -
--- ---- - --- ---------------- ----- ----- ---- ---
--- ---- - --- ---------- ------ ---- ---
--------------
--
------ ---------- -
-- ------ ----- ----- --- ------ ----
-
---
--- ------ - --- ------------
-------------------------在这个例子中，我们创建了一个简单的 Backbone Router，它定义了两个路由路径，分别对应主页和关于页面。当用户访问这些 URL 路径时，Router 将自动调用相应的处理程序 (home 和 about)，以加载相应的 Views 和 Models。
Views 是否真的是 Controllers
回到我们最初的问题，Views 到底是不是控制器的一种形式？虽然 Backbone 中的 Views 和 Controllers 共同负责管理用户界面和事件处理，但它们在设计上具有不同的职责和行为。
Views 主要负责 UI 的呈现和更新，以及监听与其相关联的数据模型变化。它们通常不会处理用户输入或对整个应用程序的状态进行任何更改。
Controllers 主要负责处理用户输入并采取相应的行动。它们通常与 Views 和 Models 进行交互，以确保视图正确响应用户输入。同时，Controllers 还可以控制应用程序的状态，并协调其它组件之间的通讯。
因此，尽管 Views 和 Controllers 之间存在某些重叠，但它们
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/31185