Dojo 1.6 官方教程： 理解Dijit Widget系统的基础架构

大佬教程收集整理的这篇文章主要介绍了Dojo 1.6 官方教程： 理解Dijit Widget系统的基础架构，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

作者： Tom Trenka
原文链接: http://dojotoolkit.org/documentation/tutorials/1.6/understanding_widget/
译者: feijia (tiimfei@gmail.com)

本教程中，你将会学到Dijit中的@H_450_15@_Widget和_WidgetBase这两个重要的基类对象，理解它们作为所有Dojo小部件的基类的作用和@L_618_2@。

难度：中等
适用Dojo版本: 1.6

创建Dijit (dojo的小部件库) 和自定义小部件的基础，是由两个基类构成的: dijit._widgetBase和 dijit._Widget. 当然Dijit系统还包含其他一些重要的工具例如Dojo的解析器，和 Dijit模板系统 . 在这个教程里，你将会学到Dijit的基础架构是如何运作的。理解了这些，使用和创建Dijit会变的更加容易。
注意:dijit._Widget 继承自 dijit._WidgetBase； @H_450_15@如果你需要创建自定义的小部件，那么你应当继承 dijit._Widget 而不是dijit._WidgetBase,（当然你也可以直接继承其他Dijit中现有的小部件)
也许你已经注意到了，这两个基类前面都有一个下划线“_" ，这实际上是Dojo中对内部类的一种命名规范。表示这个类不应被用户直接使用，而是作为基类被继承的。
学习Dijit 库，最关键的是要能理解每个小部件的生命周期：从这个小部件被创建，到它能被程序使用，再到最终它被销毁（生命周期也包含了创建与销毁这个小部件所对应的页面中的DOM元素）

Dijit的生命周期

每个继承自dijit._Widget的小部件在实例化时都会经历下面的方法调用过程：
@H_450_15@([widget].constructor());
[widget].postscript();
[widget].create();
[widget].postmixinProperties();
[widget].buildrendering();
[widget].postCreate(); // 这个方法对开发者而言是最重要的
[widget].startup();
查看示例
从这些方法的名字我们大概可以猜测出它们的作用：
1. 何时初始化参数
2. 创建对应这些参数的图形,DOM元素
3. 确定放置这些元素的位置，
4. 如何处理浏览器相关的一些问题(例如 DOM node measurements)
[widget].postCreate()
对于小部件的开发者来说，postCreate()可能是最重要的一个方法了。
这个方法会在小部件的所有属性参数设置好，小部件所使用的DOM树节点被创建完成后调用。而此时该小部件的DOM节点还没有被添加到主文档中去。 @H_450_15@因此这个方法是在小部件被呈现给终端用户之前，开发者可以做最多定制的地方 。(例如设定许多自定义参数和属性). 这就好像是一出戏的大幕拉开之前，你可以做的最后准备工作的环节. 在开发自定义小部件时，绝大多数定制的属性和行为都会在这里被加入.
[widget].startup()
在Dijit一系列生命周期中，另一个重要方法是启动方法startup. @H_450_15@ 这个方法会在DOM节点被创建并添加到网页之后执行，同时在这个方法也会等待当前小部件中所包含的子控件被创建并正确启动之后才执行 。
注意： @H_450_15@当你用编程的方法创建一个小部件时，记得一定要调用它的startup（）方法 。很多开发者常犯的错误就是仅仅创建了小部件对象却忘记调用startup()，结果就会导致小部件在页面上无法正确显示。
析构和销毁方法
除了创建和启动，dijit._WidgetBase 还定义了一系列用于析构和销毁的方法:
[widget].destroy();
[widget].destroyDescendants();
[widget].destroyRecursive();
[widget].destroyRendering();
[widget].uninitialize();
@H_450_15@在开发自定义小部件时，你需要覆写[widget].uninitialize 方法，在其中释放你所使用的资源. Dijit框架会自动的负责销毁该Widget所使用的DOM节点，以及大部分的对象 .
引用小部件的DOM节点
@H_450_15@通常来说， Dijit小部件都是一些界面元素，因此多数会包含一些DOM节点。 Dijit._WidgetBase中定义了一个属性domNode ，该属性会指向该小部件中所使用的DOM根节点. 当该小部件的postCreate方法执行后，domNode属性就可以使用了。通过使用这个属性，你可以获取并操纵根节点，例如你可以把这个小部件整体移动到DOM树中的另一个位置上。
除了domNode属性外，有些小部件还会定义一个containerNode属性. 这个属性指定了小部件DOM中的一个容器节点,用来包含子控件。( 参看另一篇Dijit模板教程 )
Getters和Setters
_WidgetBase 作为基类，除了提供了一些通用的标准属性，它还定义了一套标准的getter和setter方法来访问开发者自定义属性。这套标准要求你定义一些私有方法(JavaScript中并没有真正的私有方法，Dojo遵循的一种编码规范是使用下划线开头的方法名表示类的私有方法)

@H_450_15@一旦你定义了上述两个方法，用户就可以使用dijit框架的标准get和set方法来访问你的自定义属性. 例如在定义了上述两个私有方法后，现在用户可以直接使用get和set来访问foo属性。

@H_874_183@ //假设这个小部件的实例是"myWidget"
1. //getthevalueof"foo":
2. varvalue=@H_324_199@myWidget.get("foo");
@H_874_183@
3. //setthevalueof"foo":
@H_874_183@ @H_899_129@myWidget.set("foo",somevalue);

大佬总结

以上是大佬教程为你收集整理的Dojo 1.6 官方教程： 理解Dijit Widget系统的基础架构全部内容，希望文章能够帮你解决Dojo 1.6 官方教程： 理解Dijit Widget系统的基础架构所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。