jQuery Mobile教程:组件如何自动初始化

2013-05-13 08:59:45  来源:w3cplus 

网页制作Webjx文章简介:本文我们来深度认识一下jQuery Mobile的内部设计原理中组件如何自动初始化。

本文我们来深度认识一下jQuery Mobile的内部设计原理中组件如何自动初始化
(注释:下面示例中的代码片段均来自1.1.0版本)
很多看过源码的同学或者使用过jquery mobile的同学们,大家有没有一个很大很大的问题:
------- jquery mobile提供了几个组件,他们如何自动初始化的?
!!重点说明:下面类似的自动初始化的流程多是在pagecreate触发后调用,有关pagecreate相关的说明可以查看我前面的相关介绍

我们挑选其中一个组件:listview

先看一张流程图:

listview auto init的流程图示

 

源码示例:

//#5193 绑定在pagecreate里面 $(document).bind("pagecreate create",function(e){ 	//调用enhanceWithin,传递了一个参数:target(dom对象) 	$.mobile.listview.prototype.enhanceWithin(e.target); }); 

1、$.mobile.listview.prototype.enhanceWithin

//#1203 enhanceWith:function(target,useKeepNative){ 	//调用this.enhance 	//这边注意:会读取options.initSelector来过滤选择 	this.enhance($(this.options.initSelector,$(target)),useKeepNative); }, 

2、enhance

//1207 enhance:function(targets,useKeepNative){ 	var $widgetElements = $(targets); 	 	//...... 	 	$widgetElements = $.mobile.enhanceable($widgetElements); 	 	//注意: 	//this.widgetName:listview ===> 在#979行装载进来的widgetName:name 	//转换为调用插件式 	//$(selector)["listview"](); 	$widgetElements[this.widgetName](); }, 
更多