Welche Modi verwendet Vue?

Die von vue verwendeten Entwurfsmuster: 1. Der Singleton-Modus stellt sicher, dass eine Klasse nur ein Instanzobjekt hat und stellt einen globalen Zugriffspunkt für den Zugriff bereit. 2. Das Factory-Muster ist ein Muster, das zum Erstellen von Objekten verwendet wird. Es ist nicht erforderlich, die spezifische Logik des Konstruktors offenzulegen, sondern die Logik in jeder Funktion zu kapseln. 3. Der Decorator-Modus ermöglicht das Hinzufügen neuer Funktionen zu vorhandenen Funktionen, ohne deren Struktur zu ändern. 4. Das Strategiemuster besteht darin, eine Reihe von Algorithmen zu definieren, sie einzeln zu kapseln und sie austauschbar zu machen. 5. Publish-Subscriber-Modell.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue3-Version, DELL G3-Computer.

Was ist ein Entwurfsmuster:

Das Prinzip des Entwurfsmusters besteht darin, die Änderungen im Programm herauszufinden und die Änderungen zu kapseln, um eine effiziente Wiederverwendbarkeit zu erreichen. Der Kern ist die Absicht, nicht die Struktur. Entwurfsmuster können uns dabei helfen, die Wiederverwendbarkeit, Skalierbarkeit, Wartbarkeit und Flexibilität von Code zu verbessern. Unser oberstes Ziel bei der Verwendung von Entwurfsmustern ist es, eine hohe Clusterbildung und eine geringe Kopplung des Codes zu erreichen. Haben Sie jemals über die Frage nachgedacht, wie man Code robuster machen kann? Tatsächlich liegt der Kern darin, Veränderungen und Unveränderlichkeit zu erfassen. Stellen Sie sicher, dass die sich ändernden Teile flexibler und die unveränderten Teile stabiler sind. Durch die Verwendung von Entwurfsmustern können wir dieses Ziel erreichen.

Lassen Sie uns die Designmuster zusammenfassen, die häufig in Vue-Projekten oder -Arbeiten verwendet werden.

Singleton-Muster

Singleton-Muster: Stellen Sie sicher, dass eine Klasse nur ein Instanzobjekt hat, und stellen Sie einen globalen Zugriffspunkt für den Zugriff bereit.

Vorteile: Anwendbar auf ein einzelnes Objekt, generiert nur eine Objektinstanz, wodurch häufiges Erstellen und Zerstören von Instanzen vermieden und die Speichernutzung reduziert wird.

Nachteile: Gilt nicht für dynamisch erweiterte Objekte.

Szenario: Floating-Login-Fenster, Axios-Instanz in Vue (wir führen das Abfangen von Anfragen und Antworten auf Axios durch, rufen die gekapselten Axios mehrmals auf, legen sie aber nur einmal fest, der Export der gekapselten Axios ist ein Singleton), globaler Zustandsverwaltungsspeicher , Thread-Pool, globaler Cache

  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()

Fabrikmuster

Fabrikmuster: Das Fabrikmuster ist das am häufigsten zum Erstellen von Objekten verwendete Entwurfsmuster. Es ist nicht notwendig, die spezifische Logik des Konstruktors offenzulegen, aber um die Logik in jeder Funktion zu kapseln, kann dieser Konstruktor als Fabrik betrachtet werden.

Szenario: Wo es Konstruktoren gibt, wird viel Konstruktorcode geschrieben und viele neue Operatoren aufgerufen.

Vorteile: Durch das Factory-Muster können wir schnell eine große Anzahl ähnlicher Objekte erstellen, ohne Code zu duplizieren.

Nachteile: Die vom Factory-Muster erstellten Objekte gehören zu Object und der Objekttyp kann nicht unterschieden werden. Aus diesem Grund wird das Factory-Muster nicht häufig verwendet.

 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()

Decorator-Modus

Decorator-Modus (Aspektprogrammierung AOP): Fügen Sie dem Objekt während der Ausführung des Programms dynamisch Verantwortlichkeiten hinzu, wenn der Funktionskörper direkt ist geändert, dann verstößt es gegen das „Offen- und Geschlossen-Prinzip“ und auch gegen unser „Prinzip der Einzelverantwortung“, einfach gesagt, es ermöglicht das Hinzufügen neuer Funktionen zu bestehenden Funktionen, ohne seine Struktur zu ändern.

Szenario: Formularüberprüfung und Formularübermittlung in Vue verwenden dieses Modell und folgen dem geschlossenen und offenen Prinzip.

 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('切入后代码')
  })()

Strategiemuster

Strategiemuster: Es geht darum, eine Reihe von Algorithmen zu definieren, sie einzeln zu kapseln und austauschbar zu machen.

 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
  }

kann auch in der Vue-Formularvalidierung verwendet werden

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

import * as validateForm from './validate';
export const gene = (key, msg) => {
  return (r, v, c) => {
    if (validateForm[key](v)) {
      c();
    } else {
      c(new Error(msg));
    }
  };
};

// 这样看着是不是很清晰明了
import {gene} from '@/utils/formValidateGene';
rules: {
     account: [{ required: true, validator: gene('loginUsername', '请输入合适的账号'), trigger: ['blur', 'change'] }]
 }

Veröffentlichungsabonnentenmodus

Veröffentlichungsabonnentenmodus auch Beobachtermodus genannt, Veröffentlichungsabonnentenmodus a -viele Abhängigkeit, wenn die Wenn sich der Zustand eines Objekts ändert, müssen alle davon abhängigen Objekte benachrichtigt werden. Das Beobachtermuster ist eine Eins-zu-Eins-Abhängigkeitsbeziehung. „Handschriftbeobachtermodus“

Das obige ist der detaillierte Inhalt vonWelche Modi verwendet Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!