Backbone.Marionette 学习小结

八月陆陆续续将 Ben McCormick 讲解 Marionette 的系列六篇文章《Marionette: Explained》翻译和学习完成。首先非常感谢作者,给了像我这样的初涉前端应用程序的开发者一个比较全面完整的学习指引。

这六篇文章我还是以我一贯的风格,以略译的形式完成,略译不但不是意译,甚至是笔记式的改写,以自己的语言概念系统重新梳理一遍这些开发知识、技术和理论。

正所谓一百位教师就有一百种教学方法,在略译Ben的文章过程中,除了忽略部分过时的内容,我还以自己喜好的表述方式重组织过内容,并且使用了很多自己提炼的语言和概念。我的理由是,前端应用开发是块热土,各路英雄各举一器,到目前还没一个稳定成熟开发路法,教什么都不确定,如何教更是五花八门。

关于 Backbone / Marionette

Backbone / Marionette在诸多流行子JS应用框架当中,属于边缘类别,使用量远远落后于排头的几个,例如React ,例如Vue。为什么选择Backbone?其实,我是顺着 Backbone 而学习 Marionette 的,当初选择 Backbone 的理由是这个框架精简,适用于研究,细细研究有MVC的理论,和GUI体系结构理论。事实上,在比较充分的了解了Backbone / Marionette的特性后,我认为它的设计思想还是很先进的,虽然我还没有正式使用过,并且还得对React 和Vue有一定深入才作出对比,和评判。

坚持学习 Backbone / Marionette 的另一个理由是,其实GUI体系结构理论只有一个(正如我的另一篇翻译所指出MVC并没有死,也不会死),无论前端还是后端,目前JS应用框架多样,未来它们发展一定趋向同质化,就像JAVA和C#那样,完成同一个任务的两种的工具,选择谁只有偏好,没有明显优劣。Backbone / Marionette作为前端框架的一支,能为我理解和总结通用的GUI体系结构理论极有益处。

Marionette: Explained

1.《Marionette.js的历史舞台

这是系列中的第一篇文章。主要介绍了 Marionette 的历史哲学——它被构建和设计的原因。并引申出JS应用框架(Marionette是应用框架的一支)的构建哲学——帮助架构师解决软件项目规模增大所面临的设计与决策。最后罗列了 Marionette 的解决方案上的特性。此文是系列文章中的纲领性文章,后续文章都为文章罗列Marionette特性作进一步的阐述。

2.《Backbone.Marionette V组件制作的核心任务之一——将业务数据连接上交互界面

这是第二篇文章。此文简要讲解Marionette.View 的内部实现原理(只有渲染业务数据一步,不全面[注]),和相关View的使用(API),V(交互功能单元)的制作是前端开发任务的基础和核心,V的制作的学习是Marionette的起步。

注:View对象实例的构建分为,第一渲染UI(将 template等转换成挂接DOM容易的形式),第二,将渲染的结构挂接上DOM,两步。

3.《使用Marionette.js构建复杂的交互布局》

这是第三篇文章。第二篇讲的是用View制作「单一交互功能的UI」,这篇讲用View和region制作「复杂复合的交互功能UI」,页面布局和嵌套的View是两种典型的复杂的V。

4.《Marionette View的生命事件模型

这是第四篇文章。前两篇讲了View的两种类基础的API,此篇主要对象还是 View,但是是关于View一些“隐秘”的API——生命事件模型。Marionette设计的这种生命事件是为让开发者能更灵活的定制View。生命事件模型是一种设计模式,不是只有View特有,其它类对象也可使用生命事件模式来提高开发灵活性。富交互功能会让「View对象的行为」在「呈现结构」和「动态交互」两个维度增加复杂度,这是生命事件模型(作为一种工具)所针对的任务。

5.《使用Backbone.Radio 构建更具模块化的Web应用

这是第五篇文章。此文介绍的 Radio 不是Marionette特定的,它是一种通用的功能,能提高大规模应用的可维护性。MVC模式对单一交互功能解耦,来提供可维护性,这是一种纵向的解耦;而一个完整的应用是由多个V组成 PAGE,再由多个Page组成APP,多个V也存在耦合需要分解,这是一种横向耦合,Radio就是为分解这种耦合而设计的。

6.《利用 Marionette Behaviors 使你的代码更加干净整洁

这是第六篇文章。此文应该放在第五,因为它的对象还是 View。Behaviors特指交互行为,当交互行为复杂/丰富到出现“重复结构”,这是令人惊异的。因为Marionette View本身已经是一个对复杂交互行为“重复结构”进行抽象,Marionette Behaviors 则在View的基础上进一步抽象,抽象些一些通用的交互行为,给不同的V实例“调用”。

关于参考书

在学习Marionette过程中,我参考了以下两本“过期”书,具体技术有点过时,思想并不过时。

Building Backbone Plugins Eliminate The Boilerplate In Backbone.js Apps

building backbone plugin

Getting Started with Backbone Marionette

Getting Started with Backbone Marionette

整个系列学习下来,我感觉对Backbone/ Marionette 这个工具有更深一步的理解。而工具是为了完成特定任务,这个任务这里就是开发复杂的JS前端应用,而开发者的专业性体现在对任务(以及工具技术)有更细致的理解,对Marionette以及它的任务的细致理解,结果必然是专业能力得到了提高。

裸男
Nakeman.cn 2023 Build by Gatsby and Tailwind, Deploy on Netlify.