华山资源网

麻雀虽小五脏俱全 Dojo自定义控件应用
网络编程 2024/11/16 佚名
3 1

现在Javascript框架、控件库有很多，jQuery、Ext、prototype、MooTools、Dojo等等，这些都是在Google上搜索“javascript+framework”列在第一页的。其中，除了MooTools，其它的都有所了解，但只在项目中用过Ext和Dojo。但一直不太喜欢Ext，性能有问题，新的版本还收费了。

另外，Ext官方提供的例子都是用JavaScript来创建和初始化控件，一个JavaScript配套一个HTML来用，这样管理起来很混乱。而且官方例子是Best Practice，所以不太接受这种模式。Dojo在本人眼里是一个缺点和优点都很突出的家伙：

缺点：

1、文档非常之差；

2、CodeBase非常之大（优点乎，缺点乎?）；

3、版本演进快，且每次版本演进，都有大量的API发生变化，还不够成熟。

优点：

1、是一个很优秀的控件开发框架；

2、完全体现了javascript面向对象的一面。

EXT和Dojo比起来，本人觉得EXT是一个控件库，而Dojo是一个框架。第一次接触Dojo，当时版本0.3.X，今天项目中又有需求想用Dojo，版本是1.3.1，对比0.3和1.3，发现核心的思路并没有太大变化，但出厂提供的控件却有翻天覆地的变化，不过已经先入为主的对它的控件有成见，导致现在也没有兴趣再去研究，还是讲讲如何拿Dojo做自定义的控件吧。Dojo很复杂，但我们可以简单的认为它分三层：

1、最底层的是核心API

核心API提供的方法简化了DOM、字符串、CSS、事件等相关的操作。核心API还实现了类似于Java的package概念和import机制，方便了代码组织和依赖管理。

2、基于核心API，创造了“控件生命周期”概念

这是Dojo的亮点，允许第三方以规范的方式开发控件。基于Dojo开发的控件具有很强的内聚性和面向对象的特性。

3、基于2所开发的各类控件

Dojo自己提供的控件也比较全了，只是由于历史原因，没有深入研究过。

Dojo的控件统称DIJIT，要写出Dojo版的Hello World控件，你需要了解的知识并不太多：

◆一个控件就是一个JS类；

◆所有的控件都继承自_Widget或其子类，_Widget类提供了控件的生命周期管理函数；

◆可以同时继承_Templated，继承该类，可以为控件绑定模板来描述控件的展示。
关于_Widget基类的介绍
1、生命周期方法
_Widget提供了一系列方法称为“生命周期方法”，Dojo框架在初始化一个控件的时候，会依次调用它们，我们的自定义控件，可以重写特定的方法来加入自己的初始化逻辑，方法调用顺序及说明：
复制代码 代码如下:
preamble(/*Object*/ params, /*DOMNode*/node)
//这是一个通常不会用到的方法，这个方法的返回值，作为constructor的输入参数param
constructor(/*Object*/ params, /*DOMNode*/node)
// 这个方法相当于java类的构造函数
// 在这个类中执行初始化动作
postscript(/*Object*/ params, /*DOMNode*/node)
//实际的控件创建过程，依次调用如下方法（都可以被重写）
_Widget.create(/*Object*/params, /*DOMNode*/node)
_Widget.postMixInProperties( )
_Widget.buildRendering( )
_Widget.postCreate( )
//我用得最多的是postCreate方法，这个方法中，控件已经初始化完毕，界面上也已经显示出来了，
//通常在这个方法中启动业务相关的处理

2、该类的几个重要属性（控件可以通过this访问）
◆id:控件被授予的唯一编号，如果用户不指定，则Dojo随机创建一个。
◆domNode:该控件在HTML中对应的DOM节点。
最基本的自定义控件示例：
js文件：./hello/world.js（以下涉及到文件名，都用相对路径，其中./代表和"Dojo,dijit,Dojox"同级目录）。
复制代码 代码如下:
//声明自己输出的类名
Dojo.provide("hello.world");
//声明自己依赖的类名Dojo.require("dijit._Widget");
Dojo.require("dijit._Templated");
//Dojo.declare定义控件类，第一个参数：类名，第二个参数：父类数组，第三个参数：类的prototype
Dojo.declare("hello.world",[dijit._Widget,dijit._Templated],
{
postCreate:function(){
this.domNode.innerHTML="hellow world";
}
}
);

