根据对MVVM中ViewModel的理解写的一个前端脚本

这几天对MVVM模式做了简单的理解. MVVM中的MV是MVC中的MV, 而VM是在View之前添加了一层前端的逻辑层ViewModel. 该Model中的对象针对前端显示提供数据和接口.  VM中有一部分功能是实现ViewModel和前端控件的自动绑定,包括读取和写入,我根据这个理解写了个简单的脚本,并进行了一次重构,写在这儿,权当整理.

1: 展示对象

展示对象很简单,本例中是一个用户信息,包括用户编号,用户名称和用户中文名称.所以对象应该如下定义:

js脚本:

function user_item() {
	this.no = "";
	this.name = "";
	this.cname = "";
	
	this.class_name = "user_item";
}

注: 本处class_name属性用来设置业务对象的名称. ViewModel和前端之间的映射关系当前约定为: viewMode.class_name + "." + viewMode.property为前端对象的id,例如: user_item的no属性,对应前端控件为:

<input type="text" id="user_item.no">

创建ViewModel代码:

var user = new user_item();

2: 根据展示对象,设置3个前端控件

no:<input type="text" id="user_item.no"><br/>
name:<input type="text" id="user_item.name"><br/>
cname:<input type="text" id="user_item.cname"><br/>

3: 在前端页面中,实现两个功能,自动读取页面控件的值写入ViewModel对象,将ViewModel对象中的值赋值给页面控件.

3.1 js代码:为user_item添加两个函数read和write.

其中read将页面控件值写入对象,write将对象属性设置到页面控件上.

为类添加成员函数,在js中需要使用prototype(我当前只会这一种)

3.1.1首先添加遍历成员变量的函数.

该函数有两个参数:要遍历的对象(obj)和对对象属性进行的操作(回调函数:ondo),并根据成员变量找到对应的控件,并将对象(obj),成员变量名称(field)和控件(control)作为回调函数的参数调用回调函数(ondo)

(注意: 遍历时,跳过函数成员和class_name变量)

function on_obj_properties(obj, ondo) {
	for (i in obj) {
		if (i != obj.class_name && typeof(obj[i]) != "function") {
			var name = "#" + obj.class_name + "\\." + i;
			var control = $(name);
			if (control != undefined) {
				ondo(obj, control, i);
			}
		}
	}
}

3.1.2 read函数

user_item.prototype.read = function() {
	on_obj_properties(this, function(obj, control, field){
		obj[field] = control.val();
	});
	return this;
}

3.1.3 write函数

user_item.prototype.write = function() {
	on_obj_properties(this, function(obj, control, field){
		control.val(obj[field]);
	});
}

3.1.4 完整的js代码(为data.js):

function user_item() {
	this.no = "";
	this.name = "";
	this.cname = "";
	
	this.class_name = "user_item";
}

function on_obj_properties(obj, ondo) {
	for (i in obj) {
		if (i != obj.class_name && typeof(obj[i]) != "function") {
			var name = "#" + obj.class_name + "\\." + i;
			var control = $(name);
			if (control != undefined) {
				ondo(obj, control, i);
			}
		}
	}
}

user_item.prototype.read = function() {
	on_obj_properties(this, function(obj, control, field){
		obj[field] = control.val();
	});
	return this;
}

user_item.prototype.write = function() {
	on_obj_properties(this, function(obj, control, field){
		control.val(obj[field]);
	});
}

3.2 前端测试

3.2.1要进行测试,需要在前端添加读取和写入的功能.添加read和write两个按钮:

<input type="button"  value="read" onclick="read_value()"
/>
<input type="button"  value="write" onclick="write_value()"
/>

3.2.2为按钮添加代码

<script>
funct