javascript - Angular 和 Vue 模板和绑定(bind)

Question

我是一名新开发人员。我一直在努力跟上进度。其中一部分让我回顾了 Angular、React 和 Vue。其中每一个似乎都使用称为“声明性绑定(bind)”和“模板化”的东西。我相信我明白这些是什么。但是，我不明白为什么我需要它们。我的问题是:

1. 为什么我应该关心声明性绑定(bind)？
2. 为什么我应该关心模板？

它们基本上看起来像是两种生成 HTML 的方法。出于这个原因，我觉得我错过了一些东西。有人可以帮我理解这一点吗？

谢谢

Answer 1

HTML 优先于 Javascript。因此，现在 HTML 作为 JS 代码可以读取和写入的对象树暴露给 Javascript。

这就是为什么赋予网站生命力的旧方法(JQuery 时代)包括在预先存在的 HTML 页面上运行一层 JS 代码。 JS 程序查找页面的交互部分并附加代码以响应用户事件。 JS 代码还可以找到页面的可移动部分，以便完成或更新它们。

但是当JS应用程序这样编写时，它们很难维护和改进。一旦你想改变 HTML 中的内容(将按钮从一个页面移到另一个页面、将列表变成表格、添加另一个显示某些数值等)，负责支持 HTML 的 JS 代码就会过时，经常坏掉。另外，一旦页面出现错误，就没有简单的方法可以追踪哪个 JS 代码负责屏幕上的内容。

如果你三思而后行，你会想在开发复杂应用程序时颠倒JS和HTML之间的关系。这就是模板/绑定(bind)中间件的目的。它们颠倒了 JS 和 HTML 之间的关系，以便 JS 对象现在成为构建用户界面的基础层。

像 Angular 这样的框架或像 Knockout 这样的库，用指令丰富了 HTML，这样现在 HTML 页面就像在 Javascript 上运行的真实程序一样工作。 Javascript 层仅支持应用程序逻辑，不再依赖于用户界面的制作方式。当您移动按钮、用另一个按钮替换某些内容、将页面一分为二等等时，它不会中断。

模板化是此方法的第一步。它是将 JS 变量的名称直接放入 Html 中。执行模板时，模板引擎将用这些变量的值替换这些变量。

但是模板还不够。当任何显示的变量发生更改时，您仍然需要手动编写模板的执行代码。这是程序员工作中最糟糕的部分，跟踪可以更改页面组件的每个可能的事件并手动添加到这些事件的绑定(bind)以便更新组件。

真正的双向数据绑定(bind)中间件的功能远不止模板引擎。它首先像模板引擎一样工作，但它也跟踪所有替换的变量/表达式，并且一旦值发生变化就会自动更新 HTML 文档。当用户编辑表单字段等时，它还可以“神奇地”应用 JS 变量的更改。

这就像您在 Excel 电子表格中写入数字一样，附近的公式会自动更新。 Excel 公式是“声明性绑定(bind)”的一种形式。您不需要编写代码来更新公式结果，Excel 为您完成繁琐的工作。

这种新的编码方式之所以是真正的进步，是因为在现实生活中，不断发展的应用程序的 View 层的变化比其逻辑层多 10 倍(想想您的银行网站)。因此，能够在不破坏 JS 逻辑中的所有内容的情况下修改页面布局是 Web 开发人员的幸福。