String.prototype.interpolate = function(params){
		const names = Object.keys(params)
		const vals = Object.values(params)
		const str = new Function(...names,`return \`${this}\`;`)(...vals)
		return str
	}

  <template>
    <li id="${id}">${name}</li>
  </template>

// 渲染
const render = ()=>{
	[
		{el:foodEle,temp:foodTpl,list:createData.foodList},
		{el:amusementEle,temp:amusementTpl,list:createData.amusementList},
		{el:foodListEle,temp:foodListTpl,list:createData.foodData},
		{el:amusementListEle,temp:amusementListTpl,list:createData.amusementData}
	].forEach(item=>{
		const temp = item.temp?.innerHTML
		if (!temp || !item.el) return;
		item.el.innerHTML = item.list.map(item=>temp.interpolate(item)).join('')
	})
}
// 数据存储，驱动页面变化
const createData = {
	foodList:[],// 自己选择的喜欢的食物
	amusementList:[],// 自己选择的喜欢的娱乐
	foodData:[],// 接口来的数据
	amusementData:[]
}

// 数据响应式变化
const createStore = (state,stateChanger)=>{
	const getState = () => state;
	const listeners = [] // 监听函数
	const subscribe = listener => listeners.push(listener) // 订阅监听函数
	const dispatch = action=>{
		// 执行状态变化函数
		stateChanger(state, action);
		// 所有订阅函数执行
		listeners.forEach(listener => listener());
	}
	return {
		getState,
		dispatch,
		subscribe
	}
}

// 数据变化
const stateChanger = (state,action)=>{
	switch(action.type){
		case "food":
			state.foodList = action.value;
			break;
		case "amusement":
			state.amusementList = action.value;
			break;
		case "foodData":
			state.foodData = action.value;
			break;
		case "amusementData":
			state.amusementData = action.value;
			break;
		default:
			break;
	}
}

// 执行响应式函数
const store = createStore(createData, stateChanger);
store.subscribe(() => render());