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

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

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

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

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

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

http://www.gaodaima.com/30381.html

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

比如，现在是操作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，只不过最近时间蛮紧的。

欢迎大家阅读《探讨JS表现与数据分离_js》,跪求各位点评,若觉得好的话请收藏本文，by 搞代码

喜欢 (0)赏

[搞代码]

分享 (0)