半年多之前有一次面试，当时只是想要张回家的免费机票，顺便看看运气
却不想那次面试获益颇丰，所以没事出去面试面试对个人的知识总结以及思维的深化很有帮助的哦
深化当然不是一朝一夕的事情，比如当时面试官就问我什么是“表现与数据分离”，就这个问题我就前前后后学习了很久，也和很多同事讨论过，但是一直没有一个比较好的结果
最近在做ipad相关的单页应用研究，被一个问题困住了思维，晚上看了两集布袋戏，完了在纸上画着画着，突然对半年多之前的一道面试题很有点思路
于是，今天晚上，抽时间记录之，此文只是个人见解，不一定正确，有误请指正，时间紧时间晚，行文不清晰勿怪
面试回顾
首先，当时我简历是抄的，里面有一句“对表现与数据分离有一定理解”，然后面试官就针对这点开问了
PS：尼玛，那是抄的，我哪里知道他是干神马的......
为了帮助我展开思维，面试官出了一道题：
他有一个国家列表，现在要将国家列表放到A中，然后B可以由A选择，也可以有总列表选择
但是B中添加后，若是A中没有要动态为A增加这项。
问题出来了，我现在一看就知道面试官想问观察者相关的知识点，当时没有理解到啦......
现在来看，说这道题与表现与数据分离有关是没有问题的，却不一定能让人很好的产生联想，所以这个问题的答案，还是需要继续挖掘
针对这个问题其实有几个实现方案，就算是初级入门的朋友也是能做的，但是要好好的回答这个题我们需要看到后面隐藏的意图
比如，现在是操作B时候需要A与之联动，如果现在出了一个C或者D呢？？？
解决方案
http://sandbox.runjs.cn/show/tsszo0hg
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title> 5 </title> 6 <style type="text/css"> 7 .country { margin: 20px; padding: 30px; border: 1px solid black;} .item 8 { margin: 10px; padding: 10px; border: 1px solid black; } .list { margin: 9 10px; padding: 10px; border: 1px solid black; min-height: 50px;} #pop { 10 border: 1px solid black; padding: 0; position: absolute; display: none; 11 background-color: White; } #pop li { list-style: none; padding: 10px; border-bottom: 12 1px solid black; } #pop li:hover { background-color: Gray; } 13 </style> 14 15 <script id="jquery_183" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.3.min.js"></script> 16 </head> 17 <body> 18 <div class="country"> 19 <h2> 20 全部国家 21 </h2> 22 <div id="all" class="list"> 23 </div> 24 </div> 25 <div class="country"> 26 <h2> 27 A国家 28 </h2> 29 <div id="a" class="list"> 30 </div> 31 </div> 32 <div class="country"> 33 <h2> 34 B国家 35 </h2> 36 <div id="b" class="list"> 37 </div> 38 </div> 39 <ul id="pop"> 40 <li attr="a"> 41 移动到A 42 </li> 43 <li attr="b"> 44 移动到B 45 </li> 46 <li attr="remove"> 47 删除 48 </li> 49 </ul> 50 51 <script type="text/javascript"> 52 var array = []; 53 var slice = array.slice; 54 var Pop = function() { 55 this.el = $('#pop'); 56 var scope = this; 57 this.el.on('click', 58 function(e) { 59 var item = $(e.target).attr('attr'); 60 scope.click(item); 61 scope.el.hide(); 62 }) 63 }; 64 Pop.prototype = { 65 show: function(e, callback) { 66 this.el.css('top', e.pageY); 67 this.el.css('left', e.pageX); 68 this.el.show(); 69 this.click = callback; 70 } 71 }; 72 var pop = new Pop(); 73 var CountryList = function(opts) { 74 this.list = opts.list || []; 75 this._events = {}; 76 this.root = opts.el || $('body'); 77 if (opts.events) { 78 for (var k in opts.events) this.on(k, opts.events[k]); 79 } 80 this.render(); 81 this.bindEvent(); 82 this.exec('onLoad') 83 }; 84 CountryList.prototype = { 85 render: function() { 86 var item; 87 for (var i = 0, 88 len = this.list.length; i < len; i++) { 89 item = $('<span class="item" >); 90 this.root.append(item); 91 } 92 }, 93 bindEvent: function() { 94 }, 95 add: function(name) { 96 var item = $('<span class="item" >); 97 this.list.push(name); 98 this.root.append(item); 99 this.exec('onAdd', name, item); 100 }, 101 remove: function(name) { 102 var index = this.list.indexOf(name); 103 if (index != -1) { 104 this.list.splice(index, 1); 105 var item = this.root.find('#' + index); 106 item.remove(); 107 } 108 this.exec('onRemove', name, item); 109 }, 110 on: function(type, fn) { 111 if (!this._events[type]) { 112 this._events[type] = []; 113 } 114 this._events[type].push(fn); 115 }, 116 exec: function(type) { 117 if (!this._events[type]) { 118 return; 119 } 120 var i = 0, 121 l = this._events[type].length; 122 if (!l) { 123 return; 124 } 125 var args = slice.call(arguments, 1); 126 for (; i < l; i++) { 127 this._events[type][i].apply(this, args); 128 } 129 }, 130 exist: function (name) { 131 return this.list.indexOf(name) != -1; 132 } 133 }; 134 135 136 var all = new CountryList({ 137 list: ['中国', '美国', '英国', '法国', '朝鲜', '日本'], 138 el: $('#all'), 139 events: { 140 onLoad: function () { 141 this.root.on('click', function(e) { 142 var el = $(e.target); 143 if(el.attr('class') != 'item') return; 144 pop.show(e, function(item) { 145 if(item == 'a') { 146 a.add(el.html()) 147 } else if(item == 'b') { 148 b.add(el.html()) 149 } 150 }); 151 }); 152 } 153 154 155 } 156 }); 157 var a = new CountryList({ 158 el: $('#a'), 159 events: { 160 onLoad: function () { 161 this.root.on('click', function(e) { 162 var el = $(e.target); 163 if(el.attr('class') != 'item') return; 164 pop.show(e, function(item) { 165 if(item == 'b') { 166 b.add(el.html()) 167 } 168 }); 169 }); 170 } 171 } 172 }); 173 var b = new CountryList({ 174 el: $('#b'), 175 events: { 176 onLoad: function () { 177 this.root.on('click', function(e) { 178 var el = $(e.target); 179 if(el.attr('class') != 'item') return; 180 pop.show(e, function(item) { 181 if(item == 'remove') { 182 b.remove(el.html()) 183 } 184 }); 185 }); 186 }, 187 onAdd: function(name) { 188 if(a.exist(name) == false) a.add(name) 189 }, 190 onRemove: function(name) { 191 console.log('remove'); 192 } 193 } 194 }); 195 </script> 196 </body> 197 </html>