Heim > Web-Frontend > js-Tutorial > Laden Sie js-abhängige Module gemäß den Konfigurationsdateien_Javascript-Kenntnissen

Laden Sie js-abhängige Module gemäß den Konfigurationsdateien_Javascript-Kenntnissen

WBOY
Freigeben: 2016-05-16 16:23:36
Original
923 Leute haben es durchsucht

Anforderungen:

Gemäß der Konfigurationsdatei unten

Code kopieren Der Code lautet wie folgt:

module=[
{'name':'jquery','src':'/js/lib/jquery-1.8.3.js'},
{'name':'swfobject','src':'/js/utils/swfobject.js'},
{'name':'fancybox','src':'/js/jquery/jquery.fancybox.js','require':['jquery']},
{'name':'uploadify','src':'/js/utils/uploadify.js','require':['swfobject']},
{'name':'jqform','src':'/js/jquery/jquery.form.js','require':['jquery']},
{'name':'register','src':'/js/page/reg.js','require':['jqform']},
{'name':'login','src':'/js/page/login.js','require':['fancybox','jqform']},
{'name':'upload','src':'/js/page/upload.js','require':['fancybox','jqform','uploadify']}
]

Schreiben Sie eine Funktion

def getfiles(name)

Kehren Sie zurück, um eine mit einem bestimmten Namen angegebene Seite zu laden, eine Liste der zu ladenden JS-Dateien und diejenigen mit Abhängigkeiten müssen zuerst geladen werden

Snack-Lösung

Diese Frage sieht auf den ersten Blick einfach aus, ist es aber nicht.

Die Schwierigkeit liegt im Ladezeitpunkt abhängiger Module. Wenn es eine solche Abhängigkeitsbeziehung gibt: A-B&C, B-C, Modul A hängt von Modul B und Modul C ab und Modul B hängt von Modul C ab, können wir C nicht zweimal laden lassen!

Die von Xiaocai angegebene Lösung ist nur eine Idee. Xiaocai glaubt, dass sie mit einem Algorithmus wie einem Binärbaum gelöst werden kann, aber Xiaocai weiß nicht, wie

Dieser Algorithmus berücksichtigt keine zirkulären Abhängigkeiten.

Der Code lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

/**
* Zirkuläre Abhängigkeiten werden nicht berücksichtigt
* @type {Funktion}
​*/
var loadModule = (function(){
/**
* Kapselung der Geschäftslogik
* @type {{chainHead: {}, chainCurrent: {}, srcCache: {}, main: main, Load: Load, FindModule: FindModule}}
​​*/
var Logics = {
Chainhead: {}, // Links
         chainCurrent: {}, //Aktueller Knoten der verknüpften Liste
           srcCache: {},         //Modul-SRC-Cache
           /**
* Externe Schnittstelle
* @param-Module Konfigurationsobjekt
* @param name Modulname
* @returns {Array} Liste der abhängigen Module, geordnet in der Reihenfolge des Ladens
                       */
            main: function(modules, name){
            var nameArray = [], //Modulnamenliste
Srcarray = [], // Liste der vertrauenden Module
                      nameStr = "", // Modulnamen-String-Set
                                                                                                                                                                                              RepeatRegex = /(^| )([w] ).*2/, //Regulärer Modulname 🎜> i = 0;
//Alle abhängigen Module grob laden
This.load(modules, name)
//Modulnamen-String-Set erstellen
This.chainCurrent = this.chainHead;
             while(this.chainCurrent.next){
nameArray.push(this.chainCurrent.name);
This.chainCurrent = this.chainCurrent.next;
            }
                  nameStr = nameArray.join(" ") " " // Den Standard vereinheitlichen, am Ende ein Leerzeichen hinzufügen
                             // Deduplizierung abhängiger Module
​​​​​​while(repeatRegex.exec(nameStr)){
nameStr = nameStr.replace(repeatRegex, function(g0, g1, g2){
                            return g0.substring(0, (g0.length - g2.length));
                 });
            }
                 nameStr = nameStr.substring(0, (nameStr.length - 1)); //Entfernen Sie die zusätzlichen Leerzeichen
//Konvertieren Sie den Namen des abhängigen Moduls in den Modulpfad
nameArray = nameStr.split(" ");
for(i = 0; i < nameArray.length; i ){
                  srcArray.push(this.srcCache[nameArray[i]]);
            }
                 return srcArray;
         },
          /**
* Module rekursiv laden
* @param-Module Konfigurationsobjekt
* @param name Modulname
           */
Laden: Funktion(Module, Name){
            var node = {},
                        module = this.findModule.call(modules, "name", name),
i = 0;
//Bestimmen Sie, ob das Modul existiert
If(!module){
throw Error("Abhängiges Modul "Name" wurde nicht gefunden");
            }
//Modulabhängigkeitsliste erstellen
                 node.name = name;
// node.src = module.src;
This.srcCache[name] = module.src;
Node.next = this.chainHead;
This.chainHead = node;
//Rekursive Abhängigkeit
If(module.require && module.require.length){
for(i = 0;i < module.require.length; i ){
This.load(modules, module.require[i]);
                 }
            }
         },
           /**
* Durchsuchen Sie das Modul basierend auf dem angegebenen Attributnamen und Attributwert
* @param name Attributname
* @param value Attributwert
* @returns {*}
                       */
           findModule: function(name, value){
            var array = this,
Artikel = {},
i = 0;
//Traverse-Modul
for(i = 0; i < array.length; i ){
Item = array[i];
//Das angegebene Modul abrufen
If(item && item[name] === value){
                             Artikel zurückgeben;
                 }
            }
//Kann nicht gefunden werden und gibt null zurück
              return null;
         }
};
//Externe Schnittstelle verfügbar machen
Rückgabefunktion(){
             returnlogics.main.apply(logics, arguments);
};
}());
 /**
  * Anwendungsfall testen
  * @type {*[]}
 */
 var module=[
     {'name':'jquery','src':'/js/lib/jquery-1.8.3.js'},
     {'name':'swfobject','src':'/js/utils/swfobject.js'},
     {'name':'fancybox','src':'/js/jquery/jquery.fancybox.js','require':['jquery']},
     {'name':'uploadify','src':'/js/utils/uploadify.js','require':['swfobject']},
     {'name':'jqform','src':'/js/jquery/jquery.form.js','require':['jquery']},
     {'name':'register','src':'/js/page/reg.js','require':['jqform']},
     {'name':'login','src':'/js/page/login.js','require':['fancybox','jqform']},
     {'name':'upload','src':'/js/page/upload.js','require':['fancybox','jqform','login','uploadify']}
 ];
 console.log(loadModule(modules, "upload"));
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage