Backbone.js源码浅介

  终于看到一个只有一千多行的js框架了,于是抱着一定可以看懂他的逻辑的心态,查看了他的整个源码,进去之后才发现看明白怎么用容易,看懂怎么写的就难了,于是乎有了这篇博客的标题:浅介,只能粗浅的介绍下Backbone.js的调用逻辑了。在Backbone.js中共有7个类对象,从网上盗图一发,图上清晰的展现了各个对象的逻辑关系。

  

  首先出场的是Event对象,仔细看看Event只是对JS的事件绑定进行了重新的封装, 所以不用深究。

  看起来高大上的Model对象,Model对象是所有数据对象模型的基类,能够动态的添加一些属性值。Model可以做到当对象方法改动后立即发出响应,这点主要在Model的set方法中来实现,在Model中,所有的数据会保留两个版本,一个上一次修改后的版本,一个是当前版本,如果当前版本和上一次修改的版本不同的时候则触发change函数。Model也实现了到服务器后台的操作,能够事实把数据提交到后台或者从后台提取数据。

  在次是Collection模型,Collection只是个苦工,相当与Vector的数据结构,Colletcion负责维护一系列数据模型的数组,他对数组对象进行了再次封装,为了让他更加专业的干活,Collection还封装了一些可以直接操作模型的方法。

  其次是Router类的实现。使用Asp.net 的MVC的人知道,router是连接服务器和网页的映射模块,从客户端发来的请求会经过Router来获得应该去调用哪个后台处理函数。在Backbone.js中Router也有类似的功能,在单页面应用程序中你可能需要给程序的URL传参数来重新刷新页面,比如说一个可以翻页的表格,合理的想法是,当你点击下一页时再重新从数据库中获取数据,呈现到页面上,而不是一次性的将所有数据读取进来。这样就需要通过给URL传参数来达到这样的效果了,这就是Router的功能,Router将根据URL中的参数调用相应的函数来更新页面。

  History类提供了对Router管理的操作,包括监听URL的变化,当发生事件时就会首先从History将事件匹配到Router中,然后从Router进行调用事件处理。

  View类, View类用于连接界面元素与model,当model发生改变的时候通过视图中绑定的change事件,当数据发生变化时重新渲染元素。

  Sync类:sync类用于在向服务器发送同步数据请求。

  综上所述,我们大致可以看出了Backbone.js各个之间联系的脉络。Model, View是一个组合,当我们触发一定的动作调用相应的事件函数,这个事件函数会修改Model中的数据成员,数据被修改后,程序会自动连接后台,并且响应到界面上。Router和History是另一个组合,当我们修改了URL后,程序在前台向后台索取数据,并更新我们的界面。

BackBone.js是一个MVC架构吗?

以我目前的理解来看,Backbone并不算是一个三层架构,而是一个两层架构, Model和View分别承担了Controller的部分功能,不过宏观上看来View更像是Controller,而真实的View则是我们的网页吧。

参考链接: 

http://documentcloud.github.io/backbone/#Router

http://www.cnblogs.com/xuwenmin888/archive/2013/05/27/3101445.html

原文地址:https://www.cnblogs.com/juicygroup/p/3350718.html