无意间看到一个web前端招聘要求:表现与数据分离
这名词对我非常陌生,我就去百度了下
由于有各种莫名其妙的需求,所以才会出现我们前端MVC这样的莫名其妙的东西。。。
我们的html就是model,我们的css就是view。我们的js就是controller。
话不多说,先上一段代码(原来的代码,抄过来的):
2 34 5 25 26 27 32 33 34
我们又一次看看上面的代码。非常easy的逻辑。select改变后变化end的值,好了如今需求发生改变:
① select变成使用input模拟select
② 在手机上还是使用select算了
③ 总会有莫名其妙的需求,这个就是
好吧。如今的代码你该怎么写呢?是不是会写几个代码,或者你压根不知道怎么写呢???于是看看我们的MVC的实现吧
PS:代码是我可耻的抄的。。。。但我但是自豪的一个字一个字的敲的哦,窃知识不算偷......
2 3name : null ; 28 this .onchange(); 29 }, 30 // 通知数据同步更新 31 onchange: function () { 32 piliController.view.update(); 33 }, 34 // 对应视图对当前状态的查询 35 getPiliAction: function () { 36 return this .curPerson ? this .piliKV[ this .curPerson] + this .curPerson : ' ??? ' ; 37 } 38 }; 39 piliController.view = { 40 // 用户触发change事件 41 start: function () { 42 $( ' #pili ' ).change( this .onchange); 43 }, 44 onchange: function () { 45 piliController.set($( ' #pili ' ).val()); 46 }, 47 update: function () { 48 $( ' #end ' ).html(piliController.model.getPiliAction()); 49 } 50 }; 51 piliController.start(); 52 }); 53 </ script > 54 </ head > 55 < body > 56 < select id ="pili" > 57 < option value ="叶小钗" >叶小钗 </ option > 58 < option value ="一页书" >一页书 </ option > 59 < option value ="素还真" >素还真 </ option > 60 </ select > 61 < div id ="end" ></ div > 62 </ body > 63 </ html >4 5
我们来看看这个神一样的代码。。。。我们一開始会觉得他有这些问题:
① 代码维护困难。至少我觉得非常困难
② 徒增复杂性。性能会有问题
③ 我并不能说服自己说自己懂了。
。。。
于是我们就放弃了MVC啦,可是我们回过头来好好审视下他,我们会发现不一样的东西:
① 我们好像就在view中使用了选择器获取dom,其他地方压根不认识dom这个丫的。
② 我们的数据似乎在model中,我们能够任意改变。可是并不会影响到我们dom
③ view和model是全然独立的。我们的controller恰好把他们串联起来了
看着这奇妙的魔法,我似懂非懂的点了点头。你妹的MVC还真他妈够劲!
!