之前一个大牛推介我使用一个前端管理框架：Do.js，曾看过一看，无奈js基础太差，一时没看懂。
昨天移植旧系统中的一个省市县三级联动插件时看到了do.js的使用，于是移植时顺带把旧系统中的Do.js一并移植了过来，觉得蛮好用的，于是昨晚回家仔细学习kejun的do.js。
Do.js是豆瓣的前端框架，kejun在GitHub上公布了代码以及相关demo。但是我喜欢全面一点的了解一个东西。所以，我照着kejun的demo重新编辑了一份demo，也算加深对do.js的理解吧，这样也方便以后更加方便的使用。下载地址：https://github.com/kejun/Do，在线demo：http://kejun.github.com/Do/
简单的使用方法:我就用我用到的省市区三级联动插件areaopt的使用作为例子吧。
<meta charset="utf-8">
<title>Do.js Demo</title>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script><!--引入jQuery，这是DO的默认核心类库-->
<script type="text/javascript" src="do.js"></script><!--引入do的核心文件-->
</head>
<body>
<div id="demo3" class="mod">省市区三级联动
<input type="text" id="areacity" value="">
</div>
<script>
//加载省市县三级联动插件的核心文件
Do.add('areaopt-css', {path : './areaopt/theme/jquery.areaopt.css', type : 'css'});
Do.add('areaopt-js', {path : './areaopt/areaopt.data.js', type : 'js'});
Do.add('areaopt', {path : './areaopt/jquery.areaopt.js', type : 'js', requires : ['areaopt-css', 'areaopt-js']});
Do('areaopt', function(){
$.areaopt.bind("#areacity");
});//绑定插件
</script>
</body>
上面将areaopt定义成一个模块，然后用Do.add加载这个模块供页面调用
模块定义的方法：
{
'mod1' : { path: 'URL 1', type: 'js|css', requires: ['文件地址|模块名'] },
'mod2' : { path: 'URL 2', type: 'js|css', requires: ['文件地址|模块名'] },
'mod3' : { path: 'URL 3', type: 'js|css', requires: ['文件地址|模块名'] },
...
}
这里，我在引用一下从别处看来的一段对于Do.js的说明，这段话我实力太差，实在说不出来。。。
首先，通过script标签引入的外部js是阻塞浏览器进程的，如此一来就会拉长DOMContentLoaded完毕的时间，但是采用异步加载则 将加载js的时间挪至了DOMContentLoaded之后到Load完毕之间，DOMContentLoaded表示整个页面已经渲染完，它完成的越 快，用户感知到的网页打开速度也就越快，后续的加载已不影响用户的正常使用，所以后边的耗时长短并不重要。
其次，Do的模块管理功能也是其核心之一，比如一个页面需要加载三个js，一个外部js-a，一个内嵌js-b，一个外部js-c，而js-c依赖js-b，js-b又依赖于js-a，那么就可以通过下边的代码实现：
Do.add('model-a',{path:'http://www.benben.cc/model_a.js',type:'js',charset:'utf-8'});
Do.add('model-c',{path:'http://www.benben.cc/model_a.js',type:'js',charset:'utf-8'});
Do('model-a',function() {//model-b here...},'model-c');
</script>
我不太适合描述事物，而是比较喜欢动手去验证，去编写属于自己的demo,所以我还是将我的demo放上来吧。有不对的地方，喜欢各位前辈大牛指出。谢谢。
点击此处下载demo