aurelia.io 방식으로 html 확장

키 테이크 아웃

현대적인 JavaScript 프레임 워크 인 Aurelia.io는 개발자가 HTML에서 사용자 정의 요소 및 속성을 만들어 웹 애플리케이션의 유연성과 기능을 향상시킬 수 있도록합니다. aurelia.io의 사용자 정의 속성은 기존 플러그인을 감싸거나 공통 바인딩을위한 바로 가기를 제공하거나 직접 코드 액세스없이 기존 HTML 요소를 변경하는 데 사용될 수 있습니다. 따라서 기존 요소에 새로운 기능을 더 쉽게 추가 할 수 있습니다.

aurelia.io에서 새로운 요소를 만드는 것은 요소에 대한 클래스를 정의하고 HTML 표현에 대한보기를 정의하는 것이 포함됩니다. 이를 통해 사용자 지정 동작 및 구조를 갖춘 완전히 새로운 요소를 생성하여 코드 재사용 및 모듈 식 디자인을 개선 할 수 있습니다. aurelia.io는 간단한 규칙 세트를 사용하여 필요한 코드 양을 줄여 개발자에게 친숙합니다. 또한 다른 JavaScript 라이브러리 및 프레임 워크와의 호환성을 제공하여 웹 개발의 유연성을 향상시킬 수 있습니다.

Old Dog HTML 새로운 트릭을 가르치는 것은 오늘날의 현대 JavaScript 프레임 워크의 주요 초점입니다. WebComponents와 같은 잠재적 표준을 따르거나 사용자 정의 지시문 생성 또는 기존 클래스를 확장하여 선택 프레임 워크가 HTML의 마크 업 자체를 확장 할 수있는 수단을 제공 할 가능성이 높습니다. Brad Barrow가 작성한 이전 기사에서는 새로운 플레이어 인 Aurelia를 소개했습니다. 이 기사는 Brad의 기사와 코드를 바탕으로 Aurelia의 컨벤션을 따라 맞춤형 속성뿐만 아니라 사용자 정의 요소를 만드는 방법을 보여줍니다. 이 기사의 전체 코드는 Github Repo에서 찾을 수 있으며 여기에서 구축 할 내용의 데모를 볼 수 있습니다 (앱이 초기화 할 시간이 허용하십시오).

. 왜 더 많은 마크 업이 필요합니까? 행동으로 바로 뛰어 들기 전에 먼저 새로운 구성 요소를 생성 할 수있는 잠재적 사용 사례를 이해해 봅시다. 그렇게하려면 아래 그림과 같이 입문 예를 개념적으로 살펴볼 것입니다. 우리는 뷰 모델 (VM)과보기로 표시되는 두 페이지가 있으며 재미있는 그림과 GIF 비디오를 보여줍니다. 이들 각각은 반복 목록이있어 이미지와 텍스트 블록이 포함 된 게시물을 렌더링합니다.
• Aurelia Reddit 클라이언트 개념 다이어그램
• 뷰를 살펴보면 렌더링뿐만 아니라 데이터 수집이 하나의 VM/View 쌍에 밀접하게 연결되어 있음을 알 수 있습니다.
• 이것은 간단한 예제에서는 문제가되지 않을 수 있지만 시스템이 커지고 점점 더 많은 요구 사항이 수집됨에 따라 주요 단점으로 바뀔 수 있습니다.
. 사용자 정의 속성으로 기존 요소를 향상시킵니다 각각의 재미있는 페이지 게시물에 대한 팝 오버를 제공하라는 요청을 받는다 고 상상해보십시오. 이를 위해 필요한 데이터 속성을 배치 한 다음 FunnyVM 내부의 초기화를 통해 Bootstrap의 기능을 마크 업에 직접 연결할 수 있습니다. 그러나 우리가 갑자기 다른 페이지에서도해야한다면 어떨까요? 사용자 정의 속성을 선언하여 기능을 제공하면 우리의 삶이 훨씬 쉬워 질 수 있습니다. 이들은 다음 시나리오에서 특히 유용합니다 :

