第四章 作为应用的界面.pptVIP

第四章：作为应用的界面 组织复杂的用户界面代码 使用JavaScript实现模型-视图-控制器模式 为得到易维护的代码分离表现和逻辑 创建灵活的事件处理模式 直接从业务对象创建用户界面 本章主要内容 本章主要讨论创建大型、可伸缩的客户端，以及达到这个目标所需要的架构原理。 主要介绍模型-视图-控制器和Observer模式 4.1一种不同类型的MVC 4.1.1以不同的规模重复MVC模式 4.1.2在浏览器端应用MVC模式 4.1.1以不同的规模重复MVC模式 经典的MVC模式以粗粒度的规模描述完整的应用，模型是服务器端的领域模型、视图是生成的发送到客户端的内容、控制器是一个Servlet或定义应用的一组工作流程。 Ajax应用中使用MVC模型的几个场合 桌面应用系统，按钮这样的简单UI组件： 1、状态的内部表示（如按下、放开）是模型。通常实现为JavaScript对象。 2、显示在屏幕上、由DOM节点组成的UI组件是视图. 3、将两者相关联起来的内部代码是控制器。 下图展现了将MVC应用于树UI组件。 模型由树的节点组成，每个节点有一个子节点列表，一个打开/关闭的状态和一个到某些业务对象的引用。 视图由图标和UI组件画布上画的线组成。 控制器是处理用户事件，例如打开、关闭节点，显示弹出菜单、为特定的节点触发图形更新调用，允许图形增量的刷新自己。 4.1.2在浏览器端应用MVC模式 模型由业务领域对象组成 视图是整个可编程处理的页面 控制器是将UI和领域对象相连接的代码中所有事件处理函数的组合 4.2Ajax应用中的视图 视图是可视的界面，由DOM元素组成，它有两个任务： 1、为用户提供可视的界面，以便触发事件，事件用来与控制器对话。 2、需要在模型改变时作出相应，更新自己，通常需要再次通过控制器进行通信。 4.2.1将逻辑从视图中分离 将所有的JavaScript编写在一个分离的文件中，是强化视图分离的良好开端。如果不注意，仍然使视图中混入逻辑角色，如： div class=importButton onclick=importData(data.xml,myTextBox.value);/div 这样将业务逻辑硬编码在视图中，什么是data.xml,它和myTextBox是什么关系？为什么importData有两个参数？他们的意思是什么？ importData()是一个业务逻辑函数，按照MVC的法则，视图和模型不应该直接通信，一种解决的办法就是使用额外的层分离他们。 div class=importButton onclick=importFeedData()/div script type=text/javascript function importFeedData(event){ importData(data.xnl,myTextBox.value) }/script 这样参数被封装在函数中，这允许其它地方重用这个函数，同时分离了关注点。 然而控制器仍然被嵌入在HTML中，为了保持控制器和视图分离，可以采用编程方式添加事件。 1、为元素附加一个ID，以每个元素为基础指定时间处理函数。 div class=importButton id=dataFeedBtn/div var dfBtn=document.getElementById(dataFeedBtn); dfBtn.onclick=importFeedData; 2、使用css间接添加事件 见musical.html和musical.css 3、绑定事件处理函数代码 见musical.js 4.2.2保持视图和逻辑分离 在上例中，按键的顺序仍然被嵌套在HTML中，每一个键定义在div标签中，页面设计时可能无意中删除一个元素。 键的顺序应该是业务领域问题而不是页面问题，应该采用编程方式为组件生成一些DOM，而不是在HTMl中声明它，具体实现见：musical_dyn_keys.js、musical_dyn_keys.css musical_dyn_keys.html * * *