HTML5技术

我对Backbone.js的一些认识 - 流云诸葛(3)

字号+ 作者:H5之家 来源:H5之家 2016-07-07 13:00 我要评论( )

4)多了很多封装,创建了Data和AppView类,最重要的是这个Data类,它的性质就代表着我们的页面在真实世界或者是数据库中的一个业务实体类型,它的作用一方面是将数据管理的逻辑与界面逻辑进行解耦,同时把数据同步

4)多了很多封装,创建了Data和AppView类,最重要的是这个Data类,它的性质就代表着我们的页面在真实世界或者是数据库中的一个业务实体类型,它的作用一方面是将数据管理的逻辑与界面逻辑进行解耦,同时把数据同步的逻辑包含在自身内部,这也是为啥我们没有看到ajax直接调用的原因,使得数据的逻辑严密性更强,也就是所谓的高内聚。

采用backbone之后,即使将来页面增加了几十个文本控件,有可能我们只需要调整save方法即可,利用jq的serializeArray方法我们能一次性的快速收集整个表单的数据,所以整体上代码也不会增加很多。另外,从代码之道的角度来说,backbone之后的代码由于更强的封装性,使得代码的可阅读性也更强。所以从结果上来说,backbone能够对我们的工作起到的作用还是很明显的。

那么它是如何做到这些的呢?正如你在代码中所看到的:Backbone.Model,Backbone.View,这两个东西就是它实现这些漂亮代码的关键。Model跟View属于Backbone提供的两个核心模块,简单来说,Model这个模块可以让我们用来定义一些纯数据管理的类,大部分情况下,这些类就是我们所要开发的功能对应的业务实体,比如一个学生选课系统中,学生,课程,选课记录这三个都是我们所要开发的功能的业务实体;用Model定义的类能够为我们提供直接修改和获取业务实体数据属性的功能,也能够通过简单明了的api直接与服务器进行同步,比如前面用到的fetch,save,还有没用到的destroy等;View这个模块可以让我们来封装页面中某个独立完整部分的UI功能,它往往会与Model模块进行关联,并且配合模板一起完成UI的更新,通过监听Model实例的变化来重新渲染html,通过自身注册的事件将UI的变化同步到Model实例,它就像一个控制器,同步数据与界面UI的实时变化。除了Model跟View之外,Backbone的底层还有一个sync模块,封装了数据同步时异步请求管理的功能,虽然它是底层的实现,但却不是一个特别好用的东西,在后面的内容中我会说明一些它的不合理的问题,现在只要知道它是用来管理异步请求的即可。Backbone官方文档里面,描述这三个模块之间的关系,用到了一张非常清晰明了的示意图:

image

希望这个图加上前面的举例和描述,能够让你明白这三个模块之间的关系以及作用。在下一部分我还会进一步的去说明这些模块之间是如何互相影响的问题,尤其是Model与View之间的交互。

以上的内容,都是跟前面举例引入的那个编辑页面有关,都是为了说明backbone在简化编辑页面开发的时候,是如何实现的以及它背后的核心内容,但是在实际工作中,我们同样遇到很多的页面功能,并不是只处理单条数据的逻辑,而是以列表的形式展现多条数据,甚至还会有直接在列表上编辑单条数据等更复杂的功能出现,这个时候如果我们还是采用传统方法来实现,肯定还会遇到我们在开发编辑页面时遇到的那些问题,而且哪怕是最简单的列表功能也会比前面的那个编辑页面要复杂不少,所以这种方法也是需要考虑去改进的。backbone为了解决这个问题,使用了另外的一个模块Collection,这个模块你可以把它定义出来的东西看成是一个数组,但是它比数组的功能更丰富,因为它可以指定存储某种Model的实例,代表Model实例的一个集合,也提供有简单的api比如fetch,create方法来直接同步服务器的数据;如果说Model跟View的关系,是把数据与UI进行解耦,那么Collection跟View,就是把数据列表与UI进行解耦,它们的内涵跟机制都是差不多的,只不过Model实例仅仅是作用于单条数据的功能,而Collection实例可以作用于多条数据的功能;就跟Model可以被直接关联到View一样,Collection实例也能直接通过collection属性,在创建View实例的时候,传递给View;在Collection内的model发生增删改的时候,通知View实例去重新渲染html;在用户与View实例发生交互的时候,View主动去调整Collection里面的内容;View层还是充当控制器的作用,实时同步UI与Collection之间的变化。关于Collection这个模块的具体使用,这里就不再提供了,第一,前面给出的todos地址,就是一个很好的例子能对比说明所有模块的作用和关系;第二是,Collection的作用,确实跟Model的作用差不多,理解它的方法,完全可以类比Model。这是Backbone官方文档里面,提供的描述Collection Model View sync这四个模块之间关系的示意图,希望对理解这个模块的作用能有所帮助:

image

以上就是我认为的Backbone整体思想的核心内容。不过看过或者用过的人,肯定知道backbone还有另外几个模块:Events,History和Router,在我看来:

1)Events很重要,是backbone所有机制的核心基础,但它并不是这个框架的思想所在,backbone只是需要它来完成自己想做的事情,你在其它框架里面也能看到这样的基础模块,所以它不属于思想的核心;而且用法简单,没有太多介绍的必要;

2)History跟Router只能算是backbone提供的工具,要是觉得它们不好用,或者不想做单页的应用,完全可以不用它们,至少我现在不会用,所以我也不打算花时间去研究,没有它们,我们依然可以使用backbone构建封装性很强的应用程序。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 【react学习】关于react框架使用的一些细节要点的思考 - 外婆的彭湖湾

    【react学习】关于react框架使用的一些细节要点的思考 - 外婆的彭湖

    2017-04-16 18:00

  • 使用phonegap获取设备的一些信息 - ganchuanpu

    使用phonegap获取设备的一些信息 - ganchuanpu

    2017-03-30 13:00

  • 微信H5页面遇到的一些问题 - 乖乖脸很大

    微信H5页面遇到的一些问题 - 乖乖脸很大

    2017-01-27 08:05

  • 微信小程序开闸,关于入口、推广、场景的一些观察与思考 - 腾讯攻城师lee

    微信小程序开闸,关于入口、推广、场景的一些观察与思考 - 腾讯攻城

    2017-01-10 13:00

网友点评