香草JavaScript中的MVC设计模式-js教程-PHP中文网

The MVC Design Pattern in Vanilla JavaScript 设计模式通常被整合到流行的框架中。例如，模型-视图-控制器（MVC）设计模式无处不在。在JavaScript中，很难将框架与设计模式分离。通常，特定的框架会带有其自己对这种设计模式的解释。框架带有观点，每个框架都强迫你以某种方式思考。

现代框架决定了MVC模式的具体实现方式。当所有解释都不同时，这会令人困惑，从而增加噪音和混乱。当任何代码库采用多个框架时，就会产生令人沮丧的混乱。我心中的问题是，有没有更好的方法？

MVC模式适用于客户端框架，但现代框架会发生变化。当今的现代化会随着时间的推移而消亡。在这种情况下，我想探索替代方案，看看一点纪律能带我们到哪里。

阅读现代JavaScript，随时了解JavaScript不断变化的世界！ The MVC Design Pattern in Vanilla JavaScript 阅读本书 MVC模式本身可以追溯到几十年前。这使其成为一个值得您投入编程技能的设计模式。MVC模式是一个可以独立存在的模式。问题是，这能带我们走多远？

等等，这是另一个框架吗？

首先，我想消除这个常见的误解：设计模式不是框架。设计模式是一种解决代码问题的严谨方法。这需要一定的技能水平，并将责任放在程序员身上。设计模式分离关注点并促进编写干净的代码。

框架则不同，因为它不必遵循任何设计模式。区分框架和模式的一种方法是寻找好莱坞原则。好莱坞原则就是：“别打电话给我们，我们会打电话给你。”任何时候都有一个依赖项决定你何时使用它，它就是一个框架。框架很像好莱坞，你不能决定做什么或如何做。事实上，开发人员就像演员一样，在被要求行动时遵循剧本。

避免客户端框架有很多很好的理由：

框架增加了解决方案的复杂性和风险
您会遇到依赖锁定，这会导致代码难以维护
随着新的流行框架的出现，很难重写现有的遗留代码

MVC模式

MVC设计模式起源于20世纪70年代和80年代的施乐Smalltalk研究项目。这是一个经受了时间考验的用于前端图形用户界面的模式。该模式来自桌面应用程序，但已被证明对Web应用程序也很有效。

其核心是MVC设计模式是关于关注点的清晰分离。其目的是使解决方案清晰易懂。任何想要进行特定更改的程序员都可以轻松找到正确的位置。

企鹅演示

企鹅！可爱又毛茸茸的，是地球上最可爱的生物之一。事实上，它们非常可爱，有17种不同的企鹅，并非所有企鹅都生活在南极洲的环境中。

是时候做一个企鹅的演示了！我将展示一个页面上显示几种物种的牌组。为此，我想使用MVC设计模式和一点纪律。我将使用极限编程方法来使用单元测试和简单的方法来解决手头的问题。最后，您应该能够翻阅几只企鹅，每只企鹅都有自己的数据和个人资料图片。

在本例结束时，您应该已经学习了足够多的知识，可以在纯JavaScript中使用MVC设计模式。该模式本身非常易于测试，因此可以预期良好的单元测试。

出于跨浏览器兼容性的原因，我将在此演示中坚持使用ES5。使用经过验证的语言特性与这种永久的设计模式相结合是有意义的。

你准备好了吗？让我们拭目以待。

骨架

演示将包含三个主要部分：控制器、视图和模型。每个部分都有其自身的关注点和需要解决的问题。

下面是其外观的可视化效果：

The MVC Design Pattern in Vanilla JavaScript

PenguinController处理事件，是视图和模型之间的中介。它会计算出用户执行操作（例如，单击按钮或按下一个键）时会发生什么。客户端特定的逻辑可以放在控制器中。在一个有很多事情要做的更大的系统中，您可以将其分解成模块。控制器是事件的入口点，也是视图和数据之间唯一的调解者。

PenguinView关心DOM。DOM是您用来进行HTML操作的浏览器API。在MVC中，除了视图之外，没有其他部分关心更改DOM。视图可以附加用户事件，但将事件处理问题留给控制器。视图的主要指令是更改用户在屏幕上看到的状态。对于此演示，视图将使用纯JavaScript进行DOM操作。

PenguinModel关心数据。在客户端JavaScript中，这意味着Ajax。MVC模式的一个优点是您现在有一个用于服务器端Ajax调用的单一位置。这使得不熟悉该解决方案的其他程序员更容易上手。此设计模式中的模型只关心来自服务器的JSON或对象。

一种反模式是违反这种内在的关注点分离。例如，模型一定不能关心HTML。视图一定不能关心Ajax。控制器必须充当调解者，而无需担心实现细节。

我发现使用这种模式时，开发人员一开始怀有良好的意图，但会泄露关注点。将所有内容都变成Web组件并最终变成一团糟是很诱人的。重点放在功能和面向用户的关注点上。但是，功能关注点与功能关注点不同。

