Wie implementiert man js Lazy Loading mit ocLazyLoad?

OcLazyLoad-Beschreibung

1.ocLazyLoad ist eine Drittanbieter-Bibliothek von AngularJS, die dynamisches Laden/On-Demand-Laden von Modulen, Controllern und anderen Abhängigkeiten realisieren kann

2 .$ocLazyLoad.load() unterstützt mehrere Dateien, Sie können den angegebenen Dateityp anpassen und Sie können anpassen, ob er auf dem Client zwischengespeichert werden soll

3 Es liegt ein Problem vor, $ocLazyLoad.load () gibt den dynamischen Typ $ $state zurück. Für die JS-Datei, die nicht vorhanden ist oder nicht geladen werden kann, gibt es keine relevante API für die Verarbeitung

Vor kurzem bin ich bei der Entwicklung eines Systems, das ich verwendet habe, auf ein Problem gestoßen Um ein HTML-Fragment weiterzuleiten, muss ein JS-Plug-In verwendet werden, um einen Rich-Text-Editor zu implementieren. Das Hauptproblem besteht darin, dass es nach dem Laden des Fragments über js an das Dom-Element gebunden werden muss. Zuerst dachte ich, es wäre in Ordnung, den JS-Code direkt in das Code-Snippet zu schreiben. Wenn das Routing jedoch nach Experimenten das HTML-Fragment in die Seite einfügt, kann es nur das CSS lesen und den JS-Code nicht analysieren und ausführen .

Nachdem ich lange gegoogelt habe, habe ich viele Angular + RequireJs-Lösungen gefunden, aber ich denke, dass sie für mein Szenario nicht geeignet sind, da Requirejs im Wesentlichen ein Modullader ist und das Laden bei Bedarf nur ihm gehört Wir verwenden es hauptsächlich für die Modularisierung. Wenn wir unseren Code ausschließlich zum Laden nach Bedarf verpacken (definieren), fühlt es sich ein bisschen an, als würde man eine Kanone verwenden, um Mücken zu töten Die Kosten sind riesig.

Schließlich habe ich mich für die Verwendung von ocLazyLoad entschieden, da der Vorteil dieser Lösung darin besteht, dass sie einfach, leicht zu implementieren und nicht aufdringlich ist. Gleichzeitig weist diese Lösung einige Mängel auf. Beispielsweise entsteht bei jedem dynamischen Laden von Skripten und Vorlagenressourcen ein großer unnötiger Netzwerkaufwand. Die Routing-Definition ist relativ kompliziert (mit einigen zusätzlichen Konfigurationselementen ist dies tatsächlich nicht der Fall). kompliziert, aber umständlich. Für große und komplexe Geschäftsanwendungen und -routen kann der Energieverbrauch nicht ignoriert werden. Aber es ist genau richtig für meine Situation. Also habe ich js auf Github geforkt und in das Projekt eingeführt.

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

Konfigurieren Sie es in dem Winkelmodul, das Sie verwenden müssen

var app = angular.module('formCtrlParts', ['oc.lazyLoad']);

Gehen Sie dann zu dem Controller, den Sie verwenden müssen Routing Verwenden Sie diesen Dienst, um JS-Dateien bei Bedarf zu laden

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

Dies ist im Grunde erledigt, ocLazyLoad hat Es gibt viele Lademethoden, die auch mit Routing und Anweisungen geladen werden können.　　

Das obige ist der detaillierte Inhalt vonWie implementiert man js Lazy Loading mit ocLazyLoad?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!