js常用框架原理

(function(){         //存储已经创建的模块     var moduleMap = {};     //判断是否已经加载过     var fileMap   = {};     //空函数     var noop = function(){};             /*注册为全局变量*/     window.thin = {        //在这里定义的模块,都被注册到了moduleMap里面                   /*define ：主要作用moduleMap中注册模块         *name           模块的名称         *dependencies   模块的依赖项         *factory        模块的函数体         */                 define:function(name,dependencies,factory){             if(!moduleMap[name]){                 //模块的结构                 var module = {                     name:name,                     dependencies:dependencies,                     factory:factory                 };                 moduleMap[name] = module;             }             return moduleMap[name]         },         /*use： 主要作用得到模块的使用权         *name   模块的名称         *         */         use:function(name){             //module 需要使用的模块的引用             var module = moduleMap[name];                         if(!module.entity){                 //用来存储依赖项引用,用于传入factory,方便函数调用                 var args = [];                 //遍历module的依赖项数组                 for(var i=0;i<module.dependencies.length;i++){                     //检测依赖项数组的entity属性,如果已经使用,获取引用                     if(moduleMap[module.dependencies[i].entity]){                         args.push(moduleMap[module.dependencies[i]].entity)                     }                     //如果没有使用,则获取这个模块的使用权                     else{                         args.push(this.use(module.dependencies[i]))                     }                 }                                 module.entity = module.factory.apply(noop,args) //noop 空函数             }             return module.entity;         },         /*实现按需加载模块,而不是一次性加载所有模块         *实现原理：动态创建script标签,设置src,添加到document.head,监听完成的事件         *fileMap 记录已经加载的文件的路径,防止重复加载,当所有加载完,执行回调         */         require:function(pathArr,callback){             for(var i = 0;i<pathArr.length;i++){                 var path = pathArr[i];                 //如果还没有加载                 if(!fileMap[path]){                     var head = document.getElementByTagName("head")[0];                     var node = document.createElement("script");                     node.type= "text/javascript";                     node.async="true";                     node.src = path+".js";                     //当加载完成后,                     node.onload = function(){                         fileMap[path] = true;                         head.removeChild(node);                         checkAllFiles()

转载于:https://www.cnblogs.com/GoodPingGe/p/5171420.html