基于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]);            };        };    };};