[dW] Dojo concepts for Java developers

자바 개발자를 위한 Dojo 컨셉 - Declaring classes and setting context

자바에 익숙한 개발자가 Dojo를 이용한 자바스크립트를 사용할 때 차이점과 혼돈을 해결해주기 위해~ Dojo 컨셉을 설명해 주는 영문 article이 있길래~ 간추려 남겨봅니다.

1. The JavaScript hash
Hash는 curly brace ({})사이에 attribute의 set으로 표현된다. hash는 6개의 attribute로 이뤄져 있다.
string, integer, boolean, undefined attribute, 다른 hash, function

Listing 1. Example JavaScript hash

var myHash = {

    str_attr : "foo",

    int_attr : 7,

    bool_attr : true,

    undefined_attr : null,

    hash_attr : {},

    func_attr : function() {}

};			       

JavaScript는 weakly type이라는게 중요한데, 각 attribute는 value가 이름에 linked될 때 초기화된다. 



2. Functions are objects


JavaScript function은 다른 function에 argument를 set, referenced, passed 할 수 있다는게 
object와 같다.
Java method와 JavaScript function사이의 중요한 차이점은 
JavaScript function은 다른 context에서 실행될 수 있다.
Java programming은 keyword인 this로 쓰여진 class의 현재 instance를 참조하지만, 
JavaScript function이 사용될 때 this는 function이 실행되고 있는 context를 참조한다.

3. Declaring classes

class를 정의하는데는 세개의 object가 필요하다.

1. class의 unique한 이름

2. extend 할 function

3. attribute와 function을 정의하는 hash

Listing 4. Basic class declaration

dojo.declare( "myClass", null, {} );

Listing 5. Basic class instantiation

var myClassInstance = new myClass();

class를 정의하는데 관한 tips

1. "myClass" 라는 이름을 더욱 정확하게 valid한 이름으로 정의하려면 fully quailified class name의 스타일로 정의하는 것이 좋다. 예를 들면~ "com.ibm.dojo.myClass"로~~

2. 마지막 attribute후에 오는 ,(콤마)는 firefox와 같은 브라우저는 무시할 수 있지만 다른 브라우저(ie) 같은 것은 안그럴수도 있으니 주의~~

자바 코드에서는 다중으로 오버로드한 constructor(생성자)를 정의하여 class의 instantiation에 접근할 수 있는 많은 방법이 있는데 dojo Class에서는 preamble, constructor, postscript에서 할 수 있다. 하지만 constructor를 정의할때 필요한 중요한 경우가 있다.

- 다중 상속과 비슷하게 다른 클래스를 mixing-in 하지 않은 한 preamble이 필요할 일이 없다.

extended와 mixed-in class를 실제 passed하기 전에 constructor argument를 조작하는 것을 허용할 수 있다.

4. Complex attribute rules

Class attribute는 정의될때 초기화가 된다. 하지만 만약 attribute가 복잡한 object type(hash나 array같은)로 초기화가 되어야한다면 자바에서 public static 변수같은 attribute가 되어야 한다.

이것은 어떤 instance가 변경될때 reflect되어 있는 다른 instance도 변경되어야 함을 의미한다.

이 문제를 피하기 위해 복잡한 attribute는 constructor에서 초기화 되어야 한다. 하지만 string, boolean, 기타 등등과 같은 간단한 attribute는 필요하지 않다.

Listing 7. Global class attributes

dojo.declare( "myClass", null, { globalComplexArg : { val : "foo" }, localComplexArg : null, constructor : function() { this.localComplexArg = { val:"bar" }; } } ); // Create instances of myClass A and B... var A = new myClass(); var B = new myClass(); // Output A's attributes... console.log("A's global val: " + A.globalComplexArg.val); console.log("A's local val: " + A.localComplexArg.val); // Update both of A's attributes... A.globalComplexArg.val = "updatedFoo"; A.localComplexArg.val = "updatedBar"; // Update B's attributes... console.log("A's global val: " + B.globalComplexArg.val); console.log("A's local val: " + B.localComplexArg.val);

Figure 3. Class attributes

5. Overriding methods

자바코드에서는 오버라이드된 메소드를 호출하게 위해 super에 있는 메소드를 호출한다.

예를 들면 super().methodName(arg1, arg1); 

이렇게, 하지만 Dojo 에서는 inherited 메소드를 이용한다. (this.inherited(arguments);)

Listing 8. Invoking superclass method in Dojo

dojo.declare( "parent", null, { helloWorld : function() { console.log("parent says 'hello world'"); } } ); dojo.declare( "child", parent, { helloWorld : function() { this.inherited(arguments); // Call superclass method... console.log("child says 'hello world'"); } } ); var child = new child(); child.helloWorld();

Figure 4. Output from invoking superclass method in Dojo
 

6. Setting method context

자바코드에서 class scoped 변수에 접근할 때 this 키워드를 사용해서 접근할 수 있지만 Dojo에서는 context가를 잃어버린다(자바스크립트의 this는 실행할때의 context를 가르키므로~)

Dojo에서 확실하게 context를 세팅하는 법은~

Listing 11. Setting correct context in Dojo

dojo.declare( "myClass", null, { targetArray: null, constructor: function(source) { // Initialise in constructor to avoid making global this.targetArray = []; // Copy each element from source into target... dojo.forEach(source, function(item) { this.targetArray[this.targetArray.length] = item; }, this); }, } );

  

Listing 12. Setting context in dojo.subscribe

dojo.declare( "myClass", null, { subscribe : function() { dojo.subscribe("publication", this, function(pub) { this.handlePublication(pub); }); }, handlePublication : function(pub) { console.log("Received: " + pub); } } );

Listing 13. Setting context in dojo.connect

dojo.connect(obj1, "methodA", obj2, "methodB");

 

원문 : Dojo concepts for Java developers

custom dojo widget을 만들때 참고할만한 문서~(Writing a custom Dojo application)