개념
외관 모드 (Facade Mode)는 비교적 간단하고 유비쿼터스 모드입니다. 외관 모드는 높은 수준의 인터페이스를 제공하므로 클라이언트 또는 서브 시스템을보다 쉽게 호출 할 수 있습니다.
외관 모드는 어댑터 모드가 아니며 어댑터 모드는 인터페이스를 적용하여 호환되지 않는 시스템에서 사용하는 래퍼입니다. 외관 요소를 만드는 것은 편리합니다. 특정 인터페이스가 필요한 고객 시스템을 다루는 데 사용되지 않고 단순화 된 인터페이스를 제공하는 데 사용됩니다.
JavaScript 코드 예제
간단한 코드를 사용하여 표현하십시오
var getName = function () {return ''svenzeng "} var getsex = function () {return 'man'}GetName 및 GetSex 기능을 각각 호출 해야하는 경우 고급 인터페이스 GetUserInfo를 사용하여 호출 할 수 있습니다.
var getUserInfo = function () {var info = a () + b (); 반품 정보;}예를 들어 처음에 GetName과 GetSex 코드를 함께 작성하지 않은 이유를 물을 것입니다.
var getNameAndSex = function () {return 'svenzeng " +"man ";}대답은 분명합니다. 매점의 요리 요리사는 구운 오리와 양배추를 예약했기 때문에이 두 요리를 같은 냄비에 볶지 않습니다. 그는 오히려 로스트 오리 쌀의 세트 식사를 제공 할 것입니다. 또한 프로그래밍에서는 기능이나 객체가 가능한 한 합리적인 세분성인지 확인해야합니다. 결국, 모든 사람이 로스트 오리를 먹는 것을 좋아하는 것은 아니며 양배추를 먹는 것을 좋아합니다.
외관 모드의 또 다른 장점은 사용자의 실제 구현 세부 정보를 숨길 수 있으며 사용자는 최고 수준의 인터페이스에만 관심이 있다는 것입니다. 예를 들어, 로스트 오리 라이스 세트 식사 이야기에서, 마스터가 로스트 오리를 먼저 먼저 볶거나 양배추를 볶은 양배추를 먼저 볶은지 상관하지 않으며, 오리가 어디에서 자랐는지 신경 쓰지 않습니다.
마지막으로, 나는 우리 모두가 사용한 모양 패턴의 예를 썼습니다.
var stopevent = function (e) {// 블록 이벤트 이벤트 기본 동작 및 기포 동시에 e.StopPropagation (); e.preventDefault ();}외관 패턴의 개념은 마스터하기 쉽고 반드시 JavaScript 코드의 예가 필요하지는 않지만 일부 사람들은 항상 코드에 대해 더 관심을 갖고 이해하기가 더 쉬울 것이라고 생각할 것입니다. 또한 코드 샘플이없는 JavaScript 기사는 전혀 설득력이 없으므로 인터넷에서 삭제해야합니다. 이벤트 리스너의 간단한 예로 시작하겠습니다. 코드가 몇 개의 브라우저에서 실행되기를 원하지 않는 한 이벤트 리스너를 추가하는 것이 쉽지 않다는 것을 모두 알고 있습니다. 다른 브라우저의 코드가 제대로 작동하는지 확인하기 위해 많은 방법을 테스트해야합니다. 이 코드 예제에서는이 방법에 기능 감지를 추가합니다.
function addevent (요소, 유형, func) {if (wind } else if (wind } else {요소 [ 'on'+type] = func; }}간단합니다! 나는 불필요한 코드를 쓸 수없고, 더 나은 코드를 더 나은 코드로 만들 수 있기를 바랍니다. 그러나 그 경우라면 의미가없고 읽고 싶지 않을 것입니다. 그래서 나는 그렇게 생각하지 않습니다. 더 복잡한 것을 보여주고 싶다고 생각합니다. 나는 당신의 코드가 다음과 같이 보일 것이라고 말하고 싶습니다.
var foo = document.getElementById ( 'foo'); foo.style.color = '빨간색'; foo.style.width = '150px'; var bar = document.getElementById ( 'bar'); bar.style.color = '빨간색'; bar.style.width = '150px'; var baz = document.getElementById ( 'baz'); baz.style.color = '빨간색'; baz.style.width = '150px'; var baz = document.getElementById ( 'baz'); baz.style.color = '빨간색'; baz.style.width = '150px';
너무 절름발이! 당신은 각 요소에 대해 똑같은 일을했습니다! 조금 더 쉽게 만들 수 있다고 생각합니다.
함수 setStyle (요소, 속성, 값) {for (var i = 0, length = elements.lenges.lengess.length; i <length; i ++) {document.getElementById (elements [i]). Style [property] = value; }} // 이제 SetStyle ([ 'foo', 'bar', 'baz'], 'color', 'red'); setstyle ([ 'foo', 'bar', 'baz'], 'width', '150px');우리 NB가 깨 졌다고 생각하십니까? 당신은 그것을 잊었습니다! 우리는 JavaScript 프로그래머입니다! 당신은 약간의 뇌를 사용하여 진짜 물건을 얻을 수 있습니까? 어쩌면 우리는 모든 스타일을 한 번만 설정할 수 있습니다. 이것을 확인하십시오 :
함수 setStyles (요소, 스타일) {for (var i = 0, length = elements.lenges.length; i <length; i ++) {var element = document.getElementById (요소 [i]); for (스타일의 var 속성) {element.style [property] = Styles [property]; }}} // 이제 당신은 다음과 같은 방식으로 쓸 필요가 있습니다 : setstyles ([ 'foo', 'bar', 'baz'], {color : 'red', 너비 : '150px'});같은 스타일을 설정하려는 많은 요소가 있다면이 코드는 실제로 많은 시간을 절약 할 수 있습니다.
외관 모드의 장점 :
모양 모드를 사용하는 목적은 프로그래머가 콤보 코드를 한 번 더 쉽게 작성한 다음 반복적으로 사용하여 시간과 노력을 절약하는 데 도움이됩니다. 복잡한 문제에 대한 단순화 된 인터페이스를 제공하십시오.
외관 방법은 개발자에게 편리합니다. BIN은 상대적으로 높은 수준의 기능을 제공하여 외부 코드에 대한 의존성을 줄이며 응용 프로그램 시스템 개발에 약간의 유연성을 추가했습니다. 모양 모드를 사용하면 기본 서브 시스템에 대한 단단한 커플 링을 피할 수 있습니다. 이런 식으로 클라이언트 코드에 영향을 미치지 않고 시스템을 수정할 수 있습니다.
외관 모드의 단점 :
때로는 외관 요소가 불필요한 추가 부담을 가져올 수 있습니다. 일부 루틴을 구현하기 전에 실용성을 신중하게 고려해야합니다. 때로는 복잡한 외관 함수와 비교할 때 조성 기능은 힘 측면에서 더 매력적입니다. 외관 기능은 종종 필요하지 않은 작업을 수행 할 수 있기 때문입니다.
간단한 개인 웹 사이트 나 소수의 마케팅 페이지의 경우 툴팁 및 팝업과 같은 약간의 향상된 동작을 위해이 JavaScript 라이브러리를 가져 오는 것이 현명하지 않을 수 있습니다. 현재 이런 것들로 가득 찬 라이브러리 대신 몇 가지 간단한 외관 요소 만 사용하는 것을 고려하십시오.
외관 기능은 다양한 복잡한 작업을 수행하기위한 간단한 인터페이스를 제공하여 코드를보다 쉽게 유지하고 이해할 수 있도록합니다. 또한 하위 시스템과 클라이언트 코드 간의 커플 링을 약화시킬 수 있습니다. 종종 함께 나타나는 일반적인 기능을 결합하십시오. 이 모드는 DOM 스크립팅에서 매우 일반적으로 사용되며 일관되지 않은 브라우저 인터페이스가 필요합니다.