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 相关文章推荐
Locate a File Using a File Open Dialog Box
Jun 18 Javascript
javascript 学习之旅 (3)
Feb 05 Javascript
推荐一个封装好的getElementsByClassName方法
Dec 02 Javascript
JavaScript获取URL汇总
Jun 08 Javascript
简单实现js选项卡切换效果
Feb 03 Javascript
剖析Node.js异步编程中的回调与代码设计模式
Feb 16 Javascript
浅谈jquery的map()和each()方法
Jun 12 Javascript
完美解决axios在ie下的兼容性问题
Mar 05 Javascript
Vue2.2.0+新特性整理及注意事项
Aug 22 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
Oct 10 Javascript
详解node.js 事件循环
Jul 22 Javascript
vue中v-model对select的绑定操作
Aug 31 Javascript
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分页时出现的Fatal error的解决方法
2011/04/18 PHP
php中的boolean(布尔)类型详解
2013/10/28 PHP
PHP 前加at符合@的作用解析
2015/07/31 PHP
Thinkphp通过一个入口文件如何区分移动端和PC端
2017/04/18 PHP
Mootools 1.2教程 滑动效果(Slide)
2009/09/15 Javascript
javascript attachEvent绑定多个事件执行顺序问题
2010/10/20 Javascript
jquery如何实现在加载完iframe的内容后再进行操作
2013/09/10 Javascript
JQuery文字列表向上滚动的代码
2013/11/13 Javascript
解析JSON对象与字符串之间的相互转换
2013/12/18 Javascript
直接在JS里创建JSON数据然后遍历使用
2014/07/25 Javascript
javascript中数组的定义及使用实例
2015/01/21 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
2015/03/09 Javascript
JavaScript自定义等待wait函数实例分析
2015/03/23 Javascript
基于jQuery Ajax实现上传文件
2016/03/24 Javascript
如何在Angular.JS中接收并下载PDF
2016/11/26 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&amp;”)
2016/12/23 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
2017/09/05 Javascript
vue2实现可复用的轮播图carousel组件详解
2017/11/27 Javascript
在vue项目中引入高德地图及其UI组件的方法
2018/09/04 Javascript
vue中实现高德定位功能
2019/12/03 Javascript
jquery实现抽奖功能
2020/10/22 jQuery
python 递归遍历文件夹,并打印满足条件的文件路径实例
2017/08/30 Python
python中map()函数的使用方法示例
2017/09/29 Python
Python学习笔记之lambda表达式用法详解
2019/08/08 Python
Python基础之函数基本用法与进阶详解
2020/01/02 Python
python3发送request请求及查看返回结果实例
2020/04/30 Python
python七种方法判断字符串是否包含子串
2020/08/18 Python
Chain Reaction Cycles俄罗斯:世界上最大的在线自行车商店
2019/08/27 全球购物
关键字final的用法
2013/10/02 面试题
园林技术个人的自我评价
2014/01/08 职场文书
《最可爱的人》教学反思
2014/02/14 职场文书
2014国庆节国旗下演讲稿(精选版)
2014/09/26 职场文书
三孔导游词
2015/02/05 职场文书
2015年上半年党建工作总结
2015/03/30 职场文书
朋友圈早安励志语录!
2019/07/08 职场文书
MySQL插入数据与查询数据
2022/03/25 MySQL