在编程中，我喜欢的是对功能关注点进行清晰的分离。每个单独的编程问题都会得到一种一致的解决方法。当您阅读代码时，这使其更易于理解。其目的是编写易于理解的代码，以便其他人也能做出积极的贡献。

如果没有一个您可以看到和触摸的真实示例，那它就不是一个很好的演示。因此，不用多说，下面是一个CodePen，展示了企鹅的演示：

查看SitePoint (@SitePoint)在CodePen上的笔A Demo of Penguins。

说得够多了，是时候写代码了。

控制器

视图和模型是控制器使用的两个组件。控制器在其构造函数中包含完成工作所需的所有组件：

<code>var PenguinController = function PenguinController(penguinView, penguinModel) {
  this.penguinView = penguinView;
  this.penguinModel = penguinModel;
};
</code>

登录后复制

构造函数使用控制反转并以此方式注入模块。此模式使您可以注入满足高级契约的任何组件。将其视为一种抽象代码与实现细节的好方法。此模式使您能够使用纯JavaScript编写干净的代码。

然后，用户事件会以这种方式连接和处理：

<code>PenguinController.prototype.initialize = function initialize() {
  this.penguinView.onClickGetPenguin = this.onClickGetPenguin.bind(this);
};

PenguinController.prototype.onClickGetPenguin = function onClickGetPenguin(e) {
  var target = e.currentTarget;
  var index = parseInt(target.dataset.penguinIndex, 10);

  this.penguinModel.getPenguin(index, this.showPenguin.bind(this));
};
</code>

登录后复制

请注意，此事件使用当前目标来获取存储在DOM中的状态。在这种情况下，DOM会告诉您有关其当前状态的所有信息。DOM的当前状态是用户在浏览器上看到的内容。您可以将状态数据存储在DOM本身中，只要控制器不更改状态即可。

触发事件后，控制器会获取数据并说明接下来会发生什么。this.showPenguin()回调很有趣：

<code>PenguinController.prototype.showPenguin = function showPenguin(penguinModelData) {
  var penguinViewModel = {
    name: penguinModelData.name,
    imageUrl: penguinModelData.imageUrl,
    size: penguinModelData.size,
    favoriteFood: penguinModelData.favoriteFood
  };

  penguinViewModel.previousIndex = penguinModelData.index - 1;
  penguinViewModel.nextIndex = penguinModelData.index + 1;

  if (penguinModelData.index === 0) {
    penguinViewModel.previousIndex = penguinModelData.count - 1;
  }

  if (penguinModelData.index === penguinModelData.count - 1) {
    penguinViewModel.nextIndex = 0;
  }

  this.penguinView.render(penguinViewModel);
};
</code>

登录后复制

控制器计算每个企鹅的索引并告诉视图呈现它。它从模型中获取数据并将其转换为视图理解和关心的对象。

以下是显示企鹅时快乐路径的单元测试：

<code>var PenguinController = function PenguinController(penguinView, penguinModel) {
  this.penguinView = penguinView;
  this.penguinModel = penguinModel;
};
</code>

登录后复制

PenguinViewMock与真实实现具有相同的契约。这使得编写单元测试和进行断言成为可能。断言来自Node断言，也存在于Chai断言中。这使您可以编写可以在Node和浏览器上运行的测试。

请注意，控制器不关心实现细节。它使用视图提供的契约，例如this.render()。这就是编写干净代码所需的纪律。控制器可以相信每个组件都能做到它所说的那样。这增加了透明度，使代码更易于阅读。

视图

视图只关心DOM元素和连接事件，例如：

<code>PenguinController.prototype.initialize = function initialize() {
  this.penguinView.onClickGetPenguin = this.onClickGetPenguin.bind(this);
};

PenguinController.prototype.onClickGetPenguin = function onClickGetPenguin(e) {
  var target = e.currentTarget;
  var index = parseInt(target.dataset.penguinIndex, 10);

  this.penguinModel.getPenguin(index, this.showPenguin.bind(this));
};
</code>

登录后复制

当它更改用户看到的状态时，实现如下所示：

<code>PenguinController.prototype.showPenguin = function showPenguin(penguinModelData) {
  var penguinViewModel = {
    name: penguinModelData.name,
    imageUrl: penguinModelData.imageUrl,
    size: penguinModelData.size,
    favoriteFood: penguinModelData.favoriteFood
  };

  penguinViewModel.previousIndex = penguinModelData.index - 1;
  penguinViewModel.nextIndex = penguinModelData.index + 1;

  if (penguinModelData.index === 0) {
    penguinViewModel.previousIndex = penguinModelData.count - 1;
  }

  if (penguinModelData.index === penguinModelData.count - 1) {
    penguinViewModel.nextIndex = 0;
  }

  this.penguinView.render(penguinViewModel);
};
</code>

登录后复制

请注意，其主要关注点是将视图模型数据转换为HTML并更改状态。第二个是连接点击事件并让控制器充当入口点。状态更改后，事件处理程序会附加到DOM。此技术一次性处理事件管理。