기존 플러그인 포장 스타일 또는 클래스 와 같은 일반적인 바인딩에 대한 바로 가기 직접 코드 액세스없이 기존 HTML 요소 / 사용자 지정 요소 변경

이제 손을 더럽 히고 첫 번째 사용자 정의 속성을 구축하는 데 필요한 것이 무엇인지 보자.

팝 오버 만들기 우리가 달성하고자하는 것을 살펴보면서 시작하겠습니다. 새로운 속성 팝 오버는 팝 오버의 배치, 제목 및 내용에 대한 매개 변수를 허용해야합니다. 배치는 오른쪽에 고정되어 있으므로 값으로 간단한 문자열로 충분합니다. 다른 두 속성의 경우 Aurelia의 데이터 바인딩을 사용하여 반복 값을 매핑 할 것입니다. 파일을로드하기 위해 Aurelia의 요구 기능을 사용합니다. From 속성에는 가져올 리소스의 상대 경로가 포함되어 있습니다.

• 이를 수행하기 위해 SRC 폴더에서 popover.js라는 새 JavaScript 파일을 만들기 시작합니다. 다른 모든 Aurelia Constructs와 마찬가지로 사용자 정의 속성은 미리 정의 된 API (많은 레거시 프레임 워크와 마찬가지로)에 전달 된 함수 모음보다는 간단한 내보내기 ES6 클래스입니다.
Aurelia는 다른 프레임 워크와 비교하여 메타 데이터를 통해 구성하여 구성을 선언합니다. 그러나 Aurelia는 정적 기능 또는 복잡한 API를 사용하는 대신 최첨단 ES7 데코레이터를 활용하여이를 달성합니다. 패키지 Aurelia-Framework에서 필요한 데코레이터를 가져올 것입니다. 컨트롤 자체는 Twitter Bootstrap에서 제공하는 Popover JavaScript 컨트롤을 사용합니다. 따라서 부트 스트랩의 JavaScript 코드를 초기화하기 위해 jQuery 핸들 $와 부트 스트랩을 가져옵니다.
• 다음 단계는 앞에서 언급 한 메타 데이터를 적용하여 Aurelia가 파일을로드 할 때 얻는 것을 알 수 있도록하는 것입니다. CustomAttribute Decorator를 첨부함으로써 우리는 구성 요소를 주어진 값으로 지정합니다. 반면에 바인딩 가능한 데코레이터는 우리의 견해가 묶을 수있는 속성을 선언합니다. 우리는 단순히 이용 가능한 각 속성에 대해이 데코레이터를 반복합니다.
• 첫 번째 주입 데코레이터는 실제 DOM 요소를 생성자 방법에 매개 변수로 제공하는 다음 나중에 사용하기 위해 저장됩니다.

<span><span><span><template>></template></span>
</span>  <span><span><span><ul> class<span>="list-group"</span>></ul></span>
</span>    <span><span><span><li> class<span>="list-group-item"</span> repeat.for<span>="p of posts"</span>></li></span>
</span>      <span><span><span><img  alt="aurelia.io 방식으로 html 확장" > src.bind<span>="p.data.thumbnail"</span> /></span>
</span>      <span><span><span><a> href<span>="http://reddit.com${p.data.permalink}"</span>></a></span>
</span>        ${p.data.title}
      <span><span><span></span></span></span></span></span></span></span></span>

> >

> > 이제 우리는 필요한 모든 정보를 얻었으므로 Bind라는 방법을 선언하여 동작 수명주기를 선택할 수 있습니다. 이를 통해 JQuery의 준비된 방법과 비교할 수있는 적절한 타이밍으로 구성 요소를 초기화합니다.

마지막으로, 우리는 변경된 핸들러를 추가합니다. 바인딩 소스가 시간이 지남에 따라 변하지 않기 때문에이 예에서는 실제로 실행되지 않습니다.

