MVC的概念看了一些，感觉理解还是没有很透彻，在实际应用中还是有一些不知道属于model还是controller?MVC里model是模型，如我有一些通用的方法(主要是操作DOM和获取)放在appUtil对象里，应该属于model还是controller?
//方法：主要是获取数据，生成HTML元素，插入页面的方法//下面这个方法集合应该是 放在controller里还是model呢？
var monitorUtil = {
getEventTarget: function(e) {
//event.target（IE）和event.srcElement(其他浏览器)返回事件目标节点
e = e || window.event();
return e.target || e.srcElement;
},
setLocalStorage: function(type) {
//oldHeatSourceData oldHeatStationData oldPipeData oldDeviceData
var oldInnerHtml;
switch(type) {
case "heatSource":
oldInnerHtml = mui('.mui-table-view')[0].innerHTML;
localStorage.setItem("oldHeatSourceData", oldInnerHtml);
break;
case "heatTransfer":
oldInnerHtml = mui('.mui-table-view')[1].innerHTML;
localStorage.setItem("oldHeatStationData", oldInnerHtml);
break;
case "heatSupply":
oldInnerHtml = mui('.mui-table-view')[2].innerHTML;
localStorage.setItem("oldPipeData", oldInnerHtml);
break;
case "encironmental":
oldInnerHtml = mui('.mui-table-view')[3].innerHTML;
localStorage.setItem("oldDeviceData", oldInnerHtml);
break;
default:
break;
}
},
/*如果本地没有存储响应的数据调用这个方法,获取服务器数据*/
getMonitorData:function(url, targetUl, pageData, whichTab) {
mui.ajax({
async: false, //同步
data: pageData,
type: 'POST',
url: url,
timeout: 3000,
headers: {
Accept: "text/html, application/xhtml+xml, */*" //解决406报错
},
success: function(data) {
console.log(data);
var len = data.length;
targetUl.innerHTML = ""; //刷新前清空原数据
if(data == '' || !data) {
var p = doc.createElement('p');
console.log(p);
console.log(url);
p.className = "no-more-data";
p.innerHTML = "暂无数据";
targetUl.appendChild(p);
} else {
targetUl.appendChild(monitorUtil.createFragment(len, data, whichTab)); //调用函数，插入创建的元素
}
},
error: function(xhr, type, errorThrown) {
mui.toast("连接超时，请检查网络！");
console.log(xhr + '\n' + type + '\n' + errorThrown);
}
});
}
}
通用的方法可以写在 mvc 结构之外，比如写个 utils 目录，把通用方法全都放到这个目录下，在需要用到的地方直接import 就可以了，不必太纠结放在 model还是controller 中
根据你目前项目的情况，我感觉这样划分会比较好
view层：纯html页面
view controller层：为dom节点加监听和用户事件，call具体的business service/service,通过回调拿到下一层的返回结果后，操作dom来渲染上一层，view层。
business service层（option）：比较复杂的业务逻辑可以放在这一层，由这一层来统一call下一层service层（如果业务不是很复杂，这层也可以不要，把简单的业务逻辑扔到上一层，或者下一层。）
service层：可以把具体的ajax请求都放在这层
所以你上面那坨代码，跟dom相应/操作有关的应该归并到controller层，跟ajax请求有关的应该归并到service层，各层之间的通讯，你可以用callback传入句柄的方式，或者使用消息机制通讯。
在说点题外话，所谓model层，其实在传统mvc中对应的是持久化数据的数据库层面，在现代UI开发中已经不适用了，现代UI开发中的model层多指代business model，其实说model是一个层并不正确，因为业务model是贯穿多个层面的。而以Angular为代表的mvvm中其实model又有所不同，是用来描述视图的一个模型，跟业务模型也不同，不过你项目的架构不属于mvvm，所以硬要说model的话，就是你的业务数据啦。
不知道你这个是哪个框架，不过建议放在 service 里面。
在angular中可以注入引用，实现公用。但是关于dom的那段相关代码建议写directive。
在react中建议把请求部分写在service，用的时候直接import进来进行使用，方便管理，结构清晰。dom部分要注意，直接写组件中就好。注意的是虚拟dom，所以警惕下生命周期。
在vue中的话，建议类似react处理。