Dojo笔记（较旧）

发布时间：2020-12-16 21:26:08 所属栏目：百科来源：网络整理

导读：东西较旧，基础知识。较流行比如 www.iEasyUI.com ********************************************************************************************************** 1.Dojo中包含了很多Javascript编写的子Package。它封装了跨浏览器的代码。引入了Widget概念

东西较旧，基础知识。
较流行比如 www.iEasyUI.com
**********************************************************************************************************
1.Dojo中包含了很多Javascript编写的子Package。它封装了跨浏览器的代码。引入了Widget概念，方便了Javascript面向对象编程（OOP）。

2.Dojo提供一组函数支持各种HTTP请求，包括 xhrGet,rawXhrPost,xhrPut,rawXhrPut， xhrPut,xhrDelete。
·对应HTTP四种请求： Get读取， Post更新， Put创建， Delete删除。

3.xhrGet是XHR框架中最重要函数，使用频率最高。它可以请求服务器上的静态文本资源如txt,xml等，也可以获取动态页面php,jsp,asp等。
function getTextByGet(){
dojo.xhrGet({
url: "get.txt",
handleAs: "text",//返回的数据类型
load: function(response,ioArgs){alert(response);},//请求的资源成功返回之后被调用
error: function(error,ioArgs){alert(error.message)} //失败之后被调用
});
}

4.xhrGet提交表单：
虽然表单提交的默认方法是Post，但当使用xhrGet提交时，表单提交方式就自动改为Get，
所有表单的数据都会变成查询字符串出现在url中，所以服务器只能从查询字符串中取得这些提交的信息。
dojo.xhrGet({
form: "login",
handle: handler,//回调函数，可以堪称是load和error的混合体，优先级比load低，只有在没有设置load时才起作用。
content: {pwd:"12345"},//可以修改来自表单的信息
sync: false //这是同步还是异步提交，默认是异步提交
});

5.xhrPost一般用来发送表单的数据，当然xhrGet也能做到。
区别是xhrPost把表单数据封装在http请求的body部分，xhrGet把所有表单的数据都会变成查询字符串出现在url中。

6.DOM Level2 的事件模型：（此列子IE不适用，IE采用介于DOM Level0和DOM Level2之间的事件模型）
<html>
<body>
<input id="btn" type="button" value="hello" /><p />
<input id="rme" type="button" value="remove" />
<script>
function sayHello(event) { alert("hello"); };
function sayWorld(event) { alert("world"); };
function remove() {
btn.removeEventListener("click",sayHello,false);
btn.removeEventListener("click",sayWorld,false);
}
var btn = document.getElementById('btn');
btn.addEventListener("click",false);
btn.addEventListener("click",false);
document.getElementById('rme').addEventListener("click",remove,false);
</script>
</body>
</html>

7.使用Dojo处理用户自定义事件：
调用 userFunction 时，handler1 和 handler2 也被触发了。这些事件将按连接的先后顺序来执行。
userFunction 就像是一个事件源，它的调用像一个事件，而 handler1 和 hander2 就是事件处理函数。
<script type="text/javascript">
function print(fName,args) {
var message = "In " + fName + "; the arguments are: "
dojo.forEach(args,function(args) {
message += args.toString() + " ";
}) ;
alert(message);
}
function handler1() { print("handler1",arguments); }
function handler2(a1,a2) { print("handler2",[a1,a2]); }
function userFunction() { print("userFunction",arguments);}
dojo.connect("userFunction",null,"handler1"); //handler1事件处理函数没有显示参数，但实际上它有两个参数，值为1和2
dojo.connect("userFunction","handler2"); //handler2有两个显示参数，值也为1和2
userFunction(1,2);
</script>

8.Dojo拖拽：
<script type="text/javascript">
dojo.require("dojo.dnd.move"); //引入Dojo的拖动功能模块
dojo.require("dojo.parser"); //引入解析Dojo标记的功能模块
</script>
<table dojoType="dojo.dnd.Moveable">
<tbody><tr><td>Haha,I am a good guy.</td></tr></tbody>
</table>

