最近在做ipad相关的单页应用研究，被一个问题困住了思维，晚上看了两集布袋戏，完了在纸上画着画着，突然对半年多之前的一道面试题很有点思路

于是，今天晚上，抽时间记录之，此文只是个人见解，不一定正确，有误请指正，时间紧时间晚，行文不清晰勿怪

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

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

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

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

问题出来了，我现在一看就知道面试官想问观察者相关的知识点，当时没有理解到啦......

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

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

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

解决方案

  1 html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 
  3     
  4         
  6         
 14  
 15     
 16     
 17     
 18         

 19             

 20                 全部国家
 21             
 22             

 23             
 24         
 25         

 26             

 27                 A国家
 28             
 29             

 30             
 31         
 32         

 33             

 34                 B国家
 35             
 36             

 37             
 38         
 39         

 40             
•  41                 移动到A  42             
 43             
•  44                 移动到B  45             
 46             
•  47                 删除  48             
 49         

 1 var CountryList = function(opts) {
 2     this.list = opts.list || [];
 3     this._events = {};
 4     this.root = opts.el || $('body');
 5     if (opts.events) {
 6         for (var k in opts.events) this.on(k, opts.events[k]);
 7     }
 8     this.render();
 9     this.bindEvent();
10     this.exec('onLoad')
11 };
12 CountryList.prototype = {
13     render: function() {
14         var item;
15         for (var i = 0,
16         len = this.list.length; i ' + this.list[i] + '');
18             this.root.append(item);
19         }
20     },
21     bindEvent: function() {
22     },
23     add: function(name) {
24         var item = $('' + name + '');
25         this.list.push(name);
26         this.root.append(item);
27         this.exec('onAdd', name, item);
28     },
29     remove: function(name) {
30         var index = this.list.indexOf(name);
31         if (index != -1) {
32             this.list.splice(index, 1);
33             var item = this.root.find('#' + index);
34             item.remove();
35         }
36         this.exec('onRemove', name, item);
37     },
38     on: function(type, fn) {
39         if (!this._events[type]) {
40             this._events[type] = [];
41         }
42         this._events[type].push(fn);
43     },
44     exec: function(type) {
45         if (!this._events[type]) {
46             return;
47         }
48         var i = 0,
49         l = this._events[type].length;
50         if (!l) {
51             return;
52         }
53         var args = slice.call(arguments, 1);
54         for (; i 
代码说明
因为本身比较晚了，加之今天工作量比较大，现在头脑有点浆糊，所以写的代码各位看看就好，不必认真，这个代码有何意义，有与表现与数据分离有什么关系呢？
其实这个代码本身就是实现了一个简单的数据集合类，在其内部有自建的事件机制，分别在三个点可以注册事件：
① 加载时
② 增加一项时
③ 删除一项时
于是，我就在几个点插入了自己的逻辑，我们特别来说一下b，我们为b注册了onload事件，并且onadd事件，在增加一项时会看看b中是否有，没有就增加了
这样做的话，我们就可以只关注b的数据了，而不必关心数据是拖过来，还是飞过来，还是爬过来了，我们这里的表现是什么呢？
什么是表现（行为）
我认为，表现就是增加数据的方式，这个题来说，是增加b项目的方式，我们题目中要求是“拖”，我嫌马上变成了“选”，这个增加数据的“表现”是多种多样的，
这里说是表现，我看行为更贴切，表现容易往模板上挂钩
比如说：
 
可以看到，我们在console环境下，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，或者其他会有一个联动关系
当然实际的业务可能比较复杂，是否应该这么干，值得这么干还得看情况。