模块化与MVC
【javascript激增的思考02】模块化与MVC
前言
之前我们遇到了这么一个项目，也就是我们昨天提到的，有很多的小窗口的，昨天说的太抽象了，今天我们再来理一理什么是小窗口（后面点说下），当时由于js有一点复杂，我自己也装B跟风用了一下传说中MVC！！！
PS：最后读寒冬老师的文章说是MVC不合适用到前端，但是为什么用以及为什么不能用可能是我半年后才能理解的问题了。
其实，我当时对MVC的理解就停留在model view control的地步。。。。
项目几个月后，核心功能都实现了，但是不得不面临js文件激增的问题，有时候其它同事要插入进来，便有点困难，于是当时对核心的框架进行了一点重写，缓解了一些问题，但并未解决问题。。。。
后来的后来我就离开了，该项目我一直在关注着，只不过已经物是人非了，事实上我还是非常愿意投入进行这种富客服端的开发的，真的很有意思，话说对那家公司还有点留恋呢！
好了，现在我们来说说什么是“小窗口”吧，因为这几天我们会花一个星期左右的时间完成原来几个月左右的工作哟，当然是核心功能：），哈哈。
什么是小窗口
所谓小窗口便是：
① 我们一个小窗口数据来源是腾讯微博，需要形成腾讯微博app小窗口
② 我们一个小窗口数据来源新浪微博，需要形成新浪微博的小窗口
我们注意到以上2个的数据源与处理方式较一致，但是需要做处理，而且其鉴权也不尽相同，所以这个js代码有相同的，也有不相同的。
③ 我们的一个小窗口数据来源于百度RSS，需要形成点击标题展开的功能
④ 我们一个小窗口数据来源于XXX，其表现形式为选项卡......
⑤ 我们一个小窗口是flash，需要......
⑥ 我们一个小窗口是个综合应用，里面还会有定时器，自动的更新其数据
正所谓有图有真相，小叶子花了很多时间搞了几个图：
我们最近会做的
根据前面的那些图各位可能大概知道我们的“小窗口”是干神马的了，这里我再画一个图，描述下我们最近几天会完成的功能：
总体页面
单个小窗口
最大化
相信大家，对我们要做的有一个大概印象了，而且我们还会完成以下功能：
① 动态增加关注框（比如魔图），这里便需要考虑js代码激增
② 大家看到上面的分页导航了，我们可以将首页放不下的放到第二页
③ 小窗口彼此的摆放顺序可以拖动
......
还有的我们边看边做吧，因为我这里数据库方面不会太关注，所以搜索功能应该不会完成
MVC和我们有什么关系？
说实话，我不懂MVC，那是真不懂......
我搞过2年.net开发，也搞过将近一年的javascript开发，并且是传说中的ssh，我们都知道struts2是MVC，但是我对MVC的理解可谓一瓢浆糊，于是我昨天晚上专门去学习了一下什么是MVC，想总结点东西出来，但是结果大家都知道了，我交了白卷，看来看去所谓MVC便是：
模型（Model） “数据模型”（Model）用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法。“模型”有对数据直接访问的权力，例如对数据库的访问。
“模型”不依赖“视图”和“控制器”，也就是说，模型不关心它会被如何显示或是如何被操作。
但是模型中数据的变化一般会通过一种刷新机制被公布。为了实现这种机制，那些用于监视此模型的视图必须事先在此模型上注册，
从而，视图可以了解在数据模型上发生的改变。（比较：观察者模式（软件设计模式）） 视图（View） 视图层能够实现数据有目的的显示（理论上，这不是必需的）。在视图中一般没有程序上的逻辑。
为了实现视图上的刷新功能，视图需要访问它监视的数据模型（Model），因此应该事先在被它监视的数据那里注册。
控制器（Controller） 控制器起到不同层面间的组织作用，用于控制应用程序的流程。
它处理事件并作出响应。“事件”包括用户的行为和数据模型上的改变。
我们来看看这个图，他是做得非常好的：
① 用户的所有交互与controller打交道
② controller处理用户信息（参数），传递给数据模型
③ 数据模型形成后在展示为相关视图
这样说还是太空洞，所以我们还是要用例子来说明：
MVC
1 <html xmlns="http://www.w3.org/1999/xhtml">
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>
以上的代码，我们经常用到，没有任何逻辑可言，但是一旦和“高级”的东西产生关系后，我们就有了一件圣衣，看着高深莫测，甚至我也可以装B。
PS：代码是我可耻的抄的。。。。但我可是自豪的一个字一个字的敲的哦，窃知识不算偷......
1 <html xmlns="http://www.w3.org/1999/xhtml">
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>
我们来看看这个神一样的代码。。。。
PS：我觉得我一段时间内会放弃MVC做项目啦。。。。
因为这样写开起来很高级，其实：
① 代码维护困难，至少我认为很困难
② 徒增复杂性，性能会有问题
③ 我并不能说服自己说自己懂了。。。。
所以，MVC暂时靠边站吧，我们下次来看看MVVM又是个什么东西。。。
结语
我们今天先是研究了我们这段时间会学习什么东西，然后对MVC做了一点研究，研究结束后我感觉我对MVC的理解稍微加深了一点，但是我们在做的过程中可能就不使用了。
我们下把来看看Mvvm又是个什么神器，然后逐步实现我们以上提出的功能，希望在下周便能结束javascript的学习，并重新学习HTML5的东西，响应式布局我们又有一段时间没有关注啦！
参考：
http://kb.cnblogs.com/page/41674/
百度百科
维基百科
模块化与MVC的更多相关文章
- AngularJS基于模块化的MVC实现
AngularJS基于模块化的MVC实现 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...
- 【javascript激增的思考02】模块化与MVC
前言 之前我们遇到了这么一个项目,也就是我们昨天提到的,有很多的小窗口的,昨天说的太抽象了,今天我们再来理一理什么是小窗口(后面点说下),当时由于js有一点复杂,我自己也装B跟风用了一下传说中MVC! ...
- 聊聊MVC和模块化以及MVVM和组件化
原文链接 小寒的博客,带你理解更深的世界 面向对象,模块化和MVC 面向对象是指把写程序映射到现实生活,从而一来逻辑性更强,更容易写好代码,二来代码很贴切,通俗易懂,更被人理解,三来更加容易拓展和管理 ...
- 闲聊——浅谈前端js模块化演变
function时代 前端这几年发展太快了,我学习的速度都跟不上演变的速度了(门派太多了,后台都是大牛公司支撑类似于facebook的react.google的angular,angular的1.0还 ...
- 应用程序框架实战三十三:表现层及ASP.NET MVC介绍（二）
最近的更新速度越来越慢,主要是项目上比较忙,封装EasyUi也要花很多时间.不过大家请放心,本系列不会半途夭折,并且代码干货也会持续更新.本文继续介绍表现层和Asp.net Mvc,我将在本篇讨论一些 ...
- 表现层及ASP.NET MVC介绍（二）
表现层及ASP.NET MVC介绍(二) 最近的更新速度越来越慢,主要是项目上比较忙,封装EasyUi也要花很多时间.不过大家请放心,本系列不会半途夭折,并且代码干货也会持续更新.本文继续介绍表现层和 ...
- 【转】Jsduck一个纯净的前端文档生成神器
让前端程序更具可维护性,是一个老生常谈的问题,大多数时候我们都关注于应用层面的代码可维护性,如:OO.模块化.MVC,编码规范.可扩展和复用性,但这都是属于设计层面需要考虑的事情,可维护性还应包含另一 ...
- 常见JAVA框架
Spring Framework [Java开源JEE框架] Spring是一个解决了许多在J2EE开发中常见的问题的强大框架. Spring提供了管理业务对象的一致方法并且鼓励了注入对接口编程而不 ...
- [转] ReactJS之JSX语法
JSX 语法的本质目的是为了使用基于 xml 的方式表达组件的嵌套,保持和 HTML 一致的结构,语法上除了在描述组件上比较特别以外,其它和普通的 Javascript 没有区别. 并且最终所有的 J ...
随机推荐
- 关于重写ID3 Algorithm Based On MapReduceV1/C++/Streaming的一些心得体会
心血来潮,同时想用C++连连手.面对如火如荼的MP,一阵念头闪过,如果把一些ML领域的玩意整合到MP里面是不是很有意思 确实很有意思,可惜mahout来高深,我也看不懂.干脆自动动手丰衣足食,加上自己 ...
- Redis 优化查询性能
一次使用 Redis 优化查询性能的实践 应用背景 有一个应用需要上传一组ID到服务器来查询这些ID所对应的数据,数据库中存储的数据量是7千万,每次上传的ID数量一般都是几百至上千数量级别. 以前 ...
- C语言库函数大全及应用实例十四
原文:C语言库函数大全及应用实例十四 [编程资料]C语言库函数大全及应用实例十四 函数名: strset 功 能: 将一个串 ...
- nginx 查看并发连接数
这里仅仅说一下用命令查看(也可配置页面) 通过查tcp连接数 1.netstat -n | awk '/^tcp/ {++S[$NF]} END {for(a in S) print a, S[a]} ...
- Java 之关键字 null 使用总结
1.null的使用 Java中,null是一个关键字,用来标识一个不确定的对象.因此可以将null赋给引用类型变量,但不可以将null赋给基本类型变量.比如我们在定义一个变量的时候我们通过会这样做:X ...
- Extjs 组件继承 模板说明（同GridPanel案件）
1. 重写initComponent()方法,并在该方法在调用父类的initComponent()方法. 如:subclass.superclass.initComponent.call(this) ...
- .Net类的序列化和反序列化 - 进阶者系列 - 学习者系列文章
今天看了下以前的一个工具的代码,其中涉及到.NET类的序列化和反序列化问题,所以就写一下. 这里说一下.NET类序列化的好处..NET类在序列化之前只是一个相对狭义的类.通过序列化,能够更好的保存该类 ...
- javascript模拟title提示效果
本代码可以实现如下情况: 1.js实现title是为了解决自定义样式和格式! 2.希望传入的格式可以不限制是否包含html结构! 3.可以自定义显示层的位置! js如下: function GetAb ...
- jquery插件推荐
jQuery 是继 prototype 之后又一个优秀的 Javascript 框架.其宗旨是—写更少的代码,做更多的事情.它是轻量级的 js 库(压缩后只有21k) ,这是其它的 js 库所不及的, ...
- SpringMVC 国际化
SpringMVC学习系列(8) 之 国际化 在系列(7)中我们讲了数据的格式化显示,Spring在做格式化展示的时候已经做了国际化处理,那么如何将我们网站的其它内容(如菜单.标题等)做国际化处理呢? ...