Maison > interface Web > js tutoriel > Charger les modules dépendants de js selon les compétences des fichiers de configuration_javascript

Charger les modules dépendants de js selon les compétences des fichiers de configuration_javascript

WBOY
Libérer: 2016-05-16 16:23:36
original
923 Les gens l'ont consulté

Exigences :

Selon le fichier de configuration ci-dessous

Copier le code Le code est le suivant :

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']}
]

Écrire une fonction

def getfiles(nom)

Retour pour charger une page spécifiée par un certain nom, une liste de fichiers js à charger, et ceux avec des dépendances doivent être chargés en premier

Solution collation

Cette question semble simple à première vue, mais elle ne l'est pas.

La difficulté réside dans le timing de chargement des modules dépendants. S'il existe une telle relation de dépendance : A-B&C, B-C, le module A dépend du module B et du module C, et le module B dépend du module C, nous ne pouvons pas laisser C être chargé deux fois !

La solution donnée par Xiaocai n'est qu'une idée. Il doit y avoir un meilleur algorithme que celui-ci. Xiaocai pense qu'elle peut être résolue avec un algorithme tel qu'un arbre binaire, mais Xiaocai ne sait pas comment ~~~

.

Cet algorithme ne prend pas en compte les dépendances circulaires.

Le code est le suivant :

Copier le code Le code est le suivant :

/**
* Ne prend pas en compte les dépendances circulaires
* @type {Fonction}
​*/
var loadModule = (fonction(){
/**
* Encapsulation de logique métier
* @type {{chainHead : {}, chainCurrent : {}, srcCache : {}, main : main, load : load, findModule : findModule}}
​​*/
var logiques = {
Chainhead : {}, // Liens
         chainCurrent : {}, //Nœud actuel de la liste chaînée
           srcCache : {},         // cache src du module
           /**
* Interface externe
* @param modules Objet de configuration
* @param name Nom du module
* @returns {Array} Liste des modules dépendants, classés par ordre de chargement
                       */
            principal : fonction (modules, nom){
            var nameArray = [], //Liste des noms de modules
Srcarray = [], // Liste des modules de confiance
                      nameStr = "", // Ensemble de chaînes de nom de module
                                                                                                                         
je = 0;
//Charger grossièrement tous les modules dépendants
This.load(modules, nom)
//Construire un ensemble de chaînes de nom de module
This.chainCurrent = this.chainHead;
             while(this.chainCurrent.next){
nameArray.push(this.chainCurrent.name);
This.chainCurrent = this.chainCurrent.next;
            }
                  nameStr = nameArray.join(" ") " " // Unifier le standard, ajouter un espace à la fin
                             // Déduplication des modules dépendants
​​​​​​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)); //Supprimer les espaces supplémentaires
//Convertir le nom du module dépendant en chemin du module
nameArray = nameStr.split(" ");
pour(i = 0; i < nameArray.length; i ){
                  srcArray.push(this.srcCache[nameArray[i]]);
            }
                 return srcArray ;
         },
          /**
* Charger des modules de manière récursive
* @param modules Objet de configuration
* @param name Nom du module
           */
Charger : fonction (modules, nom) {
            var noeud = {},
                        module = this.findModule.call(modules, "name", name),
je = 0;
//Déterminer si le module existe
Si(!module){
throw Error("Le module dépendant "nom" n'a pas été trouvé");
            }
//Construire la liste des dépendances du module
                 node.name = nom;
// noeud.src = module.src;
This.srcCache[nom] = module.src;
Node.next = this.chainHead;
This.chainHead = node;
//Dépendance récursive
Si(module.require && module.require.length){
pour(i = 0;i < module.require.length; i ){
This.load(modules, module.require[i]);
                 }
            }
         },
           /**
* Recherchez le module en fonction du nom d'attribut et de la valeur d'attribut spécifiés
* @param name Nom de l'attribut
* @param value Valeur de l'attribut
* @returns {*}
                       */
           findModule : fonction (nom, valeur){
            var array = ceci,
Article = {},
je = 0;
//Module de parcours
pour (i = 0; i < array.length; i ){
Article = tableau[i];
//Obtenir le module spécifié
Si(élément && élément[nom] === valeur){
                             retourner l'article ;
                 }
            }
//Impossible de trouver et renvoie null
              return null ;
         }
};
//Exposer l'interface externe
Fonction de retour(){
             return logics.main.apply(logiques, arguments);
};
}());
 /**
  * Test de cas d'utilisation
  * @type {*[]}
 */
 var modules=[
     {'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"));
Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal