当前位置 : 主页 > 网页制作 > Dojo >

Dojo笔记(较旧)

来源:互联网 收集:自由互联 发布时间:2021-06-15
东西较旧,基础知识。 较流行比如 www.iEasyUI.com ********************************************************************************************************** 1.Dojo中包含了很多Javascript编写的子Package。它封装了跨浏
东西较旧,基础知识。
较流行比如 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",
        handleAs: "text",
        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", sayHello, false); 
        btn.addEventListener("click", sayWorld, 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", null, "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, speed, 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, 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, weight, speed, 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",null,{             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的文件。         这就是上面引入的处理数字显示的法语运行环境文件。
网友评论