EXTJS 어셈블리화(二)- 간단한 개인 및 공유

나는 줄곧 내가 이미 알고 있는 것이라면 국내에는 틀림없이 이미 많은 사람들이 이미 잘 알고 있을 것이라고 생각했다.하지만 나는 그래도 계속 써야 한다고 생각한다.
이전 글은 구성 요소화의 사상을 간단하게 소개했습니다. 다음은 EXTJS의 구성 요소화된 공유와 사유를 쓰고 싶습니다. 이전 글의 구성 요소는 다음과 같습니다.

Ext.namespace("Lesson1.FirstPanel");
/**
 * @author andy_ghg
 * @version 2009 9 24 23:22:09
 * @description  
 * @class Lesson1.FirstPanel
 * @extends Ext.Panel
 */
Lesson1.FirstPanel=Ext.extend(Ext.Panel,{
	frame:true,
	// 
	initComponent:function(){
		// initComponent 
		Lesson1.FirstPanel.superclass.initComponent.call(this,arguments);
		// FormPanel
		this.formPanel=new Ext.FormPanel({
			defaults:{anchor:"95%",allowBlank:false},
			labelWidth:55,
			defaultType:"textfield",
			items:[{
				fieldLabel:" ",
				name:"username"
			},{
				fieldLabel:" ",
				inputType:"password",
				name:"password"
			}]
		});
		this.add(this.formPanel);
	},
	submitForm:function(){
		alert(this.formPanel);
//		this.formPanel.getForm().submit({
//			url:"",
//			success:function(){},
//			failure:function(){}
//		})
	}
});

어셈블리의 모든 부품이
this.이렇게 하면 다음과 같은 구성 요소의 실례화된 객체를 통해 직접 액세스할 수 있는 이점이 있습니다.

//* 
Ext.onReady(function(){
	var panel=new Lesson1.FirstPanel({
		height:100,
		width:300,
		renderTo:Ext.getBody(),
		title:" ",
		layout:"fit"
	});
	alert(panel.formPanel);
});
//*/

여기서 튀어나온 것은 Object입니다. 이것은 우리가 구성 요소 내부의 구성원을 성공적으로 접근했다는 것을 설명합니다. 이렇게 하면 좋은 점이 많습니다. 우리는 실례화된 대상을 통해 그 내부의 구성원을 얻고 그 내부의 구성원을 조작할 수 있습니다.
그러나 우리는 많은 상황에서 다른 사람이 안에 있는 물건을 호출하게 하고 싶지 않다. 어떡하지?var 키워드를 사용하여 구성 요소 내부의 개인 구성원을 만들 수 있습니다. 그러면 외부에서 실례화된 대상을 통해 접근할 수 없습니다.

Ext.namespace("Lesson2.FirstPanel");
/**
 * @author andy_ghg
 * @version 2009 9 25 20:30:15
 * @description  
 * @class Lesson2.FirstPanel
 * @extends Ext.Panel
 */
Lesson2.FirstPanel = Ext.extend(Ext.Panel,{
	frame : true,
	// 
	initComponent : function(){
		var privateObj = new Ext.Panel();
		this.publicObj = new Ext.Panel();
	}
});

//* 
Ext.onReady(function(){
	var panel = new Lesson2.FirstPanel({
		height:100,
		width:300,
		renderTo:Ext.getBody(),
		title:" ",
		layout:"fit"
	});
	
	alert(panel.privateObj);
	alert(panel.publicObj);
});
//*/

첫 번째 팝업은 undifined이고 두 번째 팝업은 Object입니다. 사실 이것은 매우 이해하기 쉽습니다. 위의 코드privateObj는 하나의 대상으로 존재하고publicObj는 하나의 Lesson2입니다.FirstPane의 구성원이 존재하는 것은 자연스럽고publicObj는 실례화된 대상을 통해 접근할 수 있으며,privateObj는 작용역에 따라 외부 함수에 접근할 수 없다.
사실 이런 사유 대상의 작법은 큰 쓸모가 없다. 나는 일반적으로 함수를 사유로 사용하고 대상은 사유화할 필요가 없다.

Ext.namespace("Lesson2.FirstPanel");
/**
 * @author andy_ghg
 * @version 2009 9 24 23:22:09
 * @description  
 * @class Lesson2.FirstPanel
 * @extends Ext.Panel
 */
Lesson2.FirstPanel = Ext.extend(Ext.Panel,{
	frame : true,
	// 
	initComponent : function(){
        Lesson2.FirstPanel.superclass.initComponent.call(this,arguments);
		var hello=function(){
			// , 
			alert("private");
		}
		this.publicFn=function(){
			// , 
			alert("public");
		}
		this.buttons=[{
			text:" ",
			handler:hello
		},{
			text:" ",
			handler:this.publicFn,
			scope:this
		}]
	}
});

공개된 함수는 초기화 방법에 정의할 필요가 없다. 일반적으로 초기화 방법 밖에 정의된다. 예를 들어 위의 첫 번째 코드의submitForm 함수와 같다.
이런 표현을 사용할 때 주의해야 할 문제는 구성 요소 내부의 구성원을 정의할 때
this.정의하는 방식입니다. 그러나 구성 요소 자체에 이 속성이 있으면 다시 쓸 수 있습니다. 예를 들어 다음 코드는 title의 문자를 표시하지 않습니다.

Ext.namespace("Lesson2.FirstPanel");
/**
 * @author andy_ghg
 * @version 2009 9 24 23:22:09
 * @description  
 * @class Lesson2.FirstPanel
 * @extends Ext.Panel
 */
Lesson2.FirstPanel = Ext.extend(Ext.Panel,{
	frame : true,
	// 
	initComponent : function(){
		Lesson2.FirstPanel.superclass.initComponent.call(this,arguments);
		this.title=null;
	}
});

//* 
Ext.onReady(function(){
	var panel = new Lesson2.FirstPanel({
		height:100,
		width:300,
		renderTo:Ext.getBody(),
		title:" ",
		layout:"fit"
	});
	panel.publicFn();
});
//*/

우리는 설정된 제목이 드러나지 않은 것을 볼 수 있습니다. 따라서 구성 요소 내부 구성원을 새로 정의할 때 구성 요소 부류의 구성원과 충돌하는 것을 피해야 합니다. (당신이 일부러 다시 쓰지 않으면) 불필요한 번거로움을 초래하지 않도록 해야 합니다.여기서 네가 물려받은 부류에 대한 인식 정도를 시험할 것이다.
(미완성 미계속)