表现与数据分离；前台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还真他妈够劲！
！
表现与数据分离；前台MVC的更多相关文章
- mvc中的表现和数据分离怎么理解？
使用过 JavaScript框架(如 AngularJS, Backbone)的人都很熟悉在UI(用户界面,前端)中mvc的工作机理.这些框架实现了MVC,使得在一个单页面中实现根据需要变化视图时更加 ...
- 【web前端面试题整理07】我不理解表现与数据分离。。。
拜师传说 今天老夫拜师了,老夫有幸认识一个JS高手,在此推荐其博客,悄悄告诉你,我拜他为师了,他承诺我只收我一个男弟子..... 师尊刚注册的账号,现在博客数量还不多,但是后面点会有干货哦,值得期待. ...
- 使用JavaScript实现表现和数据分离
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8&quo ...
- Asp.net MVC 传递数据 从前台到后台，包括单个对象，多个对象，集合
今天为大家分享下 Asp.net MVC 将数据从前台传递到后台的几种方式. 环境:VS2013,MVC5.0框架 1.基本数据类型 我们常见有传递 int, string, bool, double ...
- MVC 传递数据 从前台到后台，包括单个对象，多个对象，集合
MVC 传递数据 从前台到后台,包括单个对象,多个对象,集合 1.基本数据类型 我们常见有传递 int, string, bool, double, decimal 等类型. 需要注意的是前台传递的参 ...
- 应用程序框架实战三十三:表现层及ASP.NET MVC介绍（二）
最近的更新速度越来越慢,主要是项目上比较忙,封装EasyUi也要花很多时间.不过大家请放心,本系列不会半途夭折,并且代码干货也会持续更新.本文继续介绍表现层和Asp.net Mvc,我将在本篇讨论一些 ...
- 表现层及ASP.NET MVC介绍（二）
表现层及ASP.NET MVC介绍(二) 最近的更新速度越来越慢,主要是项目上比较忙,封装EasyUi也要花很多时间.不过大家请放心,本系列不会半途夭折,并且代码干货也会持续更新.本文继续介绍表现层和 ...
- WPF MVVM UI分离之《交互与数据分离》 基础才是重中之重~delegate里的Invoke和BeginInvoke 将不确定变为确定系列~目录（“机器最能证明一切”） 爱上MVC3系列~全局异常处理与异常日志 基础才是重中之重~lock和monitor的区别 将不确定变成确定~我想监视我的对象，如果是某个值，就叫另一些方法自动运行 将不确定变成确定~LINQ DBML模型可以对
WPF MVVM UI分离之<交互与数据分离> 在我们使用WPF过程中,不可避免并且超级喜欢使用MVVM框架. 那么,使用MVVM的出发点是视觉与业务逻辑分离,即UI与数据分离 诸如下 ...
- 应用程序框架实战三十:表现层及ASP.NET MVC介绍（一）
本文将介绍表现层及ASP.NET MVC的一些要点,特别是ASP.NET MVC的一些抽象和封装技巧,如果你对MVC还不了解,可以参考<ASP.NET MVC4 高级编程>,作者Jon G ...
随机推荐
- Unity学习-碰撞检测（七）
Unity脚本说明 Unity支持语言: C#(主流),JavaScript,Boo 创建脚本: [Assets-Create-C# Script] 学习案例 布置场景: 添加一个Plane,3个Cu ...
- [Windows Server 2012] 手工创建安全网站
★ 欢迎来到[护卫神·V课堂],网站地址:http://v.huweishen.com★ 护卫神·V课堂 是护卫神旗下专业提供服务器教学视频的网站,每周更新视频.★ 本节我们将带领大家:手工创建安全站 ...
- vim之tags
好长时间没有上来更新了, 今天趁老板不再上来休闲一下. 本章要说的是和vim的tags相关的内容. 之所以在跳转之后就说明tags是因为这个功能相当的重要和实用. 好的东西自然是需要提前分享的. 首先 ...
- mvc 上传大文件
<configuration> <system.web> <httpRuntime maxRequestLength="204800" useFull ...
- Cesium学习笔记（九）：导入3D模型（obj转gltf）
在用cesium的过程中难免需要导入别人做好的3D模型,这时候就需要将这些模型转成gltf格式了 当然,官方也给了我们一个网页版的转换器,但是毕竟是网页版的,效率极其低下,文件还不能太大,所以我们就需 ...
- Luogu P1256 显示图像
P1256 显示图像 题目描述 古老的显示屏是由N×M个像素(Pixel)点组成的.一个像素点的位置是根据所在行数和列数决定的.例如P(2,1)表示第2行第1列的像素点.那时候,屏幕只能显示黑与白两种 ...
- UID中RUID、EUID和SUID的区别
看UNIX相关的书时经常能遇到这几个概念,但一直没有好好去理清这几个概念,以致对这几个概念一直一知半解.今天好好区分了一下这几个概念并总结如下.说白了这几个UID引出都是为了系统的权限管理. 下面分别 ...
- CF51F Caterpillar (边双+树形DP)
题目传送门 题目大意:给你一张n个点m条边的图.每次操作可以把两个点合并成一个(与之相连的边也都要连到新点上).求把图中每个联通块都变成“毛毛虫”的最小操作次数.“毛毛虫”必须是一棵树(可以存在自环) ...
- Linux - redis持久化RDB与AOF
目录 Linux - redis持久化RDB与AOF RDB持久化 redis持久化之AOF redis不重启,切换RDB备份到AOF备份 确保redis版本在2.2以上 实验环境准备 备份这个rdb ...
- 腾讯云，搭建Java开发环境
搭建 JAVA 开发环境 任务时间:18min ~ 20min 此实验教大家如何配置 JDK .Tomcat 和 Mysql 安装 JDK JDK 是开发Java程序必须安装的软件,我们查看一下 yu ...