구성 요소에서 생각-JS 튜토리얼-php.cn

구성 요소에서 생각 키 테이크 아웃

인터페이스 개발에 대한 구성 요소 접근 방식은 기존 MVC 및 MVVM 프레임 워크에 비해 이점을 제공하며 비즈니스 영역을 모델링하는 대신 가장 작은 상호 작용 섹션에 중점을 둡니다. 구성 요소는 재사용을 위해 설계되고, 비즈니스 영역과 거리가 멀고, 다른 컨텍스트에 적응할 수 있어야합니다. 이 접근법은 특정 유형 유형 도움말 검색 구성 요소보다는 보편적으로 사용할 수있는 암시 적 텍스트 입력 구성 요소를 생성 할 때 예시 될 수 있습니다. 인터페이스를 종합 가능한 구성 요소로 분해하면 개발 프로세스를 단순화 할뿐만 아니라 고립 된 테스트도 용이합니다. 구성 요소는 서로 독립적이므로 전체 시스템을 방해하지 않고 수정 및 추가를 허용합니다.

웹 구성 요소, 반응, 폴리머, 비행 - 모두 인터페이스 구성 요소를 구축하기위한 것입니다. 이것은 큰 MVC 및 MVVM 프레임 워크와는 다른 툴셋이며 인터페이스를 구현하는 방법을 계획 할 때는 다른 사고 방식이 필요합니다. 서버 애플리케이션 용 MVC와 같은 모델을 사용하고 있지만 인터페이스 개발을위한 구성 요소 접근 방식의 이점으로 전용 전환입니다. 이 기사에서는 구성 요소의 사고가 MVC의 사고와 어떻게 다른지 설명하고 실제 예에서 해당 접근법을 구현합니다. 내 마음에 MVC 디자인의 헤드 스페이스는“비즈니스 도메인을 어떻게 모델링합니까? 해당 도메인과 상호 작용하는 프로세스를 어떻게 모델링합니까? 해당 프로세스를 용이하게하기 위해 인터페이스를 어떻게 모델링합니까?”. 이 헤드 스페이스는 좋은 구성 요소 설계를 용이하게하지 않는 것이 제 생각입니다. 실제로 인터페이스를 종합 가능한 구성 요소로 분류하기로 설정했을 때 어떻게 생각 해야하는지와 반대입니다. 기껏해야 마이크로 앱으로 끝날 것입니다. 최악의 경우 신 성분을 구축하게됩니다. 마지막으로하고 싶은 것은 비즈니스 도메인을 구성 요소로 모델링하는 것입니다. 모델을 목표로해야 할 것은 설명 할 수있는 가장 작은 상호 작용 섹션입니다.

재사용 디자인 “이 무시할 수있는 경고 패널을 어떻게 만들 수 있습니까?”대신,“이 상호 작용을 용이하게하기 위해 새로운 HTML 요소를 추가하고 있는지, 무엇을할까요?”라고 스스로에게 물어보십시오. 나는 이것이 비즈니스 영역에서 안전하게 거리를두고 본질적으로 다른 상황에서 가장 재사용 할 수있는 구성 요소로 이어진다는 것을 알았습니다.

구체적인 예를 들어, 간단한 인터페이스를 고립 된 구성 요소로 구현하는 것을 살펴 보겠습니다. 다음 모형은 99designs 1-1 프로젝트 시스템에서 추출 된 것입니다. UI가 급격히 단순화되었지만, 우리가 구축 할 JavaScript는 글을 쓰는 시점에서 사이트의 프로덕션 코드입니다. 와이어 프레임은 다음과 같습니다

