자바스크립트 + 리액트 디자인 패턴

160

자바스크립트 + 리액트 디자인 패턴

벤 알먼의 발행/구독 패턴 구현 예시를 사용해 애플리케이션 결합도 낮추기

다음 영화 평점 매기기 예제에서는 벤 알먼

Ben

Alman

의

jQuery

로 구현한 발행/구독 패턴

19

을

사용하여

UI

의 결합도를 낮추는 방법을 소개하겠습니다. 평점을 제출하는 것이 단지 새로운

사용자와 평점이 생성되었다는 사실을 알리도록 구현되어 있음에 주목하세요.

데이터를 어떻게 처리할지는 각 토픽의 구독자가 결정합니다. 예제 코드에서는 기존 배열에

새로운 데이터를 추가한 다음,

Lodash

라이브러리의

.

template

()

메서드를 사용하여 템플

릿과 함께 렌더링하고 있습니다.

[예제

7

-

9

]에서

HTML

/템플릿 코드를 확인할 수 있습니다.

예제

7-9

발행/구독을 위한

HTML

/템플릿 코드

<script id="userTemplate" type="text/html">

<li><%- name %></li>

</script>

<script id="ratingsTemplate" type="text/html">

<li><strong><%- title %></strong> was rated <%- rating %>/5</li>

</script>

<div id="container">

<div class="sampleForm">

<p>

<label for="twitter_handle">Twitter ...