Javascript | 模拟 mvc 实现点餐程序

<h1>请点餐</h1>
<div id="menu" style="border: 1px dashed darkkhaki;width: 25%;text-align: center;"><span>糖醋排骨</span><span>菜花</span><span>焖猪脚</span><span>红烧鲤鱼</span><span>鱼头汤</span></div><br />
		
复制代码

/**
 * 食物
 * @param {Object} name 名称
 */
function Food(name) {
	this.name = name;
	this.finished = false; //是否烹饪完成
	this.listeners = []; //监听器,作用：厨房把菜做好,需要通知服务员上菜
};
复制代码

/**
 * 监听食物的完成
 * @param {Object} callback 注册回调函数，食物制作完成调用
 */
Food.prototype.watch = function(callback) {
	this.listeners.push(callback);
};
复制代码

/**
 * 食物制作完成
 */
Food.prototype.finish = function() {
	var self = this;
	self.finished = true;
	console.log('食物制作完成: ' + self.name);
	// 食物烹饪完成时，应通知前台(监听器)上菜	
	// 按照Javascript事件处理的一般机制，我们异步地调用回调函数	
	// 如果觉得setTimeout影响性能，也可以采用requestAnimationFrame
	setTimeout(function() {
		self.listeners.forEach(function(listener) {
			listener(self);
		});
	});
};
复制代码

/**
 * 点餐控制器
 */
function Controller() {
	//食物列表
	this.foods = [];
};
复制代码

//点餐
this.order = function(name) {
	var food = new Food(name);   //创建食物
	food.watch(this.handle);     //监听食物的完成
	this.foods.push(food);       //将该食物加到食物列表
};
复制代码

//上菜
this.handle = function(food) {
	console.log('这道菜已经烹饪完毕：' + food.name);
	refreshKitchen();    //刷新后厨制作的显示
	refreshTable();      //刷新餐桌的显示
};
复制代码

//查找已点食物
this.get = function(name) {
	for (var i = 0; i < this.foods.length; i++) {
		if (this.foods[i].name == name) {
			return this.foods[i];
		}
	}
	return null;
};
复制代码

//创建控制器
var controller = new Controller();
复制代码

//程序启动
(function startApp() {
	//客户点菜,加入到已点列表
	var menus = document.getElementById('menu').getElementsByTagName('span');
	for (var i = 0; i < menus.length; i++) {
	    menus[i].onclick = function(e) {
	    var foodName = e.target.innerText;
	    //点餐
	    controller.order(foodName);
	    //刷新 已点、后厨制作、餐桌的显示
	    refresh();
	};
    }
})();
复制代码

/**
 * 刷新
 */
function refresh() {
	refreshOrdered();
	refreshKitchen();
};
/**
 * 刷新已点
 */
function refreshOrdered() {
	var ordered = document.getElementById('ordered');
	var html = '';
	for (var i = 0; i < controller.foods.length; i++) {
		html += '<li>' + controller.foods[i].name + '</li>';
	}
	ordered.innerHTML = html;
};
/**
 * 刷新后厨
 */
function refreshKitchen() {
	var kitchen = document.getElementById('kitchen');
	var html = '';
	var btn = '<input type="button" value="完成" style="margin-left: 10px;" onclick="finishFood(this);"/>';
	for (var i = 0; i < controller.foods.length; i++) {
		if (controller.foods[i].finished == false) {
			html += '<li>' + controller.foods[i].name + btn + '</li>';
		}
	}
	kitchen.innerHTML = html;
};
/**
 * 刷新餐桌
 */
function refreshTable() {
	var table = document.getElementById('table');
	var html = '';
	for (var i = 0; i < controller.foods.length; i++) {
		if (controller.foods[i].finished == true) {
			html += '<li>' + controller.foods[i].name + '</li>';
		}
	}
	table.innerHTML = html;
};
复制代码

<fieldset style="width: 20%;">
			<legend>已点</legend>
			<ul id="ordered">
			</ul>
		</fieldset>
		<fieldset style="width: 20%;">
			<legend>后厨制作</legend>
			<ul id="kitchen">
			</ul>
		</fieldset>
		<fieldset style="width: 20%;">
			<legend>餐桌</legend>
			<ul id="table">
			</ul>
		</fieldset>
复制代码

<style type="text/css"></style>
复制代码

/**
 * 食物烹饪完成
 */
function finishFood(btn) {
	var li = btn.parentNode;
	var food = controller.get(li.innerText);
	food.finish();
};
复制代码