Vanilla JavaScript中的MVC

zer*_*ero 6 javascript model-view-controller

我现在处于这样的地步,我真的希望以一种使其更具可扩展性和可管理性的方式组织我的代码.我想在不使用框架的情况下更好地理解javascript中的MVC架构.

所以这就是我到目前为止所理解的(如果我错了请请纠正我):

模型:网站/网络应用程序内容(图片,副本,可下载内容等)的有组织结构,它还具有操作内容所需的逻辑.所以在javascript中,模型可以是JSON对象,也可以是对检索/更新数据库的php文件的调用,模型的逻辑可以是负责解析,正则表达和组织内容的函数,这样就可以将其交给关闭视图?

视图:用户界面和模型数据/内容的可视化表示.它唯一的工作是显示内容并接受用户输入(如果适用)?

控制器:控制器的唯一作用是作为模型和视图之间的中介吗?例如,如果视图需要数据,它会询问控制器谁然后去模型获取数据然后将其发送回视图?如果有任何用户输入,视图会将其发送给控制器,控制器然后将其发送到模型,然后更新,然后控制器通知视图模型已更新?

对于我来说,MVC一直并且仍然是一个混乱的点,并且事实上已经声明MVC在javascript中不是一个自然的事情(至少不像在php,java,actionscript等......)

The*_*EEP 8

第一个事实是,在大多数情况下,视图和控制器非常接近.有时甚至相同.这并非一定不好.如果你有一个表,选择一行,然后单击一个按钮,它将改变所选行中的数据,该按钮显然是View(你看数据) Controller(你改变数据)的一部分.有更好的例子,我敢肯定......

第二个事实是你会发现MVC的意见几乎和人一样多;)

但就个人而言,我建议你不要盲目跟随一些设计模式.MVC是设计代码的良好起点,但最终,您的代码需要快速,稳定和可维护.并且,您(和您的团队)必须对代码感到满意.如果您最终得到遵循MVC模式的代码,那很好.如果没有,也没关系.至少那是我对此的看法.


Lok*_*tar 5

看代码一直是我学习的最佳方式,因此我想我会分享这些。

TODO mvc比较了许多不同的JS MV *框架

上面的链接比较了所有JS mv *框架。这个演示应该让您特别感兴趣,

Vanilla JS Todo mv *实现

资源

从它的声音中,您可以了解MVC是什么,并且对于如何在JS中实现它感到困惑,只需查看那里的许多不同框架(ember.js骨干.js等)及其来源即可在上面。待办事项清单是一个很好的起点。