網(wǎng)站建設(shè)內(nèi)部流程圖營(yíng)銷策略有哪些
EXTJS的面向?qū)ο蟪绦蛟O(shè)計(jì)
◆EXTJS在面向?qū)ο笞鞒龅呐?/span>
支持命名空間
支持類實(shí)例屬性
支持類實(shí)例方法
支持類靜態(tài)方法
支持構(gòu)造方法
支持類繼承
支持類實(shí)例方法重寫
支持命名空間別名
支持類別名
支持事件隊(duì)列
命名空間
定義:對(duì)于類的組織定義方式
代碼舉例:
- Ext.namespace("Ext.dojochina");??
Java代碼對(duì)照:
- package?Ext.dojochina;??
完整示例代碼:view
- //?namespace.js ??
- ??
- ????Ext.namespace("Ext.dojochina"); ??
- ??
- ????Ext.dojochina.HelloWorld?=?Ext.emptyFn;??
- <html?xmlns="http://www.w3.org/1999/xhtml"?> ??
- <head> ??
- <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/> ??
- <title>命名空間</title> ??
- <link?rel="stylesheet"?type="text/css"?href="../extjs/resources/css/ext-all.css"?/> ??
- <script?type="text/javascript"?src="../extjs/adapter/ext/ext-base.js"></script> ??
- <script?type="text/javascript"?src="../extjs/ext-all.js"></script> ??
- <script?type="text/javascript"?src="namespace.js"></script> ??
- <script?type="text/javascript"> ??
- ??
- ????new?Ext.dojochina.HelloWorld(); ??
- ??
- </script> ??
- </head> ??
- <body> ??
- </body> ??
- </html>??
類實(shí)例屬性
定義:對(duì)于一個(gè)實(shí)例的特征描述。
代碼舉例:
- ... ??
- Ext.apply(Ext.dojochina.Person.prototype,?{ ??
- ????name:?'陳治文'? ??
- });??
Java代碼對(duì)照:
- ... ??
- private?String?name?=?"陳治文"; ??
- ??
- public?void?setName(String?name){ ??
- ????this.name?=?name; ??
- } ??
- public?String?getName(){ ??
- ????return?this.name ??
- } ??
- ...??
完整示例代碼:view
- //?property.js ??
- ??
- ????Ext.namespace("Ext.dojochina"); ??
- ????Ext.dojochina.Person?=?Ext.emptyFn; ??
- ????Ext.apply(Ext.dojochina.Person.prototype,?{name:?'MacroChin'});??
- <html?xmlns="http://www.w3.org/1999/xhtml"?> ??
- <head> ??
- <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/> ??
- <title>類實(shí)例屬性</title> ??
- <link?rel="stylesheet"?type="text/css"?href="../extjs/resources/css/ext-all.css"?/> ??
- <script?type="text/javascript"?src="../extjs/adapter/ext/ext-base.js"></script> ??
- <script?type="text/javascript"?src="../extjs/ext-all.js"></script> ??
- <script?type="text/javascript"?src="property.js"></script> ??
- <script?type="text/javascript"> ??
- ??
- ????var?person=new?Ext.dojochina.Person(); ??
- ????alert(person.name); ??
- ????person.name='AotherPerson'; ??
- ????alert(person.name); ??
- ??
- </script> ??
- </head> ??
- <body> ??
- </body> ??
- </html>??
類實(shí)例方法
定義:一個(gè)對(duì)象所能具有的功能與動(dòng)作。
代碼舉例:
- ... ??
- print:?function(){ ??
- ????alert(String.format("姓名:{0},性別:{1}",?this.name,?this.sex)); ??
- }??
Java代碼對(duì)照:
- ... ??
- public?void?print(){ ??
- ????System.out.printf("姓名:%s,性別:%s",?this.name,?this.sex); ??
- }??
完整示例代碼:view
- //?dynamicMethod.js ??
- ??
- ????Ext.namespace("Ext.dojochina"); ??
- ????Ext.dojochina.Person?=?Ext.emptyFn; ??
- ????Ext.apply(Ext.dojochina.Person.prototype,?{ ??
- ????????name:?'', ??
- ????????sex:?'', ??
- ????????print:?function(){ ??
- ????????????alert(String.format("姓名:{0},性別:{1}",?this.name,?this.sex)); ??
- ????????} ??
- ????});??
- <html?xmlns="http://www.w3.org/1999/xhtml"?> ??
- <head> ??
- <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/> ??
- <title>類實(shí)例方法</title> ??
- <link?rel="stylesheet"?type="text/css"?href="../extjs/resources/css/ext-all.css"?/> ??
- <script?type="text/javascript"?src="../extjs/adapter/ext/ext-base.js"></script> ??
- <script?type="text/javascript"?src="../extjs/ext-all.js"></script> ??
- <script?type="text/javascript"?src="dynamicMethod.js"></script> ??
- <script?type="text/javascript"> ??
- ??
- ????var?person?=?new?Ext.dojochina.Person(); ??
- ??
- ????person.name?=?'MacroChin'; ??
- ????person.sex?=?'男'; ??
- ????person.print(); ??
- ??
- ????person.name?=?'Ann'; ??
- ????person.sex?=?'女'; ??
- ????person.print(); ??
- ??
- </script> ??
- </head> ??
- <body> ??
- </body> ??
- </html>??
類靜態(tài)方法
定義:在一個(gè)類級(jí)別上共享的方法。
代碼舉例:
- ... ??
- Ext.dojochina.Person.print?=?function(name,?sex){ ??
- ????var?p?=?new?Ext.dojochina.Person(); ??
- ????p.name?=?name; ??
- ????p.sex?=?sex; ??
- ????p.print(); ??
- }??
Java代碼對(duì)照:
- ... ??
- public?static?void?print(String?name,?String?sex){ ??
- ????Person?person?=?new?Person(); ??
- ????person.setName(name); ??
- ????person.setSex(sex); ??
- ????person.print(); ??
- }??
完整示例代碼:view
- //?staticMethod.js ??
- ??
- ????Ext.namespace("Ext.dojochina"); ??
- ????Ext.dojochina.Person?=?Ext.emptyFn; ??
- ??
- ????Ext.dojochina.Person.print?=?function(name,?sex){ ??
- ????????var?p?=?new?Ext.dojochina.Person(); ??
- ????????p.name?=?name; ??
- ????????p.sex?=?sex; ??
- ????????p.print(); ??
- ????} ??
- ??
- ????Ext.apply(Ext.dojochina.Person.prototype,?{ ??
- ????????name:?'', ??
- ????????sex:?'', ??
- ????????print:?function(){ ??
- ????????????alert(String.format("姓名:{0},性別:{1}",?this.name,?this.sex)); ??
- ????????} ??
- ????});??
- <html?xmlns="http://www.w3.org/1999/xhtml"?> ??
- <head> ??
- <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/> ??
- <title>類靜態(tài)方法</title> ??
- <link?rel="stylesheet"?type="text/css"?href="../extjs/resources/css/ext-all.css"?/> ??
- <script?type="text/javascript"?src="../extjs/adapter/ext/ext-base.js"></script> ??
- <script?type="text/javascript"?src="../extjs/ext-all.js"></script> ??
- <script?type="text/javascript"?src="staticMethod.js"></script> ??
- <script?type="text/javascript"> ??
- ??
- ????Ext.dojochina.Person.print('MacroChin',?'男'); ??
- ????Ext.dojochina.Person.print('Ann',?'女'); ??
- ??
- </script> ??
- </head> ??
- <body> ??
- </body> ??
- </html>??
構(gòu)造方法
定義:在初始化一個(gè)對(duì)象的同時(shí)執(zhí)行的方法。
代碼舉例:
- Ext.dojochina.Person?=?function(_cfg){ ??
- ????Ext.apply(this,?_cfg); ??
- }??
Java代碼對(duì)照:
- ... ??
- public?Person(String?name,?String?sex){ ??
- ????this.name?=?name; ??
- ????this.sex?=?sex; ??
- } ??
- ...??
完整示例代碼:view
- //?initialize.js ??
- ??
- ????Ext.namespace("Ext.dojochina"); ??
- ??
- ????Ext.dojochina.Person?=?function(_cfg){ ??
- ????????Ext.apply(this,?_cfg); ??
- ????} ??
- ??
- ????Ext.dojochina.Person.print?=?function(name,?sex){ ??
- ????????var?person?=?new?Ext.dojochina.Person({name:?name,?sex:sex}); ??
- ????????person.print(); ??
- ????} ??
- ??
- ????Ext.apply(Ext.dojochina.Person.prototype,?{ ??
- ????????print:?function(){ ??
- ????????????alert(String.format("Name:{0}?Sex:{1}",?this.name,?this.sex)); ??
- ????????} ??
- ????})??
- <html?xmlns="http://www.w3.org/1999/xhtml"?> ??
- <head> ??
- <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/> ??
- <title>構(gòu)造方法</title> ??
- <link?rel="stylesheet"?type="text/css"?href="../extjs/resources/css/ext-all.css"?/> ??
- <script?type="text/javascript"?src="../extjs/adapter/ext/ext-base.js"></script> ??
- <script?type="text/javascript"?src="../extjs/ext-all.js"></script> ??
- <script?type="text/javascript"?src="initialize.js"></script> ??
- <script?type="text/javascript"> ??
- ??
- ????Ext.dojochina.Person.print('PersonA',?'女'); ??
- ????Ext.dojochina.Person.print('PersonB',?'男'); ??
- ??
- </script> ??
- </head> ??
- <body> ??
- </body> ??
- </html>??
類繼承
定義:對(duì)于類的一種擴(kuò)展形式。
代碼舉例:
- Ext.extend(Ext.dojochina,Strudent, ??
- ????Ext.dojochina.Person,?{ ??
- ????????job:?'學(xué)生'??
- ????} ??
- );??
Java代碼比照:
- class?Student?extend?Person{ ??
- ????public?Student(String?name,?String?sex){ ??
- ????????super(name,?sex); ??
- ????????this.setJob("學(xué)生"); ??
- ????} ??
- }??
完整示例代碼:view
- //?Person.js ??
- ??
- Ext.namespace("Ext.dojochina"); ??
- ??
- Ext.dojochina.Person?=?function(_cfg){Ext.apply(this,?_cfg)}; ??
- ??
- Ext.apply(Ext.dojochina.Person.prototype,?{ ??
- ????job:?'無(wú)', ??
- ????print:?function(){ ??
- ????????alert(String.format('姓名:{0}?性別:{1}?角色:{2}',?this.name,?this.sex,?this.job)); ??
- ????} ??
- });??
- //?Teacher.js ??
- ??
- Ext.namespace("Ext.dojochina"); ??
- ??
- Ext.dojochina.Teacher?=?function(_cfg){Ext.apply(this,?_cfg);}; ??
- ??
- Ext.extend(Ext.dojochina.Teacher,?Ext.dojochina.Person,?{job:?'教師'});??
- //?Student.js ??
- ??
- Ext.namespace("Ext.dojochina"); ??
- ??
- Ext.dojochina.Student?=?function(_cfg){Ext.apply(this,?_cfg);}; ??
- ??
- Ext.extend(Ext.dojochina.Student,?Ext.dojochina.Person,?{job:?'學(xué)生'});??
- <html?xmlns="http://www.w3.org/1999/xhtml"?> ??
- <head> ??
- <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/> ??
- <title>類繼承</title> ??
- <link?rel="stylesheet"?type="text/css"?href="../extjs/resources/css/ext-all.css"?/> ??
- <script?type="text/javascript"?src="../extjs/adapter/ext/ext-base.js"></script> ??
- <script?type="text/javascript"?src="../extjs/ext-all.js"></script> ??
- <script?type="text/javascript"?src="Person.js"></script> ??
- <script?type="text/javascript"?src="Teacher.js"></script> ??
- <script?type="text/javascript"?src="Student.js"></script> ??
- <script?type="text/javascript"> ??
- ??
- ????var?t?=?new?Ext.dojochina.Teacher({name:'老師A',?sex:'女'}); ??
- ????t.print(); ??
- ??
- ????var?s?=?new?Ext.dojochina.Student({name:'學(xué)生B',?sex:'男'}); ??
- ????s.print(); ??
- ??
- </script> ??
- </head> ??
- <body> ??
- </body> ??
- </html>??
類實(shí)例方法重寫
定義:子類在繼承父類時(shí)對(duì)其已經(jīng)存在的方法進(jìn)行重新定義。
代碼舉例:
- Ext.extend(Ext.dojochina.Teacher, ??
- ????Ext.dojochina.Person,?{ ??
- ????????print:?function(){ ??
- ????????????alert(String.format('{0}是一位{1}老師',?this.name,?this.sex)); ??
- ????????} ??
- ????} ??
- );??
完整示例代碼:view
- //?Person.js ??
- ??
- Ext.namespace("Ext.dojochina"); ??
- ??
- Ext.dojochina.Person?=?function(_cfg){Ext.apply(this,?_cfg)}; ??
- ??
- Ext.apply(Ext.dojochina.Person.prototype,?{ ??
- ????job:?'無(wú)', ??
- ????print:?function(){ ??
- ????????alert(String.format('姓名:{0}?性別:{1}?角色:{2}',?this.name,?this.sex,?this.job)); ??
- ????} ??
- });??
- //?teacher_.js ??
- ??
- Ext.namespace("Ext.dojochina"); ??
- ??
- Ext.dojochina.Teacher?=?function(_cfg){Ext.apply(this,?_cfg);}; ??
- ??
- Ext.extend(Ext.dojochina.Teacher,?Ext.dojochina.Person,?{ ??
- ????print:?function(){ ??
- ????????alert(String.format('{0}是一位{1}老師',?this.name,?this.sex)); ??
- ????} ??
- });??
- //?student_.js ??
- ??
- Ext.namespace("Ext.dojochina"); ??
- ??
- Ext.dojochina.Student?=?function(_cfg){Ext.apply(this,?_cfg);}; ??
- ??
- Ext.extend(Ext.dojochina.Student,?Ext.dojochina.Person,?{ ??
- ????print:?function(){ ??
- ????????alert(String.format('{0}是一位{1}學(xué)生',?this.name,?this.sex)); ??
- ????} ??
- });??
- <html?xmlns="http://www.w3.org/1999/xhtml"?> ??
- <head> ??
- <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/> ??
- <title>類方法重寫</title> ??
- <link?rel="stylesheet"?type="text/css"?href="../extjs/resources/css/ext-all.css"?/> ??
- <script?type="text/javascript"?src="../extjs/adapter/ext/ext-base.js"></script> ??
- <script?type="text/javascript"?src="../extjs/ext-all.js"></script> ??
- <script?type="text/javascript"?src="Person.js"></script> ??
- <script?type="text/javascript"?src="teacher_.js"></script> ??
- <script?type="text/javascript"?src="student_.js"></script> ??
- <script?type="text/javascript"> ??
- ??
- ????var?p?=?new?Ext.dojochina.Person({name:'PersonX',?sex:?'男'}); ??
- ????p.print(); ??
- ??
- ????var?t?=?new?Ext.dojochina.Teacher({name:'老師A',?sex:'女'}); ??
- ????t.print(); ??
- ??
- ????var?s?=?new?Ext.dojochina.Student({name:'學(xué)生B',?sex:'男'}); ??
- ????s.print(); ??
- ??
- </script> ??
- </head> ??
- <body> ??
- </body> ??
- </html>??
命名空間別名
定義:對(duì)于命名空間的別稱。(別名首字母要大寫)
代碼舉例:
- Dc?=?Ext.dojochina;??
完整示例代碼:view
- //?namespaceShort.js ??
- ??
- Ext.namespace('Ext.dojochina'); ??
- ??
- Dc?=?Ext.dojochina; ??
- ??
- Dc.Person?=?function(_cfg){Ext.apply(this,?_cfg);}; ??
- ??
- Dc.Person.print?=?function(name,?sex){ ??
- ????var?p?=?new?Dc.Person({name:?name?,?sex:?sex}); ??
- ????p.print(); ??
- } ??
- ??
- Ext.apply(Dc.Person.prototype,{ ??
- ????print:?function(){ ??
- ????????alert(String.format('姓名:{0},?性別:{1}',?this.name,?this.sex)); ??
- ????} ??
- });??
- <html?xmlns="http://www.w3.org/1999/xhtml"?> ??
- <head> ??
- <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/> ??
- <title>命名空間別名</title> ??
- <link?rel="stylesheet"?type="text/css"?href="../extjs/resources/css/ext-all.css"?/> ??
- <script?type="text/javascript"?src="../extjs/adapter/ext/ext-base.js"></script> ??
- <script?type="text/javascript"?src="../extjs/ext-all.js"></script> ??
- <script?type="text/javascript"?src="namespaceShort.js"></script> ??
- <script?type="text/javascript"> ??
- ??
- ????var?p?=?new?Dc.Person({name:'MC',?sex:'M'}); ??
- ????p.print(); ??
- ??
- ????var?t?=?new?Ext.dojochina.Person({name:'MacroChin',?sex:'男'}); ??
- ????t.print(); ??
- ??
- </script> ??
- </head> ??
- <body> ??
- </body> ??
- </html>??
類別名
定義:對(duì)于類的別稱。(別名全部字母都要大寫)
代碼舉例:
- PN=Ext.dojochina.Person;??
完整示例代碼:view
- //?classShort.js ??
- ??
- Ext.namespace('Ext.dojochina'); ??
- ??
- Ext.dojochina.Person?=?function(_cfg){Ext.apply(this,?_cfg);}; ??
- ??
- PN?=?Ext.dojochina.Person; ??
- ??
- PN.print?=?function(name,?sex){ ??
- ????var?p?=?new?PN({name:?name,?sex:?sex}); ??
- ????p.print(); ??
- }; ??
- ??
- Ext.apply(PN.prototype,?{ ??
- ????print:?function(){ ??
- ????????alert(String.format('姓名:?{0}?,?性別:?{1}',?this.name,?this.sex)); ??
- ????} ??
- });??
- <html?xmlns="http://www.w3.org/1999/xhtml"?>??
- <head>??
- <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>??
- <title>類別名</title>??
- <link?rel="stylesheet"?type="text/css"?href="../extjs/resources/css/ext-all.css"?/>??
- <script?type="text/javascript"?src="../extjs/adapter/ext/ext-base.js"></script>??
- <script?type="text/javascript"?src="../extjs/ext-all.js"></script>??
- <script?type="text/javascript"?src="classShort.js"></script>??
- <script?type="text/javascript">??
- ??
- ????var?p?=?new?PN({name:'MC',?sex:'M'}); ??
- ????p.print(); ??
- ??
- ????var?t?=?new?Ext.dojochina.Person({name:'MacroChin',?sex:'Male'}); ??
- ????t.print(); ??
- ??
- </script>??
- </head>??
- <body>??
- </body>??
- </html>??
事件
定義:對(duì)于外界影響的反應(yīng),在ExtJS還支持事件隊(duì)列模式,由 Ext.util.Observable類支持。
完整示例代碼:view
- //?event.js ??
- ??
- Ext.namespace('Ext.dojochina'); ??
- ??
- Ext.dojochina.Person?=?function(){ ??
- ????this.addEvents( ??
- ????????'namechange', ??
- ????????'sexchange'??
- ????); ??
- }; ??
- ??
- Ext.extend(Ext.dojochina.Person,?Ext.util.Observable,?{ ??
- ????name:?''?, ??
- ????sex:?''?, ??
- ????setName:?function(_name){ ??
- ????????if(this.name?!=?_name){ ??
- ????????????this.fireEvent('namechange',?this,?this.name,?_name); ??
- ????????????this.name?=?_name; ??
- ????????} ??
- ????}, ??
- ????setSex:?function(_sex){ ??
- ????????if(this.sex?!=?_sex){ ??
- ????????????this.fireEvent('sexchange',?this,?this.sex,?_sex); ??
- ????????????this.sex?=?_sex; ??
- ????????} ??
- ????} ??
- });??
- <html?xmlns="http://www.w3.org/1999/xhtml"?> ??
- <head> ??
- <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/> ??
- <title>事件</title> ??
- <link?rel="stylesheet"?type="text/css"?href="../extjs/resources/css/ext-all.css"?/> ??
- <script?type="text/javascript"?src="../extjs/adapter/ext/ext-base.js"></script> ??
- <script?type="text/javascript"?src="../extjs/ext-all.js"></script> ??
- <script?type="text/javascript"?src="event.js"></script> ??
- <script?type="text/javascript"> ??
- ??
- ????var?person?=?null; ??
- ??
- ????button_click?=?function(){ ??
- ????????person.setName(prompt('請(qǐng)輸入姓名',?'')); ??
- ????????person.setSex(prompt('請(qǐng)輸入性別',?'')); ??
- ????} ??
- ??
- ????Ext.onReady(function(){ ??
- ??
- ????????var?txt_name?=?Ext.get('txt_name'); ??
- ????????var?txt_sex?=?Ext.get('txt_sex'); ??
- ??
- ????????person?=?new?Ext.dojochina.Person(); ??
- ??
- ????????person.on('namechange',?function(person,?oldVal,?newVal){ ??
- ????????????txt_name.dom.value?=?newVal; ??
- ????????}); ??
- ??
- ????????person.on('sexchange',?function(person,?oldVal,?newVal){ ??
- ????????????txt_sex.dom.value?=?newVal; ??
- ????????}); ??
- ??
- ????????person.on('namechange',?function(person,?oldVal,?newVal){ ??
- ????????????document.title?=?newVal; ??
- ????????}); ??
- ??
- ????}); ??
- ??
- </script> ??
- </head> ??
- <body> ??
- ??
- 姓名:<input?type="text"?id="txt_name"?/>?<BR/> ??
- 性別:<input?type="text"?id="txt_sex"?/>?<BR/> ??
- <button?οnclick="button_click()">輸入</button> ??
- ??
- </body> ??
- </html>??
◆EXTJS的另幾種面向?qū)ο笤O(shè)計(jì)體現(xiàn)
GWT-EXT為JAVA程序員編寫EXTJS應(yīng)用提供了可能
EXTTLD為JSP程序員的標(biāo)簽化部署EXTJS提供了可能
EXTSharp為C#程序員編寫EXTJS的應(yīng)用提供了可能