ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

Backbone.Marionette MnObject 完全指南:从实例化、cid 到销毁与 Radio 集成

Backbone.Marionette MnObject 完全指南:从实例化、cid 到销毁与 Radio 集成 前端【免费下载链接】backbone.marionetteMarionette v4 for Backbone applications. Maintenance fixes; new development continues in marionettejs/marionette.项目地址https://gitcode.com/gh_mirrors/ba/backbone.marionette点击查看免费下载MnObject是 Marionette v4 提供的轻量级基类将 Backbone 的initialize、cid与extend约定与 Marionette 的 Common 功能、类事件和 Radio API 融为一体。本文以 docs/marionette.mnobject.md 为主线结合仓库源码src/object.js、src/mixins/destroy.js 等与测试用例test/unit/object.spec.js逐层拆解帮助你在不引入 View 的前提下用最小成本写出事件化、可销毁、可与 Backbone.Radio 通信的业务对象。MnObject 是什么MnObject把 Backbone 的三个核心约定收编进 Marionette 的体系initialize实例化时自动调用供你在构造阶段完成初始化逻辑cid每个实例自动获得唯一客户端标识默认以mno为前缀extend沿用 Backbone 的类继承机制方便你定义自己的对象类型。同时MnObject还内置了三套能力能力说明对应源码Common Marionette 功能提供getOption、mergeOptions、bindEvents、bindRequests、triggerMethod等通用工具src/mixins/common.js类事件继承自 Backbone.Events 的事件系统并支持triggerMethod的事件 同名方法约定docs/events.class.md、src/mixins/events.jsRadio API通过channelName、radioEvents、radioRequests与 Backbone.Radio 通道集成src/mixins/radio.js、docs/backbone.radio.md从源码看MnObject的构造过程非常简单src/object.jsconst MarionetteObject function(options) { this._setOptions(options, ClassOptions); this.cid _.uniqueId(this.cidPrefix); this._initRadio(); this.initialize.apply(this, arguments); };实例化时依次完成合并选项 → 生成cid→ 初始化 Radio → 调用initialize。它的原型上混入了CommonMixin、DestroyMixin、RadioMixin默认cidPrefix为mno默认initialize是空方法noop供你按需覆写。实例化 MnObject与其他 Marionette 类一样用new关键字实例化即可import { MnObject } from backbone.marionette; const myObject new MnObject({ ... });实例化时若传入以下属性会被直接挂到实例上源码中的ClassOptions见 src/object.jschannelName指定要连接的 Radio 通道名称radioEvents配置要监听listen的通道事件哈希radioRequests配置要响应reply的通道请求哈希。这些属性经mergeOptions从options复制到实例src/common/merge-options.js只有当选项值不为undefined时才会覆盖实例属性。同时整个options对象会被保留在this.options上_setOptions的实现见 src/mixins/common.js后续可通过getOption统一读取。这一点在 test/unit/object.spec.js 中有明确断言class options 被合并到实例、this.options与传入选项深度相等。唯一客户端 IDcidMnObject创建时自动分配cid默认前缀为mno。你可以通过覆写cidPrefix来定制前缀import { MnObject } from backbone.marionette; const MyFoo MnObject.extend({ cidPrefix: foo }); const foo new MyFoo(); console.log(foo.cid); // foo1234其实现为this.cid _.uniqueId(this.cidPrefix)src/object.js即foo 递增数字。测试用例也验证了实例的cidPrefix默认为mno、cid包含mnotest/unit/object.spec.js。cid的价值在于无需依赖后端 ID即可在内存中唯一标识实例常用于事件回调或集合排序的稳定键。销毁 MnObjectdestroydestroy用于解绑直接挂在实例上的事件并返回该 MnObject 自身。调用流程src/mixins/destroy.js若已销毁_isDestroyed true直接返回this避免重复销毁触发before:destroy事件并调用对应方法若存在将_isDestroyed置为true触发destroy事件并调用对应方法调用stopListening()解绑所有通过listenTo建立的监听返回this。事件触发统一走triggerMethod它会按命名约定同步调用onBeforeDestroy、onDestroy等方法src/common/trigger-method.js对应文档 docs/marionette.functions.md。注意事件处理器会收到调用destroy时传入的options参数。import { MnObject } from backbone.marionette; // 定义一个带 onBeforeDestroy 方法的 MnObject const MyObject MnObject.extend({ onBeforeDestroy(options){ // 在这里编写其他自定义清理代码 } }); // 创建实例 const obj new MyObject(); // 添加一些事件处理器 obj.on(before:destroy, function(options){ ... }); obj.listenTo(something, bar, function(){...}); // 销毁解绑全部事件处理器、触发 destroy 事件、 // 并调用 onBeforeDestroy 方法 obj.destroy({ foo: bar });isDestroyed返回一个布尔值表示该 MnObject 是否已被销毁src/mixins/destroy.jsimport { MnObject } from backbone.marionette; const obj new MnObject(); obj.isDestroyed(); // false obj.destroy(); obj.isDestroyed(); // true基本用法一个 Selections 示例文档给出一个经典范例Selections——一个管理选中项集合的 MnObject。由于继承自MnObject它免费获得了initialize和事件系统import { MnObject } from backbone.marionette; const Selections MnObject.extend({ initialize(options){ this.selections {}; }, select(key, item){ this.selections[key] item; this.triggerMethod(select, key, item); }, deselect(key, item) { delete this.selections[key]; this.triggerMethod(deselect, key, item); } }); const selections new Selections({ filters: Filters }); // 使用内置的 EventBinder selections.listenTo(selections, select, function(key, item){ console.log(item); }); selections.select(toy, Truck);这里的要点initialize(options)在构造时自动执行options即构造参数示例中传入filters: Filters可在initialize内通过this.options.filters或getOption读取triggerMethod(select, key, item)会同时触发select事件并调用onSelect(key, item)方法若存在listenTo来自 Backbone.Events随CommonMixin混入_.extend(CommonMixin, Backbone.Events)见 src/mixins/common.js实现我监听、我销毁的自动清理语义。triggerMethod 命名约定triggerMethod是 MnObject 上最常用的方法之一。它的命名转换规则src/common/trigger-method.jsthis.triggerMethod(foo)→ 触发foo事件并调用onFoo方法this.triggerMethod(foo:bar)→ 触发foo:bar事件并调用onFooBar方法。方法名由事件名中的冒号分隔段首字母大写拼接而来结果会被缓存methodCache因此triggerMethod(select)与onSelect、triggerMethod(before:destroy)与onBeforeDestroy一一对应。触发时先调用方法、再触发事件并把除事件名外的其余参数原样传给两者。Radio 集成channelName、radioEvents 与 radioRequests当实例配置了channelName时MnObject会在构造时自动建立与 Backbone.Radio 通道的连接_initRadio见 src/mixins/radio.jsimport { MnObject } from backbone.marionette; const RadioObject MnObject.extend({ channelName: toy-store, radioEvents: { select:all: onSelectAll }, radioRequests: { get:selected: getSelected }, onSelectAll() { // 当通道上广播 select:all 时触发 }, getSelected() { // 当通道上发起 get:selected 请求时返回结果 return this.selections; } });其底层行为radioEvents通过bindEvents(channel, radioEvents)把通道事件绑定到本实例方法src/common/bind-events.js内部基于listenTo实现radioRequests通过bindRequests(channel, radioRequests)用channel.reply(...)注册请求应答src/common/bind-requests.js实例监听destroy事件销毁时调用_destroyRadio()通过channel.stopReplying(null, null, this)注销自己的全部应答src/mixins/radio.jsgetChannel()返回当前连接的通道路对象src/mixins/radio.js。需要留意的是radioEvents的哈希值既可以是方法名字符串也可以是函数radioRequests同理。另外如果channelName存在但运行时缺少backbone.radio依赖_initRadio会抛出带提示信息的MarionetteErrorsrc/mixins/radio.js提示信息指向backbone.radio.html#marionette-integration即 docs/backbone.radio.md。完整的 Radio 事件与请求映射说明见 docs/backbone.radio.md。Backwards Compatibility向后兼容在 v4 之前的版本中MnObject被称为Object。这一旧命名仍可通过库的默认导出使用但应视为已弃用deprecated并计划在后续版本中移除。import { MnObject } from backbone.marionette; import Marionette from backbone.marionette; console.log(MnObject Marionette.Object Marionette.MnObject); // true从 src/backbone.marionette.js 可以看到默认导出对象中同时保留了MnObject与Object: MnObject两个键两者指向同一构造函数因此上面的全等比较结果为true。新代码应统一使用MnObject命名。从源码看 MnObject 的完整能力清单综合 src/object.js、src/mixins/common.js、src/mixins/destroy.js、src/mixins/radio.js一个MnObject实例实际拥有以下能力构造约定_setOptions合并 options 与 classOptions、cid、_initRadio、initializeCommon 工具getOption、mergeOptions、normalizeMethods、triggerMethod、bindEvents/unbindEvents、bindRequests/unbindRequests事件系统on、off、once、trigger、listenTo、stopListening等Backbone.Events 全集生命周期destroy(options)、isDestroyed()、onBeforeDestroy/onDestroy约定方法RadiogetChannel()、channelName/radioEvents/radioRequests配置。得益于这些内置能力MnObject非常适合作为 View、CollectionView、Region 之外的逻辑层基类例如状态管理器、选择控制器、数据聚合器或任何需要事件驱动、可显式销毁的普通 JavaScript 对象。相关销毁语义的更多细节可参考 test/unit/destroying-views.spec.js 与 docs/marionette.view.md 中关于生命周期事件的讨论。小结本文围绕 docs/marionette.mnobject.md 展开覆盖了 MnObject 的实例化、cid与cidPrefix、destroy/isDestroyed生命周期、Selections 实战范例、Radio 三件套channelName/radioEvents/radioRequests以及Object旧命名的兼容与弃用说明。你可以直接把这些模式套用到自己的业务对象上用triggerMethod统一事件 方法触发用destroy做幂等的资源清理用 Radio 三件套实现模块间解耦通信。赞分享前端【免费下载链接】backbone.marionetteMarionette v4 for Backbone applications. Maintenance fixes; new development continues in marionettejs/marionette.项目地址https://gitcode.com/gh_mirrors/ba/backbone.marionette点击查看免费下载相关推荐Sigma.js 生命周期完全指南从实例化、渲染到销毁的底层机制Sigma.js 生命周期完全指南从实例化、渲染到销毁的底层机制 本指南以 sigma.js 官方生命周期文档 packages/website/docs/数据可视化前端图形学Angular 组件生命周期钩子Lifecycle Hooks完全指南从实例化到销毁的每一帧Angular 组件生命周期钩子Lifecycle Hooks完全指南从实例化到销毁的每一帧 导读 Angular 中的每个组件实例都经历一条从“出生”到文档教程知识库DXVK Vulkan实例销毁时机安全实践DXVK Vulkan实例销毁时机安全实践 1. 引言为什么销毁时机至关重要 在基于Vulkan的Direct3D实现中Vulkan实例Instance图形学游戏开发上一篇微信聊天记录永久保存完整教程WeChatExporter免费开源工具快速上手下一篇WarcraftHelper终极指南三步让魔兽争霸III在现代电脑完美运行创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表