翻译 - Understanding _WidgetBase

原文:Understanding _WidgetBase

在本教程中,你将会学到Dijit的_WidgetBase模块是什么,与它是如何在Dojo Toolkit中做为所有挂件的根据而存在的。

开始

作为Dijit的基础,让你有能力创建自己的挂件,主要依靠一个基类,它定义在dijit/_WidgetBase模块中。当然搭建一个web应用还要依靠Dojo Toolkit中的其他关键点(如Dojo parser与Dijit templating system),这些模块是使用Dojo Toolkit创建任何种类自定义挂件的关键。

如果你是从早起版本一路走来的,你可以会熟悉dijit/_Widget模块。dijit/_Widget依然存在,它继承自dijit/_WidgetBase。创建自定义的挂件最好继承自dijit/_WidgetBase,因为dijit/_Widget在Dojo 2.0中可以被废弃了。

理解Dijit系统的关键就是挂件的生命周期。生命周期在挂件构建的初期就应该关注,换句话说,从一个挂件的构建到被应用完全使用——通过挂件的析构与他联系的DOM元素。

如果你想知道为什么Widget与WidgetBase前面都有个下划线_,这是因为他们都不是准备直接实例化类使用的模块;相反,他们主要是用来作为基类被继承的。

为了完成这些,dijit/_WidgetBase定义了两个概念:在挂件创建的过程中一系列方法被连续调用,挂件在应用中的生命周期,设置与获取字段的方法使用最新数据绑定。让我们来看第一个原理:Dijit的挂件的生命周期。

Dijit的生命周期

每个挂件都是使用_WidgetBase作为基类被声明,实例化时运行一系列的方法。我们他们的被调用顺序给列了出来:

  • constructor
  • postscript
    • create

      • postMixInProperties
      • buildReadering
      • postCreate
  • startup

这些方法主要处理下面这些事情:

  • 利用默认的与运行时的值初始化挂件的数据

  • 为挂件的视觉表现生成DOM结构
  • 放置关键的DOM结构到页面中
  • 处理依赖于DOM结构在文档只能中的逻辑表现。

postCreate()

到目前为止,当创建自定义挂件时脑海中最终的方法应该是postCreate。它将在挂件的属性定义与已创建的挂件在文档中呈现后被调用——但在它自己的片段加入到文档之前。这就是它很重要的原因,因为它处在一个很主要的位置,作为一个开发者,这个是在挂件呈现给用户之前做最后修改的机会,包括设置自定义属性等。当开发一个自定义挂件时,自定义部分大多都在这里完成(不是全部)。

startup()

在Dijit的生命周期中第二重要的方法就应该是startup了。这个方法被设计为处理DOM片段真正的添加到文档中之后的事情;它不会被触发直到任何潜在的子挂件被创建和启动。这对于复合挂件与布局挂件非常有用。

当以为编程的方式实例化挂件时,在将其放入文档中时总是要调用的挂件的startu方法。人们经常犯的错就是忘记了调用startup,然后在那抓耳挠腮,苦思不解为什么我们的挂件没有展示出来。

撕下方法(用于析构时调用的方法)

除了实例化方法之外,dijit/_WidgetBase还定义了一些析构方法(按照调用顺序列一下):

  • desctroyRecursive

    • destroyDescendants
    • destroy
      • uninitialize
      • destroyRendering

当我们编写自定义挂件时,任何用于销毁的动作或行为都应该放在destroy方法中。(不要忘记了调用this.inherited(arguments)!)Dijit自己照顾节点且很多对象为你做好了管理工作(使用上述的这些方法),通常你不用为你从Dijit继承来的方法而担心。

尽管desctroy是任何挂件的中心注销方法,但在你要明确的注销一个挂件时候,调用desctroyRecursive是明智的选择,它不仅可以确保注销挂件自身,还包括他们的子挂件。

节点引用