<span><span><span><require> from<span>="./popover"</span>></require></span><span><span></span>></span>    
</span>...
<span><span><span><img  alt="aurelia.io 방식으로 html 확장" > src.bind<span>="p.data.thumbnail"</span>
</span></span><span>     <span>popover<span>="placement: 'right';
</span></span></span><span><span>              title.bind: p.data.url;
</span></span><span><span>              content.bind: p.data.title<span>"</span> /></span></span></span></span>

github

에서 전체 파일을 봅니다 이제 기존 요소에 속성을 제공하여 새로운 기능을 추가 할 수있는 방법을 보았으므로 계속 진행하고 고유 한 사용자 지정 요소를 작성해 보겠습니다. 사용자 정의 요소로 새 태그를 만듭니다 완전히 새로운 요소를 생성하기 위해 Aurelia는 사용자 정의 속성과 매우 유사한 접근 방식을 활용합니다. 예를 들어 GIF 페이지의 게시물을 Reddit-Gif라는 사용자 정의 요소로 표시하고 실제 비디오를 켜고 끄는 가능성을 제공합니다. 우리의 견해에 대한 결과 마크 업은 다음과 같아야합니다

<span>import <span>{customAttribute, bindable, inject}</span> from 'aurelia-framework';
</span><span>import $ from 'bootstrap';
</span><span>import bootstrap from 'bootstrap';
</span><span>...</span>

보시다시피 우리는 새 태그를 사용하고 데이터 속성에 대한 데이터 바인딩을 통해 필요한 정보를 제공합니다. 다음 단계는 실제 요소를 만드는 것입니다. 폴더 SRC에서 요소의 View Reddit-gif.html 및 VM Reddit-gif.js를 만들어서 그렇게합니다. 다음에 볼 수있는보기는 GIFS.HTML의 이전 마크 업을 활용하고 실제 비디오를 포함하는 데 사용되는 iframe을 토글하는 버튼을 추가하는 것입니다. 다시, Aurelia의보기는 템플릿 태그 : 안에 랩핑됩니다

VM 부분을 살펴보면 사용자 정의 속성을 만들 때와 비슷한 프로세스를 따릅니다. 그러나 이번에는 다른 데코레이터를 활용하여 Aurelia에게 데이터라는 데이터라는 하나의 속성만으로 CustomElement를 만들겠다고 말할 것입니다.

.

다음에 우리는 iframe을 표시 해야하는지 여부를 추적하기 위해 선물 멤버를 정의하고 있습니다. 또한 Iframe이 보이지 않는 경우 컨텐츠를 미리로드하지 않기 위해 GIFSRC 멤버를 비어 놓았습니다.

마지막으로, 우리는 각 통화의 가시성과 소스를 뒤집는 토글 버튼에서 사용하는 토글 기준을 추가합니다.

여기에서 전체 HTML 파일을 볼 수 있고 여기서는 js 파일을 볼 수 있습니다. 규칙으로 코드 금액을 줄이기 Aurelia는 개발자 경험을 가능한 한 즐겁게 만드는 것입니다. 진실에 직면합시다 : 우리 중 많은 사람들이 많이 입력하는 것을 좋아하지 않습니다. 따라서 Aurelia는 소중한 키 스트로크를 절약하고 시간이 지남에 따라 유지 보수를 개선하기 위해 간단한 규칙을 사용합니다. 예를 들어, 바인딩 가능한 데코레이터의 정식 버전은 실제로 이와 같이 보일 수 있습니다. 다른 모든 옵션은 자동으로 추론됩니다

<span><span><span><template>></template></span>
</span>  <span><span><span><ul> class<span>="list-group"</span>></ul></span>
</span>    <span><span><span><li> class<span>="list-group-item"</span> repeat.for<span>="p of posts"</span>></li></span>
</span>      <span><span><span><img  alt="aurelia.io 방식으로 html 확장" > src.bind<span>="p.data.thumbnail"</span> /></span>
</span>      <span><span><span><a> href<span>="http://reddit.com${p.data.permalink}"</span>></a></span>
</span>        ${p.data.title}
      <span><span><span></span>></span>
</span>    <span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span></span>

