MVC in Vanilla JavaScript

我現在正在考慮以哪種方式組織我的代碼，使其更具可擴展性和可管理性。我想在不使用框架的情況下更好地理解JavaScript中的MVC體系結構。MVC in Vanilla JavaScript

原來這就是我理解迄今（請請請糾正我，如果我錯了）：

型號：網站的組織結構/網絡應用程序內容（圖片，複製，下載內容等...）也有內容操縱所需的邏輯。所以在JavaScript中，模型可能是一個JSON對象或調用一個用於檢索/更新數據庫的php文件，模型的邏輯可能是負責解析，正則表達和組織內容的函數，因此可以交給它觀看？

查看：用戶界面和模型數據/內容的可視化表示。它唯一的工作是顯示內容並接受用戶輸入（如果適用）？

控制器：控制器也是唯一的工作是作爲模型和視圖之間的中介。例如，如果視圖需要數據，它會詢問控制器誰去模型獲取數據，然後將其發送回視圖？並且如果有任何用戶輸入，則視圖將其發送給控制器，然後控制器將其發送到模型，然後在該模型處更新控制器然後通知視圖模型已被更新？

對於我來說，MVC一直是一個混淆點，加上它已經聲明MVC不是JavaScript中自然而然的事情（至少不像在php，java，actionscript等中）。）

來源

2012-04-18 zero

嘗試從Javascript中查看MVC旁白，閱讀一些關於它的理論。然後，您可以使用您選擇的任何語言應用這些方法。 – TJHeuvel 2012-04-18 15:09:49

我還沒有在JavaScript中從頭開始看到MVC的純MVC實現。 TodoMVC中的vanilla js實現絕對不是真正的MVC，儘管它具有不同層次的分離。看到我的評論接受的答案。 Head First Design Patterns的插圖可能有所幫助：http://codereview.stackexchange.com/questions/42353/is-the-vanilla-implementation-of-todomvc-really-an-mvc-app – oligofren 2014-02-25 14:31:43

缺乏從頭開始真正的mvc是涉及到的樣板代碼的數量。香草TodoMVC應用程序是900多行的JS，但缺少必要的部分是真正的MVC。「羊」的答案解釋了爲什麼這不一定是壞事;） – oligofren 2014-02-25 14:33:40

查看代碼一直是我學習的最佳方式，所以我想我會分享這些。

TODO mvc comparing many different JS MV* Frameworks

上述鏈路比較所有JS MV *框架。該演示應該特別感興趣，

Vanilla JS Todo mv* implementation

source

從它的聲音，你明白MVC是什麼，只是困惑，如何實現它的JS，只是看在那裏的許多不同的框架（ember.js,backbone.js等）和他們的來源，以獲得他們的承擔。待辦事項列表是一個很好的起點。

來源

2012-04-18 15:11:21 Loktar

vanilla js實現不是MVC實現。它是一個Model-View-Whatever的實現，就像大多數其他實現（MVB，MVP，MVVM等）一樣。更具體地說，香草js實現不是MVC，因爲它不強制MVC強加的簡單限制：控件有對視圖和模型的引用+視圖有對模型和控制器的引用。它在模型中也沒有Observer實現，所以View可以基於它進行更新。 – oligofren 2014-02-25 14:13:09

@oligofren感謝2歲的問題的投票解釋，提醒我更新鏈接。 – Loktar 2014-02-25 15:58:07

似乎猶太現在:) – oligofren 2014-02-25 16:18:04

第一個事實是View和Controller在大多數情況下非常接近。有時甚至是相同的。這並不是一件壞事。如果你有一個表格，選擇一行，然後點擊一個按鈕，這將改變所選行中的數據，該按鈕顯然是控制器（你改變數據）的視圖（你看到的數據）的一部分。有更好的例子了這一點，我相信......

第二個事實是，你會發現MVC幾乎同樣多的意見，還有人;）

但就個人而言，我建議你不要盲目地遵循一些設計模式。MVC是設計代碼的好起點，但最終你的代碼需要快速，穩定和可維護。而且，你（和你的團隊）必須熟悉代碼。如果你最終得到的是遵循MVC模式的代碼，那很好。如果沒有，也很好。至少這是我對此的看法。

來源

2012-04-18 15:14:48 TheSHEEEP

MVC in Vanilla JavaScript

回答

相關問題