挂件通常是用户界面的一种,没有某种DOM表现是不完整的。_WidgetBase定义了一个标准属性叫做domNode,它用来引用挂件的父节点。如果你需要利用它做些什么事,可以直接以编程的方式获得这个引用(如在文档中移动挂件),且在postCreate调用的时候它已经可用了。

除了domNode属性之外,一些挂件还有个containerNode属性。这是一个在挂件中子节点的引用或定义在你挂件之外的挂件,就是在一个声明实例化的挂件的源码节点。(译者注:暂时不太理解到时是什么玩意儿)

我们将在另外一个教程中讨论containerNode,这里只需要知道它的存在就好了。(很明显,继承自dijit/_Container的挂件都应该有这个属性)

Getters与Setters

除了启动与销毁等基础方法外,_WidgetBase还为挂件的需要提供了不止一些预定义属性,但是还有一种方式让你自定义getters和setters,那将用标准的get和set方法类工作,在所有的挂件都预定义了。下面是定义私有方法的代码:

1 // for the field "foo" in your widget
2
3 // custom getter
4 _getFooAttr: function() { /* do something and return a value */ },
5
6 // custom setter
7 _setFooAttr: function(value) { /* do something to set a value */ }

如果你定义了这么一对自定义方法,你就可以使用基于_WidgetBase的挂件实例的标准get与set方法。对于上面的实例,你可以这样:

1 // assume that the widget instance is "myWidget":
2
3 // get the value of "foo"
4 var value = myWidget.get("foo");
5
6 // set the value of "foo"
7 myWidget.set("foo", someValue);

标准可以让其他挂件与控制代码以统一的方式与一个挂件交互,给你了一中当一个字段被访问的添加自定义逻辑的能力(好比修改DOM片段),也可以停止其他方法(如事件处理器或通知)。例如,你的挂件有个自定义的value,你想在它被改变的时候通知什么人(通过一个你定义的onChange方法):

1 // assume our field is called "value"
2
3 _setValueAttr: function(value) {
4     this.onChange(this.value, value);
5     this._set("value", value);
6 },
7
8 // a function designed to work with dojo/on
9 onChange: function(oldValue, newValue) {}

正如你说看到的,这在我们的挂件中给了我们自定义getter与setter的行为一个方便的方式。

Owning handles(拥有处理器)

/*不太理解,学学其他的回头再译*/

预定义的属性与事件

最后,_WidgetBase提供一个预定义属性的集合:

  • id: 一个唯一的字符串标识挂件
  • lang: 一个很少使用的字符串,可以覆盖Dojo默认的语言
  • dir: 支持支持阅读方向
  • class: 挂件的domNode节点的class属性
  • style:挂件的domNode节点的style属性
  • title:挂件的HTTP title属性
  • baseClass:挂件CSS类的根
  • srcNodeRef:如果有提供的话,在挂件化之前的DOM节点。注意依赖与类型的挂件(如模版挂件),将会随着postCreate被取消,原始的节点被遗弃。

结论

Dijit的_WidgetBase基础架构为创建和使用挂件提供了坚实的基础;可谓面面俱到(生命周期,DOM节点引用,getters与setters,预定义的属性与事件)。我们明白了在开发自定义挂件的生命周期中postCreate的重要性,以及编程方式实例化挂件时需要调用startup方法。我们还覆盖了Dijit的getter/setter基础架构,与挂件domNode属性的重要性。

时间: 2024-10-08 19:36:24

翻译 - Understanding _WidgetBase的相关文章

Dojo教程翻译索引

Getting Started Dojo Start 原文 翻译 Hello Dojo!原文 翻译 Modern Dojo 原文 翻译 Configuring Dojo with dojoConfig 原文 翻译 Fundamentals Classy JavaScript with dojo/_base/declare 原文 翻译 Creating Templte-based Widgets 原文 翻译 Using dojo/query 原文 翻译 NodeList Extensions 原文

