前言

之前我们遇到了这么一个项目，也就是我们昨天提到的，有很多的小窗口的，昨天说的太抽象了，今天我们再来理一理什么是小窗口（后面点说下），当时由于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

 <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>

以上的代码，我们经常用到，没有任何逻辑可言，但是一旦和“高级”的东西产生关系后，我们就有了一件圣衣，看着高深莫测，甚至我也可以装B。

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>

我们来看看这个神一样的代码。。。。

PS：我觉得我一段时间内会放弃MVC做项目啦。。。。

因为这样写开起来很高级，其实：

① 代码维护困难，至少我认为很困难

② 徒增复杂性，性能会有问题

③ 我并不能说服自己说自己懂了。。。。

所以，MVC暂时靠边站吧，我们下次来看看MVVM又是个什么东西。。。

结语

我们今天先是研究了我们这段时间会学习什么东西，然后对MVC做了一点研究，研究结束后我感觉我对MVC的理解稍微加深了一点，但是我们在做的过程中可能就不使用了。

我们下把来看看Mvvm又是个什么神器，然后逐步实现我们以上提出的功能，希望在下周便能结束javascript的学习，并重新学习HTML5的东西，响应式布局我们又有一段时间没有关注啦！

参考：

http://kb.cnblogs.com/page/41674/

百度百科

维基百科

【javascript激增的思考02】模块化与MVC的更多相关文章

  1. 【javascript激增的思考01】模块化编程

    前言 之前我做过一个web app(原来可以这么叫啦),在一个页面上有很多小窗口,每个小窗口都是独立的应用,比如: ① 我们一个小窗口数据来源是腾讯微博,需要形成腾讯微博app小窗口 ② 我们一个小窗 ...

  2. 【javascript激增的思考04】MVC与Backbone.js(beta)

    前言 最近整理了很多前端面试题的东西,今天又去参加了一次面试,不知各位烦不烦,我反正有点累了,于是我们今天继续回到我们前段时间研究的问题,我们再来看看MVC吧. 什么是MVC 又回到这个问题了,到底什 ...

  3. 【javascript激增的思考03】MVVM与Knockout

    前言 今天搞的有点快,因为上午简单研究了下MVC,发现MVC不太适合前端开发,然后之前看几位前端前辈都推荐前端使用MVVM,但是我对其还不甚了解,所以我觉得下午还是应该先看看他是神马先,后面再决定要不 ...

  4. 模块化与MVC

    [javascript激增的思考02]模块化与MVC 前言 之前我们遇到了这么一个项目,也就是我们昨天提到的,有很多的小窗口的,昨天说的太抽象了,今天我们再来理一理什么是小窗口(后面点说下),当时由于 ...

  5. AngularJS基于模块化的MVC实现

    AngularJS基于模块化的MVC实现 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  6. JavaScript学习总结(六)——前端模块化开发

    早期的javascript版本没有块级作用域.没有类.没有包.也没有模块,这样会带来一些问题,如复用.依赖.冲突.代码组织混乱等,随着前端的膨胀,模块化显得非常迫切. 前端模块化规范如下: 一.前端模 ...

  7. 本周ASP.NET英文技术文章推荐[02/03 - 02/16]：MVC、Visual Studio 2008、安全性、性能、LINQ to JavaScript、jQuery...

    摘要 继续坚持,继续推荐.本期共有9篇文章: 最新的ASP.NET MVC框架开发计划 Visual Studio 2008 Web开发相关的Hotfix发布 ASP.NET安全性教程系列 ASP.N ...

  8. ASP.NET MVC 5 02 - ASP.NET MVC 1-5 各版本特点

    参考书籍:<ASP.NET MVC 4 高级编程>.<ASP.NET MVC 5 高级编程>.<C#高级编程(第8版)>.<使用ASP.NET MVC开发企业 ...

  9. JavaScript的匿名函数和模块化的使用方法

    对于开发人员来说,很多时候我们都会涉及到JavaScript的使用,而在使用过程中,最令人沮丧的就是变量没有相应的使用范围. 在开发中,对于任何变量.数组.函数.对象等,只要不在函数的内部,都会被默认 ...

随机推荐

  1. CSS清浮动

    × 目录 [1]定义 [2]方法 [3]兼容 前面的话 人们经常谈起清浮动,其实就是解决浮动元素的包含块高度塌陷的问题 定义 clear 清除 值: left | right | both | non ...

  2. PHP的学习--cookie和session

    最近读了一点<PHP核心技术与最佳实践>,看了cookie和session,有所收获,结合之前的认识参考了几篇博客,总结一下-- 1. PHP的COOKIE cookie 是一种在远程浏览 ...

  3. Android调用手机摄像头使用MediaRecorder录像并播放

    最近在项目开发中需要调用系统的摄像头录像并播放. 在开发中遇到了两个问题,记录下: (1)开发过程中出现摄像头占用,启动失败,报错.但是我已经在onDestory()中关闭了资源. 报错原因:打开程序 ...

  4. [转载]AxureRP使用参考建议

    这些参照建议是马克总结出来的,我只是借用过来给大家参考,在此先感谢一下马克.对于很多学习或者刚使用AxureRP的产品经理们或者朋友们,总会有一些对于AxureRP该怎么使用的更合适想法,也有对Axu ...

  5. CSS Shake – 摇摆摇摆！动感的 CSS 抖动效果

    CSS Shake 是一套 CSS3 动画特效,让页面的 DOM 元素实现各种效果的抖动(Shake),这些效果可以轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,加上 ...

  6. 【AngularJS】—— 12 独立作用域

    前面通过视频学习了解了指令的概念,这里学习一下指令中的作用域的相关内容. 通过独立作用域的不同绑定,可以实现更具适应性的自定义标签.借由不同的绑定规则绑定属性,从而定义出符合更多应用场景的标签. 本篇 ...

  7. 只用一行代码让你的ASP.NET MVC 跑起来

    只用一行代码让你的ASP.NET MVC 跑起来 MVC框架一直是企业开发绕不过去的东西,先是JavaEE的 Structs, 然后是 Spring MVC, 再到我们今天要讨论的ASP.NET MV ...

  8. Azure ARM (4) 开始创建ARM Resource Group并创建存储账户

    <Windows Azure Platform 系列文章目录> 好了,接下来我们开始创建Azure Resource Group. 1.我们先登录Azure New Portal,地址是: ...

  9. 基于HTML5的WebGL电信网管3D机房监控应用

    先上段视频,不是在玩游戏哦,是规规矩矩的电信网管企业应用,嗯,全键盘的漫游3D机房: http://www.hightopo.com/guide/guide/core/3d/examples/exam ...

  10. 试试用有限状态机的思路来定义javascript组件

    本文是一篇学习性的文章,学习利用有限状态机的思想来定义javascript组件的方法,欢迎阅读,后续计划会写几篇专门介绍自己利用有限状态机帮助自己编写组件的博客,证明这种思路对于编程实现的价值,目前正 ...