为了测试这一点，我们可以验证元素是否已更新并更改了状态：

<code>var PenguinViewMock = function PenguinViewMock() {
  this.calledRenderWith = null;
};

PenguinViewMock.prototype.render = function render(penguinViewModel) {
  this.calledRenderWith = penguinViewModel;
};

// Arrange
var penguinViewMock = new PenguinViewMock();

var controller = new PenguinController(penguinViewMock, null);

var penguinModelData = {
  name: 'Chinstrap',
  imageUrl: 'http://chinstrapl.jpg',
  size: '5.0kg (m), 4.8kg (f)',
  favoriteFood: 'krill',
  index: 2,
  count: 5
};

// Act
controller.showPenguin(penguinModelData);

// Assert
assert.strictEqual(penguinViewMock.calledRenderWith.name, 'Chinstrap');
assert.strictEqual(penguinViewMock.calledRenderWith.imageUrl, 'http://chinstrapl.jpg');
assert.strictEqual(penguinViewMock.calledRenderWith.size, '5.0kg (m), 4.8kg (f)');
assert.strictEqual(penguinViewMock.calledRenderWith.favoriteFood, 'krill');
assert.strictEqual(penguinViewMock.calledRenderWith.previousIndex, 1);
assert.strictEqual(penguinViewMock.calledRenderWith.nextIndex, 3);
</code>

登录后复制

这解决了所有主要问题，更改状态和连接事件。但是，数据从哪里来？

模型

在MVC中，所有模型关心的都是Ajax。例如：

<code>var PenguinView = function PenguinView(element) {
  this.element = element;

  this.onClickGetPenguin = null;
};
</code>

登录后复制

请注意，模块XMLHttpRequest被注入到构造函数中。这是一种让其他程序员知道此模型需要哪些组件的方法。如果模型需要的不仅仅是简单的Ajax，您可以使用更多模块来表示这一点。此外，使用单元测试，我可以注入与原始模块具有完全相同契约的模拟。

是时候根据索引获取企鹅了：

<code>PenguinView.prototype.render = function render(viewModel) {
  this.element.innerHTML = '<h3 id="viewModel-name">' + viewModel.name + '</h3>' +
    '<img alt="' + viewModel.name + '" src="'%20+%20viewModel.imageUrl%20+%0A%20%20%20%20%20%20'">' +
    '<p><b>Size:</b> ' + viewModel.size + '</p>' +
    '<p><b>Favorite food:</b> ' + viewModel.favoriteFood + '</p>' +
    '<a href="https://www.php.cn/link/f0b875eb6cff6fd5f491e6b6521c7510">      ' data-penguin-index="' + viewModel.previousIndex + '">Previous</a> ' +
    '<a href="https://www.php.cn/link/f0b875eb6cff6fd5f491e6b6521c7510">      ' data-penguin-index="' + viewModel.nextIndex + '">Next</a>';

  this.previousIndex = viewModel.previousIndex;
  this.nextIndex = viewModel.nextIndex;

  // Wire up click events, and let the controller handle events
  var previousPenguin = this.element.querySelector('#previousPenguin');
  previousPenguin.addEventListener('click', this.onClickGetPenguin);

  var nextPenguin = this.element.querySelector('#nextPenguin');
  nextPenguin.addEventListener('click', this.onClickGetPenguin);
  nextPenguin.focus();
};
</code>

登录后复制

这指向一个端点并从服务器获取数据。我们可以通过使用单元测试模拟数据来测试这一点：

<code>var ElementMock = function ElementMock() {
  this.innerHTML = null;
};

// Stub functions, so we can pass the test
ElementMock.prototype.querySelector = function querySelector() { };
ElementMock.prototype.addEventListener = function addEventListener() { };
ElementMock.prototype.focus = function focus() { };

// Arrange
var elementMock = new ElementMock();

var view = new PenguinView(elementMock);

var viewModel = {
  name: 'Chinstrap',
  imageUrl: 'http://chinstrap1.jpg',
  size: '5.0kg (m), 4.8kg (f)',
  favoriteFood: 'krill',
  previousIndex: 1,
  nextIndex: 2
};

// Act
view.render(viewModel);

// Assert
assert(elementMock.innerHTML.indexOf(viewModel.name) > 0);
assert(elementMock.innerHTML.indexOf(viewModel.imageUrl) > 0);
assert(elementMock.innerHTML.indexOf(viewModel.size) > 0);
assert(elementMock.innerHTML.indexOf(viewModel.favoriteFood) > 0);
assert(elementMock.innerHTML.indexOf(viewModel.previousIndex) > 0);
assert(elementMock.innerHTML.indexOf(viewModel.nextIndex) > 0);
</code>

登录后复制

如您所见，模型只关心原始数据。这意味着使用Ajax和JavaScript对象。如果您不清楚纯JavaScript中的Ajax，有一篇文章包含更多信息。