表现与数据分离;前台MVC
无意间看到一个web前端招聘要求:表现与数据分离
这名词对我非常陌生,我就去百度了下
由于有各种莫名其妙的需求,所以才会出现我们前端MVC这样的莫名其妙的东西。。。
我们的html就是model,我们的css就是view。我们的js就是controller。
话不多说,先上一段代码(原来的代码,抄过来的):
2 <head> 3 <title></title> 4 <script src="../jquery-1.7.1.js" type="text/javascript"></script> 5 <script type="text/javascript"> 6 $(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 id="pili"> 28 <option value="叶小钗">叶小钗</option> 29 <option value="一页书">一页书</option> 30 <option value="素还真">素还真</option> 31 </select> 32 <div id="end"></div> 33 </body> 34 </html>
我们又一次看看上面的代码。非常easy的逻辑。select改变后变化end的值,好了如今需求发生改变:
① select变成使用input模拟select
② 在手机上还是使用select算了
③ 总会有莫名其妙的需求,这个就是
好吧。如今的代码你该怎么写呢?是不是会写几个代码,或者你压根不知道怎么写呢???于是看看我们的MVC的实现吧
PS:代码是我可耻的抄的。。。。但我但是自豪的一个字一个字的敲的哦,窃知识不算偷......
2 <head> 3 <title></title> 4 <script src="../jquery-1.7.1.js" type="text/javascript"></script> 5 <script type="text/javascript"> 6 $(document).ready(function () { 7 //定义一个controller 8 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 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>
我们来看看这个神一样的代码。。。。我们一開始会觉得他有这些问题:
① 代码维护困难。至少我觉得非常困难
② 徒增复杂性。性能会有问题
③ 我并不能说服自己说自己懂了。
。。。
于是我们就放弃了MVC啦,可是我们回过头来好好审视下他,我们会发现不一样的东西:
① 我们好像就在view中使用了选择器获取dom,其他地方压根不认识dom这个丫的。
② 我们的数据似乎在model中,我们能够任意改变。可是并不会影响到我们dom
③ view和model是全然独立的。我们的controller恰好把他们串联起来了
看着这奇妙的魔法,我似懂非懂的点了点头。你妹的MVC还真他妈够劲!
!
转载于:https://www.cnblogs.com/lxjshuju/p/6953290.html
表现与数据分离;前台MVC相关推荐
- web标准,表现与数据分离,web语义化,页面布局和架构
目录 目录 web标准 结构层标准,就是W3C规定的那样: 表现层标准: 行为层标准: 表现与数据分离: web语义化 在广义方面 在代码编译方面 页面布局和架构 布局 架构 开发人员会有一些困惑: ...
- 表现与数据分离、web语义化的理解
2019独角兽企业重金招聘Python工程师标准>>> 表现与数据分离 什么是表现与数据分离 一是前后端分离,所有数据都是后端通过AJAX发送给前端,前端负责展现页面,后端负责提供数 ...
- 表现与数据分离、Web语义化
表现与数据分离: 也可以说是界面与数据分离,要体现在代码上,操作数据的代码和操作界面的代码,要分开写. 优势:当页面需求发生改变,只需要改写界面的代码,并且修改的代码不能影响到操作数据访问的代码. 例 ...
- (配置消息转换器)解决后台返回json数据到前台时页面时中文显示乱码问题
(配置消息转换器)解决后台返回json数据到前台时页面时中文显示乱码问题 SpringMVC.xml中加 <!-- 配置消息转换器(解决中文乱码问题)--><mvc:annotati ...
- servlet向ajax传递数据库,一、JSP、servlet、SQL三者之间的数据传递(前台与后台数据交互)...
背景: 目前业界很流行的MVC(model-view-control)开发模式,理解为 模型是Bean, 视图是 Html/Jsp, 控制是Servlet, 关联数据库的Dao web的运行机制: 数 ...
- jquery 后台数据到前台展示
网页 <%@ page language="java" import="java.util.*" pageEncoding="utf-8&quo ...
- 微信小程序: module.exports require----业务中的数据分离
大家好,这一篇文章由博主为大家讲讲通过将数据与逻辑操作层分离的代码操作,使页面结构更加简洁美化,话不多说直接进入主题. 简单介绍 数据分离,即将逻辑操作层与数据层分成两个页面保存代码.通过 modul ...
- 战斗 表现和逻辑分离_冗长的优点和表现力的缺点
战斗 表现和逻辑分离 Java太冗长了! 谁没有以前在互联网上偶然发现过这样的声音? 那个吹嘘[在那儿插入表达语言]的人很快就取代了Java,因为它更加简洁:它可以用一行代码代替那10行Java代码. ...
- 关于redis的冷热数据分离
一.概述 当前KV数据库从存储介质可以分为两种模式,一种是以内存为主持久化为辅,如memcache(无持久化).redis等:一种是以持久化为主内存为辅,如ssdb(基于leveldb/rocksdb ...
最新文章
- Access和CorelDRAW总结
- 聊一聊今年实例分割领域的进展和未来展望
- 如何成为一名现代的Linux程序员
- 在ListCtrl控件中插入图标
- 关于若干数据库数据插入性能的对比
- asp.net的几个错误
- Tcpdump linux抓包软件详细使用
- mysql 内存占用_mysql占用内存过多
- python类的继承举例_python类的继承实例详解
- 千兆网卡为什么慢_宽带300M,光猫是千兆的,电脑网卡和无线路由器都是千兆的。但是速度仍是100M。这是为什么?...
- twitter sdk android,android – 登录Twitter失败
- php 姓氏表,php 根据姓氏笔画排序怎么做
- windows电脑系统自带的画图工具如何实现自由拼图
- 【百度云破解】Aria2GUI使用教程
- C#练习题答案: 字母战争 - 核打击【难度:3级】--景越C#经典编程题库,1000道C#基础练习题等你来挑战
- YYT 0664 - 2008 医疗器械软件 软件生存周期过程
- 番茄助手 Visual Assist X 下载安装及使用
- 职业操盘手的止损法则
- 【MongoDB】mongodb | 安装 | 使用 | mdb
- Spring+SpringMvc+Hibernate(SSH)+bootstrap/Jsp整合
热门文章
- vlookup练习_那个vlookup,我总是学不会啊
- Docker (1) 基本概念和安装
- select into from和insert into select
- $python数据分析基础——初识numpy库
- [BZOJ 2654]tree(陈立杰)
- DOM事件与jQuery事件的是非纠葛
- linux 烧写(1)
- linux普通用户发送信号,Linux信号发送与作业控制
- .net宿舍管理系统 mysql_基于.NET CORE的精美后台管理系统-RuoYi C#版
- python向dict里添加_Python有条件地向Dict添加键