首先，当时我简历是抄的，里面有一句“对表现与数据分离有一定理解”，然后面试官就针对这点开问了

PS：尼玛，那是抄的，我哪里知道他是干神马的......

为了帮助我展开思维，面试官出了一道题：

他有一个国家列表，现在要将国家列表放到A中，然后B可以由A选择，也可以有总列表选择 但是B中添加后，若是A中没有要动态为A增加这项。

问题出来了，我现在一看就知道面试官想问什么了......当时其实没有理解到啦......

现在来看，说这道题与表现与数据分离有关是没有问题的，却不一定让人很好的产生联想，所以这个问题的答案，还是需要各位继续挖掘

针对这个问题其实有几个实现方案，就算是初级入门的朋友也是能做的，但是要好好的回答这个题我们需要看到后面隐藏的意图

比如，现在是操作B时候需要A与之联动，如果现在出了一个C或者D呢？？？

var CountryList = function(opts) {
    this.list = opts.list  [];
    this._events = {};
    this.root = opts.el  $('body');
    if (opts.events) {
        for (var k in opts.events) this.on(k, opts.events[k]);
    }
    this.render();
    this.bindEvent();
    this.exec('onLoad')
};
CountryList.prototype = {
    render: function() {
        var item;
        for (var i = 0,
        len = this.list.length; i < len; i++) {
            item = $('<span class="item" id="' + i + '">' + this.list[i] + '</span>');
            this.root.append(item);
        }
    },
    bindEvent: function() {
    },
    add: function(name) {
        var item = $('<span class="item" id="' + this.list.length + '">' + name + '</span>');
        this.list.push(name);
        this.root.append(item);
        this.exec('onAdd', name, item);
    },
    remove: function(name) {
        var index = this.list.indexOf(name);
        if (index != -1) {
            this.list.splice(index, 1);
            var item = this.root.find('#' + index);
            item.remove();
        }
        this.exec('onRemove', name, item);
    },
    on: function(type, fn) {
        if (!this._events[type]) {
            this._events[type] = [];
        }
        this._events[type].push(fn);
    },
    exec: function(type) {
        if (!this._events[type]) {
            return;
        }
        var i = 0,
        l = this._events[type].length;
        if (!l) {
            return;
        }
        var args = slice.call(arguments, 1);
        for (; i < l; i++) {
            this._events[type][i].apply(this, args);
        }
    },
    exist: function (name) {
        return this.list.indexOf(name) != -1;
    }
};

代码说明

因为本身比较晚了，加之今天工作量比较大，现在头脑有点浆糊，所以写的代码各位看看就好，不必认真，这个代码有何意义，有与表现与数据分离有什么关系呢？

其实这个代码本身就是实现了一个简单的队列类，在其内部有自建的事件机制，分别在三个点可以注册事件：

① 加载时

② 增加一项时

③ 删除一项时

于是，我就在几个点插入了自己的逻辑，我们特别来说一下b，我们为b注册了onload事件，并且onadd事件，在增加一项时会看看b中是否有，没有就增加了

这样做的话，我们就可以只关注b的数据了，而不必关心数据是拖过来，还是飞过来，还是爬过来了，我们这里的表现是什么呢？

什么是表现

我认为，表现就是增加数据的方式，这个题来说，是增加b项目的方式，我们题目中要求是“拖”，我嫌马上变成了“选”，这个增加数据的“表现”是多种多样的，比如说：

可以看到，我们在b中新增一项也会往a国家新增，这个也是一种“表现”

PS：不知道我这个样子理解表现是否正确

表现各种各样，但是各种各样的表现并不应该影响数据的维护，比如b国家居然增加了一项all国家没有的数据，难道all国家列表中不应该增加吗？

反过来说，我们a列表，b列表数据都最终来源于all，如果all的国家都被删除了那么ab国家的数据也是不应该存在了，而现在是ab，实际情况可能a-z

并且，数据消失的方法五花八门......

如果我们不是在数据上注册了事件的话，我们可能遇到以下情况：

① 拖的时候我们需要做相关逻辑准备

② 选的时候我们需要做相关逻辑

③ 增加b国家项目的方法变成使用select或者其他什么方法了，这个时候我们可能又要单独写逻辑了

所以我们现在要将各种“表现”给分离出来，只要操作了“数据”，比如增删，我就会执行不变的逻辑，数据处理的逻辑不以表现而变化

以上便是我对变现与数据分离的理解，理解若是有偏差，请各位指出

项目中可能

这种模式的编码可能用于哪些地方呢?

场景一：

主要用于一对多的变化，特别是多个dom共享一个data，这个时候data变了，我们不同的dom也需要得到变化

比如，我现在ipad项目上有一个城市列表数据（在localstarage中），左右两边同时会有针对该数据的显示，这个时候我们就需要对该data做一次封装

并且在其改变时候注册事件，让哥哥dom（view）注册事件，在data改变时候注册了事件的dom就会得到变化，比如左边导致数据变化

数据一旦发生变化，会触发相关事件，然后右边dom的数据就变了，这样做非常好，通过数据联系左右两边，因为左右两边可能根本无法通讯

却因为数据联系起来了

场景二：

其实关于这个的场景大同小异，另外一个常见的场景不那么明显，比如我们现在有一个商品，我们选择的数量不同，我们需要显示的折扣点不同，

同样我们的价钱当然会发生变化，这个变化看上去只是小区域的，但是总会有些莫名其妙的dom在页面的各个地方显示的相关的数据，一个不小心就会漏了

然后会有bug，这个情况下，就可以为个数相关的创建相关事件，当个数变化时候，其折扣相关的dom，价格相关的dom，或者其他会有一个联动关系

当然实际的业务可能比较复杂，是否应该这么干，值得这么干还得看情况

结语

昨晚大概这个时候，我突然想到了半年多之前的这个问题，今天下班后继续对他进行了学习，时间不够学习程度有深有浅

若是文章有任何问题，请您留意，针对这一问题后面可能还会有更深一步的学习，接下来我们的重心还是nodejs，只不过最近时间蛮紧的。

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索数据
， 逻辑题
， 事件
， function
， this
， events
， 变化
js逻辑题
js表现与数据分离、js表现与结构分离、表现与数据分离、前端表现与数据分离、对表现与数据分离，以便于您获取更多的相关知识。