Dojo学习笔记(二十):理解_WidgetBase

简介:

如果你使用过dojo早期的版本,你可能对dijit/_Widget模块熟悉。虽然dijit/_Widget目前仍然存在,但是它经继承自_WidgetBase。在你从底层开始创建自定义小部件的时候,目前最好是直接继承_WidgetBase,dijit/_Widget很可能在2.0的版本中被淘汰掉

理解Dijit系统的关键在于对小部件的生命周期的理解,小部件生命周期是从一个小部件被设计到这个小部件能够被你的应用程序完全可引用,一直到小部件和dom元素的销毁。

_Widget_WidgetBase类前面都有一个“_”,表示这些类不能直接实例化使用,只能被用作declare声明类的基类。

每个以_WidgetBase作为父类的小部件在实例化过程中都要调用几个方法,下面是这些方法调用的顺序列表:

  • constructor     (实例化时调用的公共属性)

  • postscript     (声明时调用的公共属性)

    • postMixInProperties读入用户定义的属性

    • buildRendering(创建 _WidgetBase.domNode

    • postCreate(此函数被触发时, _WidgetBase.domNode已经被创建好了, 但是并不一定已经被连接到页面的 DOM 结构中所以, 此函数内最好不要执行       place 定位, 以及计算DOM Node占页面尺寸等相关操作)

    • create

  • startup

这些方法用来处理如下一些事务:

  • 定义小部件初始值;

  • 为小部件生成DOM结构的可视化表示;

  • 在页面内放置在小部件的DOM结构;

  • 何时处理小部件与文档对象中DOM节点的逻辑依赖关系,例如DOM节点的尺寸;

postCreate()方法

         在小部件的DOM准备好并插入到页面后,调用此方法。对于一个开发者来说,在这个小部件呈现在用户面前之前,这个方法是你执行最后的一些修改的主要地方,例如设置一些自定义属性等等。在开发一个自定义小部件的时候,大多数自定义信息会写在这个方法里,但不是全部。如果小部件中包含子小部件,若需要访问子小部件,需要使用startup()方法。

startup()方法

Dijit生命周期里,可被认为是第二重要的方法是startup方法。当小部件及其子小部件被创建好之后,调用该方法。若小部件是通过声明方式创建的,startup方法是通过dojo/parser方法自动调用的。倘若小部件是由编程方式创建的,必须调用startup()方法。

Tear-down方法

除了实例化方法之外,dijit/_WidgetBase还定义了一些销毁函数,下面按被调用的顺序列出:

  •    destroyRecursive(销毁小部件条目及子小部件)

    • uninitialize(需要自定义销毁时,可以覆盖此方法)

    • destroyRendering(清理小部件呈现条目)

    • destroyDescendants(销毁所有子小部件)

    • destroy(销毁所有小部件条目,但不包括子小部件)

当你在编写自定义小部件的时候,销毁操作要写在destroy()方法里,记得不要忘记调用this.inherited(arguments)dijit本身已经为你监测文档节点和大部分对象,可以用上述销毁方法来处理过时的对象和节点。

尽管destroy()方法是小部件的主要的销毁方法,但是当你想彻底地销毁一个小部件包括它的子小部件的时候,你应该调用destroyRecursive(),这将确保销毁这个小部件及其它的子元素。


http://dojotoolkit.org/documentation/tutorials/1.10/understanding_widgetbase/




     本文转自stock0991 51CTO博客,原文链接:http://blog.51cto.com/qing0991/1576212,如需转载请自行联系原作者




相关文章
|
JavaScript 前端开发 Java
javaScript实战项目之动态表格【文末附源码】
js中BOM实战项目之动态表格 🍅 Java学习路线:搬砖工的Java学习路线 🍅 作者:程序员小王 🍅 程序员小王的博客:https://www.wolai.com/wnaghengjie/ahNwvAUPG2Hb1Sy7Z8waaF 🍅 扫描主页左侧二维码,加我微信 一起学习、一起进步 🍅 欢迎点赞 👍 收藏 ⭐留言 📝
130 0
javaScript实战项目之动态表格【文末附源码】
|
JavaScript 前端开发
web前端学习(三十一)——初识JavaScript
web前端学习(三十一)——初识JavaScript
web前端学习(三十一)——初识JavaScript
|
JavaScript 前端开发
#yyds干货盘点# 【js学习笔记三十六】事件委托
#yyds干货盘点# 【js学习笔记三十六】事件委托
87 0
#yyds干货盘点# 【js学习笔记三十六】事件委托
|
JavaScript 前端开发
#yyds干货盘点# 【js学习笔记三十七】事件冒泡
#yyds干货盘点# 【js学习笔记三十七】事件冒泡
82 0
#yyds干货盘点# 【js学习笔记三十七】事件冒泡
|
JavaScript 前端开发
#yyds干货盘点# 【js学习笔记二十四】手动封装callES6
#yyds干货盘点# 【js学习笔记二十四】手动封装callES6
75 0
#yyds干货盘点# 【js学习笔记二十四】手动封装callES6
|
存储 JavaScript 编译器
💟从零开始学习JS基础1️⃣💟
编程本质上就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程。 计算机程序就是计算机所执行的一系列的指令集合,而程序全部都是用我们所掌握的语言来编写的,所以人们要控制计算机一定要通过计算机语言向计算机发出命令。
💟从零开始学习JS基础1️⃣💟
|
Web App开发 编解码 JavaScript
💟从零开始学习JS基础2️⃣💟
JavaScript 是世界上最流行的语言之一,是一种运行在客户端的脚本语言 (Script 是脚本的意思),脚本语言是不需要编译,运行过程中由 js 解释器( js 引擎)逐行来进行解释并执行。现在也可以基于 Node.js 技术进行服务器端编程。
171 0
💟从零开始学习JS基础2️⃣💟
|
前端开发 JavaScript
常用的CSS框架(上)
之前在写自己的个人网站的时候,由于自己Web前端不是特别好,于是就去找相关的CSS框架来搭建页面了。 找到以下这么一篇文章(列出了很多常用的CSS框架):
138 0
常用的CSS框架(上)
|
前端开发 JavaScript
常用的CSS框架(下)
之前在写自己的个人网站的时候,由于自己Web前端不是特别好,于是就去找相关的CSS框架来搭建页面了。 找到以下这么一篇文章(列出了很多常用的CSS框架):
118 0
常用的CSS框架(下)
|
Web App开发 JavaScript 前端开发
常用的CSS框架
常用的CSS框架 之前在写自己的个人网站的时候,由于自己Web前端不是特别好,于是就去找相关的CSS框架来搭建页面了。 找到以下这么一篇文章(列出了很多常用的CSS框架): http://w3schools.
1429 0

相关实验场景

更多