Comment analyser la logique sous-jacente des fichiers vue

Cette fois, je vais vous montrer comment analyser la logique sous-jacente d'un fichier vue, et quelles sont les précautions à prendre pour la logique sous-jacente d'un fichier vue. Ce qui suit est un cas pratique, jetons un coup d'oeil.

Les fichiers .vue que nous écrivons habituellement sont appelés SFC (Single File Components). Cet article présente comment le processus d'analyse de SFC en descripteurs est effectué dans vue.

vue fournit une méthode compiler.parseComponent(file, [options]) pour analyser le fichier .vue en un descripteur :

// an object format describing a single-file component.
declare type SFCDescriptor = {
  template: ?SFCBlock;
  script: ?SFCBlock;
  styles: Array<SFCBlock>;
  customBlocks: Array<SFCBlock>;
};

Entrée de fichier

Le point d'entrée pour l'analyse des fichiers sfc se trouve dans src/sfc/parser.js. Ce fichier exporte la méthode parseComponent, qui est utilisée pour compiler des composants à fichier unique.

Voyons ensuite ce que fait la méthode parseComponent.

Méthode parseComponent

function start(tag, attrs, unary, start, end,){
}
function end(tag, start, end){
}
parseHTML(content, {
  start,
  end
})

La méthode parseComponent définit deux fonctions start``end, puis appelle la méthode parseHTML pour compiler le contenu du fichier .vue.

Alors, que fait cette méthode parseHTML ?

Méthode parseHTML

Vous pouvez dire d'après le nom que cette méthode est un analyseur HTML. On peut simplement comprendre que lorsque chaque balise de début est analysée, l'option est activée. L'option in est appelée start ; à la fin de chaque étiquette, appelez l'option end in.

correspond ici à l'appel des fonctions start et end définies respectivement dans la méthode parseComponent.

Maintenez une variable de profondeur dans parseComponent, définissez la profondeur++ au début et la profondeur à la fin. Ensuite, chaque balise avec une profondeur === 0 correspond aux informations que nous devons obtenir, y compris le modèle, le script, le style et certaines balises personnalisées.

start

Chaque fois qu'une balise de début est rencontrée, la fonction de démarrage est exécutée.

1. Enregistrez le bloc actuel.

Chaque currentBlock contient le contenu suivant :

declare type SFCBlock = {
  type: string;
  content: string;
  start?: number;
  end?: number;
  lang?: string;
  src?: string;
  scoped?: boolean;
  module?: string | boolean;
};

2 Selon le nom de la balise, placez l'objet currentBlock dans l'objet résultat renvoyé.

L'objet résultat renvoyé est défini comme sfc. Si la balise n'est pas un script, un style ou un modèle, elle est placée dans sfc.customBlocks. Si c'est du style, mettez-le dans sfc.styles. le script et le modèle sont placés directement sous sfc.

if (isSpecialTag(tag)) {
  checkAttrs(currentBlock, attrs)
  if (tag === 'style') {
    sfc.styles.push(currentBlock)
  } else {
    sfc[tag] = currentBlock
  }
} else { // custom blocks
  sfc.customBlocks.push(currentBlock)
}

end

Chaque fois qu'une balise de fin est rencontrée, la fonction de fin est exécutée.

1. Si l'étiquette actuelle est le premier calque (profondeur === 1) et que la variable currentBlock existe, alors supprimez cette partie du texte et placez-la dans currentBlock.content.

if (depth === 1 && currentBlock) {
 currentBlock.end = start
 let text = deindent(content.slice(currentBlock.start, currentBlock.end))
 // pad content so that linters and pre-processors can output correct
 // line numbers in errors and warnings
 if (currentBlock.type !== 'template' && options.pad) {
  text = padContent(currentBlock, options.pad) + text
 }
 currentBlock.content = text
 currentBlock = null
}

2. profondeur--.

Obtenir le descripteur

Après avoir parcouru l'intégralité du .vue, l'objet sfc obtenu est le résultat dont nous avons besoin.

Générer .js ?

compiler.parseComponent(file, [options]) obtient uniquement le SFCDescriptor d'un composant La compilation finale dans un fichier .js est effectuée par des bibliothèques telles que vue-loader.

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 :

Comment utiliser js pour convertir des images en base64

Comment utiliser la modification .native dans Vue .js Talisman

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!