豆瓣do2.js的使用比较

这两天开始上手一些jQuery，当然是直接从不会JavaScript开始学习，现在做了一个小的应用，因为需要对于不同的页面引入不同的js以及css文件，所以如果直接都写在前台的html代码中就显得很臃肿而且不方便管理，所以急切需要一个js的管理库进行。

1 include库

网上找到了一个算是jQuery的插件，直接对于jQuery进行扩展，具体出处已经不知道了，暂且称其为“include库”，因为这个扩展的代码其实就是实现类似c#中using语句一样，当然，没有命名空间~

代码类似这样：

$.includePath='themes/custom-theme/';$.include(['jquery-ui-1.8.7.custom.css']);$.includePath='ui/';$.include(['jquery-ui-1.8.7.custom.js']);$.includePath="main/css/";$.include(['main.css']); $.includePath='main/js/';$.include(['mh_alert.js','mh_menu.js','mh_btn.js']);

这里，我们其实是首先设置路径然后进行加载，然后我把需要的写成了一个单独的js文件，这样我在html中就只需要加载这三个文件：

< script type="text/javascript" src="lib/jquery/jquery-1.4.2.min.js">< script type="text/javascript" src="main/js/loadJs.js">< script type="text/javascript" src="main/js/dt_manager.js">

这样一来真个页面就显得有条理，但是不同舒服的是这一个是顺序执行。

2 do库

上豆瓣的童鞋都知道豆瓣在测试豆瓣站点这个服务，关注了一个豆瓣的前端攻略站点，貌似是豆瓣的工程师，以前看过他们的js库组框架，因为当时不懂js所以就只是看过，并没有过脑子，现在因为需要就突然想起来了。

看一下do的简介：

    小站的Javascript开发是基于一个非常轻量的框架Do（Do是Douban的前两个字母），压缩后

    仅有961bytes，个头小但作用大，它是整个小站Javascript代码的管理者和组织者。

    用它有什么好处：
    1. 对各种用途的JS代码进行有条不紊的管理。JS的用途可以分为：
    a. 模块级的JS。处理一个模块里的交互逻辑，它会随这个模块共存亡；
    b. 页面级的JS。仅在特定页面里通用的处理，或负责模块间的交互等；
    c. 全站级的JS。是重用度高的通用组件，通用的事件处理机制等。

额，其实我要的就是这个功能，说的很全了，还有一个就是貌似对于性能有提高，所以就把应用的首页修改以后，迁移了一个do版本。

do的引用文件写法如下：

Do.add('js-com',{path:'lib/jquery/jquery.tinyscrollbar.min.js',type:'js'});Do.add('css-all',{path:'themes/custom-theme/jquery.ui.all.css',type:'css'});Do.add('css-cust',{path:'themes/custom-theme/jquery-ui-1.8.7.custom.css',type:'css'});Do.add('css-button',{path:'themes/custom-theme/jquery.ui.button.css',type:'css'});Do.add('css-tabs',{path:'themes/custom-theme/jquery.ui.tabs.css',type:'css'});Do.add('js-cust',{path:'ui/jquery-ui-1.8.7.custom.js',type:'js'});Do.add('js-e-core',{path:'ui/jquery.effects.core.js',type:'js'});Do.add('js-e-blind',{path:'ui/jquery.effects.blind.js',type:'js'});Do.add('css-main',{path:'main/css/main.css',type:'css'});Do.add('js-mh-alert',{path:'main/js/mh_alert.js',type:'js',requires:['js-com']});Do.add('js-mh-menu',{path:'main/js/mh_menu.js',type:'js'});Do.add('js-mh-btn',{path:'main/js/mh_btn.js',type:'js'});

相比较而言，同样多的文件，do貌似要写更多的行，额，这点需要改进，嘿嘿如果，将path做成数组就行了呗（自己这样任务），然后，do貌似不是add就加载而是在使用以后才会加载，所以，当你使用：

Do('js-com','css-cust','js-cust','css-main','js-mh-alert','js-mh-menu','js-mh-btn');

需要的类库才会加载进来，额，这点貌似挺好。

3 比较

对于这两种不同的方式，肯定有不同的闪光点，这里就开始进行分析：

速度：

在同一台笔记本上进行，为了公平起见，这里就进行10次测试（火狐，本来想使用chrome来着，但不能保存记录），当然对于测试来说，其实10次是在太不科学了，这里就权当是娱乐吧。

从得到的不可靠数据中我们可以发现do的反应没有include快，这个貌似很正常，你可以自己分析一下。数据就不发了，不可靠啊~嘿嘿~

友好性：

因为include的加载顺序执行，而do号称是异步并发，但是实际使用没有发现存在更好的体验，因为，通过火狐发现貌似这些还是继续使用原有的顺序执行，所以，体验和include一样，甚至没有include好，因为include按部就班，改什么就是什么。

易用性：

因为do是按照模块划分，以后升级js插件以后模块不变，但是，通过使用一些函数封转，我们也可以让include实现相同的功能，例如，includeLoad()或是loginLogin()，以后升级的使用也只是需要修改函数就行了，不过，do的分割力度更小，而且这些分割是在使用的时候已经存在了的，所以更加自然。

同时如果你对于简介有癖好，前端只需要引入一个文件的do绝对是首选。

总体来说，do作为一种项目js或是css文件选择也是挺不错的，当然如果能够真的实现异步并发就更好了，嘿嘿，这里作为一个js菜鸟就这样发发杂文吧~