Ajax一统天下之Dojo整合篇


Posted in Javascript onMarch 24, 2007

随着Ajax应用越来越多,各种Ajax Library(Prototype),Ajax Framework(DWR),Ajax Toolkit(Dojo,YUI)也日渐丰富起来,有没有办法将这些结合起来呢?类似Spring的做法,当然我没法整出一个IoC的微内核将各种Ajax“粘合”起来,但是将这些Ajax可重用的组件加以整合应该是没有问题的,这样即可以避免重复发明轮子,还可以针对各种Ajax进行扬长避短,形成一套比较全面的Ajax解决方案。同时也增加了开发人员选择自己熟悉Ajax组件的灵活性。 
目前我们公司已经形成一套基于Ajax的完整的产品,封装了自己的Ajax前后台通讯机制以及提供了可重用的客户端组件,我尝试了一下将我们的产品与Dojo Toolkit进行整合。下面是我的做法,整合的是Dojo ComboBox Widget,它实际上是一个Auto Completion组件,类似Google Suggest。 
从Dojo提供的测试类test_ComboBox.html入手,加debugger进行跟踪调试,理清Dojo Widget的加载流程。 
经过跟踪调试,对Dojo的Widget有了一个大致的了解:首先是加载当前需要的JavaScript文件,然后对整个html页面进行解析。在页面上使用widget有三种方式:一种就是在html元素上添加一些dojo能解析的属性,如 
<select dojoType="combobox" style="width: 300px;" name="foo.bar1" autocomplete="false"  
        onValueChanged="setVal1"  
    >   
其中的dojoType,autocomplete, onValueChanged都是dojo能够识别的属性,这个有些类似typestry的做法。第二种就是使用DojoML的写法: 
<dojo:combobox style="width: 300px;" name="foo.bar1" autocomplete="false"  
        onValueChanged="setVal1"  
    />   
这种写法有些变态,跟jsp中的自定义标签基本就是一回事,只是把解析的过程从后台移到了前台来做,后来看到有些框架也这么干,也就没话说了。 
还有一种写法是使用javascript在页面加载完成之后,在指定的html元素创建widget: 
var combo;   
dojo.addOnLoad(init);   
function init(){   
combo = dojo.widget.createWidget("dojo:ComboBox", {name:"prog",autocomplete:false,dataUrl:"comboBoxData.js"}, dojo.byId("progCombo"));   
    }   
在对元素解析创建的时候同时利用dojo定义的combobox html模版以及css模版完成在页面中插入最终的combobox控件的目的。 
接下来看看Dojo ComboBox如何通过ajax与后台通讯,Dojo ComboBox提供了两种自动完成方式:一种是将所有的数据下载到前台缓存,然后在前台根据用户输入的数据从缓存中匹配出自动完成所需要的数据列表。另外一种就是根据用户每次输入的数据实时向后台发送请求获得要自动完成的数据,当然这个数据也会以用户输入的内容为key,以得到的数据为value进行缓存。对于两种方式,Dojo通过不同的DataProvider来实现(dojo.widget.incrementalComboBoxDataProvider和dojo.widget.basicComboBoxDataProvider),这一点非常精妙,让我非常佩服。而这两个类都是通过dojo.declare(“className”, “parentClassName”, constructor, declarationBody)这种方式来做的,这个也和我们以往的做法有别。总之就是比较精妙啦! 
Dojo向后台发送请求的过程封装在dojo.io.bind()这个方法中,而我们有自己的一套前后台通讯机制,因为必须想办法将dojo.io.bind()替换成我们的做法来达到最终整合的目的,因为Dojo ComboBox的数据交互都是封装在DataProvider里面的,因为我们只需要实现自己的DataProvider就可以搞定了,这样我们无须修改Dojo的源,而且还可以使用Dojo的继承机制,从已有的DataProvider集成复写掉我需要替换的方法,这让我有了写Java的感觉。 
dojo.declare(   
    "dojo.widget.incrementalDoradoComboBoxDataProvider",   
    dojo.widget.incrementalComboBoxDataProvider,   
    null,   
    {   
        //要替换的方法,使用自己的通讯机制   
        startSearch: function(/*String*/ searchStr, /*Function*/ callback){   
            if(this._inFlight){   
                // FIXME: implement backoff!   
            }   
            var cmd = getControl(this.searchUrl);   
            cmd.parameters().setValue("searchString", searchStr);   
            var _this = this;   
            EventManager.addDoradoEvent(cmd, "onSuccess", function(command){   
                    _this._inFlight = false;   
                    //convention:   
                    //1.the key must be "result"   
                    //2.the data format must be [["Alabama","AL"],["Alaska","AK"]] or [{"Alabama":"AL"},{"Alaska":"AK"}]   
                    var data = dj_eval(command.outParameters().getValue("result"));   
                    if(!dojo.lang.isArray(data)){   
                        var arrData = [];   
                        for(var key in data){   
                            arrData.push([data[key], key]);   
                        }   
                        data = arrData;   
                    }   
                    _this._addToCache(searchStr, data);   
                    callback(data);   
                }   
            );   
            cmd.execute();   
            this._inFlight = true;   
        }   
    }   
);   
通过上面的处理,就可以使用我们自己的前后台通讯机制来完成请求数据的目的。 
接下来就是生成我们的页面,添加dojo加载js的脚本: 
<script type="text/javascript" src="./dojo/dojo.js"></script>  
<script type="text/javascript">  
    dojo.require("dojo.widget.ComboBox");   
    // 注意这里有一个定位的问题,查找路径必须加"..",   
    // 因为dojo在查找DoradoComboBox.js的时候会从"/dojo"而不是"/"目录开始查找   
    // 最终使用xmlhttp加载的路径是/dojo/../adapter/dojo/widget/DoradoComboBox.js   
    dojo.setModulePrefix("adapter.dojo.widget","../adapter/dojo/widget");   
    dojo.require("adapter.dojo.widget.DoradoComboBox");   
