美文网首页
浅谈表现和数据分离

浅谈表现和数据分离

作者: 喜欢唱Hi歌的 | 来源:发表于2019-10-11 12:35 被阅读0次

    无意中看到了一篇关于表现和数据分离的文章,详细的看了一下,感觉和自己理解的不太一样就有了这次的探寻

    一、什么是表现和数据分离

    说法1:表现和数据分离就是MVC,MVC 是将数据和业务逻辑分离由控制器分发,明显不是

    说法2:表现和数据分离就是Css和html+data分离,方便修改页面的表现形式,如模板制作

    说法3:表现和数据分离就是javascript中的MVC,将数据的获取与数据的显示分离

    说法4:表现和数据分离就是javascript控制数据填充,html负责表现

    其中

    说法1明显不符合,

    说法2更应该称之为表现与结构分离

    说法3,下面是研究并复制别人的代码

    $(document).ready(function () {

    //定义一个controller

    var piliController = {

    //选择视图

    start: function () {

    this.view.start();

    },

    //将用户操作映射到模型更新上

    set: function (name) {

    this.model.setPerson(name);

    }

    };

    piliController.model = {

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

    });

    叶小钗

    一页书

    素还真

    写的确实很好的代码,个人想法是为什么不将select在用js在view中生成?

    说法4 那就是Ajax了,

    将3和4两种结合起来会不会更好一些。。。。。。。

    笔者QQ群 148042812

    相关文章

      网友评论

          本文标题:浅谈表现和数据分离

          本文链接:https://www.haomeiwen.com/subject/uyiquctx.html