MVC

最初

  • JavaScript 是一种强大的、动态的面向对象编程语言
  • 这门语言被误解的原因:早期的JavaScript 比较糟糕,有许多bug ; 其名字带有java前缀,让人以为与java有关系,但它们是两种语言。

增加结构

  • 应该将应用解耦成一系列相互平等且独立的部分。
  • MVC是一种久经考验的搭建应用的方式,可以确保应用的可维护性和可扩展性。MVC模式完全适用于JavaScript应用

MVC

  • MVC是一种设计模式,将应用划为三部分:数据(模型)、展现层(视图)和用户交互层(控制器)。
  • 事件的发生过程:
    1.用户和应用发生交互
    2.控制器的事件处理器被触发
    3.控制器从模型中请求数据,并将其交给视图
    4.视图将数据呈现给用户

例:在Holla中发送一个新的聊天信息的过程:
1.用户提交一个新的聊天信息
2.控制器的事件处理器被触发
3.控制器创建了一个新的聊天模型(Chat Model)记录
4.控制器更新视图
5.用户在聊天窗口看到新的消息

MVC各部分具体详解如下:

模型

  • 模型用来存放应用所有的数据对象。模型只需包含数据及直接和这些数据相关的逻辑。
  • 任何事件处理器代码、视图末班,以及那些和模型无关的逻辑都应该隔离在模型外
  • 数据是面向对象的,任何定义在这个数据模型上的函数或逻辑都可以直接被调用
    例:
var user = User.find("foo");
user.destory();
destory()函数是存放在命名空间User的实例中,User存放了所有的记录(这只是理想情况),因为我们控制了全局变量的个数,更好的避免了潜在的冲突。这种代码更加清晰,而且非常容易做继承。

视图

  • 视图层是呈现给用户的,用户与之产生交互。在JavaScript应用中,视图大都由HTML、CSS和JavaScript模板组成。
  • 除了模板中简单的条件语句之外,视图不应当包含任何逻辑
  • 包含视觉呈现相关的逻辑部分没有定义在视图之内即可。我们将视图呈现逻辑归类为“视图助手(helper)”:和视图有关的独立的小型工具函数。
    例:
//helper.js
var helper = {};
helper.formatData = function(){/*...*/};

//template.html
<div>
  ${helper.foematDate(this.date)}
</div>
helper是一个命名空间,可以防止冲突并保持代码清晰、可扩展

控制器

  • 控制器是模型和视图之间的纽带。控制器从视图获得时间和输入,对它们(很可能包含模型)进行处理,并进行相应的更新视图。
  • 当页面加载时,控制器会给视图添加事件监听,然后当用户和你的应用产生交互时,控制器中的时间触发器就开始工作。
  • 不用类库和框架也能实现控制器,下面代码就是使用简单的jQuery代码来实现的:
var Controller = {};
//使用匿名函数来封装一个作用域
(Controller.users = function($){

 var nameClick = function(){
/*...*/
};

//在页面加载时绑定事件监听
$(function(){
 $("#view.name").click(nameClick)
});

})(jQuery);
创建了一个user控制器,这个控制器是放在Controller变量下的命名空间。我们使用一个匿名函数封装了一个作用域,以避免对全局作用域造成污染。当页面加载时,程序给视图元素绑定了click事件的监听。
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 谈谈 MVX 中的 Model 谈谈 MVX 中的 View 谈谈 MVX 中的 Controller 浅谈 MV...
    Draveness阅读 15,162评论 0 59
  • 在我的iOS的MVC框架之控制层的构建(上)一文中介绍了一些控制层的构建方法,而这篇文章则继续对一些方法进行展开讨...
    欧阳大哥2013阅读 6,543评论 52 99
  • 前言 看了下上篇博客的发表时间到这篇博客,竟然过了11个月,罪过,罪过。这一年时间也是够折腾的,年初离职跳槽到鹅厂...
    西木柚子阅读 21,427评论 12 183
  • ASP.NET MVC 是一个全新的Web应用框架 ASP.NET 代表支撑应用框架的技术平台,表明ASP.NET...
    JunChow520阅读 1,307评论 0 1
  • 雨,跟从前一样的下 有急有缓 只是不再有停留的油纸伞 行色匆匆 伞下的人儿 搂着肩的甜蜜 早已忘了一个伞柄的距离 ...
    鲍滨阅读 129评论 0 0

友情链接更多精彩内容