理解LSTM网络--Understanding LSTM Networks(翻译一篇colah's blog)

colah的一篇讲解LSTM比较好的文章,翻译过来一起学习,原文地址:http://colah.github.io/posts/2015-08-Understanding-LSTMs/ ,Posted on August 27, 2015. Recurrent Neural  Networks 人类思维具有连贯性.当你看这篇文章时,根据你对前面词语的理解,你可以明白当前词语的意义.即是由前面的内容可以帮助理解后续的内容,体现了思维的连续性. 传统的神经网络(RNN之前的网络)在解决任务时,不能做

翻译经典之《Cisco Lan Switching》(一): Chapter 6. Understanding Spanning Tree

[版权声明:原创翻译文章,翻译水平有限,错误在所难免,翻译作者对文章中存在的错误或遗漏所造成后果不承担任何责任,请谨慎转载.转载请保留本声明及出处:blog.csdn.net/shallnet ,下载该书英文版] 本书作者感谢Radia Perlman贡献了自己的时间来帮助审阅本章内容. 本章包含以下主题: 何为生成树以及为何使用生成树--简要介绍生成树协议(STP)的目的.解释为什么一些环路避免协议的存在对于阻止广播风暴和mac地址表异常(bridge table  corruption)是必

0 - Visualizing and Understanding Convolutional Networks(阅读翻译)

卷积神经网络的可视化理解(Visualizing and Understanding Convolutional Networks) 摘要(Abstract) 近来,大型的卷积神经网络模型在Imagenet数据集上表现出了令人印象深刻的效果,但是现如今大家并没有很清楚地理解为什么它们有如此好的效果,以及如何改善其效果.在这篇文章中,我们对这两个问题均进行了讨论.我们介绍了一种创新性的可视化技术可以深入观察中间的特征层函数的作用以及分类器的行为.作为一项类似诊断性的技术,可视化操作可以使我们找到比

Rasa: OpenSource Language Understanding and Dialogue Management 翻译

Rasa: OpenSource Language Understanding and Dialogue Management 摘要 这是一个用于构建会话系统的开源python库,主要由两个部分构成Rasa NLU(自然语言理解) 和Rasa Core(对话管理),这两个软件包都有大量文档,并附带一套全面的测试.该代码地址:https://github.com/RasaHQ/ 1 简介 2 相关工作 Rasa的API使用了来自scikit-learn(专注于一致的API而不是严格的继承)和Ker

Understanding node.js by Felix Geisendörfer(翻译 by shangyan)

9/4/10 by Felix Geisendörfer Node.js has generally caused two reactions in people I've introduced it to. Basically people either "got it" right away, or they ended up being very confused. If you have been in the second group so far, here is my a

TypeScript手册翻译系列8-常见错误与Mixins

常见错误 下面列出了在使用TypeScript语言和编译器期间,经常会遇到的一些常见错误. "tsc.exe" exited with error code 1. 解决方案: 检查文件编码为UTF-8 - https://typescript.codeplex.com/workitem/1587 external module XYZ cannot be resolved 解决方案:检查模块路径是大小写敏感- https://typescript.codeplex.com/workit

论文翻译之--- 软件设计师怎样使用标记来帮助提醒和重新查找

最近以来有个学习任务,就是翻译一篇关于软件工程相关的论文.我选择了一篇How Software Developers Tagging to Support Remingding and Refinding.由于本人水平有限,基本直译,有很多不准确不通之处.希望读到文章的人批评指导,大家交流改进,在此基础之上使得翻译和我个人的能力得以提高.我记录了自己工作的时间,确实这篇文章的翻译耗费了我一定的时间.文章来自IEEE TRANSACTIONS ON SOFTWARE ENGINEERING, VO

(翻译)如何编写好的用户手册

原文:How to Publish a Great User Manual 地址:http://www.asktog.com/columns/017ManualWriting.html When was the last time you curled up in bed with a really good user-manual just for the sheer joy of reading it? Never? Think that is some immutable law of n