EXTJS组件化(二)----简易的私有和公有


    我一直认为,凡是我已经了解的东西,国内必定已经有了一大票人已经熟知.但是我想我还是要继续写下去.

    上一篇文章简单介绍了一下组件化的思想,下面我想写一下EXTJS组件化的共有和私有,上一篇文章中的组件如下:
Js代码  收藏代码
  1. Ext.namespace("Lesson1.FirstPanel");  
  2. /** 
  3.  * @author andy_ghg 
  4.  * @version 2009年9月24日23:22:09 
  5.  * @description 第一个派生类 
  6.  * @class Lesson1.FirstPanel 
  7.  * @extends Ext.Panel 
  8.  */  
  9. Lesson1.FirstPanel=Ext.extend(Ext.Panel,{  
  10.     frame:true,  
  11.     //初始化函数  
  12.     initComponent:function(){  
  13.         //继承父类的initComponent函数  
  14.         Lesson1.FirstPanel.superclass.initComponent.call(this,arguments);  
  15.         //为该组件添加了一个FormPanel  
  16.         this.formPanel=new Ext.FormPanel({  
  17.             defaults:{anchor:"95%",allowBlank:false},  
  18.             labelWidth:55,  
  19.             defaultType:"textfield",  
  20.             items:[{  
  21.                 fieldLabel:"用户名",  
  22.                 name:"username"  
  23.             },{  
  24.                 fieldLabel:"密码",  
  25.                 inputType:"password",  
  26.                 name:"password"  
  27.             }]  
  28.         });  
  29.         this.add(this.formPanel);  
  30.     },  
  31.     submitForm:function(){  
  32.         alert(this.formPanel);  
  33. //      this.formPanel.getForm().submit({  
  34. //          url:"",  
  35. //          success:function(){},  
  36. //          failure:function(){}  
  37. //      })  
  38.     }  
  39. });  

    我们可以看到,组件中所有的部件都是通过this.的方式来声明的,这样做有一个好处,我们可以直接通过组件的实例化对象去访问这些组成部分,例如:
Js代码  收藏代码
  1. //*测试  
  2. Ext.onReady(function(){  
  3.     var panel=new Lesson1.FirstPanel({  
  4.         height:100,  
  5.         300,  
  6.         renderTo:Ext.getBody(),  
  7.         title:"组件",  
  8.         layout:"fit"  
  9.     });  
  10.     alert(panel.formPanel);  
  11. });  
  12. //*/  

    这里弹出的是一个Object,说明我们成功访问了组件内部的成员,这样做的好处很多,我们可以通过实例化对象来获取它内部的成员,从而操作它内部的成员.
    但是,我们在很多情况下是不愿意让别人去调用里面的东西的,怎么办?可以使用var关键字来创建组件内部私有的成员,这样,外部就不可以通过实例化对象去访问它们了:
Js代码  收藏代码
  1. Ext.namespace("Lesson2.FirstPanel");  
  2. /** 
  3.  * @author andy_ghg 
  4.  * @version 2009年9月25日20:30:15 
  5.  * @description 私有与公有 
  6.  * @class Lesson2.FirstPanel 
  7.  * @extends Ext.Panel 
  8.  */  
  9. Lesson2.FirstPanel = Ext.extend(Ext.Panel,{  
  10.     frame : true,  
  11.     //初始化函数  
  12.     initComponent : function(){  
  13.         var privateObj = new Ext.Panel();  
  14.         this.publicObj = new Ext.Panel();  
  15.     }  
  16. });  
  17.   
  18. //*测试  
  19. Ext.onReady(function(){  
  20.     var panel = new Lesson2.FirstPanel({  
  21.         height:100,  
  22.         300,  
  23.         renderTo:Ext.getBody(),  
  24.         title:"组件",  
  25.         layout:"fit"  
  26.     });  
  27.       
  28.     alert(panel.privateObj);  
  29.     alert(panel.publicObj);  
  30. });  
  31. //*/  

    第一次弹出的是undifined第二次弹出的是Object,其实这个非常容易理解,上面的代码privateObj是作为一个对象存在的,而publicObj则是作为一个Lesson2.FirstPane的成员存在的,自然,publicObj就可以通过实例化对象被访问到,而privateObj由于作用域的不同,自然就无法被外部函数访问到.
    其实这种私有对象的写法没有太大用处,我一般是将函数作为私有来用的,而对象则没有必要私有化:
Js代码  收藏代码
  1. Ext.namespace("Lesson2.FirstPanel");  
  2. /** 
  3.  * @author andy_ghg 
  4.  * @version 2009年9月24日23:22:09 
  5.  * @description 私有与公有 
  6.  * @class Lesson2.FirstPanel 
  7.  * @extends Ext.Panel 
  8.  */  
  9. Lesson2.FirstPanel = Ext.extend(Ext.Panel,{  
  10.     frame : true,  
  11.     //初始化函数  
  12.     initComponent : function(){  
  13.         Lesson2.FirstPanel.superclass.initComponent.call(this,arguments);  
  14.         var hello=function(){  
  15.             //我是私有函数,只有内部成员才能访问到  
  16.             alert("private");  
  17.         }  
  18.         this.publicFn=function(){  
  19.             //我是共有函数,外部可以通过对象名来调用  
  20.             alert("public");  
  21.         }  
  22.         this.buttons=[{  
  23.             text:"调用私有",  
  24.             handler:hello  
  25.         },{  
  26.             text:"调用公有",  
  27.             handler:this.publicFn,  
  28.             scope:this  
  29.         }]  
  30.     }  
  31. });  

    公开的函数可以不必定义在初始化方法里,一般都是定义在初始化方法外面的,就例如上面第一段代码中的submitForm函数一样.

    在使用这种写法的时候要注意一个问题,就是,定义组件内部的成员的时候,是通过this.的方式去定义的,但是如果组件自身就有这个属性就会造成重写,比如下面的代码将不会显示title里的文字:
Js代码  收藏代码
  1. Ext.namespace("Lesson2.FirstPanel");  
  2. /** 
  3.  * @author andy_ghg 
  4.  * @version 2009年9月24日23:22:09 
  5.  * @description 私有与公有 
  6.  * @class Lesson2.FirstPanel 
  7.  * @extends Ext.Panel 
  8.  */  
  9. Lesson2.FirstPanel = Ext.extend(Ext.Panel,{  
  10.     frame : true,  
  11.     //初始化函数  
  12.     initComponent : function(){  
  13.         Lesson2.FirstPanel.superclass.initComponent.call(this,arguments);  
  14.         this.title=null;  
  15.     }  
  16. });  
  17.   
  18. //*测试  
  19. Ext.onReady(function(){  
  20.     var panel = new Lesson2.FirstPanel({  
  21.         height:100,  
  22.         300,  
  23.         renderTo:Ext.getBody(),  
  24.         title:"组件",  
  25.         layout:"fit"  
  26.     });  
  27.     panel.publicFn();  
  28. });  
  29. //*/  

    我们可以看到设置的title没有被展现出来,所以,当我们在新定义一个组件内部成员的时候一定要避免与组件父类里的成员冲突(除非你是刻意要重写),以免造成不必要的麻烦.这里就要考验你对你所继承的父类的认知程度了.
    (未完待续)
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/sunscheung/p/4839408.html