> 웹 프론트엔드 > JS 튜토리얼 > JavaScript DSL 유창한 인터페이스(체인 호출 사용) example_javascript 기술

JavaScript DSL 유창한 인터페이스(체인 호출 사용) example_javascript 기술

WBOY
풀어 주다: 2016-05-16 16:09:24
원래의
1517명이 탐색했습니다.

DSL을 한동안 주의 깊게 연구한 결과, JavaScript에서 가장 많이 사용되는 것 중 하나는 아마도 체인 호출(Method Chaining)일 것입니다. 흥미롭게도 Martin Flower는 다음과 같이 지적했습니다.

코드 복사 코드는 다음과 같습니다.

나는 또한 일반적인 오해를 발견했습니다. 많은 사람들이 유창한 인터페이스를 메소드 체이닝과 동일시하는 것 같습니다. 확실히 체이닝은 유창한 인터페이스와 함께 사용하는 일반적인 기술이지만 진정한 유창함은 그 이상입니다.

많은 사람들이 연결된 통화를 유창한 인터페이스와 동일시합니다. 그러나 체인콜은 Fluent 인터페이스의 일반적인 방식이며 실제 Fluent 인터페이스는 그 이상입니다.

DSL 부드러운 인터페이스

Fluent 인터페이스의 원래 의도는 읽기 쉬운 API를 구축하는 것입니다. 결국 코드는 사람들이 읽을 수 있도록 작성됩니다.

마찬가지로 앞서 메소드 캐스케이딩을 통해 DOM을 어떻게 조작했는지 간단히 살펴보겠습니다

코드 복사 코드는 다음과 같습니다.

var btn = document.createElement("BUTTON"); // <버튼> 요소 만들기
var t = document.createTextNode("CLICK ME"); // 텍스트 노드 생성
btn.appendChild(t);  document.body.appendChild(btn);                                                //


$('').append("클릭하세요");


잠깐

이제 가장 간단한 DSL을 보여주는 간단한 예를 만들 수 있습니다


Func = (함수() {
This.add = function(){
console.log('1');
         이것을 돌려주세요;
};
This.result = 함수(){
console.log('2');
         이것을 돌려주세요;
};
이것을 돌려주세요;
});

var func = new Func(); func.add().result();



그러나 이것은 표현식 생성기처럼 보입니다.


DSL 표현식 생성기

표현식 생성기 개체는 일련의 일관된 인터페이스를 제공한 다음 일관된 인터페이스 호출을 기본 명령-쿼리 API에 대한 호출로 변환합니다.

이러한 API는 데이터베이스에 관한 일부 API에서 볼 수 있습니다.


var 쿼리 =
SQL('이름 선택, 위젯의 설명')
.WHERE('가격             'clearance = ', $(params.clearance))
.ORDERBY('이름 asc');


연쇄 호출의 한 가지 문제는 끝이 없다는 점입니다. 위 코드에는 끝이 없어 매우 혼란스럽습니다. . 쿼리를 추가하고 종료하면 좋은 결과가 나올 것 같습니다.

기타

메서드 캐스케이드

다음과 같이 표현됩니다.



a.b();
a.c();


관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