집 > 기사 > 웹 프론트엔드 > JavaScript 개발의 디자인 패턴에 외관 외관 패턴 적용(고급)

JavaScript 개발의 디자인 패턴에 외관 외관 패턴 적용(고급)

亚连원래의: 2018-05-21 14:04:011549검색

파사드 패턴은 파사드 역할을 도입하여 클라이언트와 하위 시스템 간의 상호 작용을 단순화하고, 복잡한 하위 시스템 호출에 대한 통일된 입구를 제공하며, 하위 시스템과 클라이언트 간의 결합을 줄입니다. 다음으로 디자인 패턴의 파사드를 살펴보겠습니다. JavaScript 개발에서 모양 모드 적용

개념

모양 모드(외관 모드)는 비교적 간단하고 유비쿼터스 모드입니다. 모양 패턴은 클라이언트나 하위 시스템이 이를 더 쉽게 호출할 수 있도록 하는 상위 수준 인터페이스를 제공합니다.

외관 패턴은 어댑터 패턴이 아닙니다. 어댑터 패턴은 호환되지 않는 시스템에서 사용할 수 있도록 인터페이스를 조정하는 데 사용되는 래퍼입니다. 모양 요소를 생성하면 편리합니다. 특정 인터페이스를 요구하는 클라이언트 시스템을 다루기 위한 목적으로 사용되지 않고, 단순화된 인터페이스를 제공하기 위해 사용됩니다.

JavaScript 코드 예제

간단한 코드를 사용하여 표현하세요

var getName = function(){
 return &#39;&#39;svenzeng"
}
var getSex = function(){
  return &#39;man&#39;
}

getName 및 getSex 함수를 별도로 호출해야 하는 경우 더 높은 수준의 인터페이스인 getUserInfo를 사용하여 호출할 수 있습니다.

var getUserInfo = function(){
 var info = a() + b();
 return info;
}

아마도 처음에 getName과 getSex의 코드를 이렇게 같이 쓰면 어떨까요

var getNameAndSex = function(){
 return &#39;svenzeng" + "man";
}

답은 뻔합니다. 매점의 볶음요리사는 오리구이와 양배추. 그는 차라리 오리구이 밥 세트를 제안할 것입니다. 또한 프로그래밍에서는 기능이나 개체가 가능한 한 합리적인 수준으로 세분화되도록 해야 합니다. 결국 모든 사람이 오리구이를 좋아하는 것은 아니며 양배추도 좋아하는 것입니다.
외형 모드의 또 다른 장점은 최고 수준의 인터페이스에만 관심이 있는 사용자에게 실제 구현 세부 정보를 숨길 수 있다는 것입니다. 예를 들어 오리구이밥 세트 이야기에서는 셰프가 오리구이를 먼저 요리하든, 배추를 먼저 요리하든 상관 없고, 오리가 어디서 자랐는지도 상관하지 않습니다.
마지막으로 우리 모두가 사용해 본 모양 패턴의 예를 작성하겠습니다

var stopEvent = function( e ){  //同时阻止事件默认行为和冒泡
 e.stopPropagation();
 e.preventDefault();
}

모양 패턴의 개념은 JavaScript 코드 예제가 반드시 필요한 것은 아니지만 항상 이해하기 쉬운 사람들이 있습니다. 코드에 더 관심을 갖고 그렇게 하면 더 쉽게 이해할 수 있습니다. 게다가 코드 예제가 없는 JavaScript 기사는 설득력이 없으므로 웹에서 삭제해야 합니다. 간단한 이벤트 리스너 예제부터 시작해 보겠습니다. 코드를 몇몇 브라우저에서만 실행하려는 경우가 아니라면 이벤트 리스너를 추가하는 것이 쉬운 작업이 아니라는 것은 누구나 알고 있습니다. 코드가 다양한 브라우저에서 올바르게 작동하는지 확인하려면 다양한 방법을 테스트해야 합니다. 이 코드 예제에서는 이 메서드에 기능 감지를 추가합니다.

