页面初始化

课后整理 2021-2-25

逻辑层的开发比较繁杂,如果没有理清头绪,很容易被绕进去,而不知东南西北,最终迷失方向。功能函数虽然非常多,且无法直接看到这些函数的演示效果,但是只有把这些函数绑定到具体的功能实现上,才能够发挥作用,也只有这样才能够提高代码的执行效率,优化代码性能。

完成整个网站的各个功能模块的开发之后,最后就需要对这些模块进行组装和启动了,整个网站的功能模块组装和启动工作由onload.js文件负责。该文件主要包含下面几部分内容:

//显示导航面板
    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个菜单选项行为控制
//…