jQuery is DSL (Part 2 - jQuery)

jQuery의 인터넷 DSL 형식
이전 기사에서는 다음과 같은 인터넷 DSL의 구체적인 형태를 살펴봤습니다./* Method Chaining */
computer()
  .processor()
    .cores(2)
    .i386()
  .disk()
    .size(150)
  .disk()
    .size(75)
    .speed(7200)
    .sata()
  .end();
그런 다음 일반적인 jQuery 코드를 살펴보겠습니다.$("ul#contacts li.item")
  .find("span.name")
    .click(function(e) { $(e.target).siblings(".more").toggle(); })
    .end()
  .find("input.delete")
    .click(function(e) { $(e.target).parents(".item").remove(); })
    .end()
  .find("div.more")
    .hide()
    .end();
구조적으로 위의 인터넷 DSL의 예와 비슷하지 않습니까?비록 우리가 대응하는 HTML을 보지 않더라도, 우리는 이 jQuery 코드의 의미를 추측할 수 있다.

옮겨다니기<ul id="contacts"> 중 하나<li class="item">(이것은 연락처 목록으로 보인다)

안에 있는 <span class="name">

바인딩click 이벤트, 표시/숨기기class="more" 형제 노드(예상 연락처 이름, 클릭 후 자세한 정보 표시/숨기기)

안에 있는 <input class="delete">

귀속click 이벤트, 동작은 class="item" 부 노드를 삭제하는 것이다(이것은 연락처를 삭제하는 데 사용할 것이다)

안에 있는 <div class="more">

이것을 숨깁니다div(기본적으로 자세한 정보를 숨깁니까?)

여기서 우리는 jQuery의 인터넷 DSL 형식이 가져온 장점인 코드를 작성할 때 코드를 작가의 사고방식에 더욱 가깝게 하는 것을 알 수 있다.코드를 읽을 때 독자로 하여금 코드의 의미를 더욱 쉽게 이해하게 한다.안 믿어?jQuery와 비슷한 기능을 가진 Prototype이 이러한 논리를 어떻게 실현하는지 살펴보겠습니다.$$("ul#contacts li.item span.name")
  .invoke("observe", "click",
    function(e) { $(e.target).next(".more").toggle(); });
$$("ul#contacts li.item input.delete")
  .invoke("observe", "click",
    function(e) { $(e.target).up(".item").remove(); });
$$("ul#contacts li.item div.more")
  .invoke("hide");

이것은 내가 Prototype으로 쓸 수 있는 인터넷 DSL과 가장 가까운 형식이다.(더 자연스러운 버전을 쓸 수 있다면 공유를 환영합니다.)Prototype에서 한 그룹의 요소를 되돌릴 수 있는 동작은 $$()뿐이고 전체 국면에만 작용할 수 있으며 jQueryfind()나filter()의 기능이 부족하기 때문에 이 그룹의 연락처 목록 행위를 설명하는 문장은 한데 묶을 수 없으며 각 요소의 행위를 하나하나 정의해야 한다.그 밖에 이 예에서 모든 요소는 하나의 행위만 지정했기 때문에Prototypeinvoke()의 문법은 jQueryclick()의 문법과 비슷해 보인다.그러나 한 가지 요소가 여러 가지 행위를 가지고 있다면prototypeinvoke()은 jQuery처럼 체인식으로 호출될 수 없기 때문에 모든 행위를 다시 한 개$$()로 쓰거나 invoke()를 익명 함수로 바꾸어야 한다.그런 방법이든 코드의 가독성을 떨어뜨릴 뿐이다.
jQuery의 문법 분석기는 우리가 모두 알고 있는 바와 같이 인터넷 DSL의 실현은 문법 분석기의 봉인에 의존한다. 인터넷 DSL에 대한 호출은 사실 모두 문법 분석기에 대한 호출이고 문법 분석을 거쳐 밑바닥 API에 대한 호출을 구성한다.예를 들어 jQuery의each() 현재 상태, 즉 앞에 의존click() 선별된 노드 집합,$()는 이 노드를 DOM에 연결할 클릭 이벤트로 설명하고 마지막으로 DOM API를 호출하여 작업을 완성합니다.이 예에서 DOM API는 jQuery API에 비해 밑바닥 API이다.
jQuery는 가장 실현하기 쉬운 문법 모델을 골라서 만들었다고 할 수 있다. 영원히 하나의 Token만 있기 때문에 영원히 하나의 상태만 있다. 이런 상태도 당연히 영원히 효과적이다. 당신은 jQuery에게 현재 상태가 올바르지 않은 Token을 입력할 수 없다.jQuery의 유일한 상태는 jQuery 대상의 실례이고 그 본질은 원소 집합이다.읽은token은 이 원소를 집합하는 여러 가지 작업일 수 있지만, 그 반환은 반드시 원소 집합일 것이다.이로써 jQuery의 문법 분석기는 무효 상태에 들어가지 않고 무효 상태를 판단할 필요가 없기 때문에 인터넷 DSL 실현에서 흔히 볼 수 있는 난제를 크게 간소화시켰다.
소결
jQuery와Prototype을 비교해 보면 jQuery는 매우 낮은 원가로 인터넷 DSL을 실현했고 Prototype에 없는 뚜렷한 장점을 가져왔다는 것을 알 수 있다.이것은 아주 좋은 예로 볼 수 있다. 만약 당신이 묘사해야 할 업무 논리를 간단한 언어 모델로 귀납할 수 있다면, 이를 위해 인터넷 DSL의 성가비를 실현하는 것은 매우 높을 것이다.당신이 해야 할 일은 단지 이 간단한 언어 모델을 위해 간단한 해석기를 실현하는 것일 뿐입니다. 이어서 당신은 인류의 사고방식에 가까운 인터페이스를 누릴 수 있습니다.
마지막으로, 만약 당신이 나의 글을 좋아한다면, 나의 블로그를 구독하는 것을 고려할 수 있다.

Cat in Chinese ( feed )

Cat in dotNET ( feed )