逻辑层的开发比较繁杂,如果没有理清头绪,很容易被绕进去,而不知东南西北,最终迷失方向。功能函数虽然非常多,且无法直接看到这些函数的演示效果,但是只有把这些函数绑定到具体的功能实现上,才能够发挥作用,也只有这样才能够提高代码的执行效率,优化代码性能。
完成整个网站的各个功能模块的开发之后,最后就需要对这些模块进行组装和启动了,整个网站的功能模块组装和启动工作由onload.js文件负责。该文件主要包含下面几部分内容:
- 基本数据配置。包括下面几个网站基本数据变量。
- tablearray:主要数据表数组,在writeform.js中生成表单结构时动态设计下拉菜单项。
- menuarray:导航列表数组,在onload.js中处理导航菜单行为时使用。
- menuobj:导航菜单与数据表格的映射关系,在writeform.js中生成表单的legend标签中使用,在init.js中初始化表单显示状态时使用。
- tableobj:数据表集合对象。本网站的核心配置变量。
- fieldobj:数据表字段和数据表格类名集合对象。本网站的核心配置变量。
- monthstr:月份简写数组。
- code:门禁系统的密码配置变量。
- table1limit:需要密码访问的数据表配置变量。
- 网站页面基本控制。主要包括网站图标的小创意,当单击网站图标时,能够动态更换网站布景效果;当单击网站导航标识短语时,能够动态展开或者隐藏网站导航栏以及所有网站信息,相当于网站的大门开关。另外,还包含网站导航栏中几个控制菜单,如隐藏或显示表单、信息面板、数据表格等选项。例如,其中动态显示控制面板代码如下。
//显示导航面板
var h1_span = h1.lastChild; //获取span标签
window.h1_span = false; //全局状态跟踪变量
var h1_spanclick = function(){
if(!window.h1_span){ //切换全局变量
showmenubox.style.display = "";
window.h1_span = true;
h1_span.innerHTML = "幸福回家";
h1_span.className = "desc"; //改变类
}else{
showmenubox.style.display = "none";
window.h1_span = false;
h1_span.innerHTML = "快乐请进";
h1_span.className = "asc"; //改变类
showdefault(); //恢复页面初始化状态
resetmenu(); //恢复导航菜单的默认样式
}
//阻止事件冒泡到父元素身上去
if(document.all) //兼容IE
window.event.cancelBubble=true;
else //兼容非IE
event.stopPropagation();
}
导航栏控制。整个网站的所有行为、面板、显示信息都通过这些导航栏进行工作,然后在这个导航栏中逐一调用本网站所涉及的全部功能函数。 整个onload.js文件的代码如下,省略部分请参阅光盘示例。
//…
//省略的基本配置数据变量
//…
window.onload = function(){
//…
//省略的网站图标小部件
//…
//遍历导航菜单的列表选项
for(var i=0; i < list.length; i++){
list[i].innerHTML = menuarray[i]['title']; //设置菜单名称
list[i].onclick = (function(i){ //绑定单击事件
return function(){ //闭包函数
var obj = writeform(menuarray[i]['table']); //获取写入表单结构的对象
showformbox.innerHTML = obj['html']; //在包含框中插入表单
showformbox.style.display = "block"; //显示表单
//设置隐藏表单菜单项状态
window.hideform = false; //全局状态跟踪变量
hideform.innerHTML = "隐藏表单";
//设置隐藏数据表菜单项状态
window.hidetable = false; //全局状态跟踪变量
hidetable.innerHTML = "隐藏数据表";
//设置隐藏基本信息菜单项状态
window.hideinfoli = false; //全局状态跟踪变量
hideinfoli.innerHTML = "隐藏基本信息";
var table = menuarray[i]['table']; //获取表的名称
//如果是收入、支出或日志信息,则写入表单记录
if(table == "out" || table == "income" || table == "blog" ){
//获取表单对象
var save = document.getElementById("save");
var _reset = document.getElementById("reset");
var _class = document.getElementById("class");
var detail = document.getElementById("detail");
//如果是收入和支出信息,则获取金额文本框
if( table != "blog")
var price = document.getElementById("price");
//显示收入和支出分类下拉列表选项
showclass(_class, table);
var classid = _class.value; //获取下拉列表框的值
_reset.onclick = function(){ //清除明细表单项
resetform(); //调用清除表单值函数
}
save.onclick = function(){ //执行数据库写入操作
if( table != "blog"){ //写入收入或支出信息
writerecord(table);
}else{ //写入日志信息,日志不涉及金额字段,处理方式不同
writeblog(table);
}
var sql = "select top 1 * from "+ table +" order by id desc"; //复查写入的值
var rs = requeryrs(sql);
var upperid = parseFloat(rs("id")); //保存写入记录的编号
closers(rs); //关闭记录集
writedetail(table, upperid, tableobj[table][4]) //写入明细数据
}
//在收入、支出、日志表单中,选择不同的分类时,执行下面操作
_class.onchange = function(){
if( table != "blog") //如果是收入和支出信息,则清空金额值
price.value = "";
classid = _class.value; //获取选择的值
//添加明细表单
detail.innerHTML = ""; //先清空明细包含框
//调用添加明细表单函数,获得divDOM片段
var div = addsubform(classid, table);
if(div){ //如果存在
var h3 = document.createElement("h3"); //定义三级标题
var h3title = document.createTextNode("添加明细"); //添加标题文本
h3.appendChild(h3title); //绑定三级标题
detail.appendChild(h3);
var subbox = document.createElement("div");
detail.appendChild(subbox);
subbox.appendChild(div); //绑定明细表单项
addsubbtn(classid, table); //添加明细表单控制按钮
}
$('textarea').elastic(); //添加文本区域自动伸缩外部插件
}
detail.innerHTML = ""; //添加明细表单
var div = addsubform(classid, table);
if(div){
var h3 = document.createElement("h3"); //定义三级标题
var h3title = document.createTextNode("添加明细"); //添加标题文本
h3.appendChild(h3title);
detail.appendChild(h3);
var subbox = document.createElement("div");
detail.appendChild(subbox);
subbox.appendChild(div); //绑定明细表单项
addsubbtn(classid, table); //添加明细表单控制按钮
}
}
else if(table == "fastquery"){ //快速查询表单
monthquery(); //按月查询
yesterday(); //昨天查询
time(); //按时间段查询
mohu(); //模糊查询
numday(); //指定天数查询
today(); //今天查询
beforeyesterday(); //前天查询
beforeyest(); //最近3天查询
week(); /最近一周查询
}else if(table == "custquery"){ //自定义查询表单
//获取自定义查询表单对象
var orderby = document.getElementById("orderby");
var col = document.getElementById("col");
var allcol = document.getElementById("allcol");
var table0 = document.getElementById("table0");
var where = document.getElementById("where");
var whereclass = document.getElementById("whereclass");
table0.onchange = function(){ //当选择不同的数据表时,执行操作
table0value = table0.value; //获取选择的表名
showfield(col, table0value); //绑定列下拉框选项值
//在条件文本区域绑定提示信息:分类和字段
showwhere(where, whereclass, table0value);
showfield(orderby, table0value); //绑定排序下拉框选项值
}
showfield(col, "out"); //绑定列下拉框选项值
showfield(orderby, "out"); //绑定排序下拉框选项值
//在条件文本区域绑定提示信息:分类和字段
showwhere(where, whereclass, "out");
fieldcoltoall(col,allcol);
custquery(); //自定义查询
}else if(table == "class"){ //分类管理表单
tableclass(); //表格分类管理
class3(); //三级分类管理
class2(); //二级分类管理
class1(); //一级分类管理
outclass(); //出账分类管理
incomeclass(); //入账分类管理
blogclass(); //日志分类管理
outdetail(); //出账明细分类管理
incomedetail(); //入账明细分类管理
blogdetail(); //日志明细分类管理
}
$('textarea').elastic(); //添加文本区域自动伸缩外部插件
}
})(i)
}
}
//…
//省略的网站导航栏中最后3个菜单选项行为控制
//…