网站备份,国内ui网站有哪些,wordpress 标签列表页,qq浏览器网页版进入无意间看到一个web前端招聘要求#xff1a;表现与数据分离 这名词对我非常陌生#xff0c;我就去百度了下 由于有各种莫名其妙的需求#xff0c;所以才会出现我们前端MVC这样的莫名其妙的东西。。。我们的html就是model#xff0c;我们的css就是view。我们的js就是controll… 无意间看到一个web前端招聘要求表现与数据分离 这名词对我非常陌生我就去百度了下 由于有各种莫名其妙的需求所以才会出现我们前端MVC这样的莫名其妙的东西。。。 我们的html就是model我们的css就是view。我们的js就是controller。 话不多说先上一段代码原来的代码抄过来的 2 head3 title/title4 script src../jquery-1.7.1.js typetext/javascript/script5 script typetext/javascript6 $(document).ready(function () {7 var end $(#end);8 $(#pili).change(function () {9 var name ;
10 var p $(this).val();
11 if (p 叶小钗) {
12 name 刀狂剑痴;
13 }
14 if (p 一页书) {
15 name 百世经纶;
16 }
17 if (p 素还真) {
18 name 清香白莲;
19 }
20
21 end.html(name p);
22 });
23 });
24 /script
25 /head
26 body
27 select idpili
28 option value叶小钗叶小钗/option
29 option value一页书一页书/option
30 option value素还真素还真/option
31 /select
32 div idend/div
33 /body
34 /html 我们又一次看看上面的代码。非常easy的逻辑。select改变后变化end的值好了如今需求发生改变 ① select变成使用input模拟select ② 在手机上还是使用select算了 ③ 总会有莫名其妙的需求这个就是 好吧。如今的代码你该怎么写呢是不是会写几个代码或者你压根不知道怎么写呢于是看看我们的MVC的实现吧 PS代码是我可耻的抄的。。。。但我但是自豪的一个字一个字的敲的哦窃知识不算偷...... 2 head3 title/title4 script src../jquery-1.7.1.js typetext/javascript/script5 script typetext/javascript6 $(document).ready(function () {7 //定义一个controller8 var piliController {9 //选择视图
10 start: function () {
11 this.view.start();
12 },
13 //将用户操作映射到模型更新上
14 set: function (name) {
15 this.model.setPerson(name);
16 }
17 };
18 piliController.model {
19 piliKV: {
20 叶小钗: 刀狂剑痴,
21 一页书: 百世经纶,
22 素还真: 清香白莲
23 },
24 curPerson: null,
25 //数据模型负责业务逻辑和数据存储
26 setPerson: function (name) {
27 this.curPerson this.piliKV[name] ? name : 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 idpili 57 option value叶小钗叶小钗/option 58 option value一页书一页书/option 59 option value素还真素还真/option 60 /select 61 div idend/div 62 /body 63 /html 我们来看看这个神一样的代码。。。。我们一開始会觉得他有这些问题 ① 代码维护困难。至少我觉得非常困难 ② 徒增复杂性。性能会有问题 ③ 我并不能说服自己说自己懂了。。。。 于是我们就放弃了MVC啦可是我们回过头来好好审视下他我们会发现不一样的东西 ① 我们好像就在view中使用了选择器获取dom其他地方压根不认识dom这个丫的。 ② 我们的数据似乎在model中我们能够任意改变。可是并不会影响到我们dom ③ view和model是全然独立的。我们的controller恰好把他们串联起来了 看着这奇妙的魔法我似懂非懂的点了点头。你妹的MVC还真他妈够劲 转载于:https://www.cnblogs.com/lxjshuju/p/6953290.html