또 다른 것은 여러 속성의 사용을 단축하는 방법입니다. 따라서 각각을 하나씩 정의하는 대신에 동적 속성을 기대하도록 사용자 정의 속성을 알릴 수도 있습니다. 그렇게하기 위해 우리는 Dynamicoptions 데코레이터로 수업을 장식합니다. 이제 우리는 여전히 동일한보기 마크 업을 재사용 할 수 있지만 이름에서 알 수 있듯이 역동적 인 컨텍스트에 매우 도움이되는 모든 속성 선언을 수동으로 정의 할 필요는 없습니다. 이것은 우리가 DynamicPropertyChanged라는 일반적인 변경된 핸들러를 쓸 수 있음을 의미합니다.

하지만 사용자 정의 요소는 어떻습니까? 글쎄, 우리는 그것을 깨닫지 않고 이미 일부 컨벤션을 암시 적으로 사용했습니다. 시스템은 동일한 이름을 가진 뷰와 VM 쌍을 자동으로 모았습니다. Decorator @useview (allativePath)를 사용할 수 있지만 다른보기를 사용해야하는 경우. 또는 @Noview를 선언하여보기를 전혀 사용하지 않을 수도 있습니다. 우리는 심지어 미쳤고 데코레이터 useshadowdom을 ​​추가하여 그림자에서 우리의 견해를 렌더링 할 수 있습니다. 그 용어에 익숙하지 않다면이 기사를 살펴보십시오

<span><span><span><require> from<span>="./popover"</span>></require></span><span><span></span>></span>    
</span>...
<span><span><span><img  alt="aurelia.io 방식으로 html 확장" > src.bind<span>="p.data.thumbnail"</span>
</span></span><span>     <span>popover<span>="placement: 'right';
</span></span></span><span><span>              title.bind: p.data.url;
</span></span><span><span>              content.bind: p.data.title<span>"</span> /></span></span></span></span>

결론 Aurelia 팀인 우리는 사용자 정의 요소와 속성을 활용하여 HTML 자체를 확장하는 방법에 대한 빠른 개요를 제공하기를 희망합니다. 예제 전체에서 우리는 유연하지만 사용하기 쉬운 프레임 워크를 제공함으로써 개발자 경험에 중점을 둘 수 있기를 바랍니다. 궁금한 점이 있으면 Gitter 채널에 초대하겠습니다. 우리는 또한 첫 번째 사용자 정의 요소와 속성을 작성할 때 귀하의 경험을 듣고 싶습니다. aurelia.io aurelia.io 란 무엇이며 html을 어떻게 확장합니까?

aurelia.io는 웹, 모바일 및 데스크탑 개발을위한 최신 오픈 소스 자바 스크립트 프레임 워크입니다. 개발자가 사용자 정의 HTML 요소를 만들고 기존 HTML 요소에 사용자 정의 속성을 추가하고 HTML 렌더링의 흐름을 제어 할 수 있도록하여 HTML을 확장합니다. 이는 Aurelia의 강력한 템플릿 엔진을 통해 달성되어 사용자 정의 요소와 속성을 해석하고 표준 HTML로 렌더링합니다. 이를 통해 깨끗하고 읽을 수있는 코드를 유지하면서보다 역동적이고 대화식 및 복잡한 웹 응용 프로그램이 가능합니다. aurelia.io는 다른 JavaScript 프레임 워크와 어떻게 비교됩니까?

aurelia.io는 웹 표준, 단순성 및 확장 가능성에 중점을 두어 다른 JavaScript 프레임 워크에서 두드러집니다. 많은 프레임 워크와 달리 Aurelia.io는 협업 라이브러리 모음으로 설계되었으므로 필요한만큼 프레임 워크를 많이 사용할 수 있습니다. 또한 깨끗하고 컨벤션 기반 코딩을 강조하여 필요한 보일러 플레이트 코드의 양을 줄입니다. 또한 웹 표준을 따르는 Aurelia.io의 약속은 코드가 향후 방지되고 다가오는 웹 기술과 호환 될 수 있음을 의미합니다. aurelia.io의 사용자 정의 요소에는 요소의 클래스와 HTML 표현에 대한보기를 정의하는 것이 포함됩니다. 클래스에는 요소의 논리가 포함되어 있고보기는 HTML 구조를 정의합니다. 정의되면 사용자 정의 요소는 표준 HTML 요소와 마찬가지로 Aurelia.io 응용 프로그램에서 사용할 수 있습니다. 이를 통해 코드 재사용 및 모듈 식 디자인이 가능하여 응용 프로그램을보다 쉽게 ​​개발하고 유지 관리 할 수 ​​있습니다.

