interface Web
Voir.js
Vous guide étape par étape pour analyser le code ts dans le fichier vue
Vous guide étape par étape pour analyser le code ts dans le fichier vue
Nous savons que les fichiers vue sont composés de trois types de codes : « modèle », « script » et « style ». Si vous souhaitez analyser le code ts dans la balise <script lang="ts"></script>, que devez-vous faire ? <script lang="ts"></script>标签内的ts代码，要怎么做呢？
1.第一步： 通过@vue/compiler-dom 编译器 这个parser来解析
以下测试代码为例：
<template>
<div>
{{ testRef }}
</div>
</template>
<script setup>
import { ref } from 'vue'
const testRef = ref('test')
</script>
<style scoped>
.test-page {
background-color: #fff;
}
</style>把上面的代码放到 AST explorer，parser 选择 @vue/compiler-dom 【相关推荐：vuejs视频教程、web前端开发】
可以发现，右侧的AST结构：代码被解析成 template、script和style这三部分，我们通过AST节点属性就可以获取到script标签内代码的字符串信息（图中的绿色框部分）。
代码如下：
const vueCompiler = require('@vue/compiler-dom')
const analyseCode = `<template>
<div>
{{ testRef }}
</div>
</template>
<script setup>
import { ref } from 'vue'
const testRef = ref('test')
</script>
<style scoped>
.test-page {
background-color: #fff;
}
</style>`
const parseVue = (vueCode) => {
// 解析vue代码
const result = vueCompiler.parse(vueCode)
const children = result.children
// 获取script片段
let tsCode = ''
children.forEach(element => {
if (element.tag == 'script') {
tsCode = element.children[0].content;
}
})
console.log(tsCode)
}
parseVue(analyseCode)运行结果：
2.第二步：通过typescript解析
在第一步中，我们通过@vue/compiler-dom提取出了 vue 文件 script标签内的代码字符串；接下来，把提取出的代码字符串交给 typescript处理，生成对应的 AST。
以上面代码为例：
const vueCompiler = require('@vue/compiler-dom')
const tsCompiler = require('typescript')
const analyseCode = `<template>
<div>
{{ testRef }}
</div>
</template>
<script setup>
import { ref } from 'vue'
const testRef = ref('test')
</script>
<style scoped>
.test-page {
background-color: #fff;
}
</style>`
const parseVue = (vueCode) => {
// 解析vue代码
const result = vueCompiler.parse(vueCode)
const children = result.children
// 获取script片段
let tsCode = ''
children.forEach(element => {
if (element.tag == 'script') {
tsCode = element.children[0].content;
}
})
console.log(tsCode)
// 将ts代码转化为AST
// 第一个参数为命名，可以随意填，
// 第二个参数是需要生成AST的源代码字符串
// 第三个参数表示TS编译器版本
// 第四个参数表示是否添加parent节点信息
const ast = tsCompiler.createSourceFile('testCode', tsCode, tsCompiler.ScriptTarget.Latest, true)
console.log(ast)
return ast
}
parseVue(analyseCode)运行结果（图片不是完整的）
完整的AST explorer
3.第三步：遍历分析 AST 各级节点
通过TypeScript 的 CompilerAPI : forEachChild遍历AST节点
const ast = parseVue(analyseCode) // 上面示例的函数
const walk = (node) => { // AST遍历函数
tsCompiler.forEachChild(node, walk); // 遍历AST节点
console.log(node); // 输出节点信息
}
walk(ast)然后根据代码中常见的字面量、标识符、表达式、语句、模块语法、class 语法等语句
1. compilateur vue/compiler-dom Cet analyseur est utilisé pour analyser
Le code de test suivant est un exemple :rrreeeMettez le code ci-dessus dans AST explorer, sélection de l'analyseur @vue/compiler-dom [Recommandations associées : tutoriel vidéo vuejs, frontal Web- fin du développement]
🎜🎜Vous pouvez trouver la structure AST sur la droite : le code est analysé en trois parties : modèle, script et style. Nous pouvons obtenir les informations de chaîne du code dans la balise script via l'AST attributs du nœud (dans la partie boîte verte de l'image). 🎜🎜Le code est le suivant : 🎜rrreee🎜Résultats d'exécution : 🎜🎜🎜2. Étape 2 : Analyser via typescript
🎜Dans la première étape, nous avons extrait la chaîne de code dans la balise de script du fichier vue via @vue/compiler-dom. Ensuite, nous avons donné la chaîne de code extraite à typescriptprocessus et générer l’AST correspondant. 🎜🎜Prenez le code ci-dessus comme exemple : 🎜rrreee🎜Résultats d'exécution (l'image n'est pas complète)🎜🎜<img src="https://img.php.cn/upload/article/000/000/024/560fbde805eda96e8b1052055f0b313b%20-2.%20png" alt="Capture d'écran 2023-04-22 PM 10.42.49.png" chargement="lazy">🎜🎜Complet<a href="//m.sbmmt.com/link/ef4c88811e3816f40407421553982e89" target="_blank" title="https://astexplorer.net/?spm=taofed.bloginfo.blog.3.3ba15ac8enL4hJ#/gist/dcd9b0bf2cfcfdda5e22762c98e8b845/336467e39a86f826257ff91e8f4646b005ce753c" ref="nofollow non opener noreferrer">Explorateur AST🎜🎜🎜 🎜<h2 id="strong-Étape-Parcourez-et-analysez-les-nœuds-AST-à-tous-les-niveaux-strong"><strong>3. Étape 3 : Parcourez et analysez les nœuds AST à tous les niveaux</strong></h2>🎜Parcourez les nœuds AST via l'API Compiler de TypeScript : <code>forEachChild🎜rrreee 🎜Ensuite, selon le code Common , les littéraux, identifiants, expressions, instructions, syntaxe de module, syntaxe de classe et autres instructions ont chacun des types de nœuds AST correspondants, et l'analyse correspondante peut être effectuée (les détails dans cette section Les connaissances peuvent être recherché en ligne et combiné avec des outils de visualisation 🎜 Explorateur AST 🎜 observation) 🎜🎜 (Partage de vidéos d'apprentissage : 🎜Tutoriel d'introduction à vuejs🎜, 🎜Vidéo de programmation de base🎜)🎜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!
Outils d'IA chauds
Undress AI Tool
Images de déshabillage gratuites
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
PHP et Vue : une combinaison parfaite d'outils de développement front-end
Mar 16, 2024 pm 12:09 PM
PHP et Vue : une combinaison parfaite d'outils de développement front-end À l'ère actuelle de développement rapide d'Internet, le développement front-end est devenu de plus en plus important. Alors que les utilisateurs ont des exigences de plus en plus élevées en matière d’expérience des sites Web et des applications, les développeurs front-end doivent utiliser des outils plus efficaces et plus flexibles pour créer des interfaces réactives et interactives. En tant que deux technologies importantes dans le domaine du développement front-end, PHP et Vue.js peuvent être considérés comme une arme parfaite lorsqu'ils sont associés. Cet article explorera la combinaison de PHP et Vue, ainsi que des exemples de code détaillés pour aider les lecteurs à mieux comprendre et appliquer ces deux éléments.
Explorer la technologie front-end du langage Go : une nouvelle vision du développement front-end
Mar 28, 2024 pm 01:06 PM
En tant que langage de programmation rapide et efficace, le langage Go est très populaire dans le domaine du développement back-end. Cependant, peu de gens associent le langage Go au développement front-end. En fait, l’utilisation du langage Go pour le développement front-end peut non seulement améliorer l’efficacité, mais également ouvrir de nouveaux horizons aux développeurs. Cet article explorera la possibilité d'utiliser le langage Go pour le développement front-end et fournira des exemples de code spécifiques pour aider les lecteurs à mieux comprendre ce domaine. Dans le développement front-end traditionnel, JavaScript, HTML et CSS sont souvent utilisés pour créer des interfaces utilisateur.
Vue.js vs react: Considérations spécifiques au projet
Apr 09, 2025 am 12:01 AM
Vue.js convient aux projets de petite et moyenne taille et aux itérations rapides, tandis que React convient aux applications grandes et complexes. 1) Vue.js est facile à utiliser et convient aux situations où l'équipe est insuffisante ou l'échelle du projet est petite. 2) React a un écosystème plus riche et convient aux projets avec des performances élevées et des besoins fonctionnels complexes.
Questions fréquemment posées par les enquêteurs front-end
Mar 19, 2024 pm 02:24 PM
Lors des entretiens de développement front-end, les questions courantes couvrent un large éventail de sujets, notamment les bases HTML/CSS, les bases JavaScript, les frameworks et les bibliothèques, l'expérience du projet, les algorithmes et les structures de données, l'optimisation des performances, les requêtes inter-domaines, l'ingénierie front-end, les modèles de conception et les nouvelles technologies et tendances. Les questions de l'intervieweur sont conçues pour évaluer les compétences techniques du candidat, son expérience en matière de projet et sa compréhension des tendances du secteur. Par conséquent, les candidats doivent être parfaitement préparés dans ces domaines pour démontrer leurs capacités et leur expertise.
Combinaison de Golang et de technologie front-end : découvrez comment Golang joue un rôle dans le domaine front-end
Mar 19, 2024 pm 06:15 PM
Combinaison de Golang et de la technologie front-end : pour explorer le rôle de Golang dans le domaine front-end, des exemples de code spécifiques sont nécessaires. Avec le développement rapide d'Internet et des applications mobiles, la technologie front-end est devenue de plus en plus importante. Dans ce domaine, Golang, en tant que puissant langage de programmation back-end, peut également jouer un rôle important. Cet article explorera comment Golang est combiné avec la technologie front-end et démontrera son potentiel dans le domaine front-end à travers des exemples de code spécifiques. Le rôle de Golang dans le domaine front-end est celui d'un outil efficace, concis et facile à apprendre.
Vue.js est-il difficile à apprendre?
Apr 04, 2025 am 12:02 AM
Vue.js n'est pas difficile à apprendre, en particulier pour les développeurs avec une fondation JavaScript. 1) Sa conception progressive et son système réactif simplifient le processus de développement. 2) Le développement basé sur les composants rend la gestion du code plus efficace. 3) Les exemples d'utilisation montrent une utilisation de base et avancée. 4) Les erreurs courantes peuvent être déboguées via Vuedevtools. 5) L'optimisation des performances et les meilleures pratiques, telles que l'utilisation des attributs V-IF / V et clés, peuvent améliorer l'efficacité de l'application.
Vue est-elle utilisée pour le frontend ou le backend?
Apr 03, 2025 am 12:07 AM
Vue.js est principalement utilisé pour le développement frontal. 1) Il s'agit d'un cadre JavaScript léger et flexible axé sur la construction d'interfaces utilisateur et d'applications à une seule page. 2) Le cœur de Vue.js est son système de données réactif, et la vue est automatiquement mise à jour lorsque les données changent. 3) Il prend en charge le développement des composants et l'interface utilisateur peut être divisée en composants indépendants et réutilisables.
Comprendre la fonction principale de React: la perspective du frontend
Apr 18, 2025 am 12:15 AM
Les principales fonctions de React incluent la pensée composante, la gestion de l'État et le DOM virtuel. 1) L'idée de la composante permet de diviser l'interface utilisateur en parties réutilisables pour améliorer la lisibilité et la maintenabilité du code. 2) La gestion de l'État gère les données dynamiques via l'état et les accessoires, et les modifications déclenchent des mises à jour de l'interface utilisateur. 3) Performances d'optimisation virtuelle DOM, mettez à jour l'interface utilisateur à travers le calcul du fonctionnement minimum de la réplique DOM en mémoire.
