2020国产成人精品视频,bt天堂新版中文在线,а天堂中文在线官网

MVC（模型-視圖-控制器）設(shè)計模式是一種強大的方法，用於組織JavaScript代碼，通過清晰地分離關(guān)注點來增強可維護(hù)性和可讀性。
與可能強加特定實現(xiàn)的框架不同，MVC模式提供了一個靈活的結(jié)構(gòu)，允許開發(fā)人員更輕鬆地適應(yīng)和擴(kuò)展其應(yīng)用程序。
使用企鵝的演示說明瞭如何在原生JavaScript中應(yīng)用MVC來系統(tǒng)地處理用戶交互、數(shù)據(jù)管理和UI更新。
MVC模式的持久性和適應(yīng)性使其成為希望以嚴(yán)謹(jǐn)且可擴(kuò)展的方式磨練編程技能的開發(fā)人員的寶貴財富。
MVC模式的關(guān)鍵組件包括：用於管理數(shù)據(jù)的模型、用於處理顯示的視圖以及用於協(xié)調(diào)用戶輸入和應(yīng)用程序輸出的控制器，每個組件都有不同的職責(zé)，確保代碼模塊化和組織良好。
本文強調(diào)了乾淨(jìng)代碼的重要性以及避免與框架的依賴鎖定，提倡將MVC作為一種策略，以保持代碼的可管理性和可擴(kuò)展性，因為應(yīng)用程序會隨著發(fā)展而增長和演變。

The MVC Design Pattern in Vanilla JavaScript 設(shè)計模式通常被整合到流行的框架中。例如，模型-視圖-控制器（MVC）設(shè)計模式無處不在。在JavaScript中，很難將框架與設(shè)計模式分離。通常，特定的框架會帶有其自己對這種設(shè)計模式的解釋?？蚣軒в杏^點，每個框架都強迫你以某種方式思考。

現(xiàn)代框架決定了MVC模式的具體實現(xiàn)方式。當(dāng)所有解釋都不同時，這會令人困惑，從而增加噪音和混亂。當(dāng)任何代碼庫採用多個框架時，就會產(chǎn)生令人沮喪的混亂。我心中的問題是，有沒有更好的方法？

MVC模式適用於客戶端框架，但現(xiàn)代框架會發(fā)生變化。當(dāng)今的現(xiàn)代化會隨著時間的推移而消亡。在這種情況下，我想探索替代方案，看看一點紀(jì)律能帶我們到哪裡。

閱讀現(xiàn)代JavaScript，隨時了解JavaScript不斷變化的世界！ The MVC Design Pattern in Vanilla JavaScript 閱讀本書 MVC模式本身可以追溯到幾十年前。這使其成為一個值得您投入編程技能的設(shè)計模式。 MVC模式是一個可以獨立存在的模式。問題是，這能帶我們走多遠(yuǎn)？

等等，這是另一個框架嗎？

首先，我想消除這個常見的誤解：設(shè)計模式不是框架。設(shè)計模式是一種解決代碼問題的嚴(yán)謹(jǐn)方法。這需要一定的技能水平，並將責(zé)任放在程序員身上。設(shè)計模式分離關(guān)注點並促進(jìn)編寫乾淨(jìng)的代碼。

框架則不同，因為它不必遵循任何設(shè)計模式。區(qū)分框架和模式的一種方法是尋找好萊塢原則。好萊塢原則就是：“別打電話給我們，我們會打電話給你?！比魏螘r候都有一個依賴項決定你何時使用它，它就是一個框架?？蚣芎芟窈萌R塢，你不能決定做什麼或如何做。事實上，開發(fā)人員就像演員一樣，在被要求行動時遵循劇本。

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

框架增加了解決方案的複雜性和風(fēng)險
您會遇到依賴鎖定，這會導(dǎo)致代碼難以維護(hù)
隨著新的流行框架的出現(xiàn)，很難重寫現(xiàn)有的遺留代碼

MVC模式

MVC設(shè)計模式起源於20世紀(jì)70年代和80年代的施樂Smalltalk研究項目。這是一個經(jīng)受了時間考驗的用於前端圖形用戶界面的模式。該模式來自桌面應(yīng)用程序，但已被證明對Web應(yīng)用程序也很有效。

其核心是MVC設(shè)計模式是關(guān)於關(guān)注點的清晰分離。其目的是使解決方案清晰易懂。任何想要進(jìn)行特定更改的程序員都可以輕鬆找到正確的位置。

企鵝演示

企鵝！可愛又毛茸茸的，是地球上最可愛的生物之一。事實上，它們非常可愛，有17種不同的企鵝，並非所有企鵝都生活在南極洲的環(huán)境中。

是時候做一個企鵝的演示了！我將展示一個頁面上顯示幾種物種的牌組。為此，我想使用MVC設(shè)計模式和一點紀(jì)律。我將使用極限編程方法來使用單元測試和簡單的方法來解決手頭的問題。最後，您應(yīng)該能夠翻閱幾隻企鵝，每隻企鵝都有自己的數(shù)據(jù)和個人資料圖片。

在本例結(jié)束時，您應(yīng)該已經(jīng)學(xué)習(xí)了足夠多的知識，可以在純JavaScript中使用MVC設(shè)計模式。該模式本身非常易於測試，因此可以預(yù)期良好的單元測試。

出於跨瀏覽器兼容性的原因，我將在此演示中堅持使用ES5。使用經(jīng)過驗證的語言特性與這種永久的設(shè)計模式相結(jié)合是有意義的。

你準(zhǔn)備好了嗎？讓我們拭目以待。

骨架

演示將包含三個主要部分：控制器、視圖和模型。每個部分都有其自身的關(guān)注點和需要解決的問題。

下面是其外觀的可視化效果：

The MVC Design Pattern in Vanilla JavaScript

PenguinController處理事件，是視圖和模型之間的中介。它會計算出用戶執(zhí)行操作（例如，單擊按鈕或按下一個鍵）時會發(fā)生什麼?？蛻舳颂囟ǖ倪壿嬁梢苑旁诳刂破髦?。在一個有很多事情要做的更大的系統(tǒng)中，您可以將其分解成模塊?？刂破魇鞘录娜肟邳c，也是視圖和數(shù)據(jù)之間唯一的調(diào)解者。

PenguinView關(guān)心DOM。 DOM是您用來進(jìn)行HTML操作的瀏覽器API。在MVC中，除了視圖之外，沒有其他部分關(guān)心更改DOM。視圖可以附加用戶事件，但將事件處理問題留給控制器。視圖的主要指令是更改用戶在屏幕上看到的狀態(tài)。對於此演示，視圖將使用純JavaScript進(jìn)行DOM操作。

PenguinModel關(guān)心數(shù)據(jù)。在客戶端JavaScript中，這意味著Ajax。 MVC模式的一個優(yōu)點是您現(xiàn)在有一個用於服務(wù)器端Ajax調(diào)用的單一位置。這使得不熟悉該解決方案的其他程序員更容易上手。此設(shè)計模式中的模型只關(guān)心來自服務(wù)器的JSON或?qū)ο蟆?

一種反模式是違反這種內(nèi)在的關(guān)注點分離。例如，模型一定不能關(guān)心HTML。視圖一定不能關(guān)心Ajax?？刂破鞅仨毘洚?dāng)調(diào)解者，而無需擔(dān)心實現(xiàn)細(xì)節(jié)。

我發(fā)現(xiàn)使用這種模式時，開發(fā)人員一開始懷有良好的意圖，但會洩露關(guān)注點。將所有內(nèi)容都變成Web組件並最終變成一團(tuán)糟是很誘人的。重點放在功能和麵向用戶的關(guān)注點上。但是，功能關(guān)注點與功能關(guān)注點不同。

在編程中，我喜歡的是對功能關(guān)注點進(jìn)行清晰的分離。每個單獨的編程問題都會得到一種一致的解決方法。當(dāng)您閱讀代碼時，這使其更易於理解。其目的是編寫易於理解的代碼，以便其他人也能做出積極的貢獻(xiàn)。

如果沒有一個您可以看到和觸摸的真實示例，那它就不是一個很好的演示。因此，不用多說，下面是一個CodePen，展示了企鵝的演示：

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

說得夠多了，是時候?qū)懘a了。

控制器

視圖和模型是控制器使用的兩個組件?？刂破髟谄錁?gòu)造函數(shù)中包含完成工作所需的所有組件：

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

構(gòu)造函數(shù)使用控制反轉(zhuǎn)並以此方式註入模塊。此模式使您可以注入滿足高級契約的任何組件。將其視為一種抽象代碼與實現(xiàn)細(xì)節(jié)的好方法。此模式使您能夠使用純JavaScript編寫乾淨(jìng)的代碼。

然後，用戶事件會以這種方式連接和處理：

<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>

