seajs使用小结(二)

上一篇讨论了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;
});


当然,这种方式,略显丑陋,其实seajs给我门提供了一种更为简单的方式----别名,也就是config中的alias对象,采用alias对象,采用如下代码:

<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使用小结(三)中介绍吧。




你可能感兴趣的:(seajs)