Do.js使用

之前一个大牛推介我使用一个前端管理框架：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的使用作为例子吧。

< head >
< 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，那么就可以通过下边的代码实现：

< script  type ="text/javascript" >
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

 

 

转载于:https://www.cnblogs.com/listenRain/archive/2012/11/09/2762473.html