1、ACCP V4.0第第 二二 章章 JavaScript面向?qū)ο竺嫦驅(qū)ο驛CCP V4.02q了解JavaScript面向?qū)ο髊撐握J(rèn)avaScript中的類(lèi)型q理解JavaScript函數(shù)對(duì)象q撐握聲明JavaScript類(lèi)的方法q撐握實(shí)現(xiàn)JavaScript類(lèi)的繼承q撐握J(rèn)avaScript類(lèi)的多態(tài)q撐握J(rèn)SVM的配置目標(biāo)ACCP V4.03qJavaScript面向?qū)ο笫侵覆捎妹嫦驅(qū)ο蟮乃枷刖帉?xiě)JavaScript腳本。q采用面向?qū)ο蟮腏avaScript開(kāi)發(fā)比采用傳統(tǒng)的面向過(guò)程的JavaScript應(yīng)用更加健壯。q面向?qū)ο蟮睦^承，多態(tài)等特征可以極大的提高JavaScript應(yīng)用的開(kāi)發(fā)效

2、率。q面向?qū)ο蟮腏avaScript框架及應(yīng)用日益增多：qDojo JavaScript的套開(kāi)源類(lèi)庫(kù)qPrototype 一套用于構(gòu)建JavaScript面向?qū)ο箝_(kāi)發(fā)的基礎(chǔ)類(lèi)庫(kù)qGoogle Maps,Gmail等AJAX應(yīng)用JavaScript面向?qū)ο蠼榻BACCP V4.04qJavaScript是一門(mén)弱類(lèi)型的語(yǔ)言，即變量類(lèi)型運(yùn)行時(shí)確定。qJavaScript中常見(jiàn)的類(lèi)型：q基本類(lèi)型：數(shù)字(Number)，字符串(String)，布爾值(Boolean)q小數(shù)據(jù)類(lèi)型：null,undefinedq復(fù)合類(lèi)型，由基本類(lèi)型構(gòu)成：對(duì)象(Object)，數(shù)組(Array)q特殊類(lèi)型：函數(shù)(Functi

3、on)q基礎(chǔ)工具類(lèi)：全局對(duì)象Globals,日期Date,數(shù)學(xué)Math,正則表達(dá)式RegExp及錯(cuò)誤對(duì)象Error，這些由JavaScript內(nèi)置建立的類(lèi)。JavaScript的類(lèi)型ACCP V4.05qnull是javascript的一個(gè)關(guān)鍵字，用于指定一個(gè)變量不對(duì)應(yīng)任何的值或?qū)ο蟆undefined不是javascript的關(guān)鍵字，它是一個(gè)全局變量即Globals對(duì)象的一個(gè)屬性，下列三種情況javascript將返回undefined：q使用一個(gè)未定義的變量q使用已經(jīng)定義但未賦值的變量q使用對(duì)象不存在的屬性或未賦值的屬性qundefined與null并不一樣，但一般的情況下一樣，例如：n

4、ull undefined類(lèi)型ACCP V4.06qundefined與null并不一樣，但一般的情況下一樣，例如：qalert(undefined = null)返回trueqvar foo=“”alert(foo.bar = null);返回truealert(foo.bar = undefined);返回trueq但：alert(undefined = null)返回false,=是javascript中全等操作符。null undefined類(lèi)型ACCP V4.07q函數(shù)在javascript中是一種特殊的對(duì)象類(lèi)型，函數(shù)可以作為值賦給變量，獲作為參數(shù)傳遞給另一個(gè)函數(shù)，或作為其它函數(shù)的返

5、回，例如：函數(shù)類(lèi)型/函數(shù)作業(yè)變量的值var foo = function() var bar = function(fun) ;bar(foo);/將函數(shù)作為參數(shù)值傳遞var myfun = function() /函數(shù)作業(yè)其它函數(shù)的返回值 return function() ;/forEach實(shí)現(xiàn)遍歷數(shù)組的方法，/fn為傳遞的回調(diào)方法Array.forEach = function(fn) for(var i=0; ithis.length; i+) fn(thisi); var nums = 1,2,3;nums.forEach(function (num) alert(num););AC

