逻辑层的开发比较繁杂,如果没有理清头绪,很容易被绕进去,而不知东南西北,最终迷失方向。功能函数虽然非常多,且无法直接看到这些函数的演示效果,但是只有把这些函数绑定到具体的功能实现上,才能够发挥作用,也只有这样才能够提高代码的执行效率,优化代码性能。
完成整个网站的各个功能模块的开发之后,最后就需要对这些模块进行组装和启动了,整个网站的功能模块组装和启动工作由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个菜单选项行为控制 //…