Introduction détaillée aux principes du moteur de modèles JavaScript hautes performances (graphiques et texte)

Avec le développement du Web, les applications frontales sont devenues de plus en plus complexes, et le javascript(Node.js) basé sur le back-end a également commencé à émerger . À cette époque, les attentes du javascript étaient plus grandes, en même temps que l'idée javascript MVC est également devenue populaire. javascript Moteur de modèles En tant qu'élément le plus important de la séparation des données et de l'interface, il a attiré de plus en plus l'attention des développeurs au cours de l'année écoulée, et a prospéré dans la communauté open source et est apparu sur. Twitter, Taobao, Sina Weibo, Ils peuvent être vus sur de grands sites Web tels que Tencent QQ Zone et Tencent Weibo.

Cet article utilisera l'exemple de code le plus simple pour décrire les principes du moteur de modèle javascript existant, y compris le principe de mise en œuvre des fonctionnalités du moteur de modèle javascript de nouvelle génération artTemplate Bienvenue pour en discuter ensemble.

artTemplate Introduction

artTemplate est une nouvelle génération de moteur de modèles javascript. Il utilise la pré-compilation pour faire un saut qualitatif en termes de performances et utilise pleinement les fonctionnalités du moteur javascript pour améliorer ses performances. à la fois front-end et back-end. Excellentes performances aux deux extrémités. Lors du test d'efficacité de rendu sous chromeome, elle était respectivement 25 et 32 ​​fois supérieure à celle des moteurs bien connus Moustache et micro tmpl.

En plus des avantages en termes de performances, la fonction de débogage mérite également d'être mentionnée. Le débogueur de modèle peut localiser avec précision l'instruction de modèle qui a provoqué l'erreur de rendu, ce qui résout le problème de l'impossibilité de déboguer pendant le processus d'écriture des modèles, rend le développement plus efficace et évite le crash de l'ensemble de l'application en raison d'une seule erreur de modèle.

artTemplate Tout en 1,7ko(gzip) !

Principes de base du moteur de modèle javascript

Bien que chaque moteur ait des méthodes d'implémentation différentes : syntaxe de modèle, analyse syntaxique, affectation de variable et épissage de chaîne . C'est différent, mais le principe clé du rendu reste l'exécution dynamique des chaînes javascript.

Concernant l'exécution dynamique de chaînes javascript, cet article utilise un modèle de code comme exemple :

Il s'agit d'une méthode d'écriture de modèle très simple, où " " est clo seTag (balise de fermeture d'instruction logique), si openTag est suivi de "=", le contenu de la variable sera affiché.

Les instructions HTML et les sortie variable sont générées directement, et la chaîne analysée est similaire :

Une fois l'analyse syntaxique terminée , ce sera généralement toujours la méthode de rendu de retour :

Test de rendu :

dans le r ci-dessus ender méthode, l'affectation des variables de modèle utilise l'instruction with, l'épissage de chaînes utilise la méthode push array pour améliorer les performances sous IE6 et 7, jQuery Le moteur de micro-modèle tmpl développé par l'auteur John est-ce Pour un représentant typique de cette approche, voir : http://www.php.cn/

Il ressort de la mise en œuvre du principe qu'il y a deux problèmes à résoudre dans la méthode traditionnelle Moteur de modèle javascript :

1 , Performance : le moteur de modèle s'appuie sur le constructeur Function lors du rendu. Function, comme eval, setTimeout et setInterval, fournit une méthode d'utilisation du texte pour. accéder au moteur d'analyse javascript, mais les performances d'exécution de javascript de cette manière sont très faibles.

2. Débogage : puisqu'il s'agit d'une chaîne d'exécution dynamique, si une erreur est rencontrée, le débogueur ne peut pas capturer la source de l'erreur, ce qui rend le débogage du modèle de BUG extrêmement pénible. Dans un moteur sans tolérance aux pannes, les modèles locaux peuvent même provoquer le crash de l'ensemble de l'application en raison d'anomalies de données. À mesure que le nombre de modèles augmente, les coûts de maintenance augmenteront considérablement.

Le secret de l'efficacité de artTemplate

1.

Dans le principe d'implémentation du moteur de modèle ci-dessus, étant donné que les variables de modèle doivent se voir attribuer des valeurs, chaque rendu nécessite une compilation dynamique de chaînes javascript pour terminer les affectations de variables. Cependant, le processus de compilation et d'affectation de artTemplate est terminé avant le rendu. Cette méthode est appelée « pré-compilation ». Le compilateur de modèles artTemplate extraira toutes les variables du modèle selon quelques règles simples et les déclarera dans l'en-tête de la fonction de rendu . Cette fonction est similaire à :

<.>C'est automatiquement La fonction générée est comme une fonction JavaScript écrite à la main. Avec le même nombre d'exécutions, l'utilisation du processeur et de la mémoire est considérablement réduite et les performances sont proches de la limite.

Il convient de mentionner que de nombreuses fonctionnalités d'artTemplate sont basées sur une implémentation précompilée, telles que les spécifications du bac à sable et la syntaxe personnalisée.

2. Méthode d'ajout de chaînes plus rapide

Beaucoup de gens croient à tort que la méthode push de tableau épissera les chaînes plus rapidement que =. 8 navigateur. Les mesures réelles montrent que l'utilisation de = dans les navigateurs modernes est plus rapide que la méthode de poussée de tableau, et dans le moteur v8, l'utilisation de = est 4,7 fois plus rapide que l'épissage de tableau. Par conséquent, artTemplate utilise deux méthodes d'épissage de chaînes différentes basées sur les caractéristiques du moteur javascript.

artTemplate

Mode débogagePrincipe

Modèle frontalLe moteur n'est pas comme le moteur de modèle back-end, c'est une analyse dynamique, donc le débogueur ne peut pas localiser le numéro de ligne d'erreur et artTemplate utilise un moyen intelligent pour permettre au débogueur de modèle d'identifier l'instruction de modèle qui a provoqué l'erreur de rendu, par exemple :

artTemplate prend en charge deux types de capture d'erreurs, l'un est l'erreur de rendu et l'erreur de syntaxe.

1. Erreurs de rendu

Les erreurs de rendu sont généralement causées par des erreurs de données de modèle ou des erreurs de variables. Ce n'est que lorsque des erreurs sont rencontrées lors du rendu que le mode de débogage sera entré et recompilé. . modèle sans affecter l’efficacité normale de l’exécution du modèle. Le compilateur de modèle enregistre le numéro de ligne en fonction du caractère de nouvelle ligne du modèle. La fonction compilée est similaire à :

Lorsqu'une erreur est rencontrée lors de l'exécution, une exception sera immédiatement levée.

modèle Selon le numéro de ligne correspondant, le débogueur de modèle vérifie ensuite l'instruction correspondante du modèle en fonction du numéro de ligne et l'imprime sur la console.

2. Erreurs de compilation

Les erreurs de compilation sont généralement des

erreurs de grammaire, telles qu'une imbrication non qualifiée, une syntaxe inconnue, etc. Étant donné que artTemplate n'effectue pas d'analyse lexicale complète, il ne peut pas déterminer l'emplacement de la source de l'erreur. Il ne peut afficher que le texte original du message d'erreur et le code source pour que les développeurs puissent en juger.

Open source et réduction des dépenses

artTemplate est publié sur la base de la licence open source. Les entreprises commerciales et les particuliers peuvent l'utiliser gratuitement dans des projets. Nous sommes favorables à une amélioration conjointe.

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!