우리가 가지고있는 것은 활성, 초안 및 보관 된 세 가지 프로젝트 목록 사이의 내비게이션입니다. 각 프로젝트에는 활성 프로젝트를 보관하거나 초안을 삭제하거나 보관 된 프로젝트를 다시 활성화하는 작업에 대해 수행 할 수있는 작업이 있습니다. 앱 디자인에서 우리는 프로젝트를 모델링하고 "아카이브"및 "삭제"와 같은 방법을 제공하기 시작하고, "상태"속성을 제공하여 세 가지 목록 중 하나를 추적 할 수 있습니다. 우리가 피하고 싶은 정확히 무엇이, 우리는 상호 작용에 대해서만 관심을 가질 것입니다. 그 핵심에는 행당 조치가 있습니다. 해당 조치가 수행되면 목록에서 행을 제거하려고합니다. 이미 우리는 프로젝트 별 도메인 지식을 흘 렸습니다! 또한 각 목록에 몇 개의 항목이 있는지 계산합니다. 이 기사의 범위를 제한하기 위해 각 페이지가 서버 측면 생성되는 것으로 가정하고 탭 탐색으로 전체 페이지 새로 고침이 필요합니다. JavaScript에 의존 할 필요가 없으므로 액션 버튼은 양식의 동작을 비동기 적으로 수행하고 완료되면 이벤트를 방송 할 이벤트 처리기 제출 요소가됩니다. 다음은 단일 프로젝트 행에 대한 HTML입니다 :

나는 항공편을 사용하여 구성 요소를 구축 할 것입니다. Flight는 현재 이전 Sitepoint JavaScript 기사에 설명 된 이유에 따라 99Designs의 기본 JS 구성 요소 라이브러리입니다. 다음은 양식 제출을 처리하고 이벤트를 방송하기위한 Asyncform 구성 요소입니다.

우리는 JavaScript에 클래스 속성을 사용하지 않는 엄격한 정책을 유지하므로 액션 양식에 데이터-동기 형식 속성을 추가하고 다음과 같은 모든 일치하는 형태에 구성 요소를 첨부합니다.

<span><span><span><li</span>></span>
</span>  <span><span><span><a</span> href<span>="/projects/99"</span> title<span>="View project"</span>></span>Need sticker designs for XYZ Co.<span><span></a</span>></span>
</span>  <span><span><span><div</span> class<span>="project__actions"</span>></span>
</span>    <span><span><span><a</span> href<span>="/projects/99"</span> class<span>="button"</span>></span>View<span><span></a</span>></span>
</span>    <span><span><span><form</span> class<span>="action"</span> action<span>="/projects/99/archive"</span> method<span>="post"</span>></span>
</span>        <span><span><span><button</span>></span>Archive<span><span></button</span>></span>
</span>    <span><span><span></form</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></li</span>></span></span>

로그인 후 복사

이제 우리는 행동을 수행 할 수있는 능력을 가지고 있으며 성공시 Dom Tree를 전파하는 이벤트를 방송합니다. 다음 단계는 해당 이벤트를 듣고 거품을 일으키는 행을 제거하는 것입니다. 이를 위해 우리는 탈착식을 가지고 있습니다 :

다시 프로젝트 행에 데이터를 모색 할 수있는 속성을 추가하고 구성 요소를 행 요소에 첨부합니다.

<span>define(function(require) {
</span>  <span>'use strict';
</span>
  <span>var defineComponent = require('flight/lib/component');
</span>
  <span>function <span>AsyncForm</span>() {
</span>    <span>this.defaultAttrs({
</span>      <span>broadcastEvent: 'uiFormProcessed'
</span>    <span>});
</span>
    <span>this.after('initialize', function() {
</span>      <span>this.on(this.node, 'submit', this.asyncSubmit.bind(this));
</span>    <span>});
</span>
    <span>this.asyncSubmit = function(event) {
</span>      event<span>.preventDefault();
</span>      $<span>.ajax({
</span>        <span>'url': this.$node.attr('action'),
</span>        <span>'dataType': 'json',
</span>        <span>'data': this.$node.serializeArray(),
</span>        <span>'type': this.$node.attr('method')
</span>      <span>}).done(function(response<span>, data</span>) {
</span>        <span>this.$node.trigger(this.attr.broadcastEvent, data);
</span>      <span>}.bind(this)).fail(function() {
</span>        <span>// error handling excluded for brevity
</span>      <span>});
</span>    <span>};
</span>  <span>}
</span>
  <span>return defineComponent(AsyncForm);
</span><span>});</span>

로그인 후 복사

