.DWZ源代码分析1--框架入口

DWZ框架一个国产的单页面RIA框架,RIA即富客户端互联网应用程序,是指在web上实现如桌面软件一样的操作界面..... 

这个库是对javascript的二次封装、即封装了jQuery. DWZ框架为我们定义好了框架的布局样式.我们在使用的时候只需要偷梁换柱即可。我们可以以html的样式进行控件的引用.只需要设置好ID即可,因为在js后台已经为我们设置好了样式。 通过不同的id以及不同标签的配合实现可以实现强大的客户端界面。

最近因为某种需要开始学习使用DWZ框架,说实话这个框架的确挺不错的.只通过修改框架就可以实现强大的客户端界面,但是这个框架

的文档却做得不是那么好。网上的一致评论是入门教程少.并且文档也讲述的不好,这个我亲身经历,这个框架并没有他教程里说道的那样入门简单,不需要js和jQuery基础...因为要使用和扩展这个框架就必须进行修改.这里我觉得javascript 和 jQuery都需要有一定的了解才可以 ... 没办法文档教程不给力只能分析源代码，这的确是一件纠结的事情..    ..纠结了一个星期终于整明白了.. 

分析的时候使用我编写的 JFunctionFinder 工具检索,,关键字, 分析的确挺方便的..这个在上篇有源代码...

 

DWZ框架的入口

这个框架核心在  dwz.core.js的文件下,它包含了 贯穿整个DWZ框架的核心方法 如  页面初始化 init和 表单提交ajax等

还有包括一些页面加载配置等信息,我们就没必要去逐个分析了,知道如何使用就可以了。这里主要介绍init函数

DWZ小组在这个js页面下创建了一个 名字为DWZ的对象.这个对象是一个键值对数组.

javascript的一种对象表示形式,,比如上面的init方法.在DWZ中的定义就类似如下 、

var  DWZ={
inti:function(){

,,,,,核心代码

 

} ，

ajax:function(){

 ajax代码....

}

};

不熟悉javascript的人可能觉得这是个什么玩意,其实这是定义了一个数组,数组内部包含着键值对数组,

数组每个元素的键就代表函数的名字, 因为数组也是对象所以我们看到 在 DWZ提供给我们的jui 中

的index.html头部包含这样一段代码: 

<script type="text/javascript">
/*
 *  */
$(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路径
  }
  });  
 });
</script> 

 我们发现他调用了 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.frag[pageId] = $(this).text();  //增加xml中的每个元素的内容到..frag 数组中...这个在DWZ空间中已经定义
    });
    
    $(xml).find("_MSG_").each(function(){      //同上MSG  代表的是弹出框提示的消息
     var id = $(this).attr("id");   //返回当前元素ID
     if (id) DWZ._msg[id] = $(this).text();      //增加内容到DWZ._msg 数组..DWZ空间应定义
    });
    
    if (jQuery.isFunction(op.callback)) op.callback();   //panduancallback是否是函数  如果是执行callback ...op是我们传递进来的
                                                                                    /*
                                                                                         这是html初始化内容       
                                                                                       callback:function(){
                                                                             initEnv();
                                                              $("#themeList").theme({themeBase:"themes"}); // themeBase 相对于index页面的主题base路径
                                                                                     }   */
   }
  });
 }
};

所以说我们在使用DWZ框架的时候一定要注意,添加初始化函数init...这是DWZ框架声明周期的起点.....

我么在使用DWZ框架前必须要做的是 利用script标签导入所需要的js库.

并且在随后的<scipr></script>中增加初始化init方法//////

这样我们才开始了DWZ框架使用的第一步。。