EtJs4新類庫(kù)特性詳解及JS新語(yǔ)法擴(kuò)展

1、ExtJs4 新類庫(kù)特性及 JS 新語(yǔ)法擴(kuò)展講師：風(fēng)舞煙目錄:、ExtJS4對(duì)JS語(yǔ)法的擴(kuò)展js動(dòng)態(tài)引用加載JS基本數(shù)據(jù)類型 定時(shí)事件執(zhí)行 健盤導(dǎo)航事件、ExtJs4的新類庫(kù)特性Ext.defi neCon figurati on酉己置組合屬性(mixins ) 類的靜態(tài)成員屬性(statics)概述：ExtJs4對(duì)JS基本語(yǔ)法的進(jìn)行了新的擴(kuò)展，包括動(dòng)態(tài)加載、類的封裝等ExtJS 4的類系統(tǒng)(class system )進(jìn)行了一次重大重構(gòu)，ExtJS4的新架構(gòu)就是基 于這套新的類系統(tǒng)構(gòu)建的，因此有必要先了解以下這個(gè) class system I:最佳命名規(guī)范 實(shí)踐(其實(shí)是要求必須遵照它的規(guī)范)

2、I:解釋健壯類系統(tǒng)的重要性ExtJS 4有300多個(gè)類，社區(qū)里有20w+不同背景的開(kāi)發(fā)者，提供一個(gè)好的代碼架 構(gòu)是個(gè)巨大的挑戰(zhàn)：? 易學(xué)，學(xué)習(xí)成本低?快速開(kāi)發(fā)，容易調(diào)試和發(fā)布? 組織良好，可擴(kuò)展可維護(hù)JavaScript是個(gè)基于原型鏈繼承的語(yǔ)言，沒(méi)有類的概念。而且JavaScript語(yǔ)言特點(diǎn)就是松散和自由，實(shí)現(xiàn)一個(gè)同樣的功能，可以有很多種方式，但是如果放任它的松 散和自由，就很難維護(hù)和重用代碼。面向?qū)ο缶幊探^大部分都是基于類的。基于類的編程語(yǔ)言通常需要強(qiáng)類型，提供代 碼封裝，并且有標(biāo)準(zhǔn)的編碼習(xí)慣，ExtJS就是能做到既有面向?qū)ο缶幊痰囊?guī)范性,又能做到JavaScript的靈活性II.命名規(guī)范命

3、名規(guī)范，使用一致的命名規(guī)范可以讓你的代碼結(jié)構(gòu)清晰，可讀性強(qiáng)。1. Classes 類類名只能包含字母數(shù)字，不推薦使用數(shù)字，除非是常用詞。不要用下劃線中化線等 非字母數(shù)字字符。?MyCompa ny.useful_util.Debug_Toolbar不合法?MyCompany.util.Base64 合法類應(yīng)該組織在包或者說(shuō)命名空間下面，并且至少要有一個(gè)頂層命名空間，例如:MyCompa ny.data.CoolProxyMyCompa ny .Applicati on頂層命名空間和真正的類，應(yīng)該采用駝峰式命名，其他一律小寫，例如：MyCompa ny.form.actio n.AutoLoad

4、非Ext官方類，不可以在Ext頂層命名空間下（這是為了防止沖突）首字母組合詞也要采用駝峰式命名，例如：Ext.data.JsonProxy 而不是 Ext.data.JSONProxyMyCompany.util.HtmlParser 而不是 MyCompary.parser.HTMLParserMyCompany.server.Http 而不是 MyCompany.server.HTTP2. Source Files 源文件類的命名和源文件存放路徑是對(duì)應(yīng)的，例如:?Ext.util.Observable 存放在 path/to/src/Ext/util/Observable.js?Ext.f

5、orm.action.Submit 存放在 path/to/src/Ext/form/action/Submit.js?MyCompa ny .chart.axis.Numeric 存放在path/to/src/MyCompa ny/chart/axis/Numeric.js這里面的path/to/src 就是程序跟目錄下的那個(gè) app目錄，所有類都應(yīng)該這樣組織,保證維護(hù)性3方法和成員變量? 和類名一樣只能用字母和數(shù)字，其他符號(hào)不可以? 同樣是駝峰命名，但是首字母小寫，首字母組合詞也如此 例如：合法的方法名：en codeUsi ngMd5(),getHtml()代替getHTML() ,ge

