其他分享
首页 > 其他分享> > ExtJS-应用结构-应用结构介绍

ExtJS-应用结构-应用结构介绍

作者:互联网

更新记录
2022年7月23日 发布。
2022年7月16日 从笔记迁移到博客。

ExtJS教程汇总:https://www.cnblogs.com/cqpanda/p/16328016.html

ExtJS应用结构介绍

Ext JS同时支持MVC和MVVM应用程序架构
这两种架构方法共享某些概念,并专注于沿着逻辑线划分应用程序代码
每种方法都有其优势,这取决于它选择如何划分应用程序的各个部分
ExtJS中可以不使用应用结构(逻辑和UI都写在一起)
ExtJS中可以使用MVC应用结构
ExtJS中可以使用MVVM应用结构
ExtJS中可以使用MVC+MVVM应用结构

MVC模式

image
在MVC架构中,大多数类型是模型、视图、控制器
用户与视图交互,视图显示模型中保存的数据
这些交互由控制器监控,然后控制器根据需要通过更新视图和模型来响应交互
视图和模型通常彼此不知道,因为控制器全权负责联系它们
一般来说,控制器将包含MVC应用程序中的大部分应用程序逻辑
理想情况下,视图几乎没有业务逻辑
模型主要是数据的接口,包含管理对所述数据的更改的业务逻辑
MVC的目标是明确定义应用程序中每个类的职责
这使得应用程序更易于测试和维护,其代码更易于重用

MVVM模式

MVVM基于MVC
image
MVC和MVVM的关键区别在于MVVM有ViewModel类型

View Model使用“数据绑定”来协调模型的数据和视图对该数据的表示之间的变化
ViewModel和View实现了双向绑定减少了直接操作视图的代码逻辑

MVC 和 MVVM模式具体内容

模型(Model)通常表示应用程序的实体(Entity),本质是包含字段定义的类
模型类定义其实体(Entity)的字段(例如:用户名字段、密码字段)
模型通过关联(associations)链接到其他模型
模型通常与仓库(Store)结合使用,为网格(grid)和其他组件提供数据
模型也是存放任何数据逻辑(如验证、转换等)的理想位置

视图(View)由各种可视化组件组成的
例如,网格(grid)、树(tree)和面板(panel)都被视为视图

控制器(ViewControlller)通常保存程序中视图的逻辑,使应用程序工作
比如:呈现视图、路由、实例化模型和任何其他类型的应用程序逻辑

视图模型(ViewModel)是一个管理特定于视图的数据的类
实现了双向绑定,即:
允许将组件数据绑定到它
ViewModel中数据被更改时自动更新到视图
视图更新了数据也会自动更新到ViewModel中

使用ExtJS的MVC和MVVM应用结构的好处

ExtJS应用程序架构为您的框架代码提供了结构和一致性
遵循官方的应用程序结构约定的好处:
每个应用程序都以相同的方式工作,因此只需学习一次
在应用程序之间共享代码很容易
可以使用Sencha Cmd创建应用程序的优化生产版本
团队协作方便

标签:MVVM,模型,应用程序,MVC,视图,应用,ExtJS,结构
来源: https://www.cnblogs.com/cqpanda/p/16483316.html