6、CP V4.08q函數(shù)對(duì)象在調(diào)用時(shí)具有的屬性： qarguments調(diào)用函數(shù)時(shí)傳遞的參數(shù)，它類(lèi)似一個(gè)數(shù)組由腳本解釋器負(fù)責(zé)建立qarguments.caller獲取調(diào)用當(dāng)前函數(shù)的父函數(shù)的引用。函數(shù)類(lèi)型qarguments保存調(diào)用函數(shù)時(shí)的參數(shù)引用qlength參數(shù)的個(gè)數(shù)qcallee arguments所對(duì)應(yīng)的函數(shù)var factorial = function(n) if(n = 0) return 1; return n * argments.callee(n 1);q示例展示了使用callee計(jì)算n階乘的遞歸方法調(diào)用ACCP V4.09q示例使用函數(shù)的caller屬性獲取調(diào)用的堆棧信息：函數(shù)

7、類(lèi)型window.onload = function() var bar = function ()var fun = arguments.callee; var callstack = ;while(fun & fun.caller != window)callstack = callstack + =n調(diào)用函數(shù)： + fun + nn;fun = fun.caller; alert(callstack); var foo = function() bar(); foo();ACCP V4.010q函數(shù)是JavaScript中的特殊對(duì)象，它具有多重身份可以作業(yè)變量的值，參數(shù)或返回值，

8、也可以用于聲明JavaScript的類(lèi)。q類(lèi)名稱即為函數(shù)的名稱，函數(shù)即為類(lèi)的構(gòu)造函數(shù)。函數(shù)類(lèi)型function Foo() pa = bar;/賦予當(dāng)前對(duì)象的屬性值 pb = bar2;var fooa = new Foo();/建立Foo的實(shí)例var foob = new Foo();var testb = “bar string”;/建立字符串對(duì)象alert(fooa instanceof Foo);/返回truealert(testb instanceof Foo);/返回falseACCP V4.011q函數(shù)的apply及call方法提供將函數(shù)綁定到其它

9、對(duì)象執(zhí)行，函數(shù)中this將指向綁定的對(duì)象。qapply與call的區(qū)別在于調(diào)用時(shí)參數(shù)的形式不同qapply的格式apply(thisObj , argArray);thisObj待綁定的對(duì)象argArray調(diào)用函數(shù)的參數(shù)數(shù)組qcall的格式call(thisObj ,arg1 ,arg2 , .argN);thisObj待綁定的對(duì)象arg1,arg2 argN調(diào)用函數(shù)傳遞參數(shù)函數(shù)類(lèi)型ACCP V4.012apply及call示例function Test1() p = test1;this.method = function(msg) alert(p + : +

10、 msg);function Test2() p = test2;this.method = function(msg) alert(p + : + msg);/直接調(diào)用對(duì)象的方法var obj1 = new Test1();var obj2 = new Test2();obj1.method(msg1);obj2.method(msg2);obj1.method.call(obj2, msg1);/使用call綁定到obj2上執(zhí)行obj2.method.call(obj1, msg2);obj1.method.apply(obj2, msg1);/使用appl

11、y綁定到obj2上執(zhí)行obj2.method.apply(obj1, msg2);ACCP V4.013qthis,with都是javascript中的關(guān)鍵字qthis主要用于兩種地方q在構(gòu)造函數(shù)中，指代新創(chuàng)建的對(duì)象q在對(duì)象的方法被調(diào)用時(shí)，指代調(diào)用該方法的對(duì)象函數(shù)若是一個(gè)普通的函數(shù)this將指向windowqwith用于縮短javascript代碼Javascript中的this與withwith(Math) x = cos(3 * PI) + sin(LN10); y = tan(14 * E);ACCP V4.014qJavascript提供for.in.語(yǔ)句用于遍歷對(duì)象的屬性和方法，ty

