dojo 三 类和继承 dojo/_base/declare

本文详细介绍了如何使用Dojo框架中的declare方法进行类的声明、继承和实现。通过具体示例,展示了单继承、多继承及类的属性与方法的重写。


这里要讲有关类的定义、继承和实现。
官方教程:http://dojotoolkit.org/documentation/tutorials/1.7/declare/
类的声明是通过declare 这个方法来实现的。
define(['dojo/_base/declare'],function(declare){
//第一个declare,声明类my.A
  declare('my.A',null,{
        pp1 : 1,
        pp2 : 'b',
        dd : function(a1){
            alert(a1);
        }
    });
//第二个declare,声明类my.B,继承至my.A
    declare('my.B',my.A,{
        pp1 : 2,
        pp3 : 'c',
        dd : function(a1,a2){
            alert(a1 + a2);
        }
    });
//第三个declare,多父类继承
    declare('my.C',[my.A, my.B],{
        pp1 : 3,
        pp3 : 'd'
        dd : function(a1,a2,a3){
            alert(a1 + a2 + a3);
        }
    });
});

以上代码为superClass.js文件的全部内容。
这里又见到了define 这个方法。
声明类需要declare 这个方法,define 通过引用 dojo/_base/declare 来引入。
declare 包含三个参数,第一个为所声明的类的名称,可忽略,当用于Dojo的parser时则必要;
第二个为父类,如果没有则为null;第三个就是类体,包括属性和方法。
在第一个declare 中,my.A 为声明的类的全名,my 为命名空间名,A为类名。
null表示它没有父类。
pp1为整型属性,pp2为字符型属性,dd为方法,它们都包含于一组{}内作为类的实体内容。
在html中对类my.A的实现和使用

require(['superClass'], function(){
        var mm = new my.A();//实现
        mm.dd(mm.pp2);//alert pp2的内容为'b'
        mm.pp2 = 'bbbb';//设置pp2的值
        mm.dd(mm.pp2);//alert pp2的内容为‘bbbb’
    });

在第二个declare中,类名为my.B,my.A作为父类,在类体中将pp1的默认值设为2,新增属性pp3,并重写了方法dd。
在html中对类my.B的实现和使用

require(['superClass'], function(){
        var mm1 = new my.B();//实现
        mm1.dd(mm1.pp1, mm1.pp2);//'2b'
        mm1.pp2 = 'ab';//设置pp2的值
        mm1.dd(mm1.pp2, mm1.pp3);//'abc'
    });

在第三个declare中,类名为my.C,继承了多个父类my.A和my.B,重置了pp1和pp3的默认值,并重写了方法dd。
多个父类的继续是父类们放在一个数组中为参数传入。
在html中对类my.C的实现和使用

require(['superClass'], function(){
        var mm2 = new my.C();//实现
        mm2.dd(mm2.pp1, mm2.pp2, mm2.pp3);//'3bd'
        mm2.pp2 = 'ab';//设置pp2的值
        mm2.dd(mm2.pp1, mm2.pp2, mm1.pp3);//'3abd'
    });

### 使用 `dojo/dom` `dojo/on` 模块 在 Dojo 库中,`dojo/dom` 是用于 DOM 元素操作的核心模块之一,提供了简单的方法来获取操作 HTML 元素。而 `dojo/on` 则专注于事件处理机制,允许开发者监听并响应各种 DOM 事件。 #### 获取 DOM 元素 通过 `dojo/dom` 的方法可以轻松访问页面中的 DOM 节点。最常用的是 `dom.byId(id)` 方法,它接受一个字符串参数作为 ID 来查找对应的 DOM 元素[^1]。 ```javascript require(["dojo/dom"], function(dom) { var myElement = dom.byId("exampleId"); }); ``` 上述代码展示了如何加载 `dojo/dom` 并调用其 `byId` 方法找到具有特定 ID 的元素[^2]。 #### 绑定事件处理器 为了绑定事件到某个 DOM 元素上,通常会使用 `dojo/on` 模块。该模块支持现代浏览器的标准事件模型,并能自动适配旧版 IE 浏览器的行为差异。下面的例子演示了当按钮点击时触发回调函数的功能: ```javascript require([ "dojo/dom", "dojo/on" ], function( dom, on ){ on(dom.byId("buttonId"), "click", function(event){ console.log("Button was clicked!"); }); }); ``` 这里定义了一个匿名函数用来打印消息至控制台,每当关联的按钮被按下就会执行一次。 另外需要注意的一点是,在某些情况下可能还需要引入 `"dojo/domReady!"` 插件以确保所有的脚本都在 DOM 完全加载之后运行[^3]。 #### 高级查询方式 除了基本的按 id 查找外,如果项目中有大量需要动态定位或者批量选取的情况,则推荐考虑更灵活的选择器语法——即利用 CSS Selectors 实现复杂匹配逻辑。这可以通过额外引入 `dojo/query` 达成目标[^4]: ```javascript require([ "dojo/query", "dojo/on" ], function(query, on){ query(".className").forEach(function(node){ on(node, "mouseover", function(){ node.style.backgroundColor = "#f0f0ff"; }); }); }); ``` 此片段说明了怎样基于名筛选多个节点并对它们逐一附加鼠标悬停效果。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值