구성 요소에서 생각

키 테이크 아웃

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

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

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

. 또 다른 예로서, 도움말 시스템을 검색 할 수있는 곳마다 사용되는 유형의 도움말 검색 구성 요소를 만들지 말고 입력 제안을 제공하는 것과 관련된 상호 작용에 대해 알고있는 암시 텍스트 입력 구성 요소를 만드십시오. 그런 다음 데이터 요청을 수신하는 방법을 알고있는 Help Search API 데이터 구성 요소를 작성하고 Help Search API 및 브로드 캐스트 결과와 상호 작용하십시오. 이제 암시 텍스트 입력의 테스트에는 API를 조롱 할 필요가 없으며 "태그"필드에 제안을 추가하라는 요청을 받으면 기존 제안 텍스트 입력 구성 요소를 떨어 뜨릴 수 있습니다. 태그 API에, 완료! 실용 예 -“프로젝트 목록” 구체적인 예를 들어, 간단한 인터페이스를 고립 된 구성 요소로 구현하는 것을 살펴 보겠습니다. 다음 모형은 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 탈착식

카운트

확인

• 내가 다룬 내용에 관한 질문이 있으시면 의견에 대한 자세한 내용을 문의하시면 최선을 다해 도와 드리겠습니다.
. 사고 구성 요소에 대한 자주 묻는 질문 (FAQ) 효과적인 사고의 주요 구성 요소는 무엇입니까?
효과적인 사고는 여러 주요 구성 요소를 포함하는 다각적 인 프로세스입니다. 여기에는 선명도, 정밀도, 정확성, 관련성, 깊이, 폭, 논리, 중요성 및 공정성이 포함됩니다. 이러한 각 구성 요소는 우리의 사고 과정이 효과적이며 정확한 결론을 이끌어내는 데 중요한 역할을합니다.
비판적 사고 기술을 향상시킬 수있는 방법은 무엇입니까?
비판적 사고 기술을 향상시키는 것은 특정 연습과 관련이 있습니다. 가정에 의문을 제기하고, 다양한 관점을 추구하고, 새로운 아이디어에 개방되는 것과 같은 습관. 또한 분석, 해석, 추론, 평가, 설명 및 자체 조절과 같은 기술을 개발하는 것도 포함됩니다.

비판적 사고에서 논리의 역할은 무엇입니까?

논리는 기본 구성 요소입니다. 비판적 사고. 여기에는 올바르게 추론하고, 구내에서 결론을 도출하고, 청구를 평가하고, 추론의 오류나 오류를 피하는 능력이 포함됩니다.

관련성은 효과적인 사고에 어떻게 기여 하는가? 우리가 고려하고있는 정보 나 아이디어는 당면한 문제 나 문제와 직접 관련이 있습니다. 그것은 우리가 집중력을 유지하고 산만 함이나 관련없는 정보를 피하는 데 도움이됩니다.

비판적 사고에서 깊이의 중요성은 무엇입니까?

비판적 사고의 깊이는 문제 또는 문제, 근본적인 원인이나 시사점을 이해하고 여러 관점에서 탐구하기 위해.

내 생각에서 폭을 어떻게 발전시킬 수 있습니까?

.

사고의 폭을 개발하는 것은 광범위한 관점, 아이디어 및 정보 출처를 고려하는 것입니다. 개방적이고 호기심이 많고 새로운 아이디어 나 견해를 탐구해야합니다. 비판적 사고에서 공정성의 역할은 무엇입니까?

비판적 사고에서의 공정성은 편견이없고 공정한 것, 그리고 객관적. 모든 관련 관점과 증거를 고려하고 호의, 편견 또는 편견을 피해야합니다. 정밀도는 효과적인 사고에 어떻게 기여합니까?

사고의 정밀도는 우리의 생각과 표현에서 정확하고 상세하며 명확해야합니다. 그것은 모호함, 모호함 또는 혼란을 피하고 우리의 아이디어를 효과적으로 전달하는 데 도움이됩니다.

비판적 사고에서 정확성의 중요성은 무엇입니까?

비판적 사고의 정확성은 우리의 정보를 보장하는 것이 포함됩니다. , 아이디어와 결론은 정확하고 신뢰할 수 있으며 오류 나 왜곡이 없습니다. 건전한 결정과 판단을하는 것이 중요합니다.

생각의 명확성을 어떻게 개선 할 수 있습니까?

사고의 명확성을 향상시키는 것은 명확한 의사 소통을 실천하고, 전문 용어 또는 복잡한 언어를 피하고, 노력하는 것과 관련이 있습니다. 우리의 생각과 표현에서 단순성과 간단함

위 내용은 구성 요소에서 생각의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!