9.Dijit: Dojo的UI组件库
从功能的角度把Widget分为三类：表单 Widget，布局 Widget，高级 Widget 。
1）表单Widget：
所有的这些表单widgets都可以放置在HTML的[form]标签内，也可以放在dijit.form.Form widget内，甚至可以放在[form]标签外。
Form,Button,CheckBox,RadioButton,ToggleButton,ComboBox,FilteringSelect,
Textbox,Validation,Currency,Date,Time,Integer,Textarea,Silder,NumberSpinner(数字转轴)
2)布局Widget:
布局Widgets分成三类：
2.1）对其容器：BorderContainer(不推荐使用：LayoutContainer，SplitContainer)
2.2)堆叠容器:此类的 widgets 可以把前两种 widgets 层叠在一起，而一次只显示一个屏面。（AccordionContainer，TabContainer，StackContainer）等。
2.3)屏幕容器:盛放和显示大块的内容，包括文本、图片、图表，甚至是其它widgets。（ContentPane）
3)高级Widget：
高级widgets分为两类：
3.1）用户辅助Widget：
Dialog,TooltipDialog(须关联一个DropDownButton),ProgressBar(进度条),Tooltip
3.2）高级编辑和显示Widget：
ColorPalette,Editor,InlineEditBox,Tree

10.创建Dijit两种方式：
1）静态创建Dijit：
1.1）确定使用Dijit的对象全称。例如dijit.form.Button
1.2)在head部分引入：
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.Button");
</script>
1.3）在页面需要使用Dijit的位置，写入Dijit标签属性。
<div dojotype="dijit.form.Button">OK</div>
2)对哦功能太创建Dijit：
2.1)确定使用Dijit的对象全称。
2.2)在head部分引入：
<script type="text/javascript">
dojo.require("dijit.form.Button");
</script>
2.3)通过Javascript调用对应Dijit的动态构造语句，动态创建Dijit。
funciton init(){
var mydiv = document.createElement("div");
dojo.body().appendChild(mydiv);
var mybutton = new dijit.form.Button({label:"OK"},mydiv);
}

11.Dijit的操控：
1）例如：var mybutton = new dijit.form.Button({label:“OK”,id:”testid”},dojo.byId(“mydivid”))；
因此可以通过mybutton来操控新创建的这个Dijit按钮实体。
2）在知道某个Dijit实体id的情况下，则可以通过dijit.byId()获得这个Dijit实体。
通过var yourbutton = dijit.byId("testid");就可以获得这个Dijit按钮的实体。
【注意】：作用与document.getElementById()相同的dojo.byId()，无法获得任何Dijit实体。

