너의 첫 번째 Dojo 앱.

5540 단어 dojo
tutorials/001_static_content/index.md
commit 3e0f3ff1ed392163bc65e9cd015c4705cb9c586e
{% section 'first' %}
너의 첫 번째 Dojo 앱.
개술
이 강좌를 통해 첫 번째 Dojo 프로그램을 만들고 브라우저에 간단한 정보를 출력하는 방법을 배울 수 있습니다.
전제 조건
codesandbox.io의 자습서 또는 다운로드 예시 항목을 열고 npm install 실행할 수 있습니다.
명령줄 도구가 전역적으로 설치되었습니다@dojo/cli.자세한 내용은 로컬 설치 Dojo 기사를 참조하십시오.
Dojo는 TypeScript 언어를 기반으로 개발되었기 때문에 너도 TypeScript 언어를 익혀야 한다.
{% section %}
개발 서버 시작
{% task '에서 프로그램을 구축하고 실행합니다.'%}
원본 코드를 수정하기 전에 개발 서버를 시작하면 수정 코드 변화가 가져온 변화를 실시간으로 볼 수 있습니다.프로그램 루트에서 다음 명령을 실행합니다.dojo build --mode dev --watch memory --serve
또는 약어 매개변수를 사용합니다.dojo build -m dev -w memory -s
현재 응용 프로그램을 보려면 브라우저를 열고 http://localhost:9999로 이동합니다.
다음은 맞춤형 응용 프로그램을 시작합니다.
{% section %}
페이지 내용
{% task '페이지에 표시되는 내용을 변경합니다.'%}
맞춤형 프로그램을 시작하기 위해서, 우리는 먼저 기존의 내용을 삭제한다.두 군데를 조정해야 한다.첫 번째 행, index.html 파일의 "Welcome to biz-e-core"
{% instruction '폴더에 있는 src 파일을 열고 index.html 탭과 내용을 삭제합니다.' Welcome to biz-e-corp '%}
페이지가 자동으로 새로 고쳐졌습니다.이것은 우리가 업무를 중단하거나 프로그램을 새로 고치거나 재구성할 필요가 없다는 것을 의미하며, 조정된 효과를 실시간으로 볼 수 있다는 것을 의미한다.
이제'Hello, Dojo World!'정보.
{% instruction '이 아래에 있는 /src 를 엽니다.'%}
다음 코드가 표시됩니다.
import renderer from '@dojo/framework/widget-core/vdom';
import { v } from '@dojo/framework/widget-core/d';

const r = renderer(() =>
    v('div', [ 'Hello, Dojo World!' ])
);
r.mount({ domNode: document.querySelector('my-app') as HTMLElement });

지금은 일부 코드를 이해하지 못할지도 모르지만, 뒤의 교과서를 보고 나면, 너는 점차 이해하게 될 것이다.이제 우리는 이 줄 코드를 중점적으로 이해한다.
v('div', [ 'Hello, Dojo World!' ])
main.ts 함수는 Dojo가 HTML 요소를 만들도록 지시하고 이 코드는 v 탭을 만들고 ， “Hello, Dojo World!”。 ， Biz-E ， 。

{% instruction ' 함수를 바꿉니다.DOM

， “Biz-E-Bodies” “Hello, Dojo World!”' %} 
const r = renderer(() =>
    v('h1', [ 'Biz-E-Bodies' ])
);

， v 요소를 만드는 데 Document Object Model 요소를 사용하지 않으려고 합니다.이는 DOM 요소를 직접 생성하지 않기 때문입니다.반대로, 우리는 TypeScript로 보기 (view) 의 표현층을 만들고, Dojo는 이 보기를 DOM 요소로 효율적으로 변환하여 페이지에 렌더링할 수 있습니다.이 렌더링 기술은 이른바 가상 덤이다.
기존의 웹 프로그램은 DOM과 JavaScript 논리를 한데 뭉쳐 복잡한 응용 프로그램의 복잡도가 높아지고 효율이 떨어진다.대량의 상태와 데이터 변경을 가진 응용 프로그램을 구축할 때 가상 DOM 기술은 프로그램 논리를 크게 간소화하고 성능을 향상시킬 수 있다.가상 DOM은 응용 프로그램 논리와 페이지에 실제 DOM 노드를 렌더링하는 중간자 역할을 한다.
Dojo는 자체 개발한 가상 DOM 라이브러리를 사용하여 보기의 DOM 요소와 가장 효율적인 상호작용을 제공한다.가상DOM의 또 다른 장점은 리얼리티 스타일의 코드를 작성하도록 하는 것이다. 이런 스타일의 코드는 프로그램을 간소화할 수 있다.이 자습서의 마지막 부분에서는 가상 DOM 노드에 대한 속성을 설정하는 방법을 학습합니다.
{% section %}
가상 DOM 속성
{% task '에서 가상 DOM 노드에 대한 속성을 설정합니다.'%}
현재 우리는 이전에 만들어진 document.createElement 파일의 HelloWorld.ts 요소에 속성을 추가합니다. 함수의 두 번째 매개 변수는 이 속성을 전달하는 데 사용됩니다.
{% instruction '업데이트 v 함수 호출, 전송 v 속성.'%}

v('h1', { title: 'I am a title!' }, [ 'Biz-E-Bodies' ])

{% aside '가상 Dom의properties와Attributes'%} 가상 DOM 시스템은 자동으로 title 형식의properties를attribute로 하고 나머지는properties로DOM 노드에 추가합니다.{% endaside %}
태그와 내용 매개 변수 사이에 매개 변수를 추가했습니다.두 번째 파라미터는 요소에 임의의attributes나properties를 설정할 수 있습니다.자바스크립트나 TypeScript를 사용하여 DOM 요소를 만드는 방법HyperScript이라고 하는데 이런 기술은 많은 가상 DOM 실현에 응용된다.
{% section %}
총결산
축하합니다!Dojo에 대한 숙련된 여행에서 한 걸음 더 나아가십시오.Dojo 애플리케이션 구성 요소에서 Dojo 애플리케이션의 주요 구성 요소를 살펴보았습니다.
codesandbox.io 에서 전체 예시나 다운로드 항목을 열 수 있습니다.
{% section 'last' %} string
디자인 모드 에 세이 (2)
[TIL] 0123

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage