• dojo框架 南京酷得软件


    一.dojo介绍

    dojo是一个js的工具集,一个面向对象的js框架(在widget中更能体现这点),根据功能分成多个module,每个module又分为多个package,可以根据程式的需要导入不同的package,类似于JAVA。
    官方网站: http://dojotoolkit.org/
    操作指南: http://manual.dojotoolkit.org/WikiHome

    二.dojo体系结构

     

    三.总结、介绍

    1. dojo.io.bind常用属性或方法:
    {url:,load:,error:,mimetype:,method:,transport:,formNode:}
    load,error可由handle代替,在handle判断状态,根据不同的状态做不同的事。
    transport指定由什么对象来传输,如XMLHttp,IFrameI/O,ScriptScrIO,etc,如果不指定,默认的为XMLHttp。
       (1).XMLHttp:是默认的传输对象,由于安全性问题:不能传送文件,不能跨越另外一个域请求数据,对file://protocol形式无效。
       (2).IFrameI/O:能够传送文件,响应类型可以是text,html,js/json
       (3).ScriptScrIO:能够传送文件,能跨越另外一个域请求数据,另外提供了好些属性和方法。
       (4).另外,dojo可通过远程过程调用协议访问远程方法;可通过iframe代理,利用XMLHttp访问另外一个域。

    2.widget包有趣组件:
    FisheyeList,Button,Menu2,Checkbox,ComboBox,DatePicker,DropdownDatePicker,Tooltip,TitlePane,SlideShow,ContentPane, ResizeHandle,ResizableTextarea,Tree,AccordionPane,etc。
    可自定义组件,也可以继承已有的组件,重载父组件的属性和方法,例如:
    dojo.widget.defineWidget("my.mybutton",dojo.widget.html.Button,{}),第一个参数为自定义的组件名,第二个参数为父组件,在第三个参数{}里重载父组件的属性或方法,也可定义一些额外的属性或方法。

    dojo.io.bind()封装了XMLHttpRequset的创建过程,因此不必再用try...catch语句块来做cross-browser。dojo.io.bind()以一个哈希表作为参数,包括url:value, load:value, error:value, mimetype:value。其中url为必要,其余是可选的。
    load和error的value分别是一个回调函数,其中可以以type,data,evt,error作为参数,分别对应回应是否正常、有效的回应文本、DOM事件及错误信息。而mimetype可以是text/plain、text/html以及灵活的text/javascript。

    利用dojo实现异步提交表单
    dojo.io.bind()在参数表中增加一项formNode,值为document.getElementById(FORM_ID),应该是在表单需要提交时触发事件调用此方法(猜的,我还没有尝试)。

    一定程度上解决前进后退按钮问题的方法
    经过dojo的封装,下面的程序段将在相应的时候被执行:

    backButton: function(){
      //something to do
    }
    forwardButton: function(){
      //something to do
    }


    dojo.io.bind()中还可以添加一个changeURL,取值可以是true或是字符串,用来在URL中添加"#时间戳"或是自定义的标识。

    其他参数:
    method: 用于指定是post还是get
    content: 添加的请求参数
    postContent: 仅在post时才添加的请求参数
    sync: 指定同步或异步,默认为异步
    useCache: 是否使用缓存
    编写自己的dojo扩展

    前言
    dojo是时下非常流行的javascript框架,它在自己的Wiki上给自己下了一个定义,dojo是一个用JavaScript编写的开源的DHTML工具箱。
    dojo很想做一个“大一统”的工具箱,不仅仅是浏览器层面的,野心还是很大的。不过dojo带来了JavaScript编程的一些新想法,其中引入包机制进行动态加载是一个不错的概念。
    理解dojo的包机制
    其实dojo只需要一些很小的加载代码就可以用来加载它的各种包,它的官方站点上提供的dojo-ajax下载中包含的dojo.js体积还是比较庞大的,因为它将一些常用的包都包含在了js中, 但是很多时候我们并不需要这么多功能,还是按需加载比较好。
    幸好在http://download.dojotoolkit.org/这个地址中我们还可以下载到dojo的各个自定义版本,其实包含的组件都是一样的,只不过dojo.js的大小有很大不同,那么,我们就从minimal版本下手。
    下载之后会发现minimal版本包含的dojo.js只有18kb,里面仅仅包含了加载机制,非常不错。这样,我们就可以开始编写自己的dojo扩展。
    dojo代码结构
    解压缩后的目录里面包含src目录,src目录下存放有dojo的各个组件包,我们在这里面新建一个hello目录。
    新建一个名为__package__.js文件,很类似Python的模块命名,这个__package__.js定义了在引入这个命名空间的时候默认导入多少类,以及这个命名空间的名字。
    我们的目的是做一个dojo.hello.Echo扩展,那么在__package__.js中的代码应该这样:
    // kwCompoundRequire 的作用是当你导入整个dojo.hello包的时候需要默认加载多少类
    // 这些定义就在这个函数里面,common在这里表示默认的加载,这个参数不是固定的
    // dojo希望自己是一个“大一统”的实现,所以考虑了非浏览器情况,可以有别的,譬如rhino
    dojo.kwCompoundRequire({
      common: [
        "dojo.hello.Echo"
      ]
    });
    // 这个定义了包,默认这么写 | 原因嘛,当然是有的,看你的悟性了:-)
    dojo.provide("dojo.hello.*");我们指定了默认加载的类Echo,那么我们就去写Echo类,在hello目录中新建Echo.js,代码如下:
    // 类名定义,JavaScript写的变扭,其实就是直接定义类名
    dojo.provide("dojo.hello.Echo");

    // 类定义部分,非常熟悉的代码
    dojo.hello.Echo = function() {
      this.name = "dojo.hello.Echo";
      this.sayHello = function(greeting) {
        return greeting;
      }
    }扩展写好了,很简单,接下来就是掉用了,index.html如下。
    <html>
    <head>
    <script language="javascript" src="dojo.js"></script>
    <script language="javascript">
    dojo.require("dojo.hello.*");
    var echo = new dojo.hello.Echo();
    document.write(echo.sayHello("Hello World"));
    </script>
    </head>
    <body>

    </body>
    </html>注意dojo.require("dojo.hello.*")回去请求两个文件,首先是__package__.js,这样一来就得到了之前在dojo.kwCompoundRequire里面指定的类列表,然后去加载Echo.js。你也可以直 接去加载Echo.js,只需要变成dojo.require("dojo.hello.Echo")。
    更多内容
    这个例子非常简单的介绍了一下dojo的包加载机制,当然这个包中的类并没有引用其它类,dojo还允许在代码中动态加载其它类,当然了,这些都是通过XmlHttp来实现的,因为是同步模式,所以请求的类比较多并且都没有包含在dojo.js中的时候会有页面停顿的现象,这点还是需要注意的。
    文中的代码下载:,dojo-hello.tar.gz
    一些dojo的资源:
    dojo 官方站点
    dojo 手册
    dojo wiki

  • 相关阅读:
    内部类&匿名内部类
    Object:
    多 态★★★★★(面向对象特征之三)
    接 口:
    继 承(面向对象特征之二)
    封 装(面向对象特征之一)
    三:面向对象:★★★★★
    Codeforces 719 E. Sasha and Array (线段树+矩阵运算)
    uestc oj 1218 Pick The Sticks (01背包变形)
    uestc oj 1217 The Battle of Chibi (dp + 离散化 + 树状数组)
  • 原文地址:https://www.cnblogs.com/sucsy/p/670399.html
Copyright © 2020-2023  润新知