以闭包艺术为题的 MVVM，用 50 行代码了解响应式编程

2023-11-04 23:33:12

50行代码的MVVM，感受闭包的艺术

在软件开发中，MVVM（Model-View-ViewModel）是一种流行的应用程序架构模式。它将应用程序划分为三个主要组件：模型、视图和视图模型。模型包含应用程序的数据，视图是用户界面，视图模型是模型和视图之间的桥梁。

MVVM 框架通过数据绑定将模型和视图连接起来。当模型中的数据发生变化时，视图会自动更新以反映这些变化。这种数据绑定的机制是通过闭包来实现的。

闭包是一个函数及其引用环境的组合。当一个函数被调用时，它会创建一个闭包，该闭包包含函数的代码及其引用环境。闭包可以访问引用环境中的变量，即使函数已经执行完毕。

在 MVVM 框架中，视图模型是一个闭包。它包含应用程序的数据和逻辑，并负责将数据绑定到视图。当模型中的数据发生变化时，视图模型会自动更新，并通过数据绑定将这些变化反映到视图中。

以下是一个使用 MVVM 框架构建的简单应用程序的示例：

// 模型
const model = {
  name: 'John Doe',
  age: 30
};

// 视图模型
const viewModel = (function() {
  // 私有变量
  let _name = model.name;
  let _age = model.age;

  // 公共属性
  return {
    name: {
      get: function() {
        return _name;
      },
      set: function(value) {
        _name = value;
        // 触发数据绑定的更新
        document.getElementById('name').textContent = value;
      }
    },
    age: {
      get: function() {
        return _age;
      },
      set: function(value) {
        _age = value;
        // 触发数据绑定的更新
        document.getElementById('age').textContent = value;
      }
    }
  };
})();

// 视图
document.addEventListener('DOMContentLoaded', function() {
  // 数据绑定
  document.getElementById('name').textContent = viewModel.name;
  document.getElementById('age').textContent = viewModel.age;

  // 2秒后修改 name 的值
  setTimeout(function() {
    viewModel.name = 'Jane Doe';
  }, 2000);
});