requirejs实现对动态combo的支持——w3cdream|前端学习-开发

'I'm W3cdream,创造',前·所·未·有
requirejs实现对动态combo的支持

发布作者:萧强   发布时间:2014-03-11   阅读次数:4276

combo是为了减少请求数, 但是全combo成一个不好, 最佳实践还是合理拆分成几个文件, 真实环境里能减小加载总时间, 并在一定程度上提高
浏览器端缓存的利用率;

现在seajs的例子里都是用的config的preload来支持服务器端combo, 但是有个问题:

 seajs要等preload数组里所有项目都加载完, 才会开始处理具体的seajs.use调用, 比如:

seajs.config({
  preload: ['m1', 'm2+m3']
});

seajs.use(['m1'], function(m1) { /*位置1*/ });
seajs.use(['m2', 'm3'], function(m2, m3) {...}); 

必须等'm1.js', 'm2+m3.js'两个文件都加载完了, 才会开始执行/*位置1*/处的代码.

万一'm2+m3.js'要等比较久, 等于变相推迟了js的执行, 不懂有没有好的解决方案.

在这个问题上require的path式id, 刚好能更平顺的支持动态combo.对combo支持更好

combo.js

define('a',function(){ 
   return { 
      name:'nick', 
   } 
}); 
define('b',function(){ 
   return { 
      sex:'man'
   } 
}); 

 main.js

define(function(a){ 
  
    require.config({ 
            baseUrl: '', 
            paths: { 
                    'a' : 'engine/combo', 
                    'b' : 'engine/combo'
            } 
    }); 
  
    require(['a','b'],function(a,b){ 
       alert(a.name+"|"+b.sex) 
    }) 
  
}); 

 ok

这样 requirejs不会在发a.js和b.js两个了,而是发送combo.js动态请求给server,当然,需要server支持combo的功能来把a.js和b.js压缩成为上面的combo.js

但是这样还有这么一个问题,比如
有a.js b.js c.js三个模块
有两个请求src='a.js+b.js' 和 src='a.js+c.js'
那么这两个请求里面都会包含有a.js 模块,因为server的combo是不知道你已经请求过了a.js模块了,那么,这也是个缺陷。至少浪费带宽哇,也可能会覆盖前面模块的已经更新的属性
不知道requirejs是否有检查模块是否已经存在的api,否则,只能在本地自己记录一个已经请求过的模块的列表,然后每次请求的时候从列表里面过滤

常用昵称:萧强,全端布道者

姓名:“刘晓强”,W3CDream创始人,目前就职于易点付。专注于web前端和移动端方面知识的研究,熟练掌握photoshop和AI,喜爱Flat UI设计和Metro UI风格,熟练掌握CSS3+HTML5技术、LESS CSS和Sass CSS,还有jQuery框架方面及一些前端框架bootstrap响应式设计等。新浪微博
友荐云推荐

前端资源

热点文章

新闻资讯

标签云

友情赞助