請注意，此事件使用當(dāng)前目標(biāo)來獲取存儲在DOM中的狀態(tài)。在這種情況下，DOM會告訴您有關(guān)其當(dāng)前狀態(tài)的所有信息。 DOM的當(dāng)前狀態(tài)是用戶在瀏覽器上看到的內(nèi)容。您可以將狀態(tài)數(shù)據(jù)存儲在DOM本身中，只要控制器不更改狀態(tài)即可。

觸發(fā)事件後，控制器會獲取數(shù)據(jù)並說明接下來會發(fā)生什麼。 this.showPenguin()回調(diào)很有趣：

<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>

控制器計算每個企鵝的索引並告訴視圖呈現(xiàn)它。它從模型中獲取數(shù)據(jù)並將其轉(zhuǎn)換為視圖理解和關(guān)心的對象。

以下是顯示企鵝時快樂路徑的單元測試：

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

PenguinViewMock與真實實現(xiàn)具有相同的契約。這使得編寫單元測試和進(jìn)行斷言成為可能。斷言來自Node斷言，也存在於Chai斷言中。這使您可以編寫可以在Node和瀏覽器上運行的測試。

請注意，控制器不關(guān)心實現(xiàn)細(xì)節(jié)。它使用視圖提供的契約，例如this.render()。這就是編寫乾淨(jìng)代碼所需的紀(jì)律?？刂破骺梢韵嘈琶總€組件都能做到它所說的那樣。這增加了透明度，使代碼更易於閱讀。

視圖

視圖只關(guān)心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>

當(dāng)它更改用戶看到的狀態(tài)時，實現(xiàn)如下所示：

<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>

請注意，其主要關(guān)注點是將視圖模型數(shù)據(jù)轉(zhuǎn)換為HTML並更改狀態(tài)。第二個是連接點擊事件並讓控制器充當(dāng)入口點。狀態(tài)更改後，事件處理程序會附加到DOM。此技術(shù)一次性處理事件管理。

為了測試這一點，我們可以驗證元素是否已更新並更改了狀態(tài)：

<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>

這解決了所有主要問題，更改狀態(tài)和連接事件。但是，數(shù)據(jù)從哪裡來？

模型

在MVC中，所有模型關(guān)心的都是Ajax。例如：

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

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

請注意，模塊XMLHttpRequest被注入到構(gòu)造函數(shù)中。這是一種讓其他程序員知道此模型需要哪些組件的方法。如果模型需要的不僅僅是簡單的Ajax，您可以使用更多模塊來表示這一點。此外，使用單元測試，我可以注入與原始模塊具有完全相同契約的模擬。

是時候根據(jù)索引獲取企鵝了：

