Avec le développement du Web, les applications frontales sont devenues de plus en plus complexes, et JavaScript back-end (Node.js) a également commencé à émerger. À l'heure actuelle, JavaScript a été placé avec de plus grandes attentes. Dans le même temps, les idées JavaScript MVC sont également devenues populaires. En tant que partie la plus importante de la séparation des données et des interfaces, le moteur de modèle JavaScript a attiré de plus en plus l'attention des développeurs. Au cours de la dernière année, il s'est épanoui dans la communauté open source. Ils peuvent être vus sur de grands sites Web tels que Twitter, Taobao, Sina Weibo, Tencent QQ Space et Tencent Weibo.
Cet article utilisera l'exemple le plus simple pour décrire les principes du moteur de modèle JavaScript existant, y compris les principes de mise en œuvre des caractéristiques de la nouvelle génération de moteur de modèle JavaScript ArtTemplate. Bienvenue pour en discuter ensemble.
Introduction artTEmplate
Artemplate est une nouvelle génération de moteur de modèle JavaScript. Il utilise la précompilation pour faire un saut qualitatif dans les performances et utilise pleinement les fonctionnalités du moteur JavaScript, ce qui rend ses performances extrêmement exceptionnelles à la fois en avant et en back-end. Dans le test d'efficacité de rendu sous Chrome, il est 25 et 32 fois celui de moteurs bien connus moustache et micro TMPL.
En plus des avantages de performance, les fonctions de débogage méritent également d'être mentionnées. Le débogueur de modèle peut localiser avec précision l'instruction Template selon laquelle les déclencheurs de rendu, résoudre la douleur du débogage par inadvertance pendant la rédaction de modèles, rendre le développement efficace et éviter l'ensemble du crash de l'application en raison d'erreurs dans un modèle unique.
ArtTEmplate, tout cela est mis en œuvre en 1,7 Ko (GZIP)!
Javascript Modèle de base du moteur
Bien que chaque moteur ait des méthodes d'implémentation différentes à partir de la syntaxe du modèle, de l'analyse de syntaxe, de l'affectation de variables et de l'épissage de chaîne, le principe de rendu clé est toujours d'exécuter dynamiquement les chaînes JavaScript.
En ce qui concerne l'exécution dynamique des chaînes JavaScript, cet article utilise un code de modèle comme exemple:
Il s'agit d'une écriture de modèle très simple, où "" est placard (étiquette logique fermée). Si Openntag est suivi de "=", le contenu de la variable sera sorti.
Les instructions HTML et les instructions de sortie variable sont sortis directement et les chaînes analysées sont similaires:
Une fois l'analyse de syntaxe terminée, la méthode de rendu sera généralement retournée:
Test de rendu:
Dans la méthode de rendu ci-dessus, l'affectation de variable de modèle utilise l'instruction avec et l'épissage des chaînes utilise la méthode push des tableaux pour améliorer les performances dans IE6 et 7. Le moteur micro-modèle TMPL développé par JQuery auteur John est un représentant typique de cette méthode, voir: http://ejohn.org/blog/javascript-micro-emplating/
On peut voir à partir de l'implémentation principale que deux problèmes à résoudre sont laissés dans le moteur traditionnel de modèle JavaScript:
1. Performance: Lors de la rendu du moteur de modèle, il s'appuie sur le constructeur de fonction pour l'implémenter. Comme EVAL, Settimeout et SetInterval, la fonction fournit une méthode pour accéder au moteur d'analyse JavaScript à l'aide du texte, mais les performances de l'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 le débogueur rencontre une erreur, le débogueur ne peut pas attraper la source d'erreur, ce qui fait que le débogage du bug de modèle devient extrêmement douloureux. Dans un moteur qui n'effectue pas la tolérance aux défauts, si les modèles locaux peuvent même provoquer une écrasement de l'ensemble de l'application en raison d'exceptions de données, le coût de maintenance augmentera considérablement à mesure que le nombre de modèles augmente.
ArtTEmplate le secret de l'efficacité
1. Précompilé
Dans le principe de mise en œuvre du moteur de modèle susmentionné, puisque la variable de modèle est attribuée, chaque rendu nécessite une compilation dynamique des chaînes JavaScript pour terminer l'affectation variable. Cependant, le processus de compilation et d'affectation d'Artremplate est terminé avant le rendu, qui est appelé "précompilation". Le compilateur de modèle artTEmplate extraire toutes les variables de modèle en fonction de certaines règles simples et les déclarera à la tête de la fonction de rendu. Cette fonction est similaire à:
Cette fonction générée automatiquement est comme une fonction JavaScript rédigée à la main. Avec le même nombre d'exécutions, l'utilisation du CPU et de la mémoire a été considérablement réduite et les performances sont presque à la limite.
Il convient de mentionner que de nombreuses fonctionnalités d'Artremplate sont basées sur des implémentations précompilées, telles que les spécifications de bac à sable et la syntaxe personnalisée.
2. Méthode d'addition de chaîne plus rapide
Beaucoup de gens pensent à tort que la méthode de poussée du tableau épissera les cordes plus rapidement que + =. Vous devez savoir que ce n'est que dans le navigateur IE6-8. Les mesures réelles montrent que les navigateurs modernes utilisent + = pour utiliser la méthode de poussée du tableau, tandis que dans le moteur V8, en utilisant la méthode + = est 4,7 fois plus rapide que l'épissage du tableau. Par conséquent, Artremlate adopte deux méthodes d'épissage de cordes différentes selon les caractéristiques du moteur JavaScript.
Principe du mode de débogage artTEmplate
Le moteur de gabarit frontal n'est pas comme le moteur de modèle back-end. C'est l'analyse dynamique, donc le débogueur ne peut pas localiser le mauvais numéro de ligne. ArtTEmplate permet intelligemment au débogueur du modèle de localiser avec précision l'instruction de modèle qui lance les erreurs de rendu, par exemple:
Artemplate prend en charge deux types de capture d'erreur, l'une est une erreur de rendu (erreur de rendu) et une erreur de compilation (erreur de syntaxe).
1. Erreur de rendu
Les erreurs de rendu sont généralement causées par des erreurs de données de modèle ou des erreurs variables. Lors du rendu, ils entrent en mode de débogage pour recompiler le modèle sans affecter l'efficacité d'exécution du modèle normal. Le compilateur de modèle enregistre les numéros de ligne basés sur la rupture de la ligne de modèle, et la fonction compilée est similaire:
Lorsqu'une erreur se produit pendant le processus d'exécution, le numéro de ligne correspondant au modèle d'exception est immédiatement lancé, et le débogueur du modèle vérifie ensuite les instructions correspondantes correspondant au modèle en fonction du numéro de ligne et l'imprime à la console.
2. Erreurs de compilation
Les erreurs de compilation sont généralement des erreurs de syntaxe du modèle, telles que la nidification non qualifiée, la syntaxe inconnue, etc. Étant donné que Arttemplate ne mène pas une analyse lexicale complète, il est impossible de déterminer l'emplacement de la source d'erreur et ne peut publier que les informations d'erreur et le code source du texte d'origine pour les développeurs à juger.