js数据层中间件单页运用简单构思和应用案例
案例1：
<html xmlns="http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-2.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
//定义一个controller
var piliController = {
//选择视图
start: function () {
this.view.start();
},
//将用户操作映射到模型更新上
set: function (name) {
this.model.setPerson(name);
}
};
piliController.model = {
//此数据从中间数据层拿json.data(经中间件(简单做法封转一个页面所有的业务请求接口一个ajax请求回调搞定)批量查询后的静态资源)并处理填充
piliKV: {
'叶小钗': '刀狂剑痴',
'一页书': '百世经纶',
'素还真': '清香白莲'
},
curPerson: null,
//数据模型负责业务逻辑和数据存储
setPerson: function (name) {
this.curPerson = this.piliKV[name] ? name : null;
this.onchange();
},
//通知数据同步更新
onchange: function () {
piliController.view.update();
},
//相应视图对当前状态的查询
getPiliAction: function () {
return this.curPerson ? this.piliKV[this.curPerson] + this.curPerson : '???';
}
};
//=======================================================================
// 以下为界面代码，当要调整界面，改这里就行啦~~~
piliController.view = {
//用户触发change事件
start: function () {
$('#pili').change(this.onchange);
},
onchange: function () {
piliController.set($('#pili').val());
},
update: function () {
$('#end').html(piliController.model.getPiliAction());
}
};
//=======================================================================
piliController.start();
});
</script>
</head>
<body>
<select id="pili">
<option value="叶小钗">叶小钗</option>
<option value="一页书">一页书</option>
<option value="素还真">素还真</option>
</select>
<div id="end"></div>
</body>
</html>
案例2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js "></script>
<script>
$(function () {
var Countries = function () { }
Countries.prototype = {
_items: [],
_getData: function (success) {
//此数据从中间数据层拿json.data(经中间件(简单做法封转一个页面所有的业务请求接口一个ajax请求回调搞定)批量查询后的静态资源)并处理填充
var items = [
{ id: 0, name: '中国' },
{ id: 1, name: '日本' },
{ id: 2, name: '美国' }
];
$.extend(this._items, items);
success(items);
},
//Events
on_selected: $.Callbacks(),
on_inserted: $.Callbacks(),
//Methods
select: function () {
var self = this;
this._getData(function (items) {
self.on_selected.fire({
sender: self,
items: items
});
});
},
insert: function (item) {
var self = this;
this._items.push(item);
self.on_inserted.fire({ sender: self, item: item });
}
}
//=======================================================================
// 以下为界面代码，当要调整界面，改这里就行啦~~~
var countries = new Countries();
countries.on_selected.add(function (args) {
$(args.items).each(function () {
$('#countries').append($('<option>').attr('value', this.id).text(this.name));
});
});
countries.on_inserted.add(function (args) {
$('#countries').append($('<option selected="selected">').attr('value', args.item.id).text(args.item.name));
});
var id = 10;
$('#btnAdd').click(function () {
countries.insert({ id: ++id, name: $('#countryName').val() });
});
countries.select();
//=======================================================================
});
</script>
</head>
<body>
<select id="countries"></select>
<div>
<input id="countryName" /><button id="btnAdd">添加列表item</button>
</div>
</body>
</html>
地瓜园
