使用方法: 只需要在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 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 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 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: 声明全局模块
声明了全局模块,后面的队列会默认先加载全局模块。在实际应用中不要滥用,只声明必要的,因为这样会影响一些性能。
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() { ... });