12、peof方法可用于獲取對(duì)象的類(lèi)型。qJavaScript對(duì)象屬性可通過(guò).或獲取。中是屬性或方法名的字符串q示例中遍歷對(duì)象的屬性和方法，如果是屬性獲取其值，如果是方法則執(zhí)行對(duì)象內(nèi)省functionTest() p = test; this.fa = function() alert(fa); var t = new Test();for(var p in t) if(typeof(tp) = Function) tp();/執(zhí)行方法 else alert(tp);/輸出屬性值 ACCP V4.015qJavaScript支持面向?qū)ο蟮木幊?，支持面向?qū)ο蟮姆庋b，繼承，多態(tài)等特征。q

13、JavaScript中支持兩種方式聲明類(lèi):q使用函數(shù)聲明類(lèi)q使用對(duì)象的prototype的方式聲明類(lèi)JavaScript中聲明類(lèi)ACCP V4.016q示例使用函數(shù)聲明Test類(lèi)。JavaScript中聲明類(lèi)function Test() p = test; var bar = “bar”; this.fa = function() alert(fa); Test.staticProp = “static prop”;Test.staticMethod = function () ;q示例中p為類(lèi)的公開(kāi)的屬性，而bar則是一個(gè)私有屬性，私有屬性只能在當(dāng)前函數(shù)中使

14、用。qstaticProp和staticMethod為該類(lèi)的靜態(tài)屬性及靜態(tài)方法，靜態(tài)屬性及方法只能通過(guò)類(lèi)引用。ACCP V4.017qJavascript中的類(lèi)都具有prototype的屬性，指定為該屬性的值，該類(lèi)的實(shí)例對(duì)象將會(huì)自動(dòng)繼承。JavaScript中聲明類(lèi)function Test() Ttotype = prop:test, fa: function() alert(fa); ;/大括號(hào)聲明了一個(gè)匿名的對(duì)象var test = new Test();alert(p);/得到test字符串q使用prototype的方式聲明類(lèi)更加簡(jiǎn)潔，在大量的框架中有使用

15、。ACCP V4.018qJavascript中并沒(méi)有直接提供類(lèi)的繼承，但可以通過(guò)復(fù)制代碼的方式實(shí)現(xiàn)。q復(fù)制代碼可以解決繼承的問(wèn)題，但父類(lèi)修改時(shí)子類(lèi)又需要重新編碼。q解決重復(fù)代碼的問(wèn)題可考慮使用for . in 語(yǔ)句復(fù)制作屬性及方法類(lèi)的繼承function TestB() for(var name in Test)/遍歷所有Test類(lèi)的屬性及方法拷貝到TestB類(lèi)中 TestB.prototypename = Ttotypename;TestB.prototype.fa = function() q示例TestB繼承了Test的屬性及方法，并且重載了Test的fa的方法。ACCP