6、tJsonResponse()代替 getJSONResponse(),parseXmlContent() 代替parseXMLCo nte nt()合法的變量名：var isGoodName; , var base64E ncoder, var xmlReader , varhttpServer4. Properties 屬性?跟成員變量一致?如果是常量Ext.MessageBox.YES = "Yes"Ext.MessageBox.NO = "No"MyCompa ny.alie n.Math.PI = "4.13"第一部分：Ex

7、tJS4對(duì)JS語(yǔ)法的擴(kuò)展一、動(dòng)態(tài)引用加載ExtJs4有龐大的類型庫(kù)，很多類可能在當(dāng)前的頁(yè)面根本不會(huì)用到，我們可以引入動(dòng) 態(tài)加載的概念來(lái)即用即取。這些代碼都要寫在Ext.onReady外面。1.動(dòng)態(tài)引用外部Js/加載配置可用Ext.Loader.setConfig( enabled:true );/動(dòng)態(tài)引用“l(fā)uxl"目錄下所有Js文件類，映射到對(duì)應(yīng)命名空間Ext.Loader.setPath('Ext.ux','./ux/');2.動(dòng)態(tài)加載類/加載單個(gè)類Ext.require('Ext.window.Window');/加載多個(gè)Ext.

8、require('Ext.grid.*','Ext.data.*','Ext.util.*','Ext.grid.PagingScroller')；/加載所有類，除了 Ext.data.*”之外Ext.exclude('Ext.data.*').require('*');二、基本數(shù)據(jù)類型ExtJs支持?jǐn)?shù)值型、字符串型、日期型、布爾型等基本數(shù)據(jù)類型，內(nèi)容比較簡(jiǎn)單，下面演示基本的聲 明用法，以及類型轉(zhuǎn)換。/定義一個(gè)日期類型的數(shù)據(jù)var datel = new Date("2011-11-12&

9、quot;);var date = new Date(2011, 11, 12, 12, 1, 12);/轉(zhuǎn)化為字符串型alert(date.toLocaleDateString();/轉(zhuǎn)化為數(shù)值型alert(Number(date);/布爾型，假var myFalse = new Boolean( false );/真var myBool = new Boolean( true );/定義數(shù)值var num = new Number(45.6);alert(num);四、函數(shù)執(zhí)行時(shí)間控制主要用兩個(gè)方面，1.讓某個(gè)函數(shù)等待一段時(shí)間后自動(dòng)執(zhí)行。2.然某個(gè)函數(shù)按照一定頻率反復(fù)執(zhí)行。1.函數(shù)等待執(zhí)行

10、實(shí)現(xiàn)一個(gè)功能，頁(yè)面加載完畢后，等待 3秒后彈岀提示。1var func1 = function(name1, name2) Ext.Msg.alert("3秒鐘后自動(dòng)執(zhí)行","你好，"+ name1 +"、"+ name2 +"!");23;4Ext.defer(func1,3000,this ," 張三","李四");52.函數(shù)按照一定頻率反復(fù)執(zhí)行讓mydiv每隔一秒更新一次顯示當(dāng)前時(shí)間，10秒又自動(dòng)停止更新：/周期執(zhí)行var i = 0;vartask =run: fun

11、 ctio n () Ext.fly('mydiv').update(new Date().toLocaleTimeString();if (i > 10) Ext.TaskMa nager.stop(task);i+;,in terval: 1000Ext.TaskMa nager.start(task);四、鍵盤事件偵聽(tīng)1.Ext.KeyMap通過(guò)Ext.KeyMap可以建立鍵盤和用戶動(dòng)作（Actions ）之間的映射。下面看看例子，頁(yè)面html沿用Ext.Updater 部分。var f = function （） alert（"B被按下"）;v

12、ar map = new Ext.KeyMap(Ext.getDoc(),key: Ext.EventObject.B,fn: f, key:"bc",fn:function () alert('b,c其中一個(gè)被按下');,key:"x",ctrl:true ,shift:true ,alt:true ,fn:function () alert('Control + shift +alt+ x組合鍵被按下.')；,stopEvent:true, key:"a",ctrl:true ,fn:functio

13、n () alert('Control+A全選事件被阻止，自定義事件執(zhí)行！'); ,stopEvent:true);2.Ext.KeyNavExt.KeyNav 主要是用來(lái)綁定方向鍵的，已支持的鍵：enter, left, right, up, down, tab, esc, pageUp,pageDown, del, home, end,現(xiàn)在通過(guò)它來(lái)實(shí)現(xiàn)鼠標(biāo)控制層移動(dòng)的功能：var div1 = Ext.get("div1");var nav =new Ext.KeyNav(Ext.getDoc(), "left":function(e

14、) div1.setXY(div1.getX() - 1, div1.getY();,"right":function(e) div1.setXY(div1.getX() + 1, div1.getY();,"up":function(e) div1.move("up",1);,"down":function(e) div1.moveTo(div1.getX(), div1.getY() + 1);,"enter":function (e) );第二部分：ExtJs4的新類庫(kù)特性III.實(shí)踐一下

15、1. Declaratio n聲明1.1老的方式如果你使用過(guò)ExtJS 3或者之前的版本，可能會(huì)熟悉Ext.extend，可以用來(lái)創(chuàng)建一個(gè)類var MyWi ndow = Ext.exte nd(Object, . );這個(gè)方法很容易就可以聲明一個(gè)類并繼承自另一個(gè)類，但是也有缺陷My.cool.Window = Ext.extend(Ext.Window, . );這個(gè)例子中我們需要把類定義在命名空間里，并繼承自Ext.Window類，但是有兩個(gè)問(wèn)題：1. My.cool必須之前定義過(guò)，這個(gè)命名空間必須已經(jīng)存在2. Ext.Wi ndow 必須已經(jīng)加載第一條通?？梢允褂肊spac

16、e (同Ext.ns )解決，這個(gè)方法會(huì)把不存在的命名 空間都創(chuàng)建出來(lái)，無(wú)聊的是你必須記得在Ext.exte nd之前加上這句話Ext .n s('My.cool');My.cool.Window = Ext.extend(Ext.Window, . );第二個(gè)問(wèn)題，ExtJS4以前的版本都不好解決依賴問(wèn)題，因此通常是引入ext-all.js1.2新的方式ExtJS 4消除了這些弊端，只需要記住一個(gè)方法：Exldefi ne，基本語(yǔ)法如下Ext.defi ne(className, members, on ClassCreated);?className要聲明的類的名字?mem

17、bers 一個(gè)對(duì)象，包含類成員?on ClassCreated 一個(gè)可選的回調(diào)函數(shù)，因?yàn)樾碌漠惒郊虞d機(jī)制，這個(gè)回調(diào)函數(shù)會(huì)很有用，當(dāng)所有依賴已經(jīng)引入，并且類完全創(chuàng)建好了之后，這個(gè)函數(shù)會(huì)被 調(diào)用例子Ext.defi ne('My.sample.Pers on', n ame: ' Unknown',con structor: fun cti on(n ame) if (n ame) this .n ame = n ame;,eat: fun cti on( foodType) alert(this .n ame + " is eat in g: "

18、; + foodType););var aar on = Ext.create('My.sample.Pers on', 'Aar on');aaron.eat("Salad"); / alert("Aaron is eating: Salad");注意這里創(chuàng)建一個(gè)新的 My.sample.Person 實(shí)例使用的是Ext.create() 方法，使用new 關(guān)鍵字也可以創(chuàng)建實(shí)例(new My.sample.Perso n()，但是不推薦使用new，應(yīng)該養(yǎng)成使用Ext.create 的習(xí)慣，因?yàn)檫@樣可以利用到動(dòng)態(tài)加載的好處

19、繼承讓我們對(duì)比一下 Extjs 3 和Extjs 4 自定義window 時(shí)的代碼吧！|xEnter your neme:下面是Extjs3 的代碼： Ext. namespace("MyApp");MyApp.MyWi ndow = Ext.exte nd(Ext.Wi ndow, title: "Welcome!", in itComp onent: function()Ext.apply(this, items: xtype: "textfield",n ame: "tfName",fieldLabel: &

20、quot;E nter your n ame")；MyApp.MyWi ndow.superclass.i nitComp onen t.apply(this, argume nts););var win = new MyApp.MyWi ndow();wi n.show();可以看到我們必須使用 Espace 來(lái)注冊(cè)自定義的命名空間， 否則拋出MyApp未定 義的異常信息。與此同時(shí)，若 Ext.Wi ndow 沒(méi)有完成加載，那么也會(huì)拋出 Ext.Wi ndow 未 定義的異常信息。而 Extjs 4 就省去了這個(gè)麻煩。下面是 Extjs 4的代碼：Ext.define

21、("MyApp.MyWindow", exte nd: "Ext.Wi ndow",title: "Welcome!",in itComp onent: function()this.items = xtype: "textfield",n ame: "tfName",fieldLabel: "E nter your n ame"this.callPare nt(argume nts););var win = Ext.create("MyApp.MyWi ndow&

22、quot;);wi n.show();Extjs 4中以字符串的形式定義類和引用父類，所以并不存在該類未定義的說(shuō)法。Extjs 4的ClassManager 會(huì)檢查Ext.Window是否已完成加載并已定義，若沒(méi)有則推遲MyApp.MyWindow的實(shí)例化并自動(dòng)完成Ext.Window的加載?？蚣軙?huì)為我們管理各類的加載順序，并且 Ext.defi ne會(huì)自動(dòng)監(jiān)測(cè)和創(chuàng)建省命名空間，省心多了。另外我們可以看到，Exjts 3中調(diào)用父類方法的語(yǔ)句為MyApp.MyWindow.superclass.initComponent.apply(this, arguments)，而 Extjs 4就簡(jiǎn)約為

23、this.callParent(arguments)。對(duì)于 override 的方法使用 this.callParent(arguments)就好比如 C# 的 override 方法中使用Base.方法名(參數(shù)1.)。用于把子類的參數(shù)傳遞到父類的方法中Ext.defi ne("Pare nt",con structor: function(n ame)this .n ame = n ame;)；Ext.defi ne("Child",exte nd: "Pare nt",con structor: function(n ame, s

24、ex)this.sex = se x;this.callPare nt( name);/參數(shù)為數(shù)組);var c = new Child("Joh n Huan g", "male");建議使用該形式實(shí)或者 var c = Ext.create("Child", "John Hua ng", "male"); /例化對(duì)象con sole .lo g(c. name);con sole .lo g(c.sex);建議使用Ext.create實(shí)例化對(duì)象，這樣可以利用 Extjs 4 類系統(tǒng)的特性。E

25、xt.define是 Ext.ClassManager.create的別名，Ext.create 是Ext.ClassMa nager.i nsta ntiate的別名2. Co nfiguration配置(實(shí)例成員)置項(xiàng)屬性(config ，自動(dòng)創(chuàng)建 setters 和getters )/基本使用方式：Ext.defi ne("MyClass.A", con fig: n ame: "tom",sex: "male",show: fun cti on()/ con sole .lo g(this.c on fig. name); a

26、lert(this.c on fig. name););var objA = Ext.create("MyClass.A");objA.show();objA.setName("Joh n");objA.show();alert(objA.getName();alert(objA. name);config屬性會(huì)將為其屬性自動(dòng)添加 setter和getter函數(shù)。若打算修改setter的行為，可以重寫“ apply屬性名”方法，該方法將為setter的內(nèi)部實(shí)現(xiàn)。 具體代碼如下：Ext.defi ne("MyClass.A", con

27、fig: n ame: "Joh n Huan g",sex: "male",applyName: function( val)this .n ame = "dev: " + val;,show: function()con sole .lo g(this .n ame););var a = Ext.create("MyClass.A");a.setName("Joh n");con sole.show(); / 控制臺(tái)結(jié)果： dev: Joh n在自定義前我們需要理解config屬性、當(dāng)前類、

28、getter和setter的關(guān)系和原理。下面我們通過(guò)實(shí)例來(lái)理解吧Ext.defi ne("MyClass.A", con fig: n ame: "Joh n Huan g", sex: "male",applyName: function( val) this .n ame = "dev: " + val;);var a = Ext.create("MyClass.A");1. con sole .lo g(a.c onfig.n ame); /2. con sole .lo g(a .n a

29、me); /3. con sole .lo g(a.getName(); /4. con sole .lo g(a .n ame); /5. con sole .lo g(a.c onfig.n ame); /控制臺(tái)結(jié)果：Joh n Hua ng 控制臺(tái)結(jié)果：un defi ned控制臺(tái)結(jié)果：dev: John控制臺(tái)結(jié)果：dev: Joh n控制臺(tái)結(jié)果：Joh n Hua ng語(yǔ)句3的結(jié)果是不是和我們預(yù)想的John Hua ng 有所出入呢？不是說(shuō)調(diào)用setName 的時(shí)候才會(huì)調(diào)用applyName嗎，為啥調(diào)用getName 的時(shí)候也會(huì)調(diào)用 applyName 呢？其實(shí)調(diào)用getName 的時(shí)

30、候不定會(huì)調(diào)用 applyName 方法，只有當(dāng)語(yǔ)句2結(jié)果為undefined 時(shí) 才會(huì)有如此的效果，而且只有首次調(diào)用時(shí)會(huì)調(diào)用applyName 方法。如果在語(yǔ)句 3前執(zhí)行了 = "John"或者 a.setName("John")，那么就不調(diào)用 applyName 方法。分析:其實(shí)getName 內(nèi)部實(shí)現(xiàn)在首次調(diào)用和第N次調(diào)用時(shí)是不同的。首次調(diào)用getName 方法時(shí)的內(nèi)部實(shí)現(xiàn)步驟如下：1. 檢查對(duì)象是否有name屬性，有則執(zhí)行步驟2，無(wú)則執(zhí)行步驟3 ；2. 返回name屬性，并更新內(nèi)部實(shí)現(xiàn)；3. 以con fig. name為參數(shù)執(zhí)行 a

31、pplyName 函數(shù)，因?yàn)閍pplyName 函數(shù)體為 =. ，就會(huì)添加name屬性到對(duì)象中，然后更新內(nèi)部實(shí)現(xiàn)。(若applyName 函數(shù)體無(wú)=.的語(yǔ)句，那么 getName 的返回值將是undefined )第N次調(diào)用getName 方法是的內(nèi)部實(shí)現(xiàn)如下：fun ctio n() return thisq; ，直接返回對(duì)象的屬性。結(jié)論：setter和getter是將config的成員屬性復(fù)制(注意：為淺復(fù)制)為當(dāng)前類的成 員屬性，然后對(duì)成員屬性進(jìn)行后續(xù)操作。因此我們?cè)谥貙?applyName 時(shí)需要遵守下列原則。不要修改config的成員屬性值而在類內(nèi)

32、部成員函數(shù)中訪問(wèn) config的成員屬性時(shí)建議如下操作：Ext.defi ne("MyClass.A", con fig: n ame: "Joh n Huan g",sex: "male",showName: fun cti on()var n ame = this .n ame | this.c onfig.n ame;con soleog(n ame);,updateName: function( val)this. name = val;);組合屬性(mixins )組合是Extjs4的新特性，可用于實(shí)現(xiàn)多繼承。該屬性會(huì)以同步

33、方式加載類文件，并實(shí)例化 該類！基本用法：Ext.defi ne("MyClass.A", showA: fun cti on()con sole.log("A"););Ext.defi ne("MyClass.B", showB: fun cti on()con sole.log("B"););Ext.defi ne("MyClass.C", mixi ns: classA: "MyClass.A", classB: "MyClass.B",showC:

34、 function()con sole.log("C"););var objC = Ext.create("MyClass.C");objC.showA(); /控制臺(tái)結(jié)果：AobjC.showB(); /控制臺(tái)結(jié)果：BobjC.showC(); /控制臺(tái)結(jié)果：C方法同名時(shí)情況1多個(gè)mixins 類擁有同名函數(shù):Ext.defi ne("MyClass.A", show: function() con sole.log("A"););Ext.defi ne("MyClass.B", show:

35、function() con sole.log("B"););Ext.defi ne("MyClass.C", mixi ns: classA: "MyClass.A", classB: "MyClass.B");var objC = Ext.create("MyClass.C"); objC.show(); /控制臺(tái)結(jié)果：A若Ext.defi ne("MyClass.C", mixi ns: classB: "MyClass.B", classA: &q

36、uot;MyClass.A");那么objC.show(); /控制臺(tái)結(jié)果：B情況2mix ins類與當(dāng)前類擁有同名函數(shù)：Ext.defi ne("MyClass.A", show: function()con sole.log("A"););Ext.defi ne("MyClass.C", mixi ns: classA: "MyClass.A",show: fun cti on()con sole.log("C"););var objC = Ext.create("MyClass.C");objC.show(); /控制臺(tái)結(jié)果：C結(jié)論：方法的調(diào)用遵循最近優(yōu)先原則，就是先查詢直接類是否有該方法，有則調(diào)用，無(wú)則查 詢mixins 中包含的類。情況3mixins類與父類擁有同名函數(shù)：Ext.defi ne("MyClass.A", show: function()con sole.log("A"););Ext.defi ne("MyClass.B", show: function