根据配置文件加载js依赖模块

要求:

根据下面的配置文件

代码如下:

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

写一个函数

def getfiles(name)

返回 加载某个name指定的页面,要加载的js文件列表,有依赖的要先加载

小菜解法

此题粗看起来很简单,实则不然。

难点在于依赖模块的加载时机。假如有这样的依赖关系:A-B&C、B-C,A模块依赖B模块和C模块,同时B模块又依赖了C模块,总不能让C加载两次吧!

小菜给出的这个解法,只是一个思路,肯定有比这更好的算法,小菜觉得可以用二叉树之类的算法解决,但小菜不会呀~~~

此算法没有考虑循环依赖的情景。

代码如下:

代码如下:

/**
  * 不考虑循环依赖
  * @type {Function}
  */
 var loadModule = (function(){
     /**
      * 业务逻辑封装
      * @type {{chainHead: {}, chainCurrent: {}, srcCache: {}, main: main, load: load, findModule: findModule}}
      */
     var logics = {
         chainHead: {},     //链表头
         chainCurrent: {},  //链表当前节点
         srcCache: {},      //module src 缓存
         /**
          * 对外接口
          * @param modules  配置对象
          * @param name  模块名称
          * @returns {Array} 依赖模块列表,按照加载先后顺序排列
          */
         main: function(modules, name){
             var nameArray = [],  //模块名称列表
                 srcArray = [],   //依赖模块列表
                 nameStr = "",    //模块名称字符串集
                 repeatRegex = /(^| )([\w]+ ).*\2/,  //模块名称去重正则
                 i = 0;
             //粗略加载所有依赖模块
             this.load(modules, name)
             //构造模块名称字符串集
             this.chainCurrent = this.chainHead;
             while(this.chainCurrent.next){
                 nameArray.push(this.chainCurrent.name);
                 this.chainCurrent = this.chainCurrent.next;
             }
             nameStr = nameArray.join(" ") + " ";  //统一标准,末尾补一个空格
             //依赖模块去重
             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));  //去掉补充的多余空格
             //依赖模块名称转换为模块路径
             nameArray = nameStr.split(" ");
             for(i = 0; i < nameArray.length; i++){
                 srcArray.push(this.srcCache[nameArray[i]]);
             }
             return srcArray;
         },
         /**
          * 递归加载模块
          * @param modules  配置对象
          * @param name  模块名称
          */
         load: function(modules, name){
             var node = {},
                 module = this.findModule.call(modules, "name", name),
                 i = 0;
             //判断模块是否存在
             if(!module){
                 throw Error("依赖模块 " + name +" 未找到");
             }
             //构造模块依赖链表
             node.name = name;
 //            node.src = module.src;
             this.srcCache[name] = module.src;
             node.next = this.chainHead;
             this.chainHead = node;
             //递归依赖
             if(module.require && module.require.length){
                 for(i = 0;i < module.require.length; i++){
                     this.load(modules, module.require[i]);
                 }
             }
         },
         /**
          * 根据指定属性名称和属性值查找模块
          * @param name  属性名称
          * @param value  属性值
          * @returns {*}
          */
         findModule: function(name, value){
             var array = this,
                 item = {},
                 i = 0;
             //遍历模块
             for(i = 0; i < array.length; i++){
                 item = array[i];
                 //获取指定模块
                 if(item && item[name] === value){
                     return item;
                 }
             }
             //找不到返回null
             return null;
         }
     };
     //暴露对外接口
     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"));

(0)