16、 V4.019q使用for . in.可解決父類(lèi)與子類(lèi)代碼一致的問(wèn)題，但每次繼承都需要編寫(xiě)for .in語(yǔ)句。q示例中通過(guò)為Object對(duì)象定義一extend方法來(lái)簡(jiǎn)化JavaScript中繼承操作，Object是JavaScript中的類(lèi)類(lèi)的繼承Object.extend = function(destination, source) for(prop in source) destinationprop = sourceprop; return destination;/使用TestB的extend方法繼承Testfunction TestB()Object.extend(TestB.pr

17、ototype, Test);Object.extend(TestB.prototype, fa:function() alert(testb.fa);/重載Test的fa方法ACCP V4.020q使用Object.extend方法也可以擴(kuò)展javascript基本類(lèi)型的功能，示例為String添加escape方法，將當(dāng)前自符串轉(zhuǎn)換成url編碼類(lèi)的繼承Object.extend(Stotype, escape:function() return escape(this); );ACCP V4.021qJavaScript中實(shí)現(xiàn)多態(tài)的方式與繼承類(lèi)似，在父類(lèi)里可以使用一個(gè)未定義

18、的方法，該方法即是一個(gè)抽象方法，在子類(lèi)中再具體實(shí)現(xiàn)。類(lèi)的多態(tài)/父類(lèi)方法function Base()Btotype.initialize = function() this.init();/調(diào)用子類(lèi)的方法 /父類(lèi)初始化function TestB = ;TestB.prototype = Object.extend( init:function() alert(TestBinit);, Btotype);var testa = new TestA();var testb = new TestB();/返回TestAinitalert(testa.initialize

19、();/返回TestBinitalert(testb.initialize();function TestA = ;TestA.prototype = Object.extend( init:function() alert(TestAinit);, Btotype);ACCP V4.022qJavaScript提供了new運(yùn)算符用于構(gòu)建類(lèi)的實(shí)例。qJavaScript中支持JSON數(shù)據(jù)格式，JSON可用于定義JavaScript的匿名對(duì)象或數(shù)組。qJavaScript充許動(dòng)態(tài)的添加對(duì)象的屬性或方法。類(lèi)的實(shí)例/定義JSON格式的匿名對(duì)象var employee = id:001,

20、 name:jerry;/定義JSON格式的數(shù)組對(duì)象var employees = id:001,name:jerry,id:002,name:tony,employee;/動(dòng)態(tài)添加employee的屬性employee.address = xmbcit;ACCP V4.023qIE中如需進(jìn)行JavaScript調(diào)試，需要安裝如下軟件：qMicrosoft Script EditorqVisual InterdevqVisual Studio.NETqVisual Studio 2005另外需要將IE的禁用腳本調(diào)試選項(xiàng)取消。IE調(diào)試JavaScript代碼ACCP V4.024qFireFox

21、中提供了Firebug插件，可方便調(diào)試Firefox中的網(wǎng)頁(yè)，它的主要功能：q運(yùn)行時(shí)動(dòng)態(tài)查看頁(yè)面的DOM元素qJavaScript控制臺(tái)，用于顯示JavaScript的錯(cuò)誤及調(diào)試信息qJavaScript調(diào)試，提供了一個(gè)Debug調(diào)試器可方便設(shè)置JavaScript斷點(diǎn)。qCSS查看器，可以查看網(wǎng)頁(yè)中任意DOM元素的樣式q網(wǎng)絡(luò)監(jiān)視器，可以監(jiān)視，統(tǒng)計(jì)網(wǎng)頁(yè)的流量FireFox中調(diào)試JavaScriptACCP V4.025qAptana一個(gè)專門(mén)為AJAX應(yīng)用而設(shè)計(jì)的集成開(kāi)發(fā)環(huán)境，它支持多種AJAX框架，包括：Prototype,script.aculo.us,Dojo,AFLAX等。qAptana

22、有兩個(gè)版本： q集成開(kāi)發(fā)環(huán)境Aptana studioqEclipse插件版，需要Eclipse3.2以上版本qAptana充許用戶建立自己的profiles來(lái)指定代碼關(guān)聯(lián)顯示，通地Aptana的Code Assist Profiles視圖可配置工程的javascript提示腳本。JavaScript開(kāi)發(fā)工具ACCP V4.026q在基于AJAX的RIA(Rich Internet Application)的應(yīng)用中，JavaScript的類(lèi)非常多，除遵守面向?qū)ο蟮拈_(kāi)發(fā)原則外，還需要有效的組織JavaScript類(lèi)的存儲(chǔ)。qJSVM提供了一種組織JavaScript的框架，采用動(dòng)態(tài)加載JavaS

23、cript腳本的機(jī)制，以類(lèi)似于Java的包,類(lèi)的組織方式來(lái)組織JavaScript的類(lèi)。qJSVM中每個(gè)公開(kāi)的類(lèi)對(duì)應(yīng)一個(gè)js文件，文件名與類(lèi)名一致。q包是一種特殊的對(duì)象，可以包含類(lèi)，頂層的包是Window的對(duì)象JSVM簡(jiǎn)介ACCP V4.027q在項(xiàng)目中添加JSVM，只需要將JSVM的根目錄拷貝至項(xiàng)目中。qJSVM中所有的類(lèi)都存放在classes目錄中，在頁(yè)面上只需要引入jsre.js即可。q加入JSVM的頁(yè)面可在JavaScript腳本中使用$import(“包名.類(lèi)名”)方式引用依賴的JavaScript類(lèi)。組織JSVM的環(huán)境 $import(“foo.bar.SayHello”);/加載

24、依賴的JavaScript類(lèi) function method() $import(“sys.init.Reader”);/Script中動(dòng)態(tài)加載 var reader = new sys.init.Reader(); ACCP V4.028qJSVM在執(zhí)行$import時(shí)根據(jù)import的參數(shù)的路徑從classes目錄中查找對(duì)應(yīng)包文件夾下，對(duì)應(yīng)類(lèi)的XXX.class.js文件，使用AJAX動(dòng)態(tài)下載，最后使用JavaScript的eval方法動(dòng)態(tài)執(zhí)行js文件的內(nèi)容，以建立js文件中的類(lèi)對(duì)象。q每個(gè)包對(duì)應(yīng)一個(gè)文件夾，頂層的包需要建立一個(gè)與包同名的XXX.class.js文件，并且在其中建立包對(duì)象，

25、示例：foo.class.js是一個(gè)頂層包的js文件，其中聲明了foo包對(duì)象，它是window的一個(gè)屬性。JSVM應(yīng)用window.foo = /建立包ACCP V4.029qJSVM中的類(lèi)是聲明在包下的，示例：聲明的Bar類(lèi)屬于foo包下，Bar.class.js文件需要置于foo包文件夾下。JSVM應(yīng)用$import(“foo”);/引入包對(duì)象的定義foo.Bar = function()/類(lèi)名必需與Bar.class.js一致 ;foo.Btotype.init = function () /Bar類(lèi)的方法q類(lèi)文件中也可以聲明JS對(duì)象$import(“foo”);/引入包對(duì)象

26、的定義foo.Globals = ;/指定foo.Globals是一JSON格式的對(duì)象。ACCP V4.030qJSON作為JavaScript內(nèi)置的數(shù)據(jù)格式，在Java中也可以利用JSON的庫(kù)文件將JAVA對(duì)象映射至相應(yīng)的JavaScript的對(duì)象。q反之JSON的服務(wù)器端JSON庫(kù)也可以將JSON格式的字符串轉(zhuǎn)換成相應(yīng)的JAVA對(duì)象。qJSON轉(zhuǎn)換的庫(kù)文件主要包含兩個(gè)：qjson-lib-1.1-jdk15.jar用于在服務(wù)器執(zhí)行JSON字符串與Java對(duì)象的轉(zhuǎn)換qjson.js用于在客戶端執(zhí)行JSON字符串與JavaScript對(duì)象之間的轉(zhuǎn)換JSON庫(kù)文件ACCP V4.031q服務(wù)器端

27、的JSON庫(kù)主要包括以下幾個(gè)類(lèi)：qJSON接口所有類(lèi)型的JSON對(duì)象都實(shí)現(xiàn)它，它的方法指定了如何將一個(gè)對(duì)象轉(zhuǎn)換成JSON字符串。qJSONObject用于執(zhí)行Java對(duì)象與JSON字符串之間的轉(zhuǎn)換。qJSONArray用于執(zhí)行Java集合對(duì)象與JSON字符串之間的轉(zhuǎn)換。qJSONFunction用于執(zhí)行Java方法與JavaScript方法之間的轉(zhuǎn)換。服務(wù)器端JSONACCP V4.032q示例描述與如何將一個(gè)Employee轉(zhuǎn)換成JSON的字符串，以及將一個(gè)JSON描述的Employee轉(zhuǎn)換成Java的Employee對(duì)象。服務(wù)器端JSONEmployee emp = new Employe

28、e();emp.setId(100l);emp.setName(張三);JSONObject jo = JSONObject.fromBean(emp);/以下將輸出：birth:null,name:張三,id:100System.out.println(jo.toString();ACCP V4.033q示例描述與如何將一個(gè)Employee轉(zhuǎn)換成JSON的字符串，以及將一個(gè)JSON描述的Employee轉(zhuǎn)換成Java的Employee對(duì)象。服務(wù)器端JSONEmployee emp = new Employee();emp.setId(100l);emp.setName(張三);JSONObject jo = JSONObject.fromBean(emp);/以下將輸出：birth:null,name:張三,id:100System.out.println(jo.toString();String json = name:李雷,id:300;JSONObject job = JS