该控件的行为极其简单，在postCreate方法中，将自己在HTML页面中对应的DOM节点的内容设置为hellow world。
复制代码 代码如下:
<html>
<head>
<title>Hello World</title>
<!-- 首先引入Dojo.js，modulePaths用来定义包含控件的js目录，类似于jsp的自定义tag引入的机制-->
<script type="text/javascript" src="/UploadFiles/2021-04-02/Dojo.js"><script type="text/javascript">
Dojo.require("Dojo.parser");
Dojo.require("hello.world"); //引入自定义控件
</script>
</head>
<body>
<div DojoType="hello.world">
</div>
</body>
</html>

modulePaths的具体作用和用法，请google即可。接下来，我们将控件参数化，我们可以在写标签的时候，将名字作为参数传进去，然后控件显示HELLO XXX，首先将html文件改成：
复制代码 代码如下:
<html>
<head>
<title>Hello World</title>
<!-- 首先引入Dojo.js，modulePaths用来定义包含控件的js目录，类似于jsp的自定义tag引入的机制-->
<script type="text/javascript" src="/UploadFiles/2021-04-02/Dojo.js"></script><script type="text/javascript">
Dojo.require("Dojo.parser");
Dojo.require("hello.world");
</script></head><body>
<div DojoType="hello.world" yourName="jinxfei"></div>
</body>
</html>

大家注意到，我们在标签上增加了“yourName”属性，在控件中如何使用该属性呢？可以在construtctor方法中接收此属性的值，将值赋给控件类自身的变量，然后在postCreate中使用，JavaScript代码如下：
复制代码 代码如下:
Dojo.provide("hello.world");
Dojo.require("dijit._Widget");
Dojo.require("dijit._Templated");
Dojo.declare("hello.world",[dijit._Widget,dijit._Templated],
{ yourName:'world',
constructor:function(params,node)
{
this.yourName=params.yourName;
},
postCreate:function()
{
this.domNode.innerHTML="hellow "+this.yourName;
}
}
);

接下来，我们将进一步增加控件进的复杂性，增加一个输入框，在这个输入框中输入文本的同时，动态更新hello XXX，这就要用到Dojo的事件绑定机制，最常用的模式为：Dojo.connect(node,event,obj,method);表示将obj的method方法作为domNode的event事件处理函数，例如：

复制代码 代码如下:
Dojo.connect(inputText,"onkey",this,"updateHello");

这次先改控件，在postCreate的时候，动态增加一个输入框，并为输入框动态绑定事件：
复制代码 代码如下:
Dojo.provide("hello.world");
Dojo.require("dijit._Widget");
Dojo.require("dijit._Templated");
Dojo.declare("hello.world",[dijit._Widget,dijit._Templated],
{ yourName:'world',
typeIn:null,
echoDiv:null,
constructor:function(params,node)
{ this.yourName=params.yourName;
},
postCreate:function(){
this.typeIn=document.createElement("input");
this.typeIn.type="text";
this.domNode.appendChild(this.typeIn);
this.echoDiv=document.createElement("div");
this.domNode.appendChild(this.echoDiv);
Dojo.connect(this.typeIn,"onkeyup",this,"updateHello");//动态绑定事件
this.updateHello();//调用方法初始化一下，先显示一个空的hello
} ,
updateHello:function()
{
this.echoDiv.innerHTML="hello "+this.typeIn.value;
}
}
);

而HTML文件中对控件的引用，不用做任何改变(严格来讲，你需要删除yourName="jinxfei"这个属性）。从这个稍微有一点点复杂的控件，我们已经可以看出Dojo的优势：真正的面向对象！控件管理范畴内的DOM元素，都可以放在类中作为属性来使用（直接用this.xxx引用)，这样，避免了document.getElementByID()满天飞，控件是内聚的。响应事件的方法也是类的方法，免得在页面中声明大量的离散function，不好管理。

华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源
一句话新闻
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/16

3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。

苹果官方表示：

在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。

探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。

Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com