자바스크립트 디자인 패턴에 대한 예비 연구_자바스크립트 기술

목적: 많은 디자인 패턴이 있습니다. 학습한 다양한 디자인 패턴의 장단점을 기록하여 나중에 참고하세요.

서문: 반년 전에 Elevation을 읽었을 때 디자인 패턴에 대한 장을 봤을 때 혼란스러웠습니다. 이해하지 못해서가 아니라 왜 그런 내용인지 이해가 되지 않았기 때문입니다. 객체를 생성하는 것만으로도 너무 번거롭습니다. 최근에 첫 번째 소규모 프로젝트를 완료하고 나서야 코드 양이 늘어날 때 적절한 사양과 제한이 없으면 얼마나 비참한 일이 될지 깨달았습니다. 그래서 다시 Elevation으로 돌아가 제가 배운 몇 가지 간단한 디자인 패턴의 장단점을 요약했습니다.

텍스트: 이 글에서는 총 7가지 디자인 패턴과 그 적용 시나리오, 장단점을 소개합니다.

1. 공장모드

함수를 직접 사용하여 객체를 캡슐화하고 객체를 반환 값으로 사용합니다.

function person (name,age) {
  var obj=new Object();
  obj.name=name;
  obj.age=age;
  obj.sayName=function () {
    alert(this.name);
  };
  return obj;
}
var me=person("Su",25); 

단점: 객체 인식 문제. 생성된 모든 객체는 객체의 인스턴스이므로 구별하기 어렵습니다.

2. 생성자 패턴

function Person (name,age) {
  this.name=name;
  this.age=age;
  this.sayName=function () {
    alert(this.name);
  };
}
var me=new Person("Su",25); 

장점: 생성자 패턴을 사용하면 인스턴스를 특정 유형으로 표시할 수 있습니다.

단점: 생성된 객체의 메소드는 모두 비공개입니다. 단지 공개 메소드를 생성하려는 경우 불필요한 성능 낭비가 발생합니다.

3. 프로토타입 모드

프로토타입 체인 상속 활용

function Person () {}
Person.prototype.name="Su";
Person.prototype.sayName=function () {
alert(this.name);}
var me =new Person(); 

단점: 모든 속성과 메서드는 인스턴스에서 공유됩니다. 속성과 메서드에 참조 유형 값이 포함된 경우 한 인스턴스의 속성과 메서드를 수정하면 다른 모든 인스턴스에 영향을 미칩니다.

4. 프로토타입 생성자 패턴

개인 속성과 메서드는 생성자를 사용하여 생성되고, 공용 속성과 메서드는 프로토타입을 사용하여 상속됩니다. 두 방법의 장점을 결합합니다.

function Person (name,age) {
  this.name=name;
  this.age=age;
}
Person.prototype={
  constructor:Person,
  sayName:function () {
      alert(this.name);
  }
}
var me=new Person("Su",25); 

단점: 참조 유형 값의 프로토타입 상속에 주의하세요.

ps: 위 그림의 코드는 Person 생성자의 프로토타입 객체를 다시 작성하고 프로토타입 객체 포인터가 객체를 가리키도록 하므로 생성자 속성이 Person 대신 Object를 가리키므로 명시적으로 Person으로 설정해야 합니다.

5. 다이나믹 프로토타입 모드

기본적으로 이는 여전히 생성자 함수입니다. 프로토타입 객체가 존재하지 않는 경우에만 지정된 메소드를 추가합니다.

function Person (name,age) {
  this.name=name;
  this.age=age;
  if (typeof this.sayName!="function") {
    Person.prototype.sayName=function () {
      alert(this.name);
    }
  }
}
var me =new Person("Su",25); 

단점: 프로토타입 객체는 객체 리터럴을 사용하여 재정의할 수 없습니다. 이렇게 하면 인스턴스 포인터가 새 프로토타입 객체를 가리키게 되기 때문입니다. 즉, 위 그림에서 프로토타입 객체에 추가된 sayName 메소드는 유효하지 않게 됩니다.

6. 기생 생성자 패턴

호출 시에는 new 연산자를 사용하세요. 그 외에는 공장 모드와 별 차이가 없습니다. 전문가님들의 조언을 구합니다.

function person (name,age) {
  var obj=new Object();
  obj.name=name;
  obj.age=age;
  obj.sayName=function () {
    alert(this.name);
  };
  return obj;
}
var me=new person("Su",25); //这里使用new操作符 

7. 안전한 생성자 패턴

공개 속성이 없습니다. 이 기능을 비활성화하고 데이터 호출에 필요한 API만 노출하세요. 보안 요구 사항이 있는 영역에 적합합니다.

function Person (name) {
 var o=new Object();
 o.sayName=function () {
 alert(name);  
 }  
 return o;
}
var me=Person("Su"); 

위 코드에서 볼 수 있듯이 내부 이름 속성은 sayName 메소드를 통해서만 접근할 수 있습니다.

이 글에서는 7가지 디자인 패턴을 소개하고 각각의 장점과 단점을 소개하여 js 디자인 패턴 관련 지식을 익히는 데 도움이 되기를 바랍니다.