第四章 作为应用的界面

,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第四章：作为应用的界面,组织复杂的用户界面代码,使用,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,编写在一个分离的文件中，是强化视图分离的良好开端。如果不注意，仍然使视图中混入逻辑角色，如：,这样将业务逻辑硬编码在视图中，什么是,data.xml,它和,myTextBox,是什么关系？为什么,importData,有两个参数？他们的意思是什么？,importData,(),是一个业务逻辑函数，按照,MVC,的法则，视图和模型不应该直接通信，一种解决的办法就是使用额外的层分离他们。,function,importFeedData(event,),importData(data.xnl,myTextBox.value,),这样参数被封装在函数中，这允许其它地方重用这个函数，同时分离了关注点。,然而控制器仍然被嵌入在,HTML,中，为了保持控制器和视图分离，可以采用编程方式添加事件。,1,、为元素附加一个,ID,，以每个元素为基础指定时间处理函数。,var dfBtn=document.getElementById(dataFeedBtn);,dfBtn.onclick=importFeedData;,2,、使用,css,间接添加事件,见,musical.html,和,musical.css,3,、绑定事件处理函数代码,见,musical.js,4.2.2,保持视图和逻辑分离,在上例中，按键的顺序仍然被嵌套在,HTML,中，每一个键定义在,标签中，页面设计时可能无意中删除一个元素。,键的顺序应该是业务领域问题而不是页面问题，应该采用编程方式为组件生成一些,DOM,，而不是在,HTMl,中声明它，具体实现见：,musical_dyn_keys.js,、,musical_dyn_keys.css,musical_dyn_keys.html,