So entwickeln Sie eine benutzerdefinierte Bibliothek

Dieses Mal zeige ich Ihnen, wie Sie eine benutzerdefinierte Bibliothek entwickeln und welche Vorsichtsmaßnahmen für die Entwicklung einer benutzerdefinierten Bibliothek gelten. Hier ist ein praktischer Fall, werfen wir einen Blick darauf.

Natürlich steckt diese Bibliothek noch in den Kinderschuhen und die Funktionsimplementierung ist hier veröffentlicht. Jeder kann sie gerne als Grundlage verwenden. Projektadresse: Hoz.js, jeder ist willkommen, zu starten, zu forken und Probleme anzusprechen.

Funktionen

• Deklarative Vorlagensyntax

• Lernen Sie von den Ideen von Redux, Flux usw. und führen Sie die Zustandsverwaltung ein

• Einführung eines virtuellen Dom- und Diff-Algorithmus zur Verbesserung der Leistung

Deklarative Syntax

  <p id = "app">
      <p>
          <img src="{{moveImage}}" />
          <p>{{moveName}}</p>
      </p>
  </p>

var hoz = new Hoz('app', state, changeStore)
var state = {
  moveName: '',
  moveImage: ''
}
function changeStore (state, action) {
  switch (action.type) {
    case 'SET_NAME': {
      state.moveName = action.data
      break
    }
    case 'SET_IMAGE': {
      state.moveImage = action.data
      break
    }
  }
}
hoz.store.dispatch({
  type: 'SET_NAME',
  data: '后来的我们'
})

Dies ist eine Hoz-Anwendung, durch a Die einfache Vorlagensyntax rendert Daten deklarativ in das DOM-System.
Und alles reagiert.

Lernen Sie von den Ideen von Redux, Flux usw. und führen Sie die Zustandsverwaltung ein.

Lernen Sie von den Ideen von Redux in Bezug auf die Zustandsverwaltung und realisieren Sie die Verwaltung des unidirektionalen Datenflusses .
Definiert hauptsächlich vier Konzepte: Status, Aktion, ChangeStore und Versand.

state

speichert Daten

var state = {
  moveName: '',
  moveImage: ''
}

changeStore

entspricht dem Reduzierer in Redux und speichert alle Operationen an Daten

function changeStore (state, action) {
  switch (action.type) {
    case 'SET_NAME': {
      state.moveName = action.data
      break
    }
    case 'SET_IMAGE': {
      state.moveImage = action.data
      break
    }
  }
}

Empfangen Führen Sie die Aktion aus, führen Sie die entsprechende Methode aus und ändern Sie die Daten im Status. Im Gegensatz zu Redux setzt Redux einen neuen Status zurück und betreibt den aktuellen Status direkt, da die Daten im Status über die Object.defineProperty-Methode verfolgt wurden, die später erläutert wird.

Aktion und Versand

Wenn wir die Daten ändern möchten, müssen wir den Status im ChangeStore ändern, indem wir die Aktion senden

hoz.store.dispatch({
  type: 'SET_NAME',
  data: '后来的我们'
})

Dies ist die Strategie zur Verwaltung des Hoz-Status

 view -> dispatch -> action -> changeStore -> state -> view

Vorteile

Da Anwendungen immer komplexer werden und die Datenmenge zunimmt, ist es ohne entsprechendes Datenmanagement sehr schwierig, den sich ändernden Status zu bewältigen. Es ist schwer zu beobachten, wann und aus welchem ​​Grund sich der Zustand ändert.

1. Das bedeutet, dass alle Daten in der Anwendung demselben Lebenszyklus folgen, wodurch die Anwendung vorhersehbarer und leichter verständlich wird.

2. Wir können alle Änderungen sehen, die am Status im ChangeStore vorgenommen werden können.

3. Die einzige Möglichkeit, den Status zu ändern, besteht darin, eine einzureichen Aktion an den ChangeStore, sodass jede Änderung an den Daten über einen Ort fließt, was unser Debuggen und andere Vorgänge erleichtert.

Einführung des virtuellen Dom- und Diff-Algorithmus

Wie wir alle wissen, ist es aufgrund der großen Größe von Dom-Elementen und Dom-Operationen einfach Um eine Neuanordnung der Seite zu verursachen, ist die Leistung des direkt betriebenen Doms sehr, sehr schlecht.
Also führte hoz den virtuellen Dom-Algorithmus ein und verwendete native JavaScript-Objekte , um Dom-Objekte abzubilden, da die Bedienung nativer JavaScript-Objekte schneller und einfacher ist.
Wie wird eine Karte erstellt? Beispielsweise ist

class VNode {
  constructor (sel, tagName, id, className, el, children, data, text, key) {
    this.tagName = tagName // p
    this.sel = sel // p#id.class
    this.id = id // id
    this.className = className // []
    this.children = children // []
    this.el = el // node
    this.data = data // {}
    this.key = key
    this.text = text
  }
}
export default VNode

nur ein JavaScript-Objekt, das ein DOM-Element darstellt.

Ich erstelle einen virtuellen Dom-Baum basierend auf dem Element, auf das die im hoz-Konstruktor als Wurzelelement übergebene ID zeigt. Wenn sich die Daten ändern, wird der Dom nicht direkt manipuliert, sondern virtuell Führen Sie Operationen und Änderungen am Dom-Baum durch. Anschließend wird der Diff-Algorithmus verwendet, um den alten und den neuen virtuellen DOM-Baum zu vergleichen und das reale DOM in der kleinsten Einheit zu ändern.

Prinzip der Datenreaktivität

Wie erreicht hoz Datenreaktivität? Ein Publish/Subscribe-Modus wird hier hauptsächlich durch die Verwendung der Object.defineProperty-Methode implementiert. Die Getter- und Setter-Eigenschaften der Daten im Status werden durch Object.defineProperty geändert. Beim ersten Rendern werden die entsprechenden Abonnenten zu einem Thema hinzugefügt Wenn sich die Daten ändern, rufen Sie die Benachrichtigungsmethode des Themenobjekts auf, das den Daten im Setter entspricht, um eine Nachricht zu veröffentlichen, um jeden Abonnenten über die Aktualisierung zu informieren.

state ->   data ->   publisher      一对多的关系
                        |
                       Dep
                        |
view -> {{data}} -> subscribers

Ich hoffe, dass jeder dies als Grundlage nutzen kann, um es gemeinsam zu verbessern. Projektadresse: Hoz.js, jeder ist willkommen, zu starten, zu forken und Probleme anzusprechen.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Frontend, HTT, Computer und Netzwerk

Detaillierte Erläuterung der Anwendungsfälle für das Anti-Aliasing-Rendering von Schriftarten mit Webkit-Schriftglättung

Das obige ist der detaillierte Inhalt vonSo entwickeln Sie eine benutzerdefinierte Bibliothek. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!