JSMVC简介

JSMVC的现状

15 年前,许多人都使用
Perl 和 ColdFusion
之类的工具构建网站。我们经常编写可以在页面顶部查询数据库的脚本,对数据应用必要的转换,以及在同一个脚本底部显示数据。这类架构适合于向网站添加简单的
“Contact us” 表单。然而,随着应用程序变得更加复杂,这种方法无法进行相应的扩展来处理更大的复杂问题。大部分 Web
应用程序现在已经对模型-视图-控制器 (MVC) 架构进行了标准化,使用单独的代码实现业务逻辑、显示逻辑和用户交互(路由)逻辑。涌现出从 Spring MVC
到 Rails 的各种框架可以帮助您快速实现基于 MVC 的 Web 应用程序。

几年前,jQuery 是用于构建客户端 JavaScript 应用程序的主流库。然而,随着应用程序中的 JavaScript
的复杂性日益增加,jQuery 成为一项处理复杂性的必要不充分技术。例如,用于待办事项 (to-do)
列表的单页面应用程序可以包含一个紧急待办事项列表、一个完整的待办事项列表、一个当日待办事项列表,以及一个过期待办事项列表。在删除某个待办事项时会怎样?如果任务很紧急但已过期,您可能需要手动编写代码来从视图中的三个或四个不同位置中删除该事项。如果删除某个对象后需要您删除或更改屏幕上显示的其他相关对象,这样复杂性就会变得无法控制。

客户端 MVC 框架旨在解决此类问题,并且大多数框架都表现出色。目前较流行的JavaScript 客户端 MVC
框架有AngularJS,Backbone.js,Spine.js,Knockout, Batman.js。

JavaScript 客户端 MVC 框架仍然不够成熟。这个领域正在发生快速改变,缺少一致认可的最佳实践。对于较大的项目
AngularJS,Backbone.js 和 Spine.js 都是非常流行、具有良好支持的。如果倾向于声明视图绑定,那么 Knockout.js 和
Batman.js 则都是不错的选择。

JSMVC客户端MVC框架

JSMVC是一种客户端MVC,是一套开放源代码的多样化互联网应用程式框架,以
jQuery 与 OpenAJAX 为基础。JavaScriptMVC 利用 MVC 架构与工具扩展这些函式库,以便开发与测试。由于 JavaScriptMVC
不需要任何服务器端的配合,因此它可以和任何的网站服务接口与编程语言整合,如 ASP.NET、Java、Perl、PHP、Python 或 Ruby。

JSMVC是随ajax技术的应用慢慢演进出来的。是创建JSMVC架构应用程序的一系列实践和工具。

在Ajax 下的request/response步骤:

首先,js 从dom中提取数据,并将dom中的数据转化为json传递到后台。

其次,后台接收json,将json映射为后台对象,并根据相关的数据执行相关逻辑 ,执行完成后,将处理后的数据转化为json响应到前台。

最后,前台js 获取响应的json数据,并更新到前台dom中。

在 post json 和 response json 中, json格式数据即是js对象。从这里就衍生出Model。
Model 改变刷新 View, View有用户输入改变Model. 这种方式就是典型的 M-V模型,M-V模型的缺点是Model 和
View的耦合性很高,复用度不够。 此时引入Controller控制Model - View 之间的交互。

客户端MVC(JSMVC)的流程如下:

1). 客户端根据用户的行为修改客户端Model

2). 客户端更新和该Model相关的View

3). 客户端Model发送sync请求到服务器,只包含改变了哪些数据

4). 服务器审核数据改动是否合法,只需回复是否修改成功

5).
客户端收到成功,什么都不用做;不成功,则把刚才改的View改回来,然后通知用户。(当然,也可以在客户端的Model里面也加入审核机制,这样对不合法数据的反应更快,但还是得保留服务器端的审核)

JSMVC职责划分

1)  Model 模型层

业务模型:业务逻辑、流程、状态、规则

(核心)数据模型:业务数据、数据校验、增删改查(AJAX)

2)View 视图层

(核心)视图:定义、管理、配置

模板:定义、配置、管理

组件:定义、配置、管理

(核心)用户事件配置、管理

用户输入校验、配置、管理

3.  C 控制器/分发器

(核心)事件分发、模型分发、视图分发

不做数据处理、业务处理,即业务无关

扩展:权限控制、异常处理等

C是JSMVC框架的核心,实现集中式配置和管理,可以有多个控制器

4. 工具库

主要是异步请求、DOM操作,可以依赖于jQuery等

 JSMVC的优势

JSMVC是一款代码简易而功能强大的面向对象(oo)Javascript
mvc框架(简称jsmvc),也是作者在工作过程中的经验总结,实用性强;通过它,能够简化Javascript代码开发,代码模块化重复使用以及模块代码分享,单一入口mvc模式,有自己的doc元素操作和查询方法,不依赖jquery。现在将jsmvc功能特征概括如下:

1) jsmvc采用只引入一个js文件到html页面的单一入口

2) css、js自动按需装载

3) 可以自动预载其他js框架

4) 用户只要按命名规范编写类,放到相应目录,即可使用

5) 集成扩展常用函数

6) 支持类的声明与继承,简易Ajax

7) 简约而快速的CSS选择器

8) 产品上线可以启开css、js智能请求合并一为单一请求

