前端MVC框架Backbone 1.1.0源码分析(一)

 

前言

如何定义库与框架

前端的辅助工具太多太多了，那么咱们是如何定义库与框架？

• jQuery是目前用的最广的库了，可是总体来说jQuery目的性很也明确针对“DOM操做”，固然本身写一个原生态方法也能实现一样的DOM操做，换句话说，无论你用来仍是不用，都不影响你总体的布局，或者是代码体系结构。
• 框架则是一套完整的解决方案，针对是某一个领域的，好比EXT，dojo，那么很明显，你要用就须要按照它的规则执行，不论是编码风格仍是结构，有必定的约束力

 

---

一个老话题，前端为何要用MVC

• 前端开发中呢，不可避免的都有在应用逻辑中加入显示数据的代码的状况，当项目规模愈发变大时，这种形式的代码变得愈加的难以维护，由于任何在主干逻辑中的变动均可能影响到数据显示逻辑，反之亦然，固然无论什么模式最主要的仍是分离职责
• 可能在大多数后端开发者看来，整个前端就是一个View层罢了，还在在这个View层中划分模型，控制器等等，是否是很不屑？
• 在几年前只作作网站的验证之类的功能的话我或许会说，是的那是我也不信，可是随着Web前端随着复杂度的增长，不少地方跟客户端已经没有本质区别了。
• 若是是单纯的页面型的产品，确实不须要那么复杂，编程嘛复杂便是错，针对不一样项目咱们应该就要明确不一样的方案，就拿近几年出现的Hybird App来讲，这种应用软件类产品，这就太需有良好的结构组织了，深有感触的是我本身手上就是Hybird App这种项目，基本都是AMD+各类设计模式的组合

 

---

此MVC非比MVC

• MVC，模型 - 视图 - 控制器这个没哈好说的，基本概念你们都知道，PHP的zend,yii不少都是基于MVC的架构，可是这种的架构实际上是把整个前端都都做为一个view处理了
• 因此若是单纯拿Smalltalk-80的MVC的概念去套用前端，也就不那么合适了

 

---

咱们如何理解前端的MVC

前端架构出现的根本缘由呢，前端被愈来愈重视，nodejs,混合应用相似phonegap这都是在侵占别的领域 - -，因此前端功能的加强、代码的膨胀，致使不得不作“前端的架构”这个事情了。

软件架构模式MVC(Model-View-Controller)

大概理解就是：Models用来处理数据，View将处理结果呈现给用户，Controller用来链接这二者。

因此整个流程：

• 用户在View上进行操做——好比在文本框输入数值或是点击按钮
• Controller处理这个动做
• Controller经过Model对数据进行增删改查，将其传递到View
• View将数据展现给用户

 

大多数的前端jser感觉不到MVC的重要性，最大的问题仍是跟传统的观念有差异，模型不够复杂，不存在控制器的概念

固然直接说前端MVC仍是有点牵强的，模型不是真正的模型，在操做View的过程当中一些辅助的模型，真正的Model是贯穿先后端的

归根结底，我也不须要太深刻的去讨论各类不一样，可是前端MVC框架的出现带来的是一整套工做流程变动，后端工程师也能够编写前端的模型代码，把它跟后端完全打通，交互工程师处理UI跟模型的互动关系，UI工做人员能够专一、无障碍地处理HTML源码，把它们以界面模版的形式提供给交互工程师。这一整套协做机制可以大大提升B/S架构系统的开发效率，若是再有外围的管控平台，生产效率将真正踏进工业化的阶段。

 

---

backbone

backbone是什么？

Backbone.js 是一个在JavaScript环境下的 模型-视图-控制器 (MVC) 框架。任何接触较大规模项目的开发人员必定会苦恼于各类琐碎的事件回调逻辑、以及金字塔般的代码。并且，在传统的Web应用程序代码中，不可避免的都有在应用逻辑中加入显示数据的代码的状况。当项目规模愈发变大时，这种形式的代码变得愈加的难以维护，由于任何在主干逻辑中的变动均可能影响到数据显示逻辑，反之亦然。

Backbone就是要来解决这样的代码耦合的问题。它经过提供一个控制层-显示层的框架，以及模版(template)来分离各自逻辑。这样的MVC框架相似于传统意义上桌面程序以及服务器端程序的程序框架。

这里只提backbone，至于什么mvp,mvvc模式，Angular,Ember,CanJs,我也研究不是很深刻，就不误人子弟了

模型、视图、集合和路由器是 Backbone 框架中的主要组件

在backbone框架中，咱们看不到控制器这个东东，在0.5版本以前好像是叫控制器，后来改为路由器了

可见backbone虽然号称MVC，可是也非正统啊

总的理解

模型Models进行数据处理，建立验证销毁或者保存到服务器

合集Collections用来枚举

经过Views来进行事件处理及与现有的Application经过RESTful JSON接口进行交互

backbone基本概念很容易理解，可是它并不会告诉你如何去架构一个应用，而仅仅只是在代码的逻辑组织上提供一种方案

因此正真把backbone用好，我的感受难度仍是比其他的一些框架要大不少

并且还有个最大的问题，结构冗余，Backbone要求你写不少样板代码，而这种代码其实不少时候是彻底不必的

好处天然就是灵活，社区大，插件多了

 

---

官方todos

http://backbonejs.org/examples/todos/index.html

这是个很经典的案例

先看todos须要实现的功能

1 添加任务

2 修改任务

3 删除任务

4 任务统计

这个是彻底用backbone实现的，其实总体一看逻辑仍是很清晰的

Model，Collection，View，View

 

---

backbone的实现

先来分解下todos的操做，经过用户输入信息，而后显示信息到页面，而后还能够删除修改

视图View寓意就很明确，展示内容，内容从哪里来的，模型里面取的，模型为何会有数据，由于用户输入的，怎么知道用户输入，由于监听了

咱们看看backbone的作法

首先是建立一个全局的Todo的collection对象

var Todos = new TodoList;

 

在视图层对用户行为的监控，从而对模型合集进行curd的一系列操做

Backbone.View.extend = {
        events: {
            "keypress #new-todo": "createOnEnter",
            "click #clear-completed": "clearCompleted",
            "click #toggle-all": "toggleAllComplete"
        }, 
        createOnEnter: function (e) {
            if (e.keyCode != 13) return;
            if (!this.input.val()) return;

            Todos.create({title: this.input.val()});
            this.input.val('');
        }
    }

若是按照MVC的最原始定义，view永远不会知道用户输入，好比鼠标操做和按键，因此这里很明显就违规了~~

因此在web开发中，咱们是没法1：1的对应入座的，用户的输入必须经过监听窗口、文档和元素上的事件来得到

这里有个很MVC架构很不明确的点，控制器在哪里？Controller应该是View操做Model的中介？

因此backbone其实只能是看做为数据和逻辑相互分离的一种方案，减小代码开发过程当中的数据和逻辑混乱

好吧我的看法~ 不喜勿喷~

 

附上：

 Developing Backbone.js Applications