Comment développer une bibliothèque personnalisée

Cette fois je vais vous montrer comment développer une bibliothèque personnalisée et quelles sont les précautions pour développer une bibliothèque personnalisée Voici un cas pratique, jetons un oeil.

Bien sûr, cette bibliothèque en est encore à ses balbutiements et l'implémentation de la fonction est relativement simple. Elle est publiée ici. Tout le monde est invité à l'utiliser comme base pour l'améliorer. Adresse du projet : Hoz.js, tout le monde est invité à démarrer, à créer et à soulever des problèmes.

Fonctionnalités

• Syntaxe du modèle déclaratif

• Apprenez des idées de redux, de flux, etc. et introduisez la gestion de l'état

• Présentation du dom virtuel, algorithme de comparaison pour améliorer les performances

Syntaxe déclarative

  <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: '后来的我们'
})

Il s'agit d'un application hoz, restituant de manière déclarative les données dans le système DOM via une syntaxe de modèle concise.
Et tout est réactif.

Apprenez des idées de redux, de flux, etc., et introduisez la gestion d'état

Apprenez des idées de redux en termes de gestion d'état et réalisez la gestion du flux de données unidirectionnel .
Définit principalement quatre concepts : état, action, changeStore et expédition.

state

stocke les données

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

changeStore

est équivalent au réducteur dans Redux, stockant toutes les opérations sur les données

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

Recevez l'action, exécutez la méthode correspondante et modifiez les données dans l'état. Différent de redux, redux rétablit un nouvel état et exploite directement l'état actuel, car les données dans l'état ont été suivies via la méthode Object.defineProperty, qui sera discutée plus tard.

action et répartition

Lorsque nous voulons modifier les données, nous devons modifier l'état dans le changeStore en soumettant l'action

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

C'est la stratégie de gestion de l'état de hoz

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

Avantages

À mesure que les applications deviennent de plus en plus complexes et que la quantité de données augmente, il est très difficile de gérer le changement de statut si les données ne sont pas gérées en conséquence. Il est difficile d’observer quand et pour quelle raison l’état change.

1. Cela signifie que toutes les données de l'application suivent le même cycle de vie, ce qui rend l'application plus prévisible et plus facile à comprendre.

2. Nous pouvons voir tous les changements qui peuvent survenir dans l'état à partir du changeStore

3. La seule façon de modifier l'état est de soumettre un action vers le changeStore, donc chaque modification dans les données passera par un seul endroit, ce qui facilite notre débogage et d'autres opérations.

Introduction de l'algorithme virtuel dom et diff

Comme nous le savons tous, en raison de la grande taille des éléments dom et des opérations dom, il est facile pour provoquer un réarrangement des pages, les performances du dom fonctionnant directement sont très, très mauvaises.
So hoz a introduit l'algorithme du dom virtuel et utilisé des objets JavaScript natifs pour mapper les objets dom, car le fonctionnement des objets JavaScript natifs est plus rapide et plus simple.
Comment cartographier ? Par exemple,

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

est simplement un objet JavaScript, représentant un élément DOM.

Je construis un arbre dom virtuel basé sur l'élément pointé par l'identifiant passé dans le constructeur hoz lorsque les données changent, le dom n'est pas directement manipulé, mais. virtual Effectuer des opérations et des modifications sur l'arborescence dom. Ensuite, l'algorithme diff est utilisé pour comparer l'ancienne et la nouvelle arborescence DOM virtuelle, et le DOM réel est modifié dans la plus petite unité.

Principe de réactivité des données

Comment hoz atteint-il la réactivité des données ? Un mode publication/abonnement est principalement implémenté ici en utilisant la méthode Object.defineProperty. Les propriétés getter et setter des données dans l'état sont modifiées via Object.defineProperty Lors du premier rendu, les abonnés correspondants sont ajoutés à un sujet. objet dans le getter. Go, lorsque les données changent, appelez la méthode notify de l'objet topic correspondant aux données dans le setter pour publier un message pour informer chaque abonné de la mise à jour.

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

J'espère que tout le monde pourra s'en servir comme base pour l'améliorer ensemble. Adresse du projet : Hoz.js, tout le monde est invité à démarrer, à créer et à soulever des problèmes.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Front-end, HTT, ordinateur et réseau

Explication détaillée des cas d'utilisation du rendu anti-aliasing des polices webkit-font-smoothing

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!