从Knockout到Angular的架构演变

2008年第一次在WPF中使用MVVM模式之后，就一直热衷于耦合隔离、模块化与重构、UI和逻辑分离、单元测试以及后面的领域模型。谈及MVVM模式，自己也开发过一套框架，但没有长期更新和维护，所以索性就一直使用Prism和MVVM Light。到2012年的时候，看到HTML5的大行其道和Silverlight的衰落，果断把主要精力投入到ASP.NET MVC和Knockout的开发和研究当中，虽然Knockout比较容易上手且方便使用，但总觉得没有在WPF和Silverlight中使用MVVM那么酣畅淋漓。

+-----------------------+----------------------------+-----------------------+ |   | WPF/Silverlight | Web | +-----------------------+----------------------------+-----------------------+ | MVVM框架 | · Prism | · AngularJS | | | | | | | · MVVMLight | · Knockout (or use | | | | Durandal) | | | · | | | | Caliburn（Caliburn.Micro） | · Backbone.js | | | | | | | · MVVM Helpers | · Ember.js | | | | | | | · Cinch | · Epitome | | | | | | | · MVVMFoundation | · Agility.js | +-----------------------+----------------------------+-----------------------+

尽管后面尝试过其他框架，比如通过Durandal 实现SPA让我之前对Knockout的种种不便有所改观，但始终还是有所缺憾，直至现在使用Angular，尤其是Angular + TypeScript才发现一切问题都不复存在了。

（之前使用WPF/Silverlight的最大问题其实是很难招到合适的人员做美工和设计，因为很少人会专门投入到Blend和XAML的研究当中，但现在使用Web就会发现资源是那么的丰富，不管是人力资源还是开源社区）

功能 WPF/Silverlight AngularJS UI XAML HTML+CSS 设计工具 Design/Blend and Visual Studio All professional design tools 控件模板和自定义控件 Control Templates or Custom Control Custom Directives (Element) 动画 System.Windows.Media.Animation CSS3 Animations and/or JavaScript via ngAnimate 样式和模板 XAML/resources CSS3 and LESS 样式继承和关联 Implicit Styles and/or BasedOn LESS Mixins 转换和过滤 IValueConverter Filters 绑定Model到UI ViewModel and DataContext Controller and Scope 服务重用 Prism Service Locator Custom Services/Service Factory 事件 Routed Events $emit and $broadcast 模块化 MEF and/or Prism Module Catalog Angular Modules Services WCF or WCF RIA Services RESTful services (accessed via the Angular $http/$resource Services) 导航与路由 UriMapper Routing 内部组件通信 Prism Event Aggregator  or Messager Shared Services 视频 MediaElement HTML5 Video Element 脱离浏览器运行 Yes Yes, via Chrome Apps 封装UI逻辑 Behaviors Custom Directives (Attribute) UI与逻辑分离 Control or Data Templates CSS/LESS 跨域请求 Access-Policy CORS 单向数据绑定 BindingMode.One Ng-Bind 双向数据绑定 BindingMode.TwoWay Ng-Model 单向数据源绑定 BindingMode.OneTime Ng-Model 开源模板 Modern UI or MahApps Bootstrap or Foundation 浏览器支持 Need silverlight plugin or XBAP All supported

所以现在将架构由Knockout到Angular的调整并使用到新项目的开发，具体如下：

{width="682" height="479"}

{width="683" height="476" border="0"}

{width="688" height="432" border="0"}

到目前为止，还没有发现Angular有什么大的技术难题或者性能问题，如果有Angular项目经验的朋友，不妨留言讨论，学习共勉！

另外，很多人发邮件问WPF是否会像Silverlight一样消亡，其实这个问题很难回答，尤其在目前这个不光是微软主导的开发环境下（HTML5流行度远甚于XAML，IOS和Android的大行其道与Windows Phone的不温不火，Windows的命运尚不知晓），可能连微软自己也不能很好地解答这个问题，所以一切只能由市场和时间来慢慢决定。

\

作者：圣殿骑士{target="_blank"} 
出处：http://www.cnblogs.com/KnightsWarrior/{target="_blank"} 
关于作者：专注于微软平台项目架构、管理和企业解决方案。自认在面向对象及面向服务领域有一定的造诣，熟悉设计模式、TDD、极限编程、领域驱动、架构设计、敏捷开发和项目管理。现主要从事ASP.NET MVC、WPF、WCF/Web API、SOA、Microsoft Azure等云计算方面的项目开发、架构、管理和企业培训工作。如有问题或建议，请多多赐教！ 
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接。如有问题，可以邮件：KnightsWarrior(at)msn(dot)com  微博：圣殿骑士微博  联系我，非常感谢。