function addEvent(element, type, func) {
  if (window.addEventListener) {
    element.addEventListener(type, func, false);
  }
  else if (window.attachEvent) {
    element.attachEvent(&#39;on&#39;+type, func);
  }
  else {
    element[&#39;on&#39;+type] = func;
  }
}

간단하게 유지하세요! 불필요한 코드 작성을 멈추고 최대한 간단하게 만들 수 있었으면 좋겠지만, 그렇다면 흥미롭지도 않고 계속 읽고 싶지도 않을 것입니다. 그렇죠? 그래서 저는 그렇게 생각하지 않고, 조금 더 복잡한 것을 보여드릴 것 같아요. 나는 단지 당신의 코드가 다음과 같이 보일 것이라고 말하고 싶었습니다:

var foo = document.getElementById(&#39;foo&#39;);
  foo.style.color = &#39;red&#39;;
  foo.style.width = &#39;150px&#39;;

var bar = document.getElementById(&#39;bar&#39;);
  bar.style.color = &#39;red&#39;;
  bar.style.width = &#39;150px&#39;;

var baz = document.getElementById(&#39;baz&#39;);
  baz.style.color = &#39;red&#39;;
  baz.style.width = &#39;150px&#39;;

정말 형편없어요! 모든 요소에 대해 정확히 동일한 작업을 수행합니다! 더 간단하게 만들 수 있을 것 같아요:

function setStyle(elements, property, value) {
  for (var i=0, length = elements.length; i < length; i++) {
    document.getElementById(elements[i]).style[property] = value;
  }
}

// 现在你可以这么写：
setStyle([&#39;foo&#39;, &#39;bar&#39;, &#39;baz&#39;], &#39;color&#39;, &#39;red&#39;);
setStyle([&#39;foo&#39;, &#39;bar&#39;, &#39;baz&#39;], &#39;width&#39;, &#39;150px&#39;);

저희 NB가 고장난 것 같나요? 그냥 잊어 버려! 우리는 자바스크립트 프로그래머입니다! 당신은 두뇌를 사용하고 진지해질 수 있습니까? 아마도 단 한 번의 호출로 모든 스타일을 설정할 수 있을 것입니다. 이것을 보세요:

function setStyles(elements, styles) {
  for (var i=0, length = elements.length; i < length; i++) {
    var element = document.getElementById(elements[i]);

    for (var property in styles) {
      element.style[property] = styles[property];
    }
  }
}

//现在你只要这样写：
setStyles([&#39;foo&#39;, &#39;bar&#39;, &#39;baz&#39;], {
  color: &#39;red&#39;,
  width: &#39;150px&#39;
});

동일한 스타일을 설정하려는 요소가 많은 경우 이 코드를 사용하면 정말 많은 시간을 절약할 수 있습니다.

외모 모드의 이점: 외모 모드를 사용하는 목적은 프로그래머의 작업을 더 쉽게 만들고, 조합 코드를 한 번 작성한 다음 반복적으로 사용하여 시간과 에너지를 절약하는 것입니다. 일부 복잡한 문제에 대해 단순화된 인터페이스를 제공합니다.

외형 방법은 개발자에게 편리하며, 더 높은 수준의 기능을 제공하고 외부 코드에 대한 의존도를 줄이며 응용 프로그램 시스템 개발에 유연성을 더해줍니다. 파사드 패턴을 사용하면 기본 하위 시스템과의 긴밀한 결합을 피할 수 있습니다. 이를 통해 고객 코드에 영향을 주지 않고 시스템을 수정할 수 있습니다.

외모 모드의 단점: 때때로 외관 요소로 인해 불필요한 추가 부담이 발생하기도 합니다. 일부 루틴을 구현하기 전에 그 실용성을 신중하게 평가해야 합니다. 때로는 복잡한 외관 기능보다 구성 요소 기능의 강점이 더 매력적입니다. 이는 파사드 기능이 종종 필요하지 않은 작업을 수행할 수 있기 때문입니다.

간단한 개인 웹사이트나 소수의 마케팅 페이지의 경우 도구 설명, 팝업 등 약간의 향상된 동작을 위해 이 Javascript 라이브러리를 가져오는 것은 현명하지 않을 수 있습니다. 이 시점에서는 이러한 요소로 가득 찬 라이브러리보다는 몇 가지 간단한 모양 요소만 사용하는 것이 좋습니다.

Facade 함수는 다양하고 복잡한 작업을 수행하기 위한 간단한 인터페이스를 제공하며 코드를 더 쉽게 유지 관리하고 이해할 수 있도록 해줍니다. 또한 하위 시스템과 클라이언트 코드 간의 결합을 느슨하게 합니다. 자주 함께 나타나는 공통 기능을 그룹화합니다. 이 모드는 일관되지 않은 브라우저 인터페이스를 처리해야 하는 DOM 스크립팅과 같은 환경에서 일반적으로 사용됩니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

JavaScript 개발의 디자인 패턴에 외관 외관 패턴 적용(고급)

관련 기사