Load js dependent modules according to configuration files_javascript skills

Requirements:

According to the configuration file below

Copy code The code is as follows:

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

Write a function

def getfiles(name)

Return to load a page specified by a certain name, a list of js files to be loaded, and those with dependencies must be loaded first

Snack solution

This question looks simple at first glance, but it is not.

The difficulty lies in the loading timing of dependent modules. If there is such a dependency relationship: A-B&C, B-C, module A depends on module B and module C, and module B depends on module C, we cannot let C be loaded twice!

The solution given by Xiaocai is just an idea. There must be a better algorithm than this. Xiaocai thinks it can be solved with an algorithm such as a binary tree, but Xiaocai doesn’t know how~~~

This algorithm does not consider circular dependencies.

The code is as follows:

Copy code The code is as follows:

/**
* Does not consider circular dependencies
* @type {Function}
​*/
var loadModule = (function(){
/**
* Business logic encapsulation
* @type {{chainHead: {}, chainCurrent: {}, srcCache: {}, main: main, load: load, findModule: findModule}}
​​*/
var logics = {
Chainhead: {}, // Links
         chainCurrent: {}, //Current node of the linked list
           srcCache: {},         //module src cache
           /**
* External interface
* @param modules Configuration object
* @param name Module name
* @returns {Array} List of dependent modules, arranged in order of loading
                       */
            main: function(modules, name){
            var nameArray = [], //Module name list
Srcarray = [], // List of relying module
                      nameStr = "", // Module name string set
                                                                                                                                                                                                                       repeatRegex = /(^| )([w] ).*2/, //Regular module name deduplication
i = 0;
//Roughly load all dependent modules
This.load(modules, name)
//Construct module name string set
This.chainCurrent = this.chainHead;
             while(this.chainCurrent.next){
nameArray.push(this.chainCurrent.name);
This.chainCurrent = this.chainCurrent.next;
            }
                  nameStr = nameArray.join(" ") " "; // Unify the standard, add a space at the end
                             // Deduplication of dependent modules
​​​​​​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)); //Remove the supplementary extra spaces
//Convert dependent module name to module path
nameArray = nameStr.split(" ");
for(i = 0; i < nameArray.length; i ){
                  srcArray.push(this.srcCache[nameArray[i]]);
            }
                 return srcArray;
         },
          /**
* Recursively load modules
* @param modules Configuration object
* @param name Module name
           */
Load: function(modules, name){
            var node = {},
                        module = this.findModule.call(modules, "name", name),
i = 0;
//Determine whether the module exists
If(!module){
throw Error("Dependent module " name " was not found");
            }
//Construct module dependency list
                 node.name = name;
// node.src = module.src;
This.srcCache[name] = module.src;
Node.next = this.chainHead;
This.chainHead = node;
//Recursive dependency
If(module.require && module.require.length){
for(i = 0;i < module.require.length; i ){
This.load(modules, module.require[i]);
                 }
            }
         },
           /**
* Search the module based on the specified attribute name and attribute value
* @param name Attribute name
* @param value Attribute value
* @returns {*}
                       */
           findModule: function(name, value){
            var array = this,
Item = {},
i = 0;
//Traverse module
for(i = 0; i < array.length; i ){
Item = array[i];
//Get the specified module
If(item && item[name] === value){
                             return item;
                 }
            }
//Cannot be found and returns null
              return null;
         }
};
//Expose external interface
Return function(){
             return logics.main.apply(logics, arguments);
};
}());
 /**
  * Test Usecase
  * @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"));