jQuery和DWZ源码分析.doc

jQuery和DWZ的源码分析报告专 业 软件工程班 级 嵌入1112班学 号 201111701428姓 名 张钦城2014 年04月28日 jQuery源码分析1，打开jQuery源码，首先你会看到这样的代码结构：(function( window,undefined) / jquery code)(window); 这是一个自调用匿名函数。在第一个括号内，创建一个匿名函数；第二个括号，立即执行。通过定义一个匿名函数，创建了一个“私有”的命名空间，该命名空间的变量和方法，不会破坏全局的命名空间。这点非常有用也是一个JS框架必须支持的功能，jQuery被应用在成千上万的JavaScript程序中，必须确保jQuery创建的变量不能和导入他的程序所使用的变量发生冲突。非匿名函数的类似写法如下( function test()alert(test);)();所有的jquery代码都放在该匿名函数里，避免了命名冲突。但有两个要单独处理:jQuery和$/ Map over jQuery in case of overwritevar _jQuery = window.jQuery,/ Map over the $ in case of overwrite _$ = window.$;var jQuery = window.jQuery = window.$ = function( selector, context ) / The jQuery object is actually just the init constructor enhanced return new jQuery.fn.init( selector, context );noConflict: function( deep ) window.$ = _$; if ( deep ) window.jQuery = _jQuery; return jQuery; ,假如没有执行noConflict,则原来定义的$或jQuery(如果定义了的话)会被一个新函数覆盖，只在内部留一个原来的引用(名叫_$或_jQuery)。如果要兼容原来的$,则执行jQuery.noConflict(),然后只能用jQuery的写法;极端情况:jQuery也被占用了，又要兼容，那么执行var myJQ =jQuery.noConflict(true),以后全用myJQ的写法。注意:这时jquery.js要放在其他js的后面。2， 定义jQuery的构造和原型函数，这个过程同时定义了prototype的别名为fn:jQtotype=jQuery.fn。 jQuery对象的原型prototype包括了诸多的核心方法和属性：initjquery 当前的版本号size 返回了length属性lengthgeteach. 定义完了以后必须写以下代码，/ Give the init function the jQuery prototype for later instantiation(晚初始化?)jQtotype = jQuery.fn;jQtotype.init( selector, context )是jQuery对象的一个成员函数,但是在jQuery构造函数中总是会执行这个函数,所以说它是加强的构造函数(init constructor enhanced)。因为在执行构造函数jQuery 时总是会执行它。 这也是很多框架的典型做法。jQuery有3个身份，类，对象，函数（构造函数）。如果find是对象的方法，即类似于 jQuery.find=function()那么就应该使用jQuery.find();如果find是类的成员函数，即类似于 jQtotype.find=function()那么必须通过jQuery()返回jQuery实例，再调用find方法，即jQuery().find()。3， jQuery对象不是通过newjQuery创建的，而是通过newjQuery.fn.init创建的varjQuery =function( selector, context ) returnnewjQuery.fn.init( selector, context, rootjQuery );jQuery对象就是jQuery.fn.init对象如果执行new jQeury(),生成的jQuery对象会被抛弃，最后返回jQuery.fn.init对象；因此可以直接调用jQuery( selector, context )，没有必要使用new关键字先执行jQuery.fn = jQtotype，再执行jQtotype = jQuery.fn，合并后的代码如下：jQtotype = jQuery.fn = jQtotype所有挂载到jQuery.fn的方法，相当于挂载到了jQtotype，即挂载到了jQuery函数上（一开始的jQuery =function( selector, context )），但是最后都相当于挂载到了jQtotype，即相当于挂载到了一开始的jQuery函数返回的对象上，即挂载到了我们最终使用的jQuery对象上。4，插件扩展机制DWZ源码分析DWZ框架一个国产的单页面RIA框架,RIA即富客户端互联网应用程序,是指在web上实现如桌面软件一样的操作界面. 这个库是对javascript的二次封装、即封装了jQuery. DWZ框架为我们定义好了框架的布局样式.我们在使用的时候只需要偷梁换柱即可。我们可以以html的样式进行控件的引用.只需要设置好ID即可,因为在js后台已经为我们设置好了样式。 通过不同的id以及不同标签的配合实现可以实现强大的客户端界面。DWZ框架的入口这个框架核心包含了 贯穿整个DWZ框架的核心方法 如 页面初始化 init和 表单提交ajax等还有包括一些页面加载配置等信息,这里主要介绍init函数DWZ小组在这个js页面下创建了一个 名字为DWZ的对象.这个对象是一个键值对数组.javascript的一种对象表示形式,比如上面的init方法.在DWZ中的定义就类似如下 、var DWZ=inti:function(),核心代码 ;ajax:function() ajax代码.;这里定义了一个数组,数组内部包含着键值对数组,数组每个元素的键就代表函数的名字, 因为数组也是对象所以我们看到 在 DWZ提供给我们的jui 中的index.html头部包含这样一段代码: /* * */$(function() DWZ.init(dwz.frag.xml, /json对象 loginUrl:login_dialog.html, loginTitle:登录, / 弹出登录对话框/ loginUrl:login.html, / 跳到登录页面 statusCode:ok:200, error:300, timeout:301, /【可选】 pageInfo:pageNum:pageNum, numPerPage:numPerPage, orderField:orderField, orderDirection:orderDirection, /【可选】 debug:false, / 调试模式 【true|false】 callback:function() initEnv(); $(#themeList).theme(themeBase:themes); / themeBase 相对于index页面的主题base路径 ); ); 我们发现他调用了 DWZ.init这个函数.这个初始化函数就是刚刚所说的. 他完整的定义如下: /DWZ的入口javascript 函数 init init:function(pageFrag, options) var op = $.extend(options); /在jQuery.extend进行合并 .增加一些属性方法 并且返回options对象 this._set.loginUrl = op.loginUrl; /登陆url this._set.loginTitle = op.loginTitle; /login title this._set.debug = op.debug; /是否调试 $.extend(DWZ.pageInfo, op.pageInfo); /*整合信息到DWZ中 的 pageInfo中 因为这个键已经定义,他会覆盖并添加 pageInfo这事 jQuery/的 extend扩展*/ /*调用jQuery的ajax提交 异步 xml 和 javascript 这里加载的是xml文件 . */ /通过ajax请求远程xml文件 jQuery.ajax( type:GET, /get请求 url:pageFrag, /请求url dataType:xml, /请求类型 timeout: 50000, /时间间隔 cache: false, /是否缓存 error: function(xhr) /错误 处理函数 alert(Error loading XML document: + pageFrag + nHttp status: + xhr.status + + xhr.statusText); , success: function(xml) /成功处理函数.ajax成功会返回html代码. $(xml).find(_PAGE_).each(function() /*搜索每个_PAGE_元素 each遍历元素集合 */ var pageId = $(this).attr(id); /获取每个xml元素的ID if (pageId) DWZ.fragpageId = $(this).text(); /*增加xml中的每个元素的内容到.frag 数组中.这个在DWZ空间中已经定义*/ ); $(xml).find(_MSG_).each(function() /*同上MSG 代表的是弹出框提示的消息 */ var id = $(this).attr(id); /返回当前元素ID if (id) DWZ._msgid = $(this).text(); /*增加内容到DWZ._msg 数组.DWZ空间应定义*/ ); if (jQuery.isFunction(op.callback) op.callback(); /panduancallback是否是函数 如果是执行callback .op是我