关键点:
1、支持命名空间
2、支持类实例属性
3、支持类实例方法
4、支持类静态方法
5、支持构造方法
6、支持类继承
7、支持类实例方法重写
8、支持类命名空间别名
9、支持类别名
10、支持事件队列
1.支持命名空间
js:
Ext.namespace("Ext.com.wwl");
Ext.com.wwl.Helloword=function(){}
//Ext.com.wwl.helloword=Ext.emptyFn
jsp:
<script type="text/javascript">
new Ext.com.wwl.Helloword();
</script>
2.支持类实例属性
js: Ext.namespace("Ext.com.wwl"); Ext.com.wwl.Person=function(){}; Ext.apply(Ext.com.wwl.Person.prototype,{name:"王万里"}); jsp: <script type="text/javascript"> var person=new Ext.com.wwl.Person(); alert(person.name); person.name="哈哈"; alert(person.name); </script>
3.支持类实例方法
js: Ext.namespace("Ext.com.wwl"); Ext.com.wwl.Person = function() { }; Ext.apply(Ext.com.wwl.Person.prototype, { name : "", sex : "", print : function() { alert(String.format("姓名:{0},性别:{1}", this.name, this.sex)); } }); jsp: <script type="text/javascript"> var person=new Ext.com.wwl.Person(); person.name="哈哈"; person.sex="你猜"; person.print(); person.name="哼哼"; person.sex="哈哈"; person.print(); </script>
4.支持静态方法
js: Ext.namespace("Ext.com.wwl"); Ext.com.wwl.Person = function() { }; Ext.apply(Ext.com.wwl.Person.prototype, { name : "", sex : "", print : function() { alert(String.format("姓名:{0},性别:{1}", this.name, this.sex)); } }); Ext.com.wwl.Person.print1=function(_name,_sex){ var person=new Ext.com.wwl.Person(); person.name=_name; person.sex=_sex; person.print(); } jsp: <script type="text/javascript"> Ext.com.wwl.Person.print1("ss","n"); </script>
5.支持构造方法
js: Ext.namespace("Ext.com.wwl"); Ext.com.wwl.Person = function(_cfg) { Ext.apply(this, _cfg); }; Ext.apply(Ext.com.wwl.Person.prototype, { name : "", sex : "", print : function() { alert(String.format("姓名:{0},性别:{1}", this.name, this.sex)); } }); Ext.com.wwl.Person.print1=function(_name,_sex){ var person=new Ext.com.wwl.Person({name:_name,sex:_sex}); person.print(); } jsp: <script type="text/javascript"> Ext.com.wwl.Person.print1("ss","n"); </script>
6.支持类继承
Person.js: Ext.namespace("Ext.com.wwl"); Ext.com.wwl.Person = function(_cfg) { Ext.apply(this, _cfg); }; Ext.apply(Ext.com.wwl.Person.prototype, { job:"无", print : function() { alert(String.format("姓名:{0},性别:{1},工作{2}", this.name, this.sex,this.job)); } }); Student.js Ext.namespace("Ext.com.wwl"); Ext.com.wwl.Student=function(_cfg){ Ext.apply(this,_cfg); } Ext.extend(Ext.com.wwl.Student,Ext.com.wwl.Person,{job:"学生"}) Teacher.js Ext.namespace("Ext.com.wwl"); Ext.com.wwl.Teacher=function(_cfg){ Ext.apply(this,_cfg); }; Ext.extend(Ext.com.wwl.Teacher,Ext.com.wwl.Person,{job:"老师"}); jsp: <script type="text/javascript"> var person=new Ext.com.wwl.Person({name:"王万里0",sex:"男"}); person.print(); var student=new Ext.com.wwl.Student({name:"王万里1",sex:"男"}); student.print(); var teacher=new Ext.com.wwl.Teacher({name:"王万里2",sex:"男"}); teacher.print(); </script>
7.支持类实例方法重写
Personjs Ext.namespace("Ext.com.wwl"); Ext.com.wwl.Person=function(_cfg){ Ext.apply(this,_cfg); }; Ext.apply(Ext.com.wwl.Person.prototype,{ print:function(){ alert(String.format("姓名:{0},性别:{1},工作:{2}",this.name,this.sex,this.job)); } }); Student.js Ext.namespace("Ext.com.wwl"); Ext.com.wwl.Student=function(_cfg){ Ext.apply(this,_cfg); }; Ext.extend(Ext.com.wwl.Student,Ext.com.wwl.Person,{ print:function(){ alert(String.format("{0}是一名{1}{2}",this.name,this.sex,this.job)); } }); jsp: <script type="text/javascript"> var person=new Ext.com.wwl.Person({name:"王万里",sex:"男",job:"无工作"}); person.print(); var student=new Ext.com.wwl.Student({name:"王万里",sex:"男",job:"学生"}); student.print(); </script>
8.支持命名空间别名
Person.js Ext.namespace("Ext.com.wwl"); Do=Ext.com.wwl;//命名空间别名(别名大写) Ext.com.wwl.Person=function(_cfg){ Ext.apply(this,_cfg); }; Ext.apply(Ext.com.wwl.Person.prototype,{ print:function(){ alert(String.format("姓名:{0},性别:{1},工作:{2}",this.name,this.sex,this.job)); } }); Ext.com.wwl.Person.print=function(_name,_sex,_job){ // var _person=new Ext.com.wwl.Person({name:_name , sex:_sex ,job:_job}); var _person=new Do.Person({name:_name , sex:_sex ,job:_job}); _person.print(); }; jsp: <script type="text/javascript"> Ext.com.wwl.Person.print("王万里","男","无工作");</script>
9.类别名
Student.js
Ext.namespace("Ext.com.wwl"); Ext.com.wwl.Student=function(_cfg){ Ext.apply(this,_cfg); }; PN=Ext.com.wwl.Student;//类别名(别名大写)注意必须在构造方法之后 Ext.apply(Ext.com.wwl.Student.prototype,{ print:function(){ alert(String.format("姓名:{0},性别:{1},工作:{2}",this.name,this.sex,this.job)); } }); Ext.com.wwl.Student.print=function(_name,_sex,_job){ //var _person=new Ext.com.wwl.Student({name:_name , sex:_sex ,job:_job}); var _person=new PN({name:_name , sex:_sex ,job:_job}); _person.print(); }; jsp: <script type="text/javascript"> Ext.com.wwl.Student.print("王万里","男","学生"); </script>
10.事件队列
Event.js Ext.namespace("Ext.com.wwl"); Ext.com.wwl.Person=function(){ this.addEvents( "namechange", "sexchange" ); }; Ext.extend(Ext.com.wwl.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; } } }); jsp: <script type="text/javascript"> var _person=null; Ext.onReady(function(){ var txt_name=Ext.get("txt_name"); var txt_sex=Ext.get("txt_sex"); _person=new Ext.com.wwl.Person(); _person.on("namechange",function(_person,_old,_new){ txt_name.dom.value=_new; }); _person.on("sexchange",function(_person,_old,_new){ txt_sex.dom.value=_new; }); _person.on("namechange",function(_person,_old,_new){ document.title=_new; }); }); button_click=function(){ _person.setName(prompt("请输入姓名:" , "")) ; _person.setSex(prompt("请输入性别:" , "")) ; }; </script> <body> 姓名:<input type="text" id="txt_name" maxlength="10"/><br/> 性别:<input type="text" id="txt_sex" maxlength="10"/><br/> <input type="button" value="输入" onclick="button_click()"/> </body> </html>