Rumah  >  Soal Jawab  >  teks badan

MVC里model是模型,一些通用的方法,应该是model还是controller?

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);
                }
            });
        }
}


高洛峰高洛峰2870 hari yang lalu696

membalas semua(3)saya akan balas

  • 三叔

    三叔2016-11-12 10:16:24

    通用的方法可以写在 mvc 结构之外,比如写个 utils 目录,把通用方法全都放到这个目录下,在需要用到的地方直接import 就可以了,不必太纠结放在 model还是controller 中

    balas
    0
  • 欧阳克

    欧阳克2016-11-12 10:16:14

    根据你目前项目的情况,我感觉这样划分会比较好
    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的话,就是你的业务数据啦。


    balas
    0
  • 三叔

    三叔2016-11-12 10:15:58

    不知道你这个是哪个框架,不过建议放在 service 里面。

    在angular中可以注入引用,实现公用。但是关于dom的那段相关代码建议写directive。
    在react中建议把请求部分写在service,用的时候直接import进来进行使用,方便管理,结构清晰。dom部分要注意,直接写组件中就好。注意的是虚拟dom,所以警惕下生命周期。
    在vue中的话,建议类似react处理。


    balas
    0
  • Batalbalas