Dojo 의 두 가지 코딩 방법
Dojo는 위젯을 불러올 때 두 가지 스타일인 declarative와 programmatic이 존재한다. programmatic의 경우 javascript를 사용하여 object를 생성하고 해당 object에 대한 function이나 attribute를 설정한다. declarative의 경우 html 처럼 프로그램을 작성하고 뒤에 특정 attribute를 더해서 Dojo위젯을 불러온다. 자세히 말하자면 dojo/parser를 이용하여 해당 페이지의 DOM을 parsing 한 뒤 special attribute와 script의 tag를 해석하여 평범한 html code를 dojo의 widget으로 확장시킨다. declarative가 쓰기 쉽고 page를 작성하는데 있어서 더 빠르며 javascript에 대한 깊은 이해를 필요로 하지 않는다. 하지만 declarative의 경우 widget의 몇몇 기능밖에 쓰질 못하는 한계가 있다. 그리고 programmactic보다 속도면에서 약간 느린데 이유는 해당 page를 dojo/parser가 DOM node들을 먼저 분석해야하기 때문이다.
button을 이용한 code 비교
programmatic
|
<html> <head> <link rel="stylesheet" href="dojo-release-1.9.1/dijit/themes/claro/claro.css"> <script src='dojo-release-1.9.1/dojo/dojo.js'></script> <script> require(["dijit/form/Button", "dojo/domReady!"], function(Button){ // Create a button programmatically: var myButton = new Button({ label: "Click me!", onClick: function(){ // Do something: } }, "progButtonNode"); }); </script> </head> <body class="claro"> <button id="progButtonNode" type="button"></button> </body> </html> |
Table 1 programmtic button code
declarative
|
<html> <head> <title>Tutorial: A Button</title> <link rel="stylesheet" href="dojo-release-1.9.1/dijit/themes/claro/claro.css"> <script src="dojo-release-1.9.1/dojo/dojo.js"></script> <script type="text/javascript"> require(["dojo/parser", "dojo/ready", "dijit/form/Button"], function(parser, ready){ ready(function(){ parser.parse(); }); }); </script> </head> <body class="claro"> <button type="button" data-dojo-type="dijit/form/Button"> <span>Click Me!</span> </button> </body> </html> |
Table 2 declarative button code
code 비교
declarative의 경우 data-dojo-type이라는 special attribute를 부여하여 dojo/parser가 인식하도록 한 뒤 dijit/form/button을 불러왔다. programmatic의 경우 mybutton이라는 object를 생성하여dijit/form/button을 불러오는 모습이다.
Declarative parseonload option 이용
|
<html> <head> <title>Tutorial: A Button</title> <link rel="stylesheet" href="dojo-release-1.9.1/dijit/themes/claro/claro.css"> <script src='dojo-release-1.9.1/dojo/dojo.js' data-dojo-config="parseOnLoad: true"></script> <script type="text/javascript"> require(["dojo/parser", "dijit/form/Button","dojo/domReady!"]); </script> </head> <body class="claro"> <button type="button" data-dojo-type="dijit/form/Button"> <span>Click Me!</span> </button> </body> </html> |
Table 3 parseonload를 이용한 declarative code
코드 설명
Table 3은 parseonload 옵션을 이용하여 dojo의 module인 dojo/parser와 dijit/form/Button를 굳이 호출할 필요가 없어졌으며 해당 code는 명시적으로 적어주었다. parseonload 옵션을 이용하면 좀 더 간단하게 코드를 만들 수 있으며, Table4에 해당하는 Code를 삭제하여도 웹페이지에 이상은 없다.
|
<script type="text/javascript"> require(["dojo/parser", "dijit/form/Button","dojo/domReady!"]); </script> |
Table 4 Table3의 Code 중 일부분
결과 화면
Figure 1 Table1과 Table2의 결과 화면