无验证设计
基于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]);
};
};
};
};