js數據層中間件單頁運用簡單構思和應用案例

時間 2019-11-24

標籤數據中間件單頁運用簡單構思應用案例欄目 JavaScript 简体版

原文原文鏈接

案例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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。