McFog@がんばらない

Backbone first glance

2013-05-25

Backbone first glance

2013-05-25

昨夜开始实现利用github api 把文章评论丢到Issue里面,选型时选择了Backbone作为基础,对比以往研究过的其他各类框架,Backbone是崭新而让我震惊的

先说结论:Backbone是_framework of MV* frameworks_,是框架的框架;或者说,Backbone仅仅抽象了web app framework中多数都需要的功能组织成api接口,但并没有将自己限制在任何一种风格,而是要求开发者先以Backbone为基础自己定义出一种框架(完成MV*中“*”部分和V部分的定义),然后再实现自己的业务。

不是MVC, MVP, MVVM

MV*家族的差异在于*,也就是Model和View的中间代码,中间代码的职责、边界、执行方式输入输出等决定了MV*框架的类别,Backbone不存在这样的中间层。

Wikipedia和很多其他人将Backbone定义为MVP,我觉得这可能是因为相对而言将Backbone完善为一个MVP框架是成本比较低的,但即使同样的MVP模式,Backbone也可以展现出截然不同的组织结构来!

其实官网简介正暗示了这个结论: >Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.

Backbone并没有定死如何连接model和view,没有定死app的结构究竟如何,而只是抽象了model和view,甚至Backbone.View不一定做MV*中的V部分。

Backbone Storm

几分钟的简单brainstorm就让我列出了非常多种以Backbone为基础的结构

Storm 1

Backbone.View作为MVP模式中的P,V层只留原生DOM/BOM。而Backbone.Router仅作为处理HistoryAPI/Hashchange的辅助。这种结构中M、V、P三者都有很好的事件支持,比较适合事件驱动的开发思路,但估计模块化、拆分View可能有难度

Storm 2

同样MVP结构,也可以边缘化Backbone.View,将其仅作为绑定dom的辅助,而将Backbone.Router作为MVP模式中的P。Router为核心的好处是如果单页面状态多的时候会比较轻松,另外Backbone.View被边缘化后,可能会有利于动态切换、嵌套、拆分。而Router本身由于本身逻辑主要是分发,天然来说不难拆分。

Storm 3

虽然Backbone.Router曾经被称为Controller,但在非单页的webapp中这并不合适,额外单独的Controller可能适用范围更广一点。这种结构中Backbone.View作为View的一部分,主要负责屏蔽DOM/BOM的细节,Controller负责交互逻辑,比起之前的MVP显得更灵活一些(Backbone.View瘦意味着易于移植到不同终端)

Storm 4

在MVVM模式中,VM负责将领域模型Model和视图View对接,以Backbone为基础来看,VM可以直接继承Backbone.Model,然后在sync方法中对接实际的领域Model,也可以直接手写。无论如何,Backbone.View作为View来屏蔽dom细节应该是没有问题的。注意这种结构下Model需要经历两个类才最终影响到Dom结构,层数多往往同时意味着复杂性和灵活性。感觉可能会比较难以把握VM和M之间的边界。

除了*部分,我们还要担心什么?

  • 操作DOM的方式:虽然Backbone.View相关代码中有亲jQuery的部分,但同样也有render方法来承载模板引擎的渲染工作;或者用继承的事件机制来完成一个数据绑定到dom的关系似乎也并不突兀。至少我能想象到的三种dom操作风格,Backbone都能很好的承载。
  • 嵌套
    • 嵌套Model。通过覆盖initialize、sync等方法不难实现,更复杂的关联关系也基本和其他语言/框架类似处理即可。当然选用插件也是个不错的主义。
    • 嵌套View。由于不同的组织方式对View的职责、边界的定义并不一样,所以如果你有类似的需求,最好将嵌套View的方式最开始就考虑进你的设计中。另外,注意如果嵌套View的同时DOM元素也嵌套的话,小心处理事件冒泡。
    • 嵌套Router。如果单纯只做纯分发,一般问题不大,但如果同时要在Router里面写逻辑,那分Router嵌套Router就是必须要考虑的了

总结

其实MV*家族纠结的不外乎纯领域的Model和纯前端的View之间的这些代码如何组织,哪些可以侵入进入Model哪些可以侵入View;总体思路其实都是解耦。那么其实如何解耦的原则也很简单:越有可能变化的地方越要解耦、抽象,而不容易变化的地方则可以接受一定程度的耦合来为其他(效率、代码量、系统复杂度)妥协。

Backbone将各类框架中有多种流派的、没有标准答案的部分忽略,只实现最基础、公认的最佳实践,将决定权交还了开发者,由开发者决定究竟使用何种风格;正如官网上宣称的There’s More Than One Way To Do It,Backbone就是这样一个自由的,不完整的,框架之框架


参考

–EOF–

© 2018 McFog W. All rights reserved. がんばらない