上一篇讨论了seajs的两种加载文件的方式。
但是在平常使用中有很多情况一个页面会加载几个,甚至更多的js文件。当这种情况产生时,无论采用seajs.use直接加载 或者 script标签+ seajs.use的方式加载都无可避免的导致加载代码又臭又长,不好维护。
有一种很简单的方案可以有效的减少代码,聪明的你一定已经想到了----循环。
<script>
var seaConfig = {
a: './js/a.js'
, b: './js/b.js'
};
for(var i in seaConfig) {
seajs.use(seaConfig[i]);
}
</script>
如上(a.js和b.js请脑补),可以将seaConfig中配置的文件,都加载到页面上,这里可以通过seajs.cache对象来看这两个文件是否加载了,如下图
这种方式有几个好处:
1、可以极大的减少加载的代码量,同时也可以统一管理加载位置。
2、可以给所有的加载出来的对象都做一些统一处理,方法很简单,如下代码所示;
seajs.use(seaConfig[i], function(e) {
// do something to e;
});
<script>
var seaConfig = {
a: './js/a.js'
, b: './js/b.js'
};
seajs.config({
alias: seaConfig
});
// 这么使用即可
seajs.use('a');
seajs.use('b');
</script>
运行效果是一样的,只是这样会产生一个问题,因为config中的对象,seajs会做自动合并,当再次调用seajs.config时之前的配置都会被覆盖,如果老项目中已经配置了paths等对象,而又和你新增的目录相冲突的话,那你就确实悲剧了,比如上例中,如果原项目中配置了
paths:{'js': 'js/xxxx'}
,而a.js的路径刚好为,a: 'js/a.js',在不能改动paths.js的前提下,a.js就无法正常加载。
有一种比较好玩的方法,可以绕过这个问题,既可以不改动原有paths,也可以加载新的a.js,这种奇葩的方法,我们在seajs使用小结(三)中介绍吧。