전통적인 객체 지향 언어에서 객체에 함수를 추가하면 상속을 사용하지만 상속 방법은 문제가 발생합니다. 부모 클래스가 변경되면 모든 서브 클래스가 그에 따라 변경됩니다.
JavaScript 스크립트가 실행될 때 객체 (또는 프로토 타입)에 동작을 추가하면 해당 객체의 모든 인스턴스에 영향을 미칩니다.
데코레이터는 상속을 구현하는 대안으로 과부하 된 방법의 형태를 통해 새로운 기능을 추가합니다. 이 패턴은 데코레이터 전후에 특정 목적을 달성하기 전후에 자체 동작을 추가 할 수 있습니다.
데코레이터 패턴은 기존 기능에 더 많은 기능을 동적으로 추가하는 방법입니다. 장식 할 각 함수는 별도의 기능으로 배치 된 다음이 기능을 사용하여 기존 기능 객체를 랩핑 할 예정입니다. 따라서 특수 행동을 수행 해야하는 경우, 호출 코드는 선택적이고 순차적으로 장식 기능을 사용하여 필요에 따라 물체를 랩핑 할 수 있습니다. 장점은 클래스 (함수)의 핵심 책임을 장식 기능과 구별한다는 것입니다.
도구 기능을 다음과 같이 정의 할 수 있습니다.
function.prototype.before = function (이전의 fn) {var self = this; // 원래 함수의 참조 저장 return function () {// 새 함수와 원래 함수가 포함 된 프록시 함수를 반환합니다. // 새 기능을 실행하고 이것이 납치 된 반환 self.Apply (this, arguments)가 있는지 확인하십시오. // 원래 함수를 실행하고 원래 함수의 실행 결과를 반환하고 이것이 납치되지 않는지 확인}}; function.prototype.after = function (Afterfn) {var self = this; return function () {var ret = self.Apply (this, arguments); 후 fn.apply (이것, 인수); 반품 반환; }};여기에있는 매개 변수는 여기에서 원래 함수에 대한 새로운 함수를 확장하기위한 새로운 기능 (장식 추가)입니다. 그들 사이의 유일한 차이점은 다른 실행 순서입니다. 기능의 프로토 타입을 오염시키지 않으려면 다음 방법을 사용할 수 있습니다.
var prever = function (fn, everencefn) {return function () {preverfn.apply (this, arguments); fn.apply (this, arguments)를 반환합니다. }}; var after = function (fn, afterfn) {return function () {var ret = fn.apply (this, arguments); 후 fn.apply (이것, 인수); Ret Ret; }};예 : CSRF 공격을 방지하기 위해 HTTP 요청에 매개 변수를 넣습니다.
var ajax = function (type, url, param) {console.log (param); // ajax 요청 코드를 조금 ...}; var vereforefn = function (type, url, param) {param.token = 'token';}; ajax = ajax.before (everyfn); ajax ( 'get', 'http : //.com/userinfo', {이름 : 'sufa'}; '토큰'}원래 함수의 매개 변수를 직접 수정하는 대신 토큰 매개 변수를 Ajax 함수로 동적으로 장식함으로써 Ajax 함수는 여전히 순수한 기능이며 재사용 성을 향상 시키며 수정없이 다른 프로젝트에서 직접 사용할 수 있습니다.
예 : 양식 검증 (제출 된 코드에서 확인 입력을 분리 한 다음 제출 된 양식 입력 함수를 동적으로 장식합니다.이 방법으로는 검증 입력 부분을 플러그인 양식으로 작성하여 다른 프로젝트에서 사용 할 수 있습니다).
// 입력 함수 확인 var validata = function () {if (username.value === '') {alert ( 'username이 비어있을 수 없음'); 거짓을 반환합니다. } if (password.value === '') {alert ( '암호가 비어있을 수 없음'); 거짓을 반환합니다. }}; // 양식 제출 함수 var formsubmit = function () {var param = {username : username.value, password : password.value}; ajax ( 'http://xxx.com/login' ,param);}; formsubmit = formsubmit.before (validata); subbltbtn.onclick = function () {formsubmit ();};참고 문헌 : "JavaScript Pattern" "JavaScript 디자인 패턴 및 개발 실습"
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.