vue는 어떤 모드를 사용하나요?

vue에서 사용하는 디자인 패턴: 1. 싱글톤 모드는 클래스에 인스턴스 객체가 하나만 있고 액세스할 수 있는 전역 액세스 지점을 제공합니다. 2. 팩토리 패턴은 객체를 생성하는 데 사용되는 패턴입니다. 생성자의 특정 로직을 노출할 필요는 없지만 각 함수에 로직을 캡슐화해야 합니다. 3. 데코레이터 모드를 사용하면 구조를 변경하지 않고도 기존 기능에 새로운 기능을 추가할 수 있습니다. 4. 전략 패턴은 일련의 알고리즘을 정의하고 이를 하나씩 캡슐화하여 상호 교환 가능하게 만드는 것입니다. 5. 게시-구독자 모델.

이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, DELL G3 컴퓨터.

디자인 패턴이란:

디자인 패턴의 원리는 프로그램의 변경 사항을 찾아내고 변경 사항을 캡슐화하여 효율적인 재사용을 달성하는 것입니다. 핵심은 구조가 아니라 의도입니다. 디자인 패턴은 코드의 재사용성, 확장성, 유지 관리성 및 유연성을 향상시키는 데 도움이 될 수 있습니다. 디자인 패턴을 사용하는 궁극적인 목표는 코드의 높은 클러스터링과 낮은 결합도를 달성하는 것입니다. 코드를 더욱 강력하게 만드는 방법에 대해 생각해 본 적이 있습니까? 사실 핵심은 변화와 불변성을 파악하는 데 있습니다. 변경되는 부분은 더 유연하고 변경되지 않은 부분은 더 안정적인지 확인하고 디자인 패턴을 사용하면 이 목표를 달성할 수 있습니다.

Vue 프로젝트나 작업에서 흔히 사용되는 디자인 패턴을 정리해보겠습니다.

Singleton Pattern

Singleton Pattern: 클래스에 인스턴스 개체가 하나만 있는지 확인하고 액세스할 수 있는 전역 액세스 지점을 제공합니다.

장점: 단일 개체에 적용 가능하며 하나의 개체 인스턴스만 생성하므로 인스턴스의 빈번한 생성 및 소멸을 피하고 메모리 사용량이 줄어듭니다.

단점: 동적으로 확장된 개체에는 적용할 수 없습니다.

Scenario: 로그인 플로팅 창, Vue의 axios 인스턴스(Axios에서 요청 차단 및 응답 차단을 수행하고, 캡슐화된 Axios를 여러 번 호출하지만 한 번만 설정하고, 캡슐화된 Axios 내보내기는 싱글톤입니다), 글로벌 상태 관리 스토어 , 스레드 풀, 글로벌 캐시

  function Person (name, age) {
    this.name = name
    this.age = age
    this.info = function () {
      console.log(`我的名字叫${this.name}, 我今年${this.age}了`)
    }
  }
  Person.getInstance = function (name, age) {
    if (!this.instance) {
      this.instance = new Person(name, age)
    }
    console.log(this.instance)
    return this.instance
  }
  let b1 = Person.getInstance('单例1', 18)
  let b2 = Person.getInstance('单例2', 18)
  b1.info()
  b2.info()

팩토리 패턴

팩토리 패턴: 팩토리 패턴은 객체를 만드는 데 사용되는 가장 일반적인 디자인 패턴입니다. 생성자의 특정 논리를 노출할 필요는 없지만 각 함수의 논리를 캡슐화하면 이 생성자를 팩토리로 간주할 수 있습니다.

Scenario: 생성자가 있는 곳에는 많은 생성자 코드가 작성되고 많은 새로운 연산자가 호출됩니다.

장점: 팩토리 패턴을 통해 코드를 복제하지 않고도 유사한 객체를 대량으로 빠르게 생성할 수 있습니다.

단점: 팩토리 패턴으로 생성된 객체는 Object에 속하며, 객체 유형을 구분할 수 없기 때문에 널리 사용되지 않습니다.

 function Factory (name, age) {
   this.name = name;
   this.age = age;
   // 或者
   // let obj = {}
   // obj.name = name
   // obj.age = age
   // return obj
 }
 Factory.prototype.say = function () {
   console.log(`我的名字叫${this.name}, 我今年${this.age}了`)
 }
 let zs = new Factory('张三', 18);
 let ls = new Factory('李四', 20);
 zs.say()
 ls.say()

데코레이터 모드

데코레이터 모드(Aspect 프로그래밍 AOP): 객체 자체를 변경하지 않는다는 점을 토대로, 함수 본문이 직접적으로 실행되는 경우 프로그램 실행 중에 객체에 동적으로 책임을 추가합니다. 수정된 경우 '개방 및 폐쇄 원칙'을 위반하고 '단일 책임 원칙'도 위반합니다. 간단히 말해서 구조를 변경하지 않고도 기존 기능에 새로운 기능을 추가할 수 있습니다.

Scenario: Vue에서 양식 확인 및 양식 제출 이 모델을 사용하고 비공개 및 공개 원칙을 따르세요.

 function before (fn, callback) {
    let _this = this;
    return function () {
      callback.apply(this, arguments)
      return fn.bind(this, arguments)
    }
  }

  function after (fn, callback) {
    let _this = this 
    return function () {
      let res = fn.apply(this, arguments)
      callback.apply(this, arguments)
      return res
    }
  }
  // before和after是两个高阶函数，让我们一起回忆一下什么是高阶函数？
  // 还知道call，apply,bind的区别吗
  let getName = function getName () {
    // 加入这是你同事写的烂代码，看不下去的那种，那么别动他的代码
    console.log('这是getName函数')
  }

  before(getName, function () {
    // 这个就是你要写的新逻辑
    console.log('切入前代码')
  })()

  after(getName, function () {
    // 这个也是你要写的新逻辑
    console.log('切入后代码')
  })()

Strategy Pattern

Strategy Pattern: 일련의 알고리즘을 정의하고 하나씩 캡슐화하여 상호 교환 가능하게 만드는 것입니다. VUE 양식 검증에도 사용할 수 있습니다. 객체의 상태가 변경되면 이에 의존하는 모든 객체에 알려야 합니다.

은 일대일 종속 관계입니다.

손글씨 관찰자 모드

 let strategy = {
    'A': function (bonus) {
      return bonus * 4
    },
    'B': function (bonus) {
      return bonus * 3
    }
  }

  function fn (level, bonus) {
    return strategy[level](bonus)
  }

  let result = fn('A', 4000)
  console.log(result, 'result')
  // 策略模式提供了开放-封闭原则，将算法或者方法封装在一个类中，使它们易于切换，易于替换。

  function func (a, b) {
    let f = function f() {
      return a + b
    }
    return f
  }

로그인 후 복사

// 这里可以将所有的表单验证正则函数写在这里
export const loginUsername = (str) => {
  return /^[a-zA-Z0-9_]{3,20}$/.test(str);
};