前端MVC变形记

</ul>

</body>

在li标签琅绫擎的ng-repeat语句是一个AngularJS迭代器。担保在phone.name和phone.snippet四周的花括号标识着数据绑定，是对应用一个数据模型的引用。当页面加载的时刻，AngularJS会根据模版中的属性值，将其与数据模型中雷同名字的变量绑定在一路，以确保两者的同步性。

在PhoneListCtrl控制器琅绫擎初始化了数据模型：

AngularJS本来是偏向于MVC，然则跟着项目重构和版本进级，如今更接近MVVM。和Knockout view中的风格类似，都像大年夜WPF衍变过来的，只是Knockout应用了自定义属性data-bind作为绑定人口，而AngularJS对于HTML的变革更彻底，扩大HTML的语法，惹人一系列的指令。

尽管控制器看起来并没有什么控制的感化，然则它在这里的重要性在于，经由过程给定命据模型的感化域$scope，许可建立模型和视图之间的数据绑定。办法名PhoneListCtrl和body标签琅绫擎的ngcontroller指令的值相匹配。当应用启动之后，会有一个根感化域被创建出来，而控制器的感化域是根感化域的一个典范后继。这个控制器的感化域对所有

标记内部的数据绑定有效。

AngularJS的感化域理论异常重要：一个感化域可以视作模板、模型和控制器协同工作的┞烦接器。AngularJS应用感化域，同时还有模板中的信息，数据模型和控制器。这些可以赞助模型和视图分别，然则他们两者确切是同步的!任何对于模型的更改都邑即时反竽暌钩在视图上;任安在视图上的更改都邑被急速表如今模型中。

实践中的思虑

让view上前哨

我开端思虑action(controller)这个角色。我认为大年夜纯粹地解耦角度来说，view和model应当是互相不知道彼此存在的，所有的事宜流和对数据、UI的处理应当都流经action。然则这一点又极不实际。用户操作了一个UI，须要更新model的一个数据，就要fire到action，经由过程action来调用model的set办法。如许又有点麻烦，因为view中有对model的应用，可以一句代码搞定则一个数据的设置。所以，我本身设置了一个规矩：如不雅是简单的模型数据读写可以直接在view中操作;如不雅要经由复杂的数据处理，必须流经action。于是，我碰到了一种怎么都偷不潦攀懒(必须经由action)的情况：比如有个主action main，两个子action list、select，用户在list中的view选择一条数据添加到右侧select中。那走过的流程是如许的：

实践中的思虑

子Action中的listView接收UI事宜，fire到listAction中
listAction持续将事宜fire到mainView中，由主action来处理别的子Action的工作。
mainView接收到事宜、调用子Action selectAction的办法
selectAction持续调用selectView的办法来完成UI的更新。

个中涉及的model的变更临时不推敲。我在想，view既然把经典MVC中的controller接收用户事宜的角色承接过来的，那如不雅借鉴Backbone的思惟，把view作为controller的一个实现，推到疆场的最前哨。省掉落两次action的中转传递，是不是更简单。

实际开辟中，经常会以view为核心，页面上须要展示什么数据，就去model中设置数据源。产生了用户事宜，我会在action中更新model，然后刷新view。有时刻会漏掉更新model，直到须要数据时才发明没有保存到model中。

MVVM，Model-View-ViewModel，最初是由微软在应用Windows Presentation Foundation和SilverLight时定义的，2005年John Grossman在一篇关于Avalon(WPF 的代号)的博客文┞仿中正式宣布了它的存在。如不雅你用过Visual Studio, 新建一个WPF Application，然后在“设计”中拖进去一个控件、双击后在“代码”中写事宜处理函数、或者绑定命据源。就对这个MVVM有点感到了。比如VS主动生成的如下代码：

model本身是自力的，自控制的，不依附于view，可以或许同步支撑多view的显示。就像linux上的应用法度榜样平日会供给图形界面和敕令行两种操作方法一样。那如不雅以model为核心，model驱动开辟，数据在手、世界我有，以模型验证包管数据的完全性和精确性。实现数据绑定，任何对模型的更改都邑在界面上反竽暌钩出来。那我们只要预先写好view和model的关系映射(类似viewmodel)，然后只存眷模型数据，就OK了。

model驱动开辟

【编辑推荐】

早年端开辟者须要懂得的基本编译道理和说话常识
最风行的5个前端框架比较
状况决定视图——基于状况的前端开辟思虑
摸索前端黑科技——经由过程png图的rgba值缓存数据
Spring思维导图，让Spring不再难解（mvc篇）

【义务编辑：枯木 TEL：（010）68476606】

6/6 首页上一页 4 5 6

　　推荐阅读

　　安全理论：学习如何应对网络恐怖活动

【51CTO.com快译】关于收集恐怖晃荡的消息近期层出不穷。全世界正在遭受不合程度的收集恐怖主义，包含真正的恐>>>详细阅读

本文标题：前端MVC变形记

地址：http://www.17bianji.com/lsqh/36386.html

1/2 1