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(){
inti:function(){
,,,,,核心代码
} ，
ajax:function(){
ajax代码....
}
};
不熟悉javascript的人可能觉得这是个什么玩意,其实这是定义了一个数组,数组内部包含着键值对数组,
数组每个元素的键就代表函数的名字, 因为数组也是对象所以我们看到 在 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路径
}
});
});
</script>
<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路径
} */
}
});
}
};
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框架使用的第一步。。