Do v2.0 pre 轻量级文件加载和依赖管理解决方案

使用方法: 只需要在head里引入do.js文件

        <script src="../do.min.js"></script> (4.4k, gzip:1.8k)
        

Demo 1: 执行inline script

inline的javascript如果依赖核心库需放入Do中。如下:
    Do(function(){
        $('#demo1 a').click(function(e){
            e.preventDefault();
            $(this).animate({fontSize: '24px'}, 1000).fadeOut(1000);
        });
    });
    
Demo: Click Here.

Demo 2: 依赖外部文件

2.1 最后一个参数是处理方法,前面是依赖列表,可以是文件地址或模块名。如:
    Do('js/tip.js', function(){
        $('#demo2 a').simpleTip();
    });
    
2.2 inline定义依赖关系。如:
    Do({path: 'js/tip.js', requires:['tip-base.js']}, function(){
        $('#demo2 a').simpleTip();
    });
    
Demo: Mouseover Here.

Demo 3: 依赖模块方式

模块的定义。模块定义建议统一放在一个地方,如head里。
        // add方法定义模块和模块的依赖关系。注:add方法并不会加载模块,只是添加模块配置。
        Do.add('lightBox-css', {path: '{URL}', type: 'css'});
        Do.add('lightBox', {path: '{URL}', type: 'js', requires: ['lightBox-css']});
    
在使用的时候更简便且不用担心文件的版本问题。注:在使用时才会执行文件加载
        // 引用模块
        Do('lightBox', function(){
            $('#demo3 a').lightBox({
                imageLoading:           'assets/lightbox-ico-loading.gif',
                imageBtnPrev:           'assets/lightbox-btn-prev.gif',
                imageBtnNext:           'assets/lightbox-btn-next.gif',
                imageBtnClose:          'assets/lightbox-btn-close.gif',
                imageBlank:             'assets/lightbox-blank.gif'
            });
        });
    
Demo: Nominees: Best Rock Album Nominees: Best Alternative Music Album

Demo 4: 在DOMReay后执行

如果要确保顺利操作页面上的任意结点,最好使用ready方法,让队列在DOMReady后执行,当然这样会比直接用Do延后一些执行。
    Do.ready('dialog', function() {
        var dlg = dui.Dialog({
             content: 'hi, 在ready触发队列执行是一种更稳妥的选择. <pre>  Do.ready(your queue...)</pre>', 
             buttons: ['confirm'],
             width: 400
        }).open();
        setTimeout(function(){
          dlg.update();
        }, 0);
    });
    

Demo 5: Delay执行

有些JS不那么着急执行,不妨delay一段时间后再执行。比如:预加载一些东西。
    Do.delay(2000, function() {
      (new Image()).src = 'URL';
      (new Image()).src = 'URL';
      (new Image()).src = 'URL';
    });
    

Demo 6: 注入CSS

虽然不鼓励这么干,但有些时候的确有这样的需求。
    Do.css([
        '.dui-dialog .hd h3 { margin:0; }',
        '.dui-dialog-close:link { text-decoration:none; }'
    ].join(''));
    

Demo 7: 声明全局模块

声明了全局模块,后面的队列会默认先加载全局模块。在实际应用中不要滥用,只声明必要的,因为这样会影响一些性能。
    Do.global('dialog');
    

Demo 8: 配置Do

8-1: 关闭自动加载核心库功能。解决和传统引用混用的情况
    <script type="text/javascript" src="js/do.min.js" data-cfg-autoload="true|false"></script>
    
8-2: 指定其他核心库。注:将覆盖原有的
    <script type="text/javascript" src="js/do.min.js" data-cfg-corelib="http://img3.douban.com/js/packed_jquery.min2.js"></script>
    
8-3: 代码中修改配置
      // setConfig方法
      // 可以配置的参数,包括:
      // 1.加载超时
      Do.setConfig('timeout', 3000);

      // 2.超时回调
      Do.setConfig('timeoutCallback', function(url){
        // log timeout file.
      });

      // 3.设置核心库
      Do.setConfig('coreLib', [...]);

      // 4.模块列表
      /* 模块设置的格式:
          { 
            'mod1' : { path: 'URL 1', type: 'js|css', requires: ['文件地址|模块名'] },
            'mod2' : { path: 'URL 2', type: 'js|css', requires: ['文件地址|模块名'] },
            'mod2' : { path: 'URL 3', type: 'js|css', requires: ['文件地址|模块名'] },
            ...
          }
      */
      Do.setConfig('mods', {...});
    

Demo 9: 模块间的公共数据通讯

由于文件是异步加载的,所以执行的顺序不是固定的。如果模块间存在数据上的依赖,可以使用setData和getData方法:

     Do(function(){
        Do.getData('test', function(value){
          console.log(value); //1000
        });
     });

     Do('slow-js', function(){
         Do.setData('test', 1000);
     });

    

升级说明:

Do的加载列表改成并行加载。依赖模块的加载是顺序的。如:
      // 在旧版,mod2可以依赖mod1
      // 在新版,mod1和mod2是并行加载的
      Do('mod1', 'mod2', function() { ... });

      // 如果mod2依赖mod1在模块定义中声明,如:
      Do.add('mod2', { path:'url', type:'js', requires:['mod1'] });
      Do('mod2', function() { ... });