[工学]第三章：使Ajax秩序井然.ppt

第三章：使Ajax秩序井然 开发和维护大型Ajax客户端代码库 重构Ajax应用的JavaScript代码 讨论Ajax应用中常用的设计模式 在Ajax应用的服务器端使用模型-视图-控制器模式 第三方Ajax库综述 Ajax之所以能超越DHTML，不仅在于它组合这些技术的方式不同，也在于使用这些技术的规模有所不同。 相比传统的Web应用来说，在Ajax中需要处理更多的JavaScript代码，而且代码在浏览器中运行的时间更长。 3.1从混沌到秩序 重构：目的不是增加新功能，而是重写代码使得程序更加清晰。 代码经过重构后，增加、删除和修改某些功能就会更加容易。 第二章的例子将JavaScript、HTML和样式表分别定义在单独的文件夹中，已经是一种简单的重构了。然而底层功能和专门处理列表对象的代码混在一起，随着项目的逐渐变大，代码将很难维护。 追求目标：设计小的、易读的、易修改的代码块，用来解决特定的问题。职责分离 重构的另一目的是识别出通用的解决方案，并且按照这种特定的模式来重新组织代码。 3.1.1 模式：创造通用的词汇表 设计模式（design pattern）：描述软件设计中解决特定问题的一种可重复的方法，设计模式为抽象的技术解决方案的命名。 遵循成熟的设计模式来编写代码，更有可能得到满意的结果，这仅仅是因为在此之前别人已经做过这种事情，与之相关的很多问题都已经经过了其他人的深思熟虑了。 3.1.2重构与Ajax Ajax应用很可能使用更多的JavaScript代码，而这些代码倾向于在浏览器中运行更长的时间。 在传统的Web应用中，复杂的代码运行在服务器上，在这些地方设计模式经常用在PHP、Java或.NET中，对于Ajax来说，需要考察如何在客户端代码中应用相同的技术。 3.1.3保持均衡 重构和设计模式不过只是工具，只应该应用在确实有用的地方，如果过度使用，将会导致所谓的“分析瘫痪”状态。 将重构作为引入设计模式的最佳方式。第一次写代码时，先以最简单的方式完成工作，然后当你遇到一些常见问题时，引入设计模式来解决问题。 3.1.4重构实战 在代码2-11中，定义sendRequest()函数，触发一个发送到服务器的请求， sendRequest()委派initXMLHttpRequest（）函数查找适当的XMLHttpRequest对象，并且以硬编码的方式为他分配了一个onReadyState（）回调函数来处理服务器的响应。 问题 1、代码做了我们需要它做的事情，但是有些难以重用。通常发送请求到服务器时，也想解析服务器的响应，并且根据结果做一些与应用密切相关的事情。 2、全局变量的存在也是一个容易出问题的地方，如果想同时向服务器发起多个调用，我们必须为每一个调用指定不同的回调函数。 具体改进见代码3-1 改进点 1、定义一个全局变量net，所有其他的引用都附加在它上面，这样将变量名发生冲突的风险降到最小。并且使得所有与网络请求相关的代码都位于同一个位置。 2、为对象提供了一个构造函数，将代码2-11中的initXMLHttpRequest（）和 sendRequest()移到了对象的内部 将困难的代码隐藏在对象的内部，对外只展示出容易使用的部分，最终用户减少了很多不必要的困难，与此同时，专家又可以在一个地方专心负责维护那些困难的代码，修改只需要做一次，就可以影响到整个代码库。 3.2一些小型重构的案例 探讨Ajax开发中的一些问题，并且考察一些通用的解决方案。在每一个案例中，都展示了重构如何减轻了与这个问题相关的痛苦，然后识别出可能在其他地方重用的这个方案中的元素。 3.2.1 跨浏览器不一致： Fa?ade和Adapter模式 Web世界技术标准林立，大部分浏览器厂商的实现的实现都或多或少的与这些标准存在差异，有些时候标准本身就很含糊，容易引起不同的解释。 JavaScript编程人员通过检查代码运行在哪个浏览器中，或者通过测试某个特定的对象是否存在来解决这个问题 1、使用DOM元素 Web页面是通过DOM公开给JavaScript的，以一个树状结构表示，其元素对应HTML文档中的标签，当通过程序来维护一颗DOM树的时候，想要找到某个元素在页面中的位置是一种非常常见的需求，但浏览器的标准不同，很难写出可靠安全的浏览器代码完成这个任务。如程序3-2。 Style.left定义为一个字符串，描述值和单位。如100px Style.pixelLeft定义为数值，以像素为单位。 在例子中首先检查浏览器是否支持css，然后测试这两个值。 2、发送请求到服务器 浏览器厂商提供了非标准机制来获取XMLHttpRequest对象，用于发送异步请求到服务器。 IE只能通过ActiveX组件获得这个对