搜索
首页web前端js教程根据配置文件加载js依赖模块_javascript技巧

要求:

根据下面的配置文件

复制代码 代码如下:

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                  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                      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                  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"));
声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
在Illustrator中加载插件时出错[修复]在Illustrator中加载插件时出错[修复]Feb 19, 2024 pm 12:00 PM

启动AdobeIllustrator时是否会弹出加载插件时出错的消息?一些Illustrator用户在打开该应用程序时遇到了此错误。消息后面紧跟着一系列有问题的插件。该错误提示表明已安装的插件存在问题,但也可能是由于VisualC++DLL文件损坏或首选项文件受损等其他原因引起。如果遇到此错误,我们将在本文中指导您修复问题,请继续阅读以下内容。在Illustrator中加载插件时出错如果您在尝试启动AdobeIllustrator时收到“加载插件时出错”的错误消息,您可以使用以下用途:以管理员身

Stremio字幕不工作;加载字幕时出错Stremio字幕不工作;加载字幕时出错Feb 24, 2024 am 09:50 AM

字幕在你的WindowsPC上不能在Stremio上运行吗?一些Stremio用户报告说,视频中没有显示字幕。许多用户报告说遇到了一条错误消息,上面写着“加载字幕时出错”。以下是与此错误一起显示的完整错误消息:加载字幕时出错加载字幕失败:这可能是您正在使用的插件或您的网络有问题。正如错误消息所说,可能是您的互联网连接导致了错误。因此,请检查您的网络连接,并确保您的互联网工作正常。除此之外,这个错误的背后可能还有其他原因,包括字幕加载项冲突、特定视频内容不支持字幕以及Stremio应用程序过时。如

插入超链接时Outlook冻结插入超链接时Outlook冻结Feb 19, 2024 pm 03:00 PM

如果您在向Outlook插入超链接时遇到冻结问题,可能是由于网络连接不稳定、Outlook版本旧、防病毒软件干扰或加载项冲突等原因。这些因素可能导致Outlook无法正常处理超链接操作。修复插入超链接时Outlook冻结的问题使用以下修复程序解决插入超链接时Outlook冻结的问题:检查已安装的加载项更新Outlook暂时禁用您的防病毒软件,然后尝试创建新的用户配置文件修复办公室应用程序卸载并重新安装Office我们开始吧。1]检查已安装的加载项可能是Outlook中安装的某个加载项导致了问题。

PHP实现无限滚动加载PHP实现无限滚动加载Jun 22, 2023 am 08:30 AM

随着互联网的发展,越来越多的网页需要支持滚动加载,而无限滚动加载是其中的一种。它可以让页面不断加载新的内容,使用户可以更流畅地浏览网页。在这篇文章中,我们将介绍如何使用PHP实现无限滚动加载。一、什么是无限滚动加载?无限滚动加载是一种基于滚动条的网页内容加载方式。它的原理是当用户滚动至页面底部时,通过AJAX异步调取后台数据,实现不断加载新的内容。这种加载方

js字符串转数组js字符串转数组Aug 03, 2023 pm 01:34 PM

js字符串转数组的方法:1、使用“split()”方法,可以根据指定的分隔符将字符串分割成数组元素;2、使用“Array.from()”方法,可以将可迭代对象或类数组对象转换成真正的数组;3、使用for循环遍历,将每个字符依次添加到数组中;4、使用“Array.split()”方法,通过调用“Array.prototype.forEach()”将一个字符串拆分成数组的快捷方式。

css加载不出来怎么解决css加载不出来怎么解决Oct 20, 2023 am 11:29 AM

css加载不出来的解决办法有检查文件路径、检查文件内容、清除浏览器缓存、检查服务器设置、使用开发者工具和检查网络连接等。详细介绍:1、检查文件路径,首先请确保CSS文件的路径正确,如果CSS文件位于网站的不同部分或子目录中,需要提供正确的路径,如果CSS文件位于根目录下,路径应该是直接的;2、检查文件内容,如果路径正确,那么问题可能出在CSS文件本身,打开CSS文件检查等等。

安装win7加载usb驱动失败怎么办安装win7加载usb驱动失败怎么办Jul 11, 2023 am 08:13 AM

在安装win7系统中,有网友遇到了加载usb驱动失败的情况,usb设备无法在新的win7系统中被识别,常见的u盘,鼠标等设备就无法使用了。那么安装win7加载usb驱动失败怎么办?下面小白就教下大家安装win7加载usb驱动失败的解决方法。方法一:1、首先我们打开电脑进入电脑系统,在电脑系统查看电脑的系统版本。确认电脑系统的版本与设备驱动的版本是否一致。2、确认驱动的版本后,将USB设备连接到电脑系统。电脑系统显示,设备无法连接到系统。3、在连接信息页面,点击帮助按钮查看帮助信息。4、如果电脑系

用JavaScript模拟实现打字小游戏!用JavaScript模拟实现打字小游戏!Aug 07, 2022 am 10:34 AM

这篇文章主要为大家详细介绍了js实现打字小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
2 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具