RequireJS 动态加载依赖文件插件

在使用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里处理一下

你可能感兴趣的:(JavaScript学习)