`
shatuo
  • 浏览: 26043 次
  • 性别: Icon_minigender_1
  • 来自: 铁力
文章分类
社区版块
存档分类
最新评论

dijit控件生命周期分析

阅读更多
    所有的基于dijit的widget共同父类为dijit._Widget,由于javascript先解析父类在解析继承的子类javascript继承机制,dojo机制下的所有widget会按照以下顺序完成自身js对象生成以及dom对象的渲染。
1) postscript                      
2) create
3) postMixInProperties
4) buildRendering
5) postCreate
6) startup
在解析widget时,dojo会生成一个新建一个widgetset对象dojo.registry用来管理widget,dojo.registry中的属性_hash用来保存widget,如果widget有id这个属性可以通过dojo.registry.add(widget)方法将widget放到_hash中,如果没有id或者id重复,这也是id在html中必须设置的原因。接下来我们就可以使用dijit.byId(也就是dojo.registry.byId)获取widget的js对象。
这个地方的代码为。
// dijit.WidgetSet包含所有拥有唯一id的widget对象
dojo.declare("dijit.WidgetSet", null, {
    //构造器,初始化this._hash
	constructor: function(){
		// summary:
		//	A set of widgets indexed by id
		this._hash={};
	},

	//注册,id冲突会失败
	add: function(/*Widget*/ widget){
		if(this._hash[widget.id]){
			throw new Error("Tried to register widget with id==" + widget.id + " but that id is already registered");
		}
		this._hash[widget.id]=widget;
	},
	
	//根据id移除
	remove: function(/*String*/ id){
		delete this._hash[id];
	},

    //通过这个可以遍历现有的widget
	forEach: function(/*Function*/ func){
		for(var id in this._hash){
			func(this._hash[id]);
		}
	},
     
    //通过此方法可以查询到满足条件的widget集合
	filter: function(/*Function*/ filter){
		var res = new dijit.WidgetSet();
		this.forEach(function(widget){
			if(filter(widget)){ res.add(widget); }
		});
		return res;		// dijit.WidgetSet
	},
     
     //根据id获取widget对象
	byId: function(/*String*/ id){
		return this._hash[id];
	},
     
    //可以获取同一类型的widget
	byClass: function(/*String*/ cls){
		return this.filter(function(widget){ return widget.declaredClass==cls; });	// dijit.WidgetSet
	}
	});

dijit.registry = new dijit.WidgetSet();     //dijit.registry用来管理widget对象
分享到:
评论

相关推荐

    dojo生命周期

    Dojo 控件的生命周期主要由 `dijit._Widget` 类定义,它是所有dijit组件的基础。dijit._Widget 实现了模板方法设计模式,以管理组件的生命周期。生命周期中的关键方法包括: 1. `create()`: 这个方法定义了组件的...

    Dojo Toolkit 1.2.0: Dojo + Dijit + DojoX

    Extract files from the download locally or on a web server. Include ...Browse to dojo/tests/runTests.html or dijit/themes/themeTester.html to see Dojo in action

    Dojo 小部件开发演示

    Dojo的核心组件是Dijit,它提供了一系列可复用的UI小部件,使得开发者能够快速地创建出高质量、符合无障碍标准的用户界面。在这个"Dojo小部件开发演示"中,我们将深入探讨如何使用Dijit来开发自定义的小部件,结合...

    dojo 树形列表 dijit.tree

    Dijit是Dojo Toolkit的一部分,专门提供了一系列可复用的UI控件,其中包括我们关注的“dijit.tree”,即树形列表。在本篇文章中,我们将深入探讨这五个关于dijit.tree的例子,并了解如何在实际应用中实现它们。 1. ...

    麻雀虽小五脏俱全 Dojo自定义控件应用

    第二层是基于核心API的“控件生命周期”概念。这是Dojo的一个亮点,它允许第三方开发者按照标准方式创建自定义控件,确保了控件的高度内聚性和面向对象的特性。每个Dojo控件都是一个JavaScript类,通常继承自_Widget...

    dojo控件的使用和入门心得

    - **dijit.forms**:表单控件相关的Widget。 - **dijit.layout**:页面布局Widget。 - **dojox.charting**:统计图表工具包。 #### 使用Dojo进行开发 使用Dojo开发Web应用非常直观,只需将`dojo.js`作为普通JS模块...

    dijit-pagination-js:用于分页结果的 Dojo Dijit

    dijit-分页-js 0.2 用于分页的 Dijit 描述 这个 Dojo 小部件在您选择的 DOM 元素中呈现一个分页列表,以便您可以轻松地对结果进行分页。 入门 将 dojo 配置添加到您的 HTML 头中 < script > // host path ...

    Dojo包下载 包含dijit dojo dojox util四个文件目录

    这个包下载包含了四个主要的文件目录:dijit、dojo、dojox 和 util,这些都是Dojo框架的核心部分。 1. **dojo**: 这是Dojo框架的基础模块,包含了许多核心功能,如模块加载(AMD, Asynchronous Module Definition)...

    功能齐备的treeview控件

    在IT领域,treeview控件是一种常见的用户界面元素,它用于以树形结构展示数据,使得用户可以方便地浏览和操作层级关系的数据。本篇将详细探讨dojo库中的treeview控件,以及如何利用它来实现功能完备的树视图。 Dojo...

    基于ArcGIS for javascript的网络分析功能核心代码

    在IT行业中,地理信息系统(GIS)是一个至关重要的领域,它涉及到地图制作、空间数据分析和决策支持。ArcGIS是Esri公司推出的一款强大的GIS软件,它提供了丰富的开发接口,包括ArcGIS for JavaScript,允许开发者...

    dstore-and-dijit:与dstore和Dijit同步

    在这个场景中,我们关注的是两个JavaScript库——dstore和Dijit。dstore是一个强大的数据存储库,而Dijit是Dojo Toolkit的一部分,提供了一系列的UI小部件。两者结合,可以方便地实现模型与视图之间的数据同步。 ...

    dijit-icons:可用于任何 Dojo 项目的可用 Dijit 图标集合

    道场/Dijit 图标 我一直无法找到可用的 Dojo/Dijit 按钮图标图像及其各自类的,所以我编译了。 常规图标的使用如下所示: <button data-dojo-type="dijit/form/Button" data-dojo-props="iconClass: 'NAME_OF_...

    技术基础:从头开始学习 Dojo

    3. **Dijit**:Dijit 包是 Dojo 的扩展 UI 库,包含各种用户界面组件,如对话框、日历、调色板、工具提示、树形视图,以及增强的表单控件和布局管理选项。Dijit 提供丰富的交互体验,是构建富互联网应用的关键。 4....

    aurora:Dojotoolkit Dijit 的定制主题

    "极光:DojoToolkit Dijit 的定制主题"是一个关于前端开发的专题,主要集中在使用Dojo Toolkit的Dijit组件库创建自定义主题。Dojo Toolkit是一个强大的JavaScript库,它提供了丰富的UI组件和工具,而Dijit是Dojo中的...

    dijitx:大量 Dojo 小部件。 DIJIT-X 拥有 DIJIT 和 dojoX 所没有的东西!

    DIJIT X拥有DIJIT和 dojo X 所没有的东西! 开放、免费并由的好人带给您。 ##小部件###Fieldset 这是一个将引入 Dojo 的小部件。 ###AutofillCheckBox Dijit CheckBox的扩展,用于使用另一组 Dijit 小部件的值自动...

    toc-dijit-graphics-layer-test:TOC dijit 拉取请求的测试用例

    这个名为“toc-dijit-graphics-layer-test”的项目,显然与JavaScript有关,可能是针对某个GIS(地理信息系统)或地图应用的测试用例。Dijit是Dojo Toolkit的一部分,它是一个用于构建交互式Web应用的JavaScript库。...

    DOJO源代码

    Dojo 提供了一套完整的 UI 控件,如按钮(`dijit/form/Button`)、下拉列表(`dijit/form/Select`)、布局容器(`dijit/layout/BorderContainer`)等。这些控件基于 dojo/_base/xdom 和 dojo/dom-class 等模块,实现...

    dojo1.3.1包

    3. **Dijit**:Dijit是Dojo的UI组件库,提供了多种可复用的、样式化的用户界面元素,如按钮、表单、对话框等。在1.3.1中,Dijit的可访问性和国际化支持得到了加强。 4. **Dojo Data**:这是一个数据模型接口,用于...

    dijit-claro-stylus:Dijit 的 Claro 主题从 Less 到 Stylus 的直接转换

    Dijit Claro 手写笔转换 该存储库包含 Dijit 的 Claro 主题(从 Dojo 版本 1.10.4 开始)从到一个端口。 注意:早期 Dojo 版本(回到 1.7)的转换可在单独的分支上获得: 用法 确保已安装手写笔... npm install -...

    Xpage学习笔记

    - `dijit.byId`:获取 Dojo 控件对象。 - `XSP.getElementById`:客户端访问 Xpage 控件。 - `getComponent`:服务器端访问控件。 ### 4. Xpage VS 表单 Xpage 相比传统的表单提供了更丰富的界面和交互能力,更适合...

Global site tag (gtag.js) - Google Analytics