基于Dojo的JavaScriptWeb客户端界面控件开发

最新推荐文章于 2024-09-16 08:47:17 发布

reedseutozte

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量2.8k

点赞数

文章标签： dojo function xmlhttprequest button javascript html

本文链接：https://blog.csdn.net/reedseutozte/article/details/5375876

版权

1 前言

1.1 传统JS前台编程方式

传统的前台编程模式如下

可以看出，传统的前台编程方式是面向过程的，不便于扩展于重用。在一个复杂的BS项目中，如果能够把抽象出界面中的某些具备共性的区域，把他们的行为（包括界面元素，界面事件，以及数据）封装起来将大大前端的开发效率。

1.2 Dojo简介

Dojo是一个工具箱，其定义了如下三大模块

1）各式各样的JS标准库方法

这些标准库方法包罗万象并考虑了浏览器兼容性以及性能，在dojo框架下建议使用这些库函数可以屏蔽浏览器的差异

2）一应俱全的Web组件包括基本组件（dijit）以及扩展（dojox）

在web组件方面，可以把Dojo的Web组件看成一个前台标签，页面加载完毕后dojo将会调用dojo.parser模块的parse方法扫描但前页面中所有具备dojotype属性的DIV标签，把它们parse成对应的web组件。这得一提的是这些组件全部是基于面向对象的思想设计，非常便于扩展，用户在外部可以通过重定向基类的方法，注入自己的界面行为，或者干脆通过继承来重载，覆盖父类的方法定义自己的组件。

1.3 基本概念介绍

面向对象的思想已经深入人心。而Dojo的web组件也基于面向对象的思想，所以在进一步介绍web组件之前，需要介绍一下JS的面向对象特性。

1.3.1 闭包

闭包本质上就是数据与包含数据的作用域的结合体。请看下例

function foo () { var x = 10; return function bar() { alert(x); } } var x = 5; var barRef = foo(); barRef();//结果为10

1.3.2 this关键字

This指的是当前代码的调用者

例子1）

<mce:script type="text/javascript"></mce:script>

单独运行在页面中的JS代码的this指的是window对象

例子2-1）

例子2-2）

由于onchange事件可以看成select的属性，因此可以认为是select调用了onchange，所以事件响应代码中的this 就是该DOM节点

例子3）

<mce:script type="text/javascript"></mce:script>

这个例子比较明显,由于是a调用了a.b所以在函数中。this就是a对象

1.3.3 apply函数的使用

在JavaScript中，一个函数其实是一个对象，任何一个函数都有一个apply方法，

apply方法JScript参考中的说明：应用某一对象的一个方法，用另一个对象替换当前对象。apply([thisObj[,argArray]])

apply([thisObj[,argArray]])中的参数为数组集合。下面来看看apply的具体应用

// simple apply demo function simpleApplyDemo(arg) { window.alert(arg); } function handleSPA(arg) { simpleApplyDemo.apply(this, arguments); }

从上面简单的例子可以看出，apply可以把当前的参数传递给另外一个函数的参数中，从而调用另一个函数的应用。

apply还有一个技巧在里面，就是用apply应用另一个函数（类）以后，当前的函数（类）就具备了另一个函数（类）的方法或者是属性，这也可以称之为“继承”。看下面示例。

// advanced apply demo function adApplyDemo(x) { return ("this is never-online, BlueDestiny '" + x + "' demo"); } function handleAdApplyDemo(obj, fname, before) { var oldFunc = obj[fname]; obj[fname] = function() { return oldFunc.apply(this, before(arguments)); }; } function hellowordFunc(args) { args[0] = "hello " + args[0]; return args; } function applyBefore() { alert(adApplyDemo("world")); } function applyAfter() { handleAdApplyDemo(this, "adApplyDemo", hellowordFunc); alert(adApplyDemo("world")); // Hello world! }

1.3.4 基于apply的dojo.hitch

如果直接这么写obj.οnclick=functiona(arguments1, arguments2){…..};

我们会发现在functiona中，this就是触发click事件的Dom节点了

所以在我们的组件代码中，经常出现如下代码this.connect(obj, ‘click’, dojo.hitch(this, functiona, arguments1, arguments2));这样functiona中的this和组件代码中的this保持一致，也就可以访问组件类中的属性以及方法了

我们看一下dojo.hitch的代码会发现如下片断

return function(){ return scope[method].apply(scope, arguments || []); }; // Function，可见它正是利用了apply的特性实现了作用域的变更。

dojo.hitch参数表为，第一个参数为作用域，第二个参数为函数对象，从第三个参数起就是第二个参数所对应函数的参数表