相关推荐

  • js模块加载方式浅析

    简介: 前端模块化开发日渐鼎盛,如何将零散的插件或者是普通的js脚本文件统一管理及引用,是众多开发者共同的目标.本人是从事.net开发的,最近对前端的一些东西特别的感兴趣,也会尝试的夹杂一点自己的想法,写一些小东西.东西不牛逼,但是感觉用起来还是方便那么一点的. 下面就展示一下简短的小代码. 中心思想:通过外部调用事先封装好的模块加载方法,传入参数(包括主目录及模块js或者css的目录 ),在程序运行的同时,会动态的将相应的css或者是js代码追加引用到head标签内,这样,就可以使用被引用的文

  • AngularJs动态加载模块和依赖注入详解

    废话不多说,进入正题... 首先我们看下文件结构: Angular-ocLazyLoad --- demo文件夹 Scripts --- 框架及插件文件夹 angular-1.4.7 --- angular 不解释 angular-ui-router --- uirouter 不解释 oclazyload --- ocLazyload 不解释 bootstrap --- bootstrap 不解释 angular-tree-control-master --- angular-tree-cont

  • Node.js模块加载详解

    JavaScript是世界上使用频率最高的编程语言之一,它是Web世界的通用语言,被所有浏览器所使用.JavaScript的诞生要追溯到Netscape那个时代,它的核心内容被仓促的开发出来,用以对抗Microsoft,参与当时白热化的浏览器大战.由于过早的发布,无可避免的造成了它的一些不太好的特性. 尽管它的开发时间很短,但是JavaScript依然具备了很多强大的特性,不过,每个脚本共享一个全局命名空间这个特性除外. 一旦Web页面加载了JavaScript代码,它就会被注入到全局命名空间,

  • 利用Dojo和JSON建立无限级AJAX动态加载的功能模块树

    看了"使用hibernate实现树形结构无限级分类"这篇文章后,我也想将自己在所有开发的项目中使用的功能模块树的实现方法以及完整DEMO(含源码)贴出来和大家分享.其实在我的博客里是老早贴出来的,由于时间关系没好好整理.        功能模块树是几乎在每个项目里都要用到的东西,利用Dojo的好处就是可以实现树的子节点的动态加载,这在树节点很多的情况下是很有用的.         下载附件二dojotree.rar,解压后将dist\dojotree.war部署到应用服务器即可浏览DE

  • seaJs的模块定义和模块加载浅析

    SeaJS 是由玉伯开发的一个遵循 CommonJS 规范的模块加载框架,可用来轻松愉悦地加载任意 JavaScript 模块和css模块样式.SeaJS非常小巧,小巧在于压缩和gzip后体积只有4K,而且接口和方法也非常少,SeaJS 就两个核心:模块定义和 模块的加载及依赖关系.SeaJS非常强大,SeaJS可以加载任意 JavaScript 模块和css模块样式,SeaJS会保证你在使用一个模块时,已经将所依赖的其他模块载入到脚本运行环境中.玉伯的说法,SeaJS可以让你享受写代码的乐趣,

  • Extjs4.1.x 框架搭建 采用Application动态按需加载MVC各模块完美实现

    中午的时候发了第一篇 Extjs4.1.x 框架搭建 采用Application动态按需加载MVC各模块 ,发现实现上还是有问题,有很多理解不到位的地方,晚上详细解决下了,终于实现MVC各模块按需加载了,哈皮. 上篇文章中,关于ExtJs这个玩意的评论就跟java和.Net那个好一样,既然上了贼船,就难下了,而且对于企业级的应用我个人觉得Extjs框架还是不错的,尤其是没有UI设计的团队(苦逼的程序员就兼UI吧),起码难得发现一个做的比较好的UI框架(国产的miniUI貌似看的过去,其他的就有点

  • node.js使用require()函数加载模块

    详细说明均以写在注释之中,这里就不啰嗦了,小伙伴们自己详细看吧,千万别吧注释当成空气了. 复制代码 代码如下: /*在node中,可以使用require()函数来加载模块.  * require函数使用一个参数,参数值可以带有完整路径的模块的文件名,也可以为模块名.当使用node中提供的模块时,在require函数中只需要指定模块名即可.  * */ //建立一个页面2.js;代码如下 var name="思思博士"; exports.name=name; //建立一个页面1.js;代

  • in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案

    国外的像基于jQuery的RequireJs,YUI Loader,LabJs,RunJs,国内也有淘宝的SeaJs,豆瓣的DoJs等,这些都是一些十分优秀的模块加载器.但是本文将会向大家介绍一个新的开源的轻量级"多线程"异步模块加载器In.js,In的开发借鉴了Do的一些思路和使用习惯,在此期间感谢@kejun同我的耐心交流,In.js压缩后只有4.77k,不仅小巧而且十分好用. 优点: 按需加载 无阻塞加载 依赖关系管理 颗粒化模块管理 如何使用? A.引入In.js 复制代码 代

  • 深入探寻seajs的模块化与加载方式

    由于一直在使用,所以了解了下seajs的源代码.这里是我对下面几个问题的理解: 1.seajs的require(XXX)的方法是怎样实现模块加载的? 2.为什么需要预加载? 3.为什么需要构建工具? 4.构建前后的代码究竟有些什么区别,为什么要这么做? 问题1: seajs的require(XXX)的方法是怎样实现模块加载的? 代码逻辑比较绕,对源代码的理解放在文章的末尾,这里先简单梳理下模块加载的逻辑: 1.从seajs.use方法入口,开始加载use到的模块. 2.use到的模块这时mod缓

  • Windows下使用apache模块实现合并多个js、css提高网页加载速度

    现在的网站表现力越来越丰富,页面加载的js和css自然也越来越多.当网站页面上的js和css太多,浏览器打开页面的速度就会很慢,明显降低了用户的体验.使用mod_concatx, 可以合并多个文件在一个http响应报文中,可以有效提高js/css的加载速度. 示例效果如下: mod_concatx模块是在mod_concat基础上修改的,感谢他们的工作. 原有的mod_concat模块有很大的参考价值,但实际作用不大. 该模块存在以下三个问题: 1.每次都会重新向客户端发数据,没有合理利用浏览器

随机推荐