Comment implémenter le chargement paresseux de js à l'aide de ocLazyLoad ?-js tutoriel-php.cn

Comment implémenter le chargement paresseux de js à l'aide de ocLazyLoad ?

零下一度

Libérer： 2017-07-18 17:48:29

original

1306 Les gens l'ont consulté

Description d'OcLazyLoad

1.ocLazyLoad est une bibliothèque tierce d'AngularJS, qui peut réaliser un chargement dynamique/à la demande de modules, contrôleurs et autres dépendances

2 .$ocLazyLoad.load() prend en charge plusieurs fichiers, vous pouvez personnaliser le type de fichier spécifié et vous pouvez personnaliser s'il faut mettre en cache sur le client

3 Il y a un problème, $ocLazyLoad.load( ) renvoie le type dynamique $ $state, pour le fichier js qui n'existe pas ou ne se charge pas, nous n'avons pas trouvé l'API de traitement appropriée

Récemment, j'ai rencontré un problème lors du développement d'un système que j'ai utilisé angulaire. pour acheminer un fragment html. Ce fragment doit utiliser un plug-in js pour implémenter un éditeur de texte enrichi. Le problème clé est qu'il doit être lié à l'élément dom via js après le chargement du fragment. Au début, je pensais qu'il serait acceptable d'écrire le code JS directement dans l'extrait de code. Cependant, après des expériences, lorsque le routage insère le fragment HTML dans la page, il ne peut que lire le CSS et ne peut pas analyser et exécuter le code JS. .

Après avoir cherché Google pendant longtemps, j'ai trouvé beaucoup de solutions angulaires + requireJs, mais je pense que cela ne convient pas à mon scénario, car requirejs est essentiellement un chargeur de module, et le chargement à la demande n'est que le sien travail secondaire.Nous l'utilisons.Il devrait être principalement utilisé pour la modularisation.Si nous utilisons une syntaxe modulaire pour envelopper notre code (définir) uniquement pour le chargement à la demande, cela ressemble un peu à utiliser un canon pour tuer les moustiques. le coût est énorme.

J'ai finalement décidé d'utiliser ocLazyLoad pour le gérer, car l'avantage de cette solution est qu'elle est simple, facile à mettre en œuvre et non intrusive. En même temps, cette solution présente certains inconvénients. Par exemple, il y aura beaucoup de surcharge réseau inutile pour chaque chargement dynamique de scripts et de ressources de modèle. La définition du routage est relativement compliquée (avec quelques éléments de configuration supplémentaires, ce n'est en fait pas le cas). compliqué, mais fastidieux). Pour les grandes et complexes Il existe de nombreuses applications et itinéraires métiers, et l'énergie consommée ne peut être ignorée. Mais c'est juste pour ma situation. J'ai donc forké js sur github et l'ai introduit dans le projet.

 <script src="js/ocLazyLoad.js?1.1.11"></script>

Copier après la connexion

Configurez-le dans le module angulaire que vous devez utiliser

var app = angular.module(&#39;formCtrlParts&#39;, [&#39;oc.lazyLoad&#39;]);

Copier après la connexion

Accédez ensuite au contrôleur que vous devez utiliser pour routage Utilisez ce service pour charger des fichiers js à la demande

app.controller(&#39;addNewBlogCtrl&#39;,function($scope,$http,$ocLazyLoad){
    $ocLazyLoad.load(&#39;../html/ckeditorjs/ckeditor.js&#39;);
   
})

Copier après la connexion

C'est essentiellement fait, ocLazyLoad a Il existe de nombreuses méthodes de chargement, qui peuvent également être chargées avec un routage et des instructions.　　

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!