완료! 각각 하나의 이벤트가있는 두 개의 작은 구성 요소가 있으며, 우리는 세 가지 유형의 행동을 세 가지 형태로 우아하게 저하시키는 방식으로 처리했습니다. 한 가지만 남았고 그것은 각 탭에서 우리의 계산입니다. 충분히 쉬워야합니다. 행을 제거 할 때마다 활성 탭의 수를 하나씩 줄이는 것입니다. 하지만 잠깐! 활성 프로젝트가 보관되면 보관 된 카운트가 증가해야하며 보관 된 프로젝트가 다시 활성화되면 활성화 된 카운트가 증가해야합니다. 먼저 그 숫자를 변경하도록 지침을받을 수있는 카운트 구성 요소를 만들 수 있습니다.

우리의 카운트는 4 와 같은 것으로 html에서 표시됩니다. 카운트는 문서 수준의 이벤트에 리스닝되므로 이벤트 속성을 NULL로 만듭니다. 이렇게하면이 인스턴스가 듣는 이벤트를 정의하고 실수로 여러 Count 인스턴스가 동일한 이벤트에서 지침을 듣는 것을 방지합니다.

<span>AsyncForm.attachTo('[data-async-form]');</span>

로그인 후 복사

퍼즐의 마지막 부분은 탈착식 인스턴스가 제거 될 때 각 카운터에 수정 자와 이벤트를 발사하도록하는 것입니다. 우리는 확실히 구성 요소 간의 결합을 원하지 않으므로 제거 할 때 해고 할 일련의 이벤트 인 속성을 제거 할 수 있습니다.

이제 카운트와 탈착식 사이의 커플 링은 사용 케이스 특정 페이지 스크립트에서 구성 요소를 DOM에 첨부합니다.

<.> 미션이 성취되었습니다. 우리의 카운터는 프로젝트 목록 행에 대해 아무것도 모릅니다. 그리고 프로젝트 목록의 개념을 중심으로 설계된 구성 요소 중 어느 것도 없습니다. 마지막 순간 추가

<span>define(function(require) {
</span>  <span>'use strict';
</span>
  <span>var defineComponent = require('flight/lib/component');
</span>
  <span>function <span>Removable</span>() {
</span>    <span>this.defaultAttrs({
</span>      <span>'removeOn': 'uiFormProcessed'
</span>    <span>});
</span>
    <span>this.after('initialize', function() {
</span>      <span>this.on(this.attr.removeOn, this.remove.bind(this));
</span>    <span>});
</span>
    <span>this.remove = function(event) {
</span>      <span>// Animate row removal, remove DOM node, teardown component
</span>      $<span>.when(this.$node
</span>        <span>.animate({'opacity': 0}, 'fast')
</span>        <span>.slideUp('fast')
</span>      <span>).done(function() {
</span>        <span>this.$node.remove();
</span>      <span>}.bind(this));
</span>    <span>};
</span>  <span>}
</span>
  <span>return defineComponent(Removable);
</span><span>});</span>

로그인 후 복사

우리의 UX 디자이너는이 조치를 취소 할 수 없으므로 누군가가 드래프트를 삭제하려고 할 때 확인을 요청하면 더 나을 것이라고 지적했습니다. 문제 없습니다. 우리는 그 일을하는 구성 요소를 채찍질 할 수 있습니다.

삭제 버튼에 첨부하면 요청한 내용이 있습니다. 확인 대화 상자가 버튼을 가로 채고 사용자가 "OK"를 선택하면 양식 제출을 허용합니다. 우리는 서로를 방해하지 않고 이러한 구성 요소를 구성 할 수 있으므로 Asyncform 구성 요소를 변경할 필요가 없었습니다. 프로덕션 코드에서는 액션 버튼에서 단일 서브미트 구성 요소를 사용하여 양식이 제출되어 여러 제출물을 방지한다는 시각적 피드백을 제공합니다. 최종 구성 요소, 테스트 및 비품

이 기사가 인터페이스를 종합 가능한 구성 요소로 분류함으로써 프로젝트가 어떻게 이익을 얻을 수 있는지를 보여주기를 바랍니다. 내가 다루지 않은 구성 요소 설계의 중요한 이점은 고립 된 테스트의 용이성이므로 Jasmine 테스트 및 HTML 테스트 비품과 함께 최종 구성 요소가 있습니다.

asyncform 탈착식

카운트

확인