dojo => Hello Dojo

소개

다른 프로그래밍 언어에서의 Hello World와 같은 단순한 Hello Dojo. Dojo는 설치 / 구성 및 사용이 간단합니다. http://dojotoolkit.org/download/ 에서 Dojo의 최신 버전을 다운로드하거나 프로젝트에서 CDN을 사용할 수 있습니다. 나는 그것을 다운로드하고 사용하는 것을 선호한다. 이 주제의 최신 버전은 1.12.1이며 Dojo 2.0 작업이 진행 중입니다.

안녕하세요 세계

아래와 같이 HTML 파일을 생성하십시오. 스크립트 태그에서 CDN 링크를 사용하거나 다음과 같은 지역에서 사용할 수 있습니다.

<script type="text/javascript" src="dojo/dojo/dojo.js"
        data-dojo-config="async:true">

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tutorial: Hello Dojo!</title>
</head>
<body>
    <h1 id="greeting">Hello</h1>
    <!-- load Dojo -->
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
            data-dojo-config="async: true"></script>
</body>
</html>

그게 전부 야. 이 HTML을 실행하면 Hello가 표시됩니다. 예,이 예제에서는 Dojo 관련 코드를 아직 사용하지 않았습니다. 그러나 이것은 Dojo를 사용하여 간단한 페이지를 작성하는 방법을 보여줍니다. 다음으로이 간단한 페이지에 Dojo를 적용하는 방법을 살펴 보겠습니다.

Dojo AMD

다음 예제에서는 Dojo 기능을 사용하고 AMD (비동기 모듈 정의)의 의미를 이해합니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tutorial: Hello Dojo!</title>
</head>
<body>
    <h1 id="greeting">Hello</h1>
    <!-- load Dojo -->
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
            data-dojo-config="async: true"></script>

    <script>
        require([
            'dojo/dom',
            'dojo/dom-construct'
        ], function (dom, domConstruct) {
            var greetingNode = dom.byId('greeting');
            domConstruct.place('<em> Dojo!</em>', greetingNode);
        });
    </script>
</body>
</html>

이전 예제와의 차이점은 추가 스크립트 태그가 있고 그 안에는 사용되는 도장 묘묘가 거의 없다는 것입니다. 그들 각각을 보자.

require 평신도 용어에서 require는 다른 OOTB 라이브러리 (dojo에서 모듈이라고 부름)를 가져 오는 다른 언어로 된 문장을 가져 오거나 사용하는 것과 유사합니다. 기존 모듈은 키워드 'require'를 사용하여로드되고 새 모듈은 키워드 'define'을 사용하여 작성됩니다. 모듈에 대한 자세한 내용은 이후 섹션에서 배우게 될 것입니다. 이 예에서는 두 개의 OOTB 모듈 'dojo / dom'과 'dojo / dom-construct'를 사용했습니다. dojo / dom (dom)은 html에서 노드를 가져 오는 데 사용할 수있는 핵심 DOM (문서 객체 모델)입니다. 자바 스크립트 개발자의 경우 document.getElementById ( '')와 유사하지만 내부 dojo는 동일한 메소드를 사용합니다. dojo / dom-construct (domConstruct)는 div, li, ul 등과 같은 노드를 만드는 데 사용됩니다. DOM 생성 API이며 DOM에 노드를 삽입 할 때도 사용할 수 있습니다. 예를 들어 div 'abc'가 있고 다른 div 'xyz'를 만들고 'abc'뒤에 배치하려고한다고 가정 해 보겠습니다. 당신은 그것을 달성 할 수 있습니다.

domConstruct.create("div", { id:"xyz",innerHTML: "<p>new DIV</p>" });
domConstruct.place(dojo.byId("xyz"), dojo.byId("abc"), "after");

예제로 돌아 가면

require([
            'dojo/dom',
            'dojo/dom-construct'
        ], function (dom, domConstruct) {
            var greetingNode = dom.byId('greeting');
        domConstruct.place('<em> Dojo!</em>', greetingNode);
        });

함수 내에서 dom과 domConstruct를 볼 수 있습니다. 이것이 우리가 dojo / dom과 dojo / dom-construct에 대해 어떻게 생각하는지입니다. 원하는 이름 지정 규칙을 원하는대로 사용할 수 있습니다.

require([
                'dojo/dom',
                'dojo/dom-construct'
            ], function (hi, bye) {
                var greetingNode = hi.byId('greeting');
                bye.place('<em> Dojo!</em>', greetingNode);
            });

그러나 dojo / dom 사용 dom과 dojo / dom-construct 사용자 domConstruct와 같은 의미있는 이름을 갖는 것이 좋습니다.

이제 함수 내에서

var greetingNode = hi.byId('greeting');

이것은 id = 'greeting'을 사용하여 dom (이 경우 div)을 검색한다는 것입니다. 변수 greetingNode는 실제 dom 노드를 갖습니다. 그런 다음,

domConstruct.place('<em> Dojo!</em>', greetingNode);

그래서 여기에 Dojo를 추가합니다! 노드 greetingNode에 전달합니다. 이것은 Hello + Dojo와 같습니다! 출력은 Hello Dojo가됩니다!

그래서 이것으로 우리는

도장 기능 사용 방법
OOTB 모듈 사용법
돔 조작 방법

Modified text is an extract of the original Stack Overflow Documentation

아래 라이선스 CC BY-SA 3.0

와 제휴하지 않음 Stack Overflow

dojo
Hello Dojo

수색…

소개

안녕하세요 세계

Dojo AMD