【web前端面试题整理07】我不理解表现与数据分离。。。
拜师传说
今天老夫拜师了，老夫有幸认识一个JS高手，在此推荐其博客，悄悄告诉你，我拜他为师了，他承诺我只收我一个男弟子。。。。。
师尊刚注册的账号，现在博客数量还不多，但是后面点会有干货哦，值得期待。
http://www.cnblogs.com/aaronjs/
前言
上周回到了成都，这周就准备找工作了，对成都的聚美优品其实比较有好感的，所以昨天就先去面试了，感觉技术面试的还不错啦，结果最后HR说经理不在，让我等经理反馈。
我当时相信了，但是回来想想感觉可能失败了，但是我不知道哪里出了问题。
现在遇到的前端面试都大同小异的，具体的题目就不列出来了，因为泄露公司机密不太好，我就说说自己印象比较深刻的一些东西吧。
今天发生了一次电话面试，下午参加了一家公司的面试，感觉公司还是很有发展潜力的，比较靠谱，若是有后文应该会选择吧。
回到家中后，有两件事一直放在心中，第一个就是昨天为什么失败了，另一个就是我那抄袭的简历啦。。。。
话说简历抄袭
我简历上面抄了一段话：对表现与数据分离有一定了解！
于是上午就被人问到了，并且那位大哥还把工作中遇到的一个问题与我交流了一番（问题等下提出），当时我对这块的理解其实比较模糊，然后就给绕过去了。
于是上午就一直觉得有件事情堵得慌，到下午面试结束后，确实忍不住了，我们一起来看看这个问题吧！
什么是表现与数据分离
我一来就看了一篇文章，点进去一看结果说的是表现与结构分离，其大意是：
表现应该由CSS来控制，结构应该由html来控制，比如我们伟大的禅意花园。
于是我觉得，我简历是不是应该改成，表现与结构分离呢。。。。
但是我感觉表现与数据分离还是有点道理呢，所以我们还是回到我们的表现与数据分离吧。
----------华丽的分割线----------
半个小时过去了，我去查询了资料也去请教了前辈，最后得出了两个东西：
MVC
MVVM
很显然，他们说的这个也许是我找寻的答案，但是我心里面视乎并不买账，于是我找寻了以后截了一个图：
这是一个搞后端的大哥写的博客，我们看到采用MVC开发的主要目的就是表现与数据分离。
看来真的就是MVC啦。。。
好了，这个地方暂时打住，我们来看看当时的原话
模拟面试
面试官问我，说简历上写的对表现与数据分离有一定理解，可以描述一下么
我很淡定的说了句让我思考下，然后开始搜索着我的大脑硬盘，好像压根就没有这个词呢，于是胡乱蒙了个是不是html与css应该分离？
答案当然是否定的，然后面试哥把他在项目中遇到的一个问题抛了出来：
他有一个国家列表，现在要将国家列表放到A中，然后B可以由A选择，也可以有总列表选择
但是B中添加后，若是A中没有要动态为A增加这项。
为了方便各位理解，我上个图
不知道各位听到这个题作何感受，我当时其实就有一种方式可以实现（最简单，最土的），压根就没有想到这个题会和“表现与数据分离”有关系。
但是既然问到了，应该还是有联系吧，不知道各位怎么看待呢？
于是我们回到问题本身吧
再论行为与数据分离
我们工作中可能会碰到这种情况，美工每次拿过来的东西感觉都有点不一样，你不能说出有好大的不一样，反正就是有地方不一样。
然后一拿来后整个家伙全部完蛋，js报错啦，为什么报错你们懂的，这里我来现身说法，整一个真实的例子吧
当年我年少轻狂还在索贝时，我们有设计，但是设计同事的CSS很差，给我们的html+css经常有未闭合的标签，经常会出现莫名其妙的双引号。
但是当时我CSS也不好，其它同事完全就是搞后端的，所以在这个情况下我们艰难的做出了我们的第一版产品，与设计图一致（还是在设计的代码上修改的）。
完了领导看了提出了一点修改意见，于是设计同事又改了下图，相信我他只是简单的改了一点东西，然后形成了html交给了我们。。。。
这次拿来后我看到了这次的html结构和上次完全是两码事，而我们的产品又是单页应用，很多地方完全是javascript生成的，或者html标签与data形成了模板，现在要改。。。改毛线啊。。。
为了具体描述我们所遇到的困境我这里详细描述下：
① 我们根据设计第一版图做好了页面
② 页面上有很多应用，是采用类似于js模板化的东西（小的封装的，很戳）
③ 页面根据数据库设计，前端使用js控制页面加载，最后渲染出我们的页面
好了整个代码还有点小复杂，完了现在设计哥来了一个完全不同的结构了，当时内部没有CSS高手，甚至说没有CSS熟手。
我负责改这个工作，我依稀记得我改出了翔。。。。最后终于改完了！
然后根据领导指示，设计同事给出了我们第三套HTML代码，这个和原来的差距相对大一点，但是主要模块还在，于是我看空中到处都是翔了。。。。
我不知道我前面的描述各位遇到过没有，但是当时我没能很好的解决这个问题，就只能缝缝补补的改着，每次出新东西后又是一场悲剧。
回到现实
其实我遇到的这个问题我感觉可以很好的说明表现数据分离的重要性了，但是什么是表现数据分离，我们还是需要将它说清楚啦。
PS：其实我遇到的问题比较复杂吧，我感觉都不完全是表现与数据分离了......
我说不清楚什么是表现与数据分离，那我们举点反例吧：
① 服务器端（php/.net/java），将html标签与数据一起打印出来
Response.Write("<div>......</div>");
这段代码各位一定见过，可以想象，一个系统一年后要改版，这个地方的代码修改可能有点痛苦吧（特别是原来的开发人员不在了）
这个是服务器端的，那么我们的客户端呢（咳咳，让我想想啦，想不到啦。。。）
② 我想到一个例子，不知道合适不，拿出来说说吧
前段时间，我们前端有个地区控件的东西，他大概是这个样子的：
var area = '<table>......</table>';
他在字符串中将所有的地区全部写了出来（包括地区编号（隐藏）），这样做会有问题的：
假设我哪天想改变一下结构适应新的布局（响应式布局神马的随便啦），那么我们会发现无从下手
③ 还是回到我遇到那个问题（重点来了哦）
我遇到那个问题其实主要是我在js中使用的id，或者class或者标签子选择器都不在了，新的代码上来后肯定出错啦。
这个问题很尖锐的，原来我使用了一套html+css页面，我们根据这个写了一大套javascript的东西，耗时3个月。
然后我们换了一套页面，但是其中功能还是我们那套js
然后我们再换了一套页面，其中的js还是我们那套js
最后最变态的要求出来了（因为产品会给不同的电视台使用），我们的产品在不同的人看起来页面是不一样的，但是其中的功能是一样的！！！
屌丝们，接招吧，各位哥哥，你们会怎么解决这个问题呢？
正是因为有上面那种莫名其妙的需求，所以才会出现我们前端MVC这种莫名其妙的东西。。。
因为按道理来说前端是不应该出现MVC的，我们的html就是model，我们的css就是view，我们的js就是controller。
结果现在单是javascript就搞出来了一套MVC，这不坑爹么？
至此，不知道各位对表现与数据分离有新的了解没有？？？
MVC——表现与数据分离
话不多说，先上一段代码（原来的代码，抄过来的）：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var end = $('#end');
$('#pili').change(function () {
var name = '';
var p = $(this).val();
if (p == '叶小钗') {
name = '刀狂剑痴';
}
if (p == '一页书') {
name == '百世经纶';
}
if (p == '素还真') {
name = '清香白莲';
} end.html(name + p);
});
});
</script>
</head>
<body>
<select id="pili">
<option value="叶小钗">叶小钗</option>
<option value="一页书">一页书</option>
<option value="素还真">素还真</option>
</select>
<div id="end"></div>
</body>
</html>
我们重新看看上面的代码，很简单的逻辑，select改变后变化end的值，好了现在需求发生改变：
① select变成使用input模拟select
② 在手机上还是使用select算了
③ 总会有莫名其妙的需求，这个就是
好吧，现在的代码你该怎么写呢？是不是会写几个代码，或者你压根不知道怎么写呢？？？于是看看我们的MVC的实现吧
PS：代码是我可耻的抄的。。。。但我可是自豪的一个字一个字的敲的哦，窃知识不算偷......
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
//定义一个controller
var piliController = {
//选择视图
start: function () {
this.view.start();
},
//将用户操作映射到模型更新上
set: function (name) {
this.model.setPerson(name);
}
};
piliController.model = {
piliKV: {
'叶小钗': '刀狂剑痴',
'一页书': '百世经纶',
'素还真': '清香白莲'
},
curPerson: null,
//数据模型负责业务逻辑和数据存储
setPerson: function (name) {
this.curPerson = this.piliKV[name] ? name : null;
this.onchange();
},
//通知数据同步更新
onchange: function () {
piliController.view.update();
},
//相应视图对当前状态的查询
getPiliAction: function () {
return this.curPerson ? this.piliKV[this.curPerson] + this.curPerson : '???';
}
};
piliController.view = {
//用户触发change事件
start: function () {
$('#pili').change(this.onchange);
},
onchange: function () {
piliController.set($('#pili').val());
},
update: function () {
$('#end').html(piliController.model.getPiliAction());
}
};
piliController.start();
});
</script>
</head>
<body>
<select id="pili">
<option value="叶小钗">叶小钗</option>
<option value="一页书">一页书</option>
<option value="素还真">素还真</option>
</select>
<div id="end"></div>
</body>
</html>
我们来看看这个神一样的代码。。。。我们一开始会认为他有这些问题：
① 代码维护困难，至少我认为很困难
② 徒增复杂性，性能会有问题
③ 我并不能说服自己说自己懂了。。。。
于是我们就放弃了MVC啦，但是我们回过头来好好审视下他，我们会发现不一样的东西：
① 我们好像就在view中使用了选择器获取dom，其它地方压根不认识dom这个丫的。
② 我们的数据似乎在model中，我们可以随意改变，但是并不会影响到我们dom
③ view和model是完全独立的，我们的controller恰好把他们串联起来了
看着这神奇的魔法，我似懂非懂的点了点头，你妹的MVC还真他妈够劲！！！
结语
听我唧唧歪歪说了这么多，不知道各位理解到了表现与数据分离是什么意思没，我感觉自己有所得，所以写出来与各位分享。
这次只是很浅的理解，后面我会请教各位大牛，然后再写一篇心得，希望届时能好好解决这个问题，其中上面面试的问题也一并解答吧，今天暂时到这。
希望这篇博客能对各位有所帮助，当然最重要的是：
哥，有什么想法要说出来哦，不要藏着啊！！！
【web前端面试题整理07】我不理解表现与数据分离。。。的更多相关文章
- 【web前端面试题整理02】前端面试题第二弹袭来，接招！
前言 今天本来准备先了解下node.js的,但是,看看我们一个小时前与一个小时后的差距: 既然如此,我们继续来搜集我们的前端面试题大业吧!!! 特别感谢玉面小肥鱼提供哟,@玉面小飞鱼 题目一览 Jav ...
- 【web前端面试题整理06】成都第一弹，邂逅聚美优品
前言 上周四回了成都,休息了一下下,工作问题还是需要解决的,于是今天去面试了一下,现在面试回来了,我感觉还是可以整理一下心得. 这个面试题整理系列是为了以后前端方面的兄弟面试时候可以得到一点点帮助,因 ...
- 【web前端面试题整理08】说说最近几次面试（水）
为什么换工作 换工作简单来讲一般会归纳为钱不够或者人不对,我们团队氛围很不错,所以基本就定位到钱不够了,而我更多是考虑到以后的职业发展,简单说来就是对以后几年的工作有想法,而这种想法实现不一定能在现在 ...
- Web 前端面试题整理(不定时更新)
重要知识需要系统学习.透彻学习,形成自己的知识链.万不可投机取巧,临时抱佛脚只求面试侥幸混过关是错误的! 面试有几点需注意: 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增 ...
- 【web前端面试题整理03】来看一点CSS相关的吧
前言 昨天我们整理了14到js的题,今天我们再来整理14到CSS相关的题目,昨天整理时候时间有点晚了我便有点心浮气躁,里面的一些题需要再次解答,好了看看今天有些什么吧. PS:我这里挑一点来做就好了, ...
- 【web前端面试题整理04】阿里一行之大神面对面
前言 这段时间我在河南一家公司当了一段时间的前端主管,最后可耻的匿了,原因各种各样,最主要的就是不想呆在郑州了. 其实这里的同事还是很不错的,面对老总最后的挽留我不是没有动心,而是这个地方确实不太好, ...
- 【web前端面试题整理01】各位加班累了吧，来做点前端面试题吧
前言 最近小叶子有点疲惫,主要是在外地工作生活上不太适应,吃一样的东西,我居然会拉肚子,而且是一个星期一个星期的.... 脸上长了一个豆豆一个星期还没消,我那个去啊. 昨天上午上班后,本来想继续研究j ...
- 2016年BAT公司常见的Web前端面试题整理
1.JavaScript是一门什么样的语言,它有哪些特点? 没有标准答案. 2.JavaScript的数据类型都有什么? 基本数据类型:String,boolean,Number,Undefined ...
- 【web前端面试题整理05】做几道前端面试题休息休息吧
前言 连续学了两天javascript的东西了,我们都累了,于是今天还是上一套面试题吧,大家一起休息休息,也为下个星期可能会有的面试准备下. 题目一览 CSS1. overflow-x 属于 CS ...
随机推荐
- Web 前端开发人员和设计师必读文章推荐【系列二十八】
<Web 前端开发精华文章推荐>2014年第7期(总第28期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...
- MySQL(Navicat)运行.sql文件时报错：[Err] 2006 - MySQL server has gone away 的解决方法
背景: 今天导入一个数据量很大的.sql文件时,报错: 原因: 可能是sql语句过长,超过mysql通信缓存区最大长度. 解决:1. 编辑 MySQL 安装目录下的 my.ini,在最后添加以下内容: ...
- [git]merge和rebase的区别
前言 我从用git就一直用rebase,但是新的公司需要用merge命令,我不是很明白,所以查了一些资料,总结了下面的内容,如果有什么不妥的地方,还望指正,我一定虚心学习. merge和rebase ...
- Windows Azure Web Site (17) Azure Web Site 固定公网IP地址
<Windows Azure Platform 系列文章目录> 在之前的文档中,笔者介绍了Azure Web Site是一个多租户的环境,每个部署单元有一个可以通过Internet访问的入 ...
- Windows Azure Cloud Service (10) Role的生命周期
<Windows Azure Platform 系列文章目录> 在上一章内容中,我们提到了Windows Azure会依次调用角色(Role)实例的OnStart()方法和Run()方法. ...
- [SDK2.2]Windows Azure Virtual Network (4) 创建Web Server 001并添加至Virtual Network
<Windows Azure Platform 系列文章目录> 在上一章内容中,笔者已经介绍了以下两个内容: 1.创建Virtual Network,并且设置了IP range 2.创建A ...
- plsql修改表报错：ORA-25150
几次通过plsql修改表结构出现这个错误,为人不求甚解真是要不得.我甚至对老大大言不惭的说没有权限,即便是sql语句都不行.结果赤果果地打脸. 最终找到如下原因: 1.操作用户表空间的默认值问题: 这 ...
- Data URL简介及Data URL的利弊
之前写过一篇“漫谈前端优化”的文章,里面提到过DataUrl,粗鲁的描述了下,感觉不甚详焉,所以这几天也总结了这方面的知识,参考一些资料,补充一篇文章在这里,对这方面的资料来说,也是一种强化记忆应用: ...
- js实现数组的排序和分组
问题: data=[1,1,1,1,2,2,2,2,5,5,5,8,8,8,2,2,2,3,3,3,3,3,3,3,3,3,3,4,4,4,4,4,4,4] 怎么把值为1,2,3,4,5,8的数据分成 ...
- Android 获取可靠的手机编码
项目中出现了将设备和用户信息进行绑定的需求.最先想到的是IMEI串码和IMSI串码.手机登陆的时候一直都没有问题.换了一个平板中之后IMEI和IMSI串码都获取不到了.后来查了一下原因,是因为平板上是 ...