前端编程提高之旅（七）----marionette实现todoMVC

最新推荐文章于 2024-09-29 08:32:29 发布

产品经理读书会

最新推荐文章于 2024-09-29 08:32:29 发布

阅读量6.8k

点赞数

分类专栏：前端编程提高之旅前端开发提高之旅

本文链接：https://blog.csdn.net/yingyiledi/article/details/40188983

版权

本文主要讲解如何使用MarionetteJS实现TodoMVC功能，虽然公司对MarionetteJS进行了封装，但基本功能保持不变。通过分析项目目录、View目录和Templates目录，揭示与Backbone实现的区别，重点在于View的职责，如设置el或tagName、模板、交互事件、初始化监听和渲染函数。

摘要由CSDN通过智能技术生成

marionetteJS是在backboneJS基础上进行更简洁的操作，平常开发主要用到几个涉及到view的概念：CollectionView、CompositeView、ItemView、LayoutView。这几个概念中，用的最广的当属ItemView。ItemView相对于backbone中view的概念方便之处在于：不用显式定义render方法，而是由ItemView本身完成将数据渲染到模板，并将视图追加到el，由此可见减少了很多流程化的操作。
同时marionetteJS还有很多事件和回调方法如：onBeforeRender、onRender、onBeforeDestroy、onDestroy、onShow等。这些回调函数，都在相应事前执行前或后，被调用执行，即帮助开发人员设定好了时序的通用方法，大大简化了业务逻辑实现。

当然本文并不是详细讲述marionetteJS的原理，而是针对使用marionetteJS实现todoMVC功能（点击下载）做讲解。由于公司根据具体业务需要，在marionetteJS上又进行了一些封装实现，不过基本功能marionetteJS没有太大出入，故如看到代码中Italent无需惊慌，只需做到理念上的理解即可。

首先让我们看一下，项目目录、view目录及templates目录：