在js下,MVC其实就是:把html代码、CSS、js分离开来。html是模型层、css是视图,js写成一个一个的类。类与html之间尽量不要强耦合。不要在类体内使用document.getElementById(或$(‘#xxx‘))某个具体的元素,应当把要使用的元素作为一个参数写入。这样,代码就独立起来了,就很好维护。

比较一下可以看到,前端MVC需要向服务器端传递和接收的数据量都少很多,而前端要做的等待和渲染工作也少了很多。换言之,会提供更快的交互反馈,也意味着更好的用户体验。同时,服务器端的负载也略有降低。

JSMVC简介,布布扣,bubuko.com

时间: 2024-10-05 21:22:59

JSMVC简介的相关文章

客户端高性能组件化框架React简介、特点、环境搭建及常用语法

明天就是春节了 预祝大家新春快乐 [ ]~( ̄▽ ̄)~* 天天饭局搞得我是身心疲惫= = 所以更新比较慢 今天想跟大家分享的就是这个大名鼎鼎的React框架 简介 React是这两年非常流行的框架 并不难,还是挺容易上手的 起源于Facebook内部项目(一个广告系统) 传统页面从服务器获取数据,显示到浏览器上,用户输入数据传入服务器 但随着数据量增大,越来越难以维护了 Facebook觉得MVC不能满足他们的扩展需求了(巨大的代码库和庞大的组织) 每当需要添加一项新的功能或特性时,系统复杂度就

Android网络通讯简介

网络通信应该包含三部分的内容:发送方.接收方.协议栈.发送方和接收方是参与通信的主体,协议栈是发送方和接收方进行通信的契约.按照服务类型,网络通信可分为面向连接和无连接的方式.面向连接是在通信前建立通信链路,而通信结束后释放该链路.无连接的方式则不需要在通信前建立通信连接,这种方式不保证传输的质量. Android提供了多种网络通信的方式,如Java中提供的网络编程,在Android中都提供了支持.Android中常用的网络编程方式如下: 针对TCP/IP协议的Socket和ServerSock

微信红包的架构设计简介

@来源于QCon某高可用架构群整理,整理朱玉华. 背景:有某个朋友在朋友圈咨询微信红包的架构,于是乎有了下面的文字(有误请提出,谢谢) 概况:2014年微信红包使用数据库硬抗整个流量,2015年使用cache抗流量. 微信的金额什么时候算? 答:微信金额是拆的时候实时算出来,不是预先分配的,采用的是纯内存计算,不需要预算空间存储.. 采取实时计算金额的考虑:预算需要占存储,实时效率很高,预算才效率低. 实时性:为什么明明抢到红包,点开后发现没有? 答:2014年的红包一点开就知道金额,分两次操作

JSON 简介

ylbtech-JSON: JSON 简介 JSON:JavaScript Object Notation(JavaScript 对象表示法) JSON是存储和交换文本信息的语法,类似 XML. JSON 比 XML 更小.更快.更易解析. JSON 实例 { "employee":[ {"firstName":"John","lastName":"Doe"}, {"firstName"

Docker简介

Docker简介 什么是Docker: 正所谓Docker的英文本意为"搬运工",所以在我们的世界里,可以理解为Docker搬运的是装满任意类型的APP的集装箱,开发者可以通过Docker将APP变成一种标准化的.可移动植的.自动管理的组件.它用一种新的方式实现了轻量级的虚拟机,专业术语成为应用容器(Application Container) Docker的优势: 1.利用率高 ·Docker对系统资源的利用率很高,一台主机可以同时运行数千个Docker容器 2.可以快速的交付应用程

kafka入门:简介、使用场景、设计原理、主要配置及集群搭建(转)

问题导读: 1.zookeeper在kafka的作用是什么? 2.kafka中几乎不允许对消息进行"随机读写"的原因是什么? 3.kafka集群consumer和producer状态信息是如何保存的? 4.partitions设计的目的的根本原因是什么? 一.入门 1.简介 Kafka is a distributed,partitioned,replicated commit logservice.它提供了类似于JMS的特性,但是在设计实现上完全不同,此外它并不是JMS规范的实现.k

Quartz.NET简介及入门指南

Quartz.NET简介 Quartz.NET是一个功能完备的开源调度系统,从最小的应用到大规模的企业系统皆可适用. Quartz.NET是一个纯净的用C#语言编写的.NET类库,是对非常流行的JAVA开源调度框架 Quartz 的移植. 入门指南 本入门指南包括以下内容: 下载 Quartz.NET 安装 Quartz.NET 根据你的特定项目配置 Quartz 启动一个样例程序 下载和安装 你可以下载 zip 文件或使用 Nuget 程序包.Nuget 程序包只包含 Quartz.NET 运

ASP.Net简介、IIS服务器和Repeater重复器

简介:ASP.NET - 制作网站应用程序的技术 WebForm -出来时间比较早,敏捷.便捷开发,封装一些控件,慢慢发现一些控件做的挺好,真正使用没有那么敏捷 MVC -出来时间比较晚 什么东西? winform 界面 - 后台 - 数据库 共同组合出来的程序:ASP.NET 界面(HTML+CSS+JS) - 后台 - 数据库 运行机制:winform - 程序是安装在用户的电脑上,程序是运行在用户电脑上的.net Framework框架上的 ASP.NET - 通过浏览器向服务器发送请求,

CloudFoundry in 1 Box简介:PCF-Dev篇

在<CloudFoundry in 1 Box简介:Bosh-lite篇>我们介绍了Bosh-lite的架构和部署.在本篇中,我们将详细描述另一个CloudFoundry in 1 Box解决方案PCF-Dev. 1PCF-dev简介 PCF是Pivotal发行的Cloud Foundry商业版,PCF-Dev原名MicroPCF,是Pivotal为PCF的应用开发人员准备的一款App单虚拟机版的CloudFoundry.但是,麻雀虽小,五脏俱全.PCF-Dev虽然可以在仅仅一台虚拟式上即可运