JavaScript 데코레이터 패턴

전통적인 객체 지향 언어에서 상속은 객체에 기능을 추가하는 데 자주 사용되지만 상속은 문제를 일으킬 수 있습니다. 즉, 상위 클래스가 변경되면 모든 하위 클래스도 그에 따라 변경됩니다.

JavaScript 스크립트가 실행될 때 객체(또는 해당 프로토타입)에 동작을 추가하면 객체의 모든 인스턴스에 영향을 미칩니다.

Decorator는 이에 대한 대안을 구현합니다. 오버로드된 메서드 형태로 새로운 기능을 추가하는 상속. 이 패턴은 특정 목적을 달성하기 위해 데코레이터 앞이나 뒤에 고유한 동작을 추가할 수 있습니다.

데코레이터 패턴은 기존 함수에 더 많은 기능을 동적으로 추가하는 방식으로, 데코레이팅할 함수를 각각 별도의 함수에 넣은 후, 이 함수를 사용하여 데코레이션할 함수를 래핑하는 방식이 있습니다. 함수 개체이므로 특별한 동작을 수행해야 하는 경우 호출 코드는 필요에 따라 장식 함수를 사용하여 개체를 선택적이고 순차적으로 래핑할 수 있습니다. 장점은 클래스(기능)의 핵심 책임과 데코레이션 기능이 분리되어 있다는 점입니다.

다음과 같이 도구 기능을 정의할 수 있습니다.

Function.prototype.before = function (beforeFn) {
  var self = this; //保存原函数的引用
  return function () { //返回包含了新函数和原函数的代理函数
    beforeFn.apply(this,arguments); //执行新函数,且保证this不被劫持
    return self.apply(this,arguments); //执行原函数,并返回原函数的执行结果,并保证this不被劫持
  }
};
Function.prototype.after = function (afterFn) {
  var self = this;
  return function () {
    var ret = self.apply(this,arguments);
    afterFn.apply(this,arguments);
    return ret;
  }
};

여기서 beforeFn 및 afterFn 매개변수는 새 기능을 원래 기능에 확장하는 새로운 기능(장식 추가)입니다. 실행 순서입니다. 함수 프로토타입을 오염시키지 않으려면 다음 방법을 사용할 수 있습니다.

var before = function (fn, beforeFn) {
  return function () {
    beforeFn.apply(this,arguments);
    return fn.apply(this,arguments);
  }
};
var after = function (fn, afterFn) {
  return function () {
    var ret = fn.apply(this,arguments);
    afterFn.apply(this,arguments);
    return ret;
  }
};

예: CSRF 공격을 방지하기 위해 HTTP 요청에 매개변수를 가져옵니다

var ajax = function (type, url, param) {
  console.log(param); //发送ajax请求代码略...
};
var beforeFn = function (type, url, param) {
  param.Token = 'Token';
};
ajax = ajax.before(beforeFn);
ajax('get','http://...com/userinfo',{name:'SuFa'});
//{ name: 'SuFa', Token: 'Token' }

Ajax 함수를 제공함으로써 원래 함수에서 매개변수를 직접 수정하는 대신 토큰 매개변수를 동적으로 장식함으로써 ajax 함수가 여전히 순수한 함수임을 보장하고 수정 없이 다른 함수에서 직접 얻을 수 있습니다. 프로젝트에서.

예: 폼 검증(검증 입력과 폼 제출 코드를 분리한 후 폼이 제출되기 전에 검증 입력 기능을 동적으로 장식합니다. 이런 식으로 검증 입력 부분을 넣을 수 있습니다. 플러그인 형태로 만들어지며 다양한 프로젝트에서 사용됩니다)

//验证输入函数
var validata = function () {
  if(username.value === ''){
    alert('用户名不能为空');
    return false;
  }
  if(password.value === ''){
    alert('密码不能为空');
    return false;
  }
};
//表单提交函数
var formSubmit = function () {
  var param = {
    username: username.value,
    password: password.value
  };
  ajax('http://xxx.com/login',param);
};
 
formSubmit = formSubmit.before(validata);
submitBtn.onclick = function(){
  formSubmit();
};

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바라며, 또한 모두가 PHP를 지원해 주시길 바랍니다. 중국사이트.

JavaScript 데코레이터 패턴과 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!