<code>PenguinView.prototype.render = function render(viewModel) {
  this.element.innerHTML = '<h3>' + 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="http://miracleart.cn/link/f0b875eb6cff6fd5f491e6b6521c7510">      ' data-penguin-index="' + viewModel.previousIndex + '">Previous</a> ' +
    '<a href="http://miracleart.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>

這指向一個端點並從服務(wù)器獲取數(shù)據(jù)。我們可以通過使用單元測試模擬數(shù)據(jù)來測試這一點：

<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>

如您所見，模型只關(guān)心原始數(shù)據(jù)。這意味著使用Ajax和JavaScript對象。如果您不清楚純JavaScript中的Ajax，有一篇文章包含更多信息。

單元測試

對於任何紀(jì)律，獲得保證所做的工作都很重要。 MVC設(shè)計模式並不規(guī)定如何解決問題。設(shè)計模式為您提供了一套廣泛的邊界，使您能夠編寫乾淨(jìng)的代碼。這使您免受依賴壓迫。

對我來說，這意味著為每個用例提供一套完整的單元測試。測試提供了有關(guān)代碼如何有用的指導(dǎo)。這使其對任何想要進(jìn)行特定更改的程序員來說都是開放和誘人的。

隨意查看整套單元測試。我認(rèn)為這將幫助您理解這種設(shè)計模式。每個測試都是針對特定用例的；將其視為細(xì)粒度的關(guān)注點。單元測試幫助您獨立地考慮每個編碼問題並解決此問題。 MVC中這種功能關(guān)注點的分離通過每個單元測試都體現(xiàn)出來。

展望未來

企鵝的演示只包含了展示MVC有多麼有用的基本可行概念。但是，您可以迭代許多改進(jìn)：

添加一個顯示所有企鵝列表的屏幕
添加鍵盤事件，以便您可以翻閱企鵝，還可以添加滑動功能
一個SVG圖表來可視化數(shù)據(jù)，選擇任何數(shù)據(jù)點，例如企鵝的大小

當(dāng)然，我的讀者，您可以進(jìn)一步改進(jìn)此演示。這些只是一些想法，您可以展示這種設(shè)計模式的強大功能。

結(jié)論

我希望您能看到MVC設(shè)計模式和一點紀(jì)律能帶您到哪裡。一個好的設(shè)計模式會在不礙事的同時促進(jìn)編寫乾淨(jìng)的代碼。它會在解決手頭問題時讓您專注於任務(wù)。它會讓您成為一個更好、更高效的程序員。

在編程中，其目的是緊密關(guān)注手頭的問題，同時消除冗餘。編程的藝術(shù)是一次解決一個問題。在MVC中，這意味著一次解決一個功能性問題。

作為一名開發(fā)人員，很容易相信自己是邏輯的，並且不處理情緒。事實是，當(dāng)您一次遇到太多問題時，您會感到沮喪。這是我們所有人必須應(yīng)對的正常人類反應(yīng)。事實上，沮喪會以負(fù)面方式影響代碼質(zhì)量。當(dāng)這種感覺抓住您並主導(dǎo)您的工作時，它不再是關(guān)於邏輯了。隨著解決方案承擔(dān)更多風(fēng)險和復(fù)雜的依賴關(guān)係，這可能會令人沮喪。

我喜歡的是專注於單一關(guān)注點。一次解決一個問題並獲得積極的反饋。這樣，您就可以保持專注、高效並避免無意義的事情。

本文由Vildan Softic同行評審。感謝所有SitePoint的同行評審者，使SitePoint的內(nèi)容達(dá)到最佳狀態(tài)！

關(guān)於JavaScript MVC設(shè)計模式的常見問題

JavaScript MVC設(shè)計模式的意義是什麼？

JavaScript中的模型-視圖-控制器（MVC）設(shè)計模式至關(guān)重要，因為它有助於以簡潔和系統(tǒng)的方式組織代碼。它將應(yīng)用程序的關(guān)注點分成三個相互關(guān)聯(lián)的組件。模型處理數(shù)據(jù)和業(yè)務(wù)邏輯，視圖管理數(shù)據(jù)的顯示，控制器處理用戶輸入。這種分離允許高效的代碼管理、更輕鬆的調(diào)試和改進(jìn)的可擴(kuò)展性。

MVC模式如何提高代碼的可讀性和可維護(hù)性？

MVC模式通過隔離職責(zé)來增強代碼的可讀性和可維護(hù)性。 MVC模式的每個組件都有不同的作用。這種分離意味著開發(fā)人員可以處理各個組件而不會影響其他組件。它還使查找和修復(fù)錯誤、更新功能或重構(gòu)代碼變得更容易，因為一個組件中的更改不會影響其他組件。

你能解釋MVC模式中模型的作用嗎？

MVC模式中的模型負(fù)責(zé)管理數(shù)據(jù)和業(yè)務(wù)邏輯。它從數(shù)據(jù)庫檢索數(shù)據(jù)、操作數(shù)據(jù)並更新數(shù)據(jù)。模型獨立於用戶界面，不直接與視圖或控制器交互。相反，當(dāng)其狀態(tài)發(fā)生變化時，它會向它們發(fā)送通知。

MVC模式中視圖的功能是什麼？

MVC模式中的視圖負(fù)責(zé)將數(shù)據(jù)顯示給用戶。它從模型接收數(shù)據(jù)並以用戶友好的格式呈現(xiàn)數(shù)據(jù)。視圖不直接與模型交互。相反，它從控制器接收更新。

控制器如何促進(jìn)MVC模式？

MVC模式中的控制器充當(dāng)模型和視圖之間的中介。它處理用戶輸入並相應(yīng)地更新模型和視圖。當(dāng)用戶與視圖交互時，控制器會解釋輸入並對模型進(jìn)行必要的更改。它還會更新視圖以反映這些更改。

MVC模式如何增強可擴(kuò)展性？

MVC模式通過分離關(guān)注點來增強可擴(kuò)展性。這種分離允許開發(fā)人員修改或擴(kuò)展一個組件而不會影響其他組件。例如，如果您需要更改數(shù)據(jù)顯示方式，您可以修改視圖而無需接觸模型或控制器。這種模塊化使得隨著時間的推移更容易擴(kuò)展和發(fā)展您的應(yīng)用程序。