位置: 编程技术 - 正文

理解javascript中的MVC模式(简述javascript)

编辑:rootadmin

推荐整理分享理解javascript中的MVC模式(简述javascript),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:javascript的理解,javascript的理解,js怎么理解,javascript的理解,javascript深入理解,javascript的理解,javascript中的函数如何理解,javascript中的函数如何理解,内容如对您有帮助,希望把文章链接给更多的朋友!

MVC模式是软件工程中一种软件架构模式,一般把软件模式分为三部分,模型(Model)+视图(View)+控制器(Controller);

模型:模型用于封装与应用程序的业务逻辑相关的数据以及对数据处理的方法。模型有对数据直接访问的权利。模型不依赖 “视图” 和 “控制器”, 也就是说 模型它不关心页面如何显示及如何被操作.

视图:视图层最主要的是监听模型层上的数据改变,并且实时的更新html页面。当然也包括一些事件的注册或者ajax请求操作(发布事件),都是放在视图层来完成。

控制器:控制器接收用户的操作,最主要是订阅视图层的事件,然后调用模型或视图去完成用户的操作;比如:当页面上触发一个事件,控制器不输出任何东西及对页面做任何处理; 它只是接收请求并决定调用模型中的那个方法去处理请求, 然后再确定调用那个视图中的方法来显示返回的数据。

下面我们来实现一个简单的下拉框控件,我们可以对它进行增删操作;如下图所示:

代码如下:

HTML代码如下:

理解javascript中的MVC模式(简述javascript)

页面初始化代码如下:

代码分析如下:

先分析下我们是要实现什么样的功能,基本功能有:

一个下拉框,通过用户输入的操作来实现用户增加一项及用户选中一项后删除一项的功能;当然也添加了用户切换到那一项的事件;

比如我们现在来增加一条数据的时候,在视图层上添加监听事件,如下代码:

然后调用观察者类Event中的方法notify(发布一个事件) that.addButtonClicked.notify();大家都知道,观察者模式又叫发布-订阅模式,让多个观察者对象同时监听某一个主题对象,当某一个主题对象发生改变的时候,所有依赖它的对象都会得到通知;因此在控制层(Controller)我们可以使用如下代码对发布者进行监听操作:

之后调用自身的方法addItem();代码如下:

调用模型层(model)的方法addItem();把一条数据插入到select框里面去;model(模型层)的addItem()方法代码如下:

如上代码 增加一项后,通过 this.itemAdd 发布一个消息,然后在视图层(View)上通过如下代码来监听这个消息;代码如下:

最后监听到模型上(Model)的数据发生改变后,及时调用自身的方法rebuildList()去更新页面上的数据;

模型层(Model)最主要做业务数据封装操作。视图层(View)主要发布事件操作及监听模型层上的数据,如果模型层上有数据改变的时候,及时更新页面操作,最后显示给页面上来,控制层(Controller)主要监听视图层(View)的事件,调用模型层(Model)的方法来更新模型上的数据,模型层数据更新后,会发布一条消息出去,最后视图层(View)通过监听模型层(Model)的数据变化,来更新页面的显示; 如上是MVC的基本流程。MVC的优点: 1. 耦合性低:视图层和业务层分离了,如果页面上显示改变的话,直接在视图层更改即可,不用动模型层和控制层上的代码;也就是视图层 与 模型层和控制层已经分离了;所以很容易改变应用层的数据层和业务规则。 2. 可维护性:分离视图层和业务逻辑层也使得WEB应用更易于维护和修改。MVC的缺点: 个人觉得适合于大型项目,对于中小型项目并不适合,因为要实现一个简单的增删改操作,只需要一点点JS代码,但是MVC模式代码量明显增加了。对于学习成本也就提高了,当然如果使用一些封装好的MVC库或者框架就好了。

标签: 简述javascript

本文链接地址:https://www.jiuchutong.com/biancheng/382745.html 转载请保留说明!

上一篇:探讨JavaScript语句的执行过程(javascript语言入门教程)

下一篇:很不错的两款Bootstrap Icon图标选择组件

  • 怎么查19年以前税收
  • 税务师考试科目安排
  • 销售白酒是否要交消费税?
  • 注会其他专业可以考吗
  • 补贴收入属于什么分配
  • 计提城市维护建设费和教育费附加的会计分录
  • 固定资产二级科目取消原因
  • 固定资产40%部分能抵即征即退项目吗
  • 半成品算原材料吗
  • 商业企业销售的商品遭受损失的赔偿依据
  • 职工的取暖补贴上税吗
  • 企业所得税债务重组所得
  • 企业返利如何处理
  • 支付专家劳务费什么意思
  • 进项票失控对销项票有影响吗?
  • 培训机构开发票的税率是多少钱
  • 医疗器械销售税负率是多少
  • 如何辩别这样发票的真伪?
  • 收到分红款企业所得税怎么填报
  • 其他应付款报表填列
  • 出差人什么意思
  • 印花税多计提如何冲回
  • 股东房产无偿给公司使用协议
  • 销项税和进项税怎么区分
  • 长时间不操作电动座椅会发生什么
  • 怎样才能防止臭虫在卧室里呢
  • 如何在没有开瓶器的情况下开红酒
  • 上年费用未计提
  • 电脑开机画面都是英文怎么处理
  • 施工企业工程结算
  • php 数组定义
  • 股票公允价值减值怎么做账
  • 关键点检测backbone
  • 一个实用的php验证
  • 办公楼改造方案
  • 一般业务计算的基本步骤
  • javascript零基础入门书籍
  • thinkphp apidoc
  • 代理费与代理运费的区别
  • 餐厅如何计提固定成本
  • 上个月成本做多了怎么冲账
  • 税盘显示已反写
  • 2022年最新装修风格
  • sqlite时间戳转时间语句(时间转时间戳)
  • 万元发票和千元发票
  • 番茄开发票属于蔬菜吗?
  • 两个公司开发票
  • 以前年度损益调整在利润表中怎么填
  • 公司给员工买意外险需要员工出钱吗
  • 赠送的商品如何开发票
  • 高铁行程信息提示可以乘车吗
  • 收到增值税专用发票是进项还是销项
  • 现金流量补充表的应付项目是什么
  • 增值税结转到本年利润吗
  • 会计实务实操
  • 如何处理消防安全事件
  • 收到投资款如何声明
  • 清除sql表内容
  • win9什么意思
  • XP系统提示QQprotect.exe损坏文件的解决方法图文教程
  • linux系统文件在哪个目录
  • linux网络协议栈内核分析
  • win10改用microsoft账户登录
  • mac电脑文件夹怎么重命名
  • 苹果电脑截图快捷键
  • linux telnet用法
  • win10系统自带的浏览器叫什么
  • 苹果知识大全
  • xp系统提升性能
  • win8.1删除所有内容并重新安装
  • win10如何彻底关掉自动锁屏
  • 在linux操作系统中把外部设备当作文件统一管理
  • win10声卡驱动正常但没声音怎么解决
  • ExtJs3.0中Store添加 baseParams 的Bug
  • Unity3D游戏开发标准教程吴亚峰于复兴人民邮电出版社
  • JavaScript驾驭网页-获取网页元素
  • python语言解析
  • bootstrap基础教程
  • 哪些可以享受三免一补
  • 河北省电子税务局官网app
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设