js数据层中间件单页运用简单构思和应用案例-白红宇

案例1：

<head>

$(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>

</body>

</html>

案例2

<!DOCTYPE html>

<head>

$(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>

<div>

<input id="countryName" /><button id="btnAdd">添加列表item</button>

</div>

</body>

</html>