1.3.5 前后台交互XmlHttpRequest

现代浏览器都支持XmlHttpRequest, XmlHttpRequest的调用都是异步的也就是说这样的调用都无需页面进行跳转的。dojo再其上封装了dojo.xhr类。dojo的web组件接受json（javascript object notion）数据。所以使用dojo组件无需考虑后台的具体实现，只要后台能够提供异步请求机制，并且能够返回Json即可。在BME R4版本中，基于structs2以及jsonlib开发了异步请求action机制，调用这些action，BMER4版本定义了如下函数

ajax.callQueryInterface = function(url/*异步action名称*/,inData/*对象参数*/){ var tmpData = dojo.toJson(inData); //将对象转为Json格式字符串 var ret; var msg; dojo.xhrPost({//dojo封装的xmlHttprequest方法 url: url, content:{ "data":tmpData }, timeout: 1000, error: function() {//错误处理函数 ret = "-1"; msg=Message.getString("P405237800"); }, load:function (response) {//处理返回 ret = dojo.fromJson(response); 。。。。。。。。。。。。。。。。。。 return ret; };

2 组件开发介绍

2.1 dojo.declare

dojo把与实现类声明和继承有关的大量细节都封装到一个方法中，这个方法就是dojo.declare，这个方法包括三个参数

dojo.declare(/*String*/className,//要创建的构造函数名称

/*Function|Function[]*/superCalss,//要继承的超类构造函数，如果是构造函数数组则是多重继承

/*Object*/ //对象中的参数定义)

2.2 一个简单的基于dojo开发的web组件----Hellow World

dojo.provide("bmc.widget.HelloWorld"); dojo.require("dijit.layout.ContentPane"); dojo.declare( " bmc.widget.HelloWorld", dijit.layout.ContentPane, { postCreate: function(){ this.inherited(arguments); var html = 'This is a hello word widget!<BR><INPUT type = button value="alert"/>'; var paneDiv = document.createElement('div'); paneDiv.innerHTML = html; var button = paneDiv. getElementsByTagName('INPUT')[0] dojo.place(paneDiv, this.containerNode, 'first'); this.dataForm = this.containerNode.getElementsByTagName('FORM')[0]; dojo.connect(button, 'click', dojo.hitch(this, this.alertHellow)); }, alertHellow : function() { alert('hello'); } });

Html页面

这个例子中使用this.connect绑定dom事件一是这个方法不会破坏原来已有的事件方法，如果button原来已有click响应函数，则这个操作将会把dojo.hitch(this, this.alertHellow)这个函数的动作追加到原来的操作后面，同时在对象销毁的时候（页面跳转，刷新），凡是被connect的函数都会去绑定，可以防止IE的内存泄露。

这个例子中也使用了dojo.hitch，这个方法可以改变函数的作用域，如果不使用dojo.htich则alertHellow函数中的this指向这个按钮，如果通过dojo.hitch作用，则这个函数种的this 指向这个组件的实例。通过这个机制，可以完全实现组件内部界面操作的封装。

postCreate是父类dijit.layout.ContentPane的方法，通过执行this.inherited(arguments);，父类的代码会被执行。如果没有这个调用，父类的方法就被覆盖了。

2.3 HelloWord升级，支持数据传入的表单

dojo.provide("bmc.widget.HelloWorld"); dojo.require("dijit.layout.ContentPane"); dojo.declare( " bmc.widget.HelloWorld", dijit.layout.ContentPane, { data: null, postCreate: function(){ this.inherited(arguments); var html = '<FORM><INPUT name = "a" /><INPUT name = "b" /><INPUT type="button" value="test" /></FORM>'; var paneDiv = document.createElement('div'); paneDiv.innerHTML = html; var button = paneDiv. getElementsByTagName('INPUT')[2] dojo.place(paneDiv, this.containerNode, 'first'); this.dataForm = this.containerNode.getElementsByTagName('FORM')[0]; dojo.connect(button, 'click', dojo.hitch(this, this.setData)); }, setData: function() { if (this.data) { var _this = this; dojo.forEach(this.dataForm.elements, function(item) { if (!item.name) { return; } item.value = _this.data[item.name]; }); } } });

Html代码

var datatest = {}; datatest.a = 1; datatest.b = 2; <div class='box' dojoType="dijit.layout.HelloWorld" data="datatest"> </div>

点击test

这个方法中使用dojo.forEach遍历表单元素。在function(item)

{

}

中this指向的不是组件实例，所以之前用一个变量_this存储了this