12.Dijit的样式：
要让页面中的所有 Dijit 使用同一种样式主题来展现，需要通过两步来完成。
1）在页面的 head 部分引入期望使用的样式主题的 CSS 文件。例如，如果使用 Soria 样式主题。
<style type="text/css">
@import "dojo_path/dijit/themes/soria/soria.css";
@import "dojo_path/dojo/resources/dojo.css"; </style> 2）在页面 body 标签中定义属性 class 为所期望使用的样式主题名。如果使用 Soria 样式主题。 <body class="soria"> 13.JavaScript基于原型(Prototype based)的继承：在JavaScript中，每个函数对象（即function定义代码）都有一个属性prototype，这个属性指向的是对象－就是这个函数对象的原型对象。这个原型对象也有prototype属性，默认指向一个根原型对象。如果以某个特定的对象为原型对象，而这个对象的原型对象又是另一个对象，如此反复将形成一条原型链，原型链的末端是根原型对象。 JavaScript 访问一个对象的属性时，首先检查这个对象是否有同名的属性，如果没有则顺着这条继承链往上找，直到在某一个原型对象中找到，而如果到达根原型对象都没有找到则表示对象不具备此属性。这样低层对象仿佛继承了高层对象的某些属性。【例子】：在这个例子中声明了两个函数对象 Plane 和 JetPlane function Plane(w,s) { this.weight = w; this.speed = s; } Plane.prototype.name = ""; //Plane对象的属性有在构造函数中定义的weight,speed,也有在Plane的prototype对象中定义的name。 function JetPlane() { this.seats = 0; this.construct = function(name,weight,seats) { //JetPlane中定义了两个属性seats 和construct，construct的值是一个函数。 this.name = name; this.seats = seats; this.weight = weight; this.speed = speed; } } JetPlane.prototype.erased = true; //JetPlane的prototype对象增加了一个属性 erased JetPlane.prototype = new Plane(); //然后把JetPlane的prototype设为一个Plane对象，这样JetPlane就拥有了Plane的prototype对象（注意不是Plane对象）中所有的属性。 var p1 = new Plane(2000,100); p1.name = "Boeing"; var j1 = new JetPlane(500,300); j1.construct("F-22",500,2); console.log("p1.weight:" + p1.weight + ",p1.speed:" + p1.speed + ",p1.name:" + p1.name); console.log("j1.name:"+ j1.name + ",j1.weight:"+ j1.weight + ",j1.speed:"+ j1.speed + ",j1.seats:"+ j1.seats); 15.Dojo.declare声明为类的函数： dojo.declare("Jetocopter",[JetPlane,Helicopter],{ //Jetocopter继承自JetPlane和Helicopter constructor : function(name,seats,propellers) { //constructor，它是类的构造函数，每次创建一个新的对象时，它都会被调用。 this.lifelong = 10; } }); var jh1 = new Jetocopter("X2",200,400,3,4); 16.拓展Dojo模块：假设我们要创建的新模块是 util.math.Calculator 1）先在Dojo安装目录下创建目录util/math 2）在目录util/math下，创建一个叫Calculator.js的文件 3）在Calculator.js中写以下代码： //注册模块名 dojo.provide("util.match.Calculator"); //声明Dojo类 dojo.declare("util.match.Calculator",{ add:function(a,b){ return a+b; },multiply:function(a,b){ return a*b; } }); 4)然后就可以开始使用这个新模块了： dojo.require("util.match.Calculator"); var c = new util.math.Calculator(); alert(c.add(1,2)); alert(c.multiply(3,2)); 17.DojoX DataGrid: Grid可能是DojoX中最受欢迎的部件，比起普通的Web表格部件，Grid更像一个基于Web的Excel组件。这使得Grid足可以应付较为复杂的数据展示及数据操作。在dojox1.2中，dojox.grid包中新增了DataGrid类，该类是对原Grid类的强化和替代，之所以叫做DataGrid，是由于该类与dojo的数据操作类store无缝整合在一起。 1）初始化方式如下： <div id="grid" dojoType="dojox.grid.DataGrid" store="jsonStore" structure="layout" autoWidth="true" ></div> 2）同时也可以采用Javascirpt来完成初始化： dojo.addOnLoad(function(){ // 指定页面加载完毕后执行 var grid = new dojox.grid.DataGrid({ query: { pro_no: '*' },id: 'grid2',store: jsonStore,//设置数据源 structure: [ {field: 'pro_no',name: 'Product Number' },{field: 'pro',name: 'Product' },{field: 'min_amount',name: 'Minimum Amount' },{field: 'max_amount',name: 'Maximum Amount' },{field: 'avg_amount',name: 'Average Amount' } ],rowsPerPage: 20 },'gridNode' ); //设置 grid 显示在 id 为 gridNode 的节点下 grid.startup(); //启动 grid }); 18.DojoX Charting: ·Charting是基于DojoX绘图包的数据可视化组件，包括了Chart2D和Chart3D来分别绘制2D和3D的图表。 ·Chart2D提供多种样式的饼图、柱状图、折线图、面积图、网格等图表。 ·Chart3D目前仅提供了3D柱状图和3D圆柱图，并且从社区获取的信息表明由于IE上的性能问题导致Chart3D的开发暂时搁置。 1）首先引入所需要的 dojox 类，如： dojo.require("dojox.charting.Chart2D"); //Chart2D 所需要的 2D 类 dojo.require("dojox.charting.Chart3D"); //Chart3D 所需要的 3D 类 dojo.require("dojox.charting.themes.PlotKit.blue"); // 样式主题 2）.声明Chart对象，包括了Chart2D或Char3D，如：var chart1=new dojox.charting.Charting.Chart2D('chart1'); 这里传入的参数为要在页面中载入chart1的元素的 ID，也就是chart1显示后的上层标签的 ID； 3）使用Chart对象的setTheme为Chart对象设置主题，来保证准确的绘制图表； 4）使用Chart对象的addPlot方法为Chart对象添加部件，可以添加多个部件； 5）使用Chart对象的addSeries方法为Chart对象添加数据； 6）调用render方法将chart对象添加到页面节点中。 19.Dojo国际化： 1）时间本地化示例： var mydate = new Date(2007,5,26,10,1,13); var result = dojo.date.locale.format(mydate,{ formatLength :'long',locale: 'zh-cn' }); dojo.byId("content").innerHTML = result; } 2）数字格式的本地化： var result=dojo.number.format(999999.999,{locale: 'fr-fr'}) ; 结果会发现页面中数字的显示非常奇怪。这是因为是以法语的方式对数字进行了显示。 dojo.requireLocalization("dojo.cldr","number",'fr-fr') 引入了法语运行环境文件。如果查看 dojo_path/dojo/cldr/nls 目录，会发现fr文件夹下有个number.js的文件。这就是上面引入的处理数字显示的法语运行环境文件。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!