基于jquery的提交、编辑页面js编写框架

无验证设计

基于jquery的提交、编辑页面js编写框架，设计思路，将js按照如下进行划分

1.页面数据初始化以及控件显示控制

2.填写状态控件绘出（不从ajax取数据，单一的绘制行为）

3.编辑状态控件绘出（不从ajax取数据，单一的绘制行为）

4.控件操作事件绑定（获取焦点、失去焦点、点击）

5.控件数据事件绑定（长度校验、业务规则校验、格式校验、不为空或有效值校验）

6.用户提交数据

7.页面数据储存model（新值、旧值、提交数值），依据特定的css样式名寻找所需数据

/// <reference path="jquery.js" />
$(function () {
    pageGlobal.data = {};
    pageGlobal.page = new pageGlobal.pt("submitdata", pageGlobal.data);
});
pageGlobal.pt = function (pro, data) {
    this.pro = pro || "submitdata";
    this.data = data || {};
    this.model = new Object;
    this.data.controls = new Array;//控件id数组
    this.controlEvent = new Object;//控件事件容器对象
    this.commonEvent = new Object;//公用事件
    this.dataEvent = new Object;//数据事件
    this.init = function () {
        this.initFn();
        this.common();
    }
    this.init.apply(this, arguments);
};
//页面数据初始化以及控件显示控制
pageGlobal.pt.prototype.initFn = function () {
    var that = this;
    var common = that.commonEvent;
    that.model=common.extractModel();
    //-------------------控件绘制-------------------------------//
    var ctlArr = that.data.controls;
    //-------------------控件基础事件-------------------------------//事件命名规则:id+事件类型名
    var ctleventObj = that.controlEvent;
    //ctleventObj["idclick"]=function(){
    //逻辑处理
    //};
    common.controlBindEvent(ctlArr, ctleventObj);
    //-------------------数据事件-------------------------------//事件类型：（长度校验LengthCheck、业务规则校验RulesValidation、格式校验FormatCheck、必填校验Required），命名规则：id+事件类型名
    var dataEventObj = that.dataEvent;
    //dataEventObj["idlc"]=function(){
    //逻辑处理
    //return true;如果通过验证否则返回false
    //};
    common.dataBindEvent(dataEventObj, that.model);
    //-----------------数据提交逻辑函数---------------------------------//
};
pageGlobal.pt.prototype.common = function () {
    var that = this;
    //抽取数据对象
    that.commonEvent.extractModel = function (className) {
        var model = new Object;
        model.json = new Object;//准备作为json对象提交的数据
        model.arr = new Array;//id存储数组
        var inputs = $(className);
        if (inputs) {
            for (var i = 0; i < iwwnputs.length; i++) {
                var val = $("#" + inputs[i].id).val();
                model["o" + inputs[i].id] = val; //设置为旧变量
                model["n" + inputs[i].id] = val; //设置为新变量
                model.json[inputs[i].id] = val;
                model.json[inputs[i].id].ev = new Array;
                model.json[inputs[i].id].evAction = function () {
                    for (var i = 0; i < this.ev.length; i++) {
                        if (!this.ev[i]())
                            return false;
                    };
                    return true;
                };
                model.arr.push(inputs[i].id);
            };
        };
        return model;
    };
    //更新数据对象
    that.commonEvent.updateModel = function (model, className) {
        var inputs = $(className);
        if (inputs) {
            for (var i = 0; i < inputs.length; i++) {
                model["n" + inputs[i].id] = $("#" + inputs[i].id).val(); //设置为新变量
                model.json[inputs[i].id] = $("#" + inputs[i].id).val();
            };
        };
        return model;
    };
    //控件事件绑定
    that.commonEvent.controlBindEvent = function (ctlArr, ctleventObj) {
        var eventTypeArr = ["click", "blur", "focus", "mousemove"];
        for (var i = 0; i < ctlArr.length; i++) {
            for (var j = 0; j < eventTypeArr.length; j++) {
                var eventName =ctlArr[i]+ eventTypeArr[j];
                if (ctleventObj[eventName]) {
                    $("#" + ctlArr[i]).live(eventTypeArr[j], ctleventObj[eventName]);
                };
            };
        };
    };
    //数据事件绑定
    that.commonEvent.dataBindEvent = function (dataEventObj, model) {
        var eventTypeArr = ["lc", "rv", "fc", "r"];
        var ctlArr = model.arr;
        for (var i = 0; i < ctlArr.length; i++) {
            for (var j = 0; j < eventTypeArr.length; j++) {
                var eventName =  ctlArr[i]+eventTypeArr[j];
                if (dataEventObj[eventName])
                    model.json[ctlArr[i]].ev.push(dataEventObj[eventName]);
            };
        };
    };
};