RequireJS 动态加载依赖文件插件

最新推荐文章于 2021-10-28 22:36:30 发布

kittyjie

最新推荐文章于 2021-10-28 22:36:30 发布

阅读量4.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript学习

本文链接：https://blog.csdn.net/kittyjie/article/details/52624244

JavaScript学习专栏收录该内容

48 篇文章

订阅专栏

介绍了一种在RequireJS中实现条件加载模块的方法——dyload.js插件，该插件可以根据不同条件加载不同的模块，确保正确加载顺序并提供简单易用的API。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用requirejs的define时候，有时候需要根据一些条件判断去加载某些文件，比如在移动版下加载某个插件，在PC版下加载另一个插件，网上常见的方法一般是的define里面再去用require方法加载，但这样有个问题，就是如果后面还有文件依赖这个插件，require方法是不能保证在下面的文件使用时保证这个插件加载完毕的。

参考了angularAMD的ngload插件和requirejs-promise插件，自己写了一个满足当前项目的业务逻辑的插件，叫dyload.js

/**
dyload.js

Example:
1)
	dyload!window.isMobile?a:b|c|d
	equal to
	if(window.isMobile)require([a])
	else require([b,c,d])
	
2)
	dyload!window.isMobile?a|b
	equal to
	if(window.isMobile)require([a,b])
**/
define({
    load: function (name, req, onload) {
        'use strict';
        
		var clause = name.split("?"),isTrue,allFiles,whichFiles;
		isTrue = window.eval(clause[0]);
		allFiles = clause[1].split(":");

		if(isTrue || (!isTrue && allFiles.length > 1)){
			
			whichFiles = isTrue ? allFiles[0] : allFiles[1];
			req([].concat(whichFiles.split("|")),function(result){
				onload(result);
			})
		}
		else{
			onload.apply(null, arguments);
		}
        
    }
});

//需要在requirejs中配置一下：

require.config({
        config: {
            paths: {
                'dyload': '/path/to/dyload'
            }
        }
    });

用法很简单：

define(["require","angular",'directives/common.directive', "dyload!window.isMobile?directives/menu-list-m.directive:directives/paging.directive|directives/menu-list.directive",
	], function(require,ng) {
	//window.isMobile ? require(["directives/menu-list-m.directive"]):require(["directives/menu-list.directive"])
});

//mobile下加载menu-list-m.directive，PC下加载另外两个文件

或者

define(["require","angular",
	'services/http-utils.service','dyload!!window.isMobile?services/uigrid-utils.service'], function(require,ng) { 
	
});

//PC下加载uigrid，mobile下不加载

angularAMD：https://github.com/marcoslin/angularAMD

requirejs-promise：https://github.com/jokeyrhyme/requirejs-promise

用r.js压缩代码的时候，使用这个插件会报错，r.js找不到这个玩意。需要在压缩配置文件里面的onBuildRead和onBuildWrite里处理一下