Aurelia.io의 사용자 정의 속성은 무엇입니까? IO는 기존 HTML 요소에 사용자 정의 동작을 추가하는 방법입니다. 이들은 속성의 논리에 대한 클래스와 HTML 표현에 대한보기와 함께 사용자 정의 요소와 유사한 방식으로 정의됩니다. 일단 정의되면, 사용자 정의 속성을 Aurelia.io 응용 프로그램의 HTML 요소에 추가하여 완전히 새로운 요소를 생성 할 필요없이 기능을 확장 할 수 있습니다. aurelia.io는 양방향 데이터 바인딩을 지원합니다. 즉, 모델의 변경 사항이 자동으로보기를 자동으로 업데이트하고 그 반대도 마찬가지입니다. 이는 Aurelia.io의 관측 성 시스템을 통해 달성되며,이 시스템은 데이터의 변경 사항을 추적하고보기의 관련 부분을 업데이트합니다. 이것은 UI가 항상 데이터의 현재 상태를 반영하는 동적 상호 작용 응용 프로그램을 쉽게 만들 수있게 해줍니다.

다른 JavaScript 라이브러리 및 프레임 워크와 함께 aurelia.io를 사용할 수 있습니까?

예, Aurelia .io는 다른 JavaScript 라이브러리 및 프레임 워크와 호환되도록 설계되었습니다. 모듈 식 아키텍처를 사용하므로 사용할 프레임 워크의 어떤 부분을 선택하고 선택할 수 있습니다. 이를 통해 aurelia.io를 기존 프로젝트에 쉽게 통합하거나 Aurelia.io와 함께 다른 라이브러리 및 프레임 워크를 사용하는 것이 가능합니다. 복잡한 탐색 시나리오를 허용하는 강력한 라우터가 포함되어 있습니다. 라우터는 중첩 경로, 선택적 매개 변수 및 동적 경로를 다른 기능 중에서 지원합니다. 이를 통해 Aurelia.io를 사용하여 단일 페이지 응용 프로그램을 쉽게 만들 수 있습니다. 여기서 사용자는 페이지를 새로 고치지 않고 다른 뷰를 탐색 할 수 있습니다. aurelia.io의 학습 곡선은 무엇입니까?

aurelia.io는 구성에 대한 단순성과 컨벤션에 중점을 둔 학습하기 쉽도록 설계되었습니다. JavaScript 및 HTML에 익숙하다면 Aurelia.io를 빨리 선택할 수 있어야합니다. 프레임 워크의 문서는 포괄적이며 시작하는 데 도움이되는 많은 예제가 포함되어 있습니다.

aurelia.io는 어떻게 테스트하고 그 성능은 무엇입니까?

aurelia.io는 철저히 테스트되어 철저히 테스트됩니다. 신뢰성과 성능. 단위 테스트, 통합 테스트 및 엔드 투 엔드 테스트의 조합을 사용하여 프레임 워크의 모든 측면을 다룹니다. 성능 측면에서 Aurelia.io는 최소한의 발자국과 최적화 된 렌더링으로 빠르고 효율적으로 설계되었습니다. IO에는 프레임 워크에 기여하고 서로를 지원하는 활기차고 활발한 개발자 커뮤니티가 있습니다. 커뮤니티 포럼, Gitter 채팅방 및 스택 오버플로 태그를 포함하여 수많은 리소스가 있습니다. 또한 Aurelia.io 팀은 전문적인 지원 및 교육 서비스를 제공합니다.

위 내용은 aurelia.io 방식으로 html 확장의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!