javascript面向对象编程

1第一部分：现代JavaScript简介第一章现代JavaScript编程JavaScript的演化是渐进而稳固的。历经过去十年的进程，JavaScript在人们的认知里已经从一门简单的玩物式的语言逐渐发展成为一门倍受推崇的编程语言，被全世界的公司和开发者用来构造种种精彩的应用。现代JavaScript编程语言一如既往地可靠、健壮，强大得令人难以置信。在本书中我进行的许多论述，将揭示是什么使得现代JavaScript应用程序与从前有着那么明显的不同。本章中出现的许多概念远不能算新奇，然而成千上万聪明的程序员的认同促使它们的用途得以升华并最终形成今天的格局。既如此，我们这就来着眼现代JavaScript程序设计。面向对象的JavaScript从语言的视角来看，面向对象的程序设计和面向对象的JavaScript语言绝对不是什么摩登的东西；JavaScript最开始就是被设计成一种彻底的面向对象语言。然而，随着JavaScript在其使用和接受的过程中的“逐步发展”，其它语言(如Ruby,Python,和Perl等)的程序员留意到了它并开始将他们的编程模式引入了JavaScript。面向对象的JavaScript代码的外观和内部运作都有别于其它具有对象能力的语言。在第二章我将深入论述使它如此独特的方方面面，而在这里，先来看一点基础的东西以体会编写现代JavaScript代码的初步感觉。程序1-1中的两个对象构造器的例子，演示了可用于学校课程的简单的对象搭配。程序1-1.课程和课程表的面向对象JavaScript表述CODE://类Lecture的构造器//使用两个字符串参数，name和teacherfunctionLecture(name,teacher){//把它们作为对象的本地属性保存this.name=name;this.teacher=teacher;}//类Lecture的方法，生成一个显示该课程信息的字符串Lecture.prototype.display=function(){returnthis.teacher+isteaching+this.name;};//类Schedule的构造器//使用一个lectures类型的数组作为参数PDF文件使用pdfFactoryPro试用版本创建(lectures){this.lectures=lectures;}//类Schedule的方法，用来构造一个描述该课程表的字符串Schedule.prototype.display=function(){varstr=;//遍历每门课程，累加构成信息字符串for(vari=0;ithis.lectures.length;i++)str+=this.lectures[i].display()+;returnstr;};从程序1-1的代码中你或许已经看出，大部分的面向对象基本原则贯穿存在于其中，但它们是以不同于其它更常见的面向对象语言的方式组织起来的。你可以创建对象构造器和方法，并存取对象属性。程序1-2展示了在应用程序中使用上面两个类的一个示例。程序1-2.给用户提供课程的列表CODE://创建一个新的课表对象，存于变量mySchedule中varmySchedule=newSchedule([//创建一个课程对象的数组，//作为传给课表(原文此处为Lecture，疑为笔误)对象的唯一参数newLecture(Gym,Mr.Smith),newLecture(Math,Mrs.Jones),newLecture(English,TBD)]);//弹出对话框显示课表的信息alert(mySchedule.display());伴随对广大程序员对JavaScript的接受，设计良好的面向对象代码的使用也正日益普及。贯穿本书的始末，我将试图展示我认为能够最好地例示代码设计与实现的不同的面向对象的JavaScript代码片段。测试你的代码建立起良好的面向对象的基本代码之后，开发专业品质的JavaScript代码的第二个方面是确保拥有一个强劲的代码测试环境。当开发频繁使用的或将由其它开发者维护的代码时，严格调试的必要性会显得尤为突出。为其它开发者提供一个坚实的测试基础，是维持代码开发活动的关键。在第四章，你将会看到一些可用来形成良好的测试/使用框架的不同工具，以及对复杂应用程序的简单调试。用于Firefox的插件Firebug就是其中一例。Firebug提供了许多的有PDF文件使用pdfFactoryPro试用版本创建用的工具，如错误控制台，HTTP请求日志，调试，以及元素查看。图1-1展示了Firebug调试一段代码时的实况截屏。图1-1.FirefoxFirebug插件运行时的截屏开发干净的、可测试的代码的重要性怎么强调都不会过分。一旦你开始开发一些干净的面向对象代码并将它们与合适的测试套件结合，相信你会倾向于同意这一点。为分发而进行的封装开发现代的专业JavaScript代码的最后一个方面是为了代码分发或在现实世界里中使用而进行的封装处理。随着开始开发者们在其页面中使用越来越多的JavaScript代码，冲突的可能性将会增加。如果两个JavaScript库里都有一个名为data的变量或者按各的意图添加事件，灾难性的冲突和莫名其妙的错误可能就会出现。开发者简单地置入script指针无须任何变动就能正常工作的能力是开发一个成功的JavaScript库的精诣所在。开发者用以保持代码清洁和普遍兼容的的技术或解决方案有许多种。使用命名空间是广泛使用的保证代码不与其它JavaScript代码互相影响和抵触的一种技术。这方面一个极端的（但未必是最好或最有用的）运作中的例子就是Yahoo开发的任何人都可使用的用户界面库。使用该库的一个示例见程序1-3.程序1-3.使用重度名称空间化的YahooUI库给一个元素添加事件CODE://给ID为body的元素添加mouseover事件监听器YAHOO.util.Event.addListener('body','mouseover',function(){//andchangethebackgroundcoloroftheelementtoredthis.style.backgroundColor='red';});然而，这种命名空间方法存在一个问题，即库与库之间在构造和使用的方式上缺乏内在PDF文件使用pdfFactoryPro试用版本创建的一致性。正是在这一点上，中心代码仓库如JSAN(JavaScriptArchiveNetwork)变得非常有用。JSAN提供一套代码库需遵从的一致规则，以及一种快捷导入代码所依赖的其它库的方式。图1-2展示了JSAN的主分发中心的一个截屏。图1-2.公共代码仓库JSAN的截屏我将在第三章阐述开发清洁的可封装代码的细节。此外，其它常见的事故多发点如事件处理冲突，将在第六章论述。UnobtrusiveDOM脚本编程（非侵入的DOM脚本编程）基于一个优良的可测试的核心创建你的代码和兼容的分发，是UnobtrusiveDOM脚本编程的基本概念。编写unobtrusive代码意味着与你的HTML内容的彻底分离：数据来自服务器，而JavaScript代码用来使其动态化。达到这一彻底分离的最重要的副作用就是你的代码在不同的浏览器之间可以完美的升/降级。利用这一点，你可以提供高级的内容给支持它的浏览器，而在不支持的浏览器上从容隐藏之。编写现代的、Unobtrusive代码包括两个方面：文档对象模型(DOM)和JavaScript事件。本书中我对这两个方面都将作深入的解释。PDF文件使用pdfFactoryPro试用版本创建文档的流行的方法。它未必是最快的、最轻便的、或者最易使用的，却是是最普及的，绝大多数web开发语言（如Java，Perl，PHP，Ruby，Python，及Javascript)都实现了对它的支持。DOM旨在为开发者提供一种直观的方式来导航于XML的层次结构中。因为有效的HTML只是XML的一个子集，保有一个方式来有效地解析和浏览DOM文档对于简化JavaScript开发来说是必不可少的。从根本上讲，出现在JavaScript中的大多数的交互是发生在JavaScript与页面所包含的不同HTML元素之间的；DOM是使这此过程简单化的卓越工具。程序1-4展示了使用DOM在页内导航和查找不同的元素然后操作它们的一些例子。程序1-4.使用文档对象模型定位并操纵不同的DOM元素[Copytoclipboard][-]CODE:htmlheadtitleIntroductiontotheDOM/titlescript//直到文档完全载入，我们才能操作DOMwindow.onload=function(){//找到文档中所有的li元素varli=document.getElementsByTagName(li);//然后给它们全部加上边框for(varj=0;jli.length;j++){li[j].style.border=1pxsolid#000;}//定位ID为'everywhere'的元素varevery=document.getElementById(everywhere);//并将它从文档中移除every.parentNode.removeChild(every);};/script/headbodyh1IntroductiontotheDOM/h1pclass=testThereareanumberofreasonswhytheDOMisawesome,herearesome:/pulliid=everywhereItcanbefoundeverywhere./liliclass=testIt'seasytouse./liliclass=testItcanhelpyoutofindwhatyouwant,PDF文件使用pdfFactoryPro试用版本创建是开发UnobtrusiveJavaScript代码的第一步。借助简单快速导航HTML文档的能力，所有随之而来的JavaScript/HTML交互将变得如此简单。事件事件将一个应用程序之内所有的用户交互结合在一起。在一个设计良好的JavaScript应用程序里，你将拥有数据源和它的视觉的表示(在HTMLDOM内部)。为了同步这两个方面，你必须监视用户的交互动作并试图相应地更新用户界面。使用DOM和JavaScript事件的结合是使得现代web应用程序赖以工作的基本组合。所有的现代浏览器都提供一系列的只要特定交互动作发生即被触发的事件，如用户移动鼠标，敲击键盘，或离开页面等等。使用这些事件，你可以注册代码到特定事件，一旦该事件发生，你的代码就会被执行。程序1-5展示了这种交互的一个实例，该网页中的li元素在用户鼠标经过的时候会改变背景色。程序1-5.使用DOM和事件来提供一些视觉效果[Copytoclipboard][-]CODE:htmlheadtitleIntroductiontotheDOM/titlescript//直到文档完全载入，我们才能操作DOMwindow.onload=function(){//查找所有的li元素，附以事件处理程序varli=document.getElementsByTagName(li);for(vari=0;ili.length;i++){//将鼠标移入事件处理程序附在li元素上，//该程序改变li背景颜色为蓝色li[i].onmou