</script>  
下面要加载的控件部分html: 
<input dojoType="ComboBox"    
                    dataUrl="cmdComboboxSearch"    
                    dataProviderClass = "dojo.widget.incrementalDoradoComboBoxDataProvider"    
                    style="width: 200px;"    
                    name="sample2"    
                    autocomplete="false"  
                    >   
这样我们的整合工作就完成了,对了还有文件的目录结构: 
Webapp 
|--adapter(存放所有用于整合的js文件) 
|------dojo 
|---------widget 
|-----------DoradoComboBox.js 
|--dojo(dojo的所有js文件) 
|------src 
|------dojo.js 
|--js(我们自己组件库的js文件) 
|--WEB-INF
结论 
通过扩展之后还是发现了不少问题: 
1、由于集成的两套东西都会在Object.prototype, Array.prototype, Function.prototype上加一些自己的东西,因此这样非常容易带来命名上的冲突,已经碰到这个问题。 
2、由于二者都会使用一些全局性的函数,变量等,这样也会存在潜在的冲突,不过目前还没有碰到。 
3、多套js库要同时加载,客户端的压力是不是大了些?性能可以接受吗?目前还没有测试不得而知。

Javascript 相关文章推荐
[原创]保存的js无法执行的解决办法
Feb 25 Javascript
JS 分号引起的一段调试问题
Jun 18 Javascript
javascript 遍历验证所有文本框的值
Aug 27 Javascript
js作用域及作用域链概念理解及使用
Apr 15 Javascript
jQuery实现长文字部分显示代码
May 13 Javascript
jquery插件NProgress.js制作网页加载进度条
Jun 05 Javascript
JS调用某段SQL语句的方法
Oct 20 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
Jan 16 Javascript
微信小程序 常用工具类详解及实例
Feb 15 Javascript
angular中使用Socket.io实例代码
Jun 03 Javascript
如何理解Vue的v-model指令的使用方法
Jul 19 Javascript
jQuery实现电梯导航模块
Dec 22 jQuery
dojo 之基础篇(三)之向服务器发送数据
Mar 24 #Javascript
dojo 之基础篇(二)之从服务器读取数据
Mar 24 #Javascript
dojo 之基础篇
Mar 24 #Javascript
jQuery使用手册之 事件处理
Mar 24 #Javascript
jQuery使用手册之三 CSS操作
Mar 24 #Javascript
jQuery使用手册之二 DOM操作
Mar 24 #Javascript
jQuery使用手册之一
Mar 24 #Javascript
You might like
PHP获取MSN好友列表类的实现代码
2013/06/23 PHP
使用PHP和JavaScript判断请求是否来自微信内浏览器
2015/08/18 PHP
微信支付开发维权通知实例
2016/07/12 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
js中call与apply的用法小结
2013/12/28 Javascript
jQuery中parents()和parent()的区别分析
2014/10/28 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
2014/11/13 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
2015/08/22 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
2015/08/31 Javascript
如何实现JavaScript动态加载CSS和JS文件
2020/12/28 Javascript
jquery实现全选、不选、反选的两种方法
2016/09/06 Javascript
js放到head中失效的原因与解决方法
2017/03/07 Javascript
Vue.directive自定义指令的使用详解
2017/03/10 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
2017/04/11 jQuery
Node.js中看JavaScript的引用
2017/04/22 Javascript
详解Angular.js中$http拦截器的介绍及使用
2017/07/04 Javascript
vue获取DOM元素并设置属性的两种实现方法
2017/09/30 Javascript
Vue.js实现列表清单的操作方法
2017/11/15 Javascript
解决vue中对象属性改变视图不更新的问题
2018/02/23 Javascript
npm scripts 使用指南详解
2018/10/08 Javascript
vue+element树组件 实现树懒加载的过程详解
2019/10/21 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
2020/05/09 Javascript
关于element-ui表单中限制输入纯数字的解决方式
2020/09/08 Javascript
python使用PIL模块获取图片像素点的方法
2019/01/08 Python
Python实现的ftp服务器功能详解【附源码下载】
2019/06/26 Python
python爬虫 基于requests模块的get请求实现详解
2019/08/20 Python
Python树莓派学习笔记之UDP传输视频帧操作详解
2019/11/15 Python
Python中url标签使用知识点总结
2020/01/16 Python
Matplotlib中rcParams使用方法
2021/01/05 Python
德国滑雪和户外用品网上商店:XSPO
2019/10/30 全球购物
社会实践评语
2014/04/28 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
千与千寻观后感
2015/06/04 职场文书
小学语文继续教育研修日志
2015/11/13 职场文书
Python连续赋值需要注意的一些问题
2021/06/03 Python
解析MySQL索引的作用
2022/03/03 MySQL