Backbone CURD

简介:

前端为什么要用MVC

前端开发中呢,不可避免的都有在应用逻辑中加入显示数据的代码的情况,当项目规模愈发变大时,这种形式的代码变得越发的难以维护,因为任何在主干逻辑中的变更都可能影响到数据显示逻辑,反之亦然,当然不管什么模式最主要的还是分离职责

angular, backbone 是单页面app框架,帮助你用mvc的方式更有调理的规划app
angular上手容易但是如果app很复杂后期开发会很吃力
backbone正好相反相对大型app,前期比较难上手,越到后面越顺手,因为很灵活,
如过小app我会选择angular,angular操作jsdata, 大型复杂的单页面app我会选择backbone,backbone操作DOM



 

自定义事件模块 Backbone.Events

可以和任意对象合体(将方法赋值到其他对象或原型上),合体后的对象可以自定义事件,提供三个方法来绑定、移除、触发自定义事件。

 

模型 Backbone.Model

是 JavaScript 应用程序的核心,包含业务数据和对业务数据的读写和持久化,模型的主要方法包括读写和持久化。
 

集合 Backbone.Collection

集合是模型的有序集合,可以在集合上绑定 "change" 事件,当集合中的任何模型发生变化时收到通知,集合也可以监听 "add" 和 “remove" 事件, 从服务器获取数据,并能使用 Underscore.js 提供的全套方法。 
为了方便,在集合中的模型上触发的任何事件都会在集合上直接触发。这样就可以监听集合中模型的指定属性的变化。 例如:Documents.on("change:selected", ...) 
集合的主要方法包括读写、维护和持久化。

路由配置器 Backbone.Router

Web应用程序通常需要为重要页面提供可链接、收藏、可分享的 URL。 直到最近, 锚文片段(hash #page)可以被用来提供这种固定链接;同时随着 History API 的到来,锚文现在可以用于处理标准 URLs (/page)。

Backbone.Router 为客户端页面路由提供了许多方法,并能连接到指定的动作(actions)和事件(events)。对于不支持 History API 的旧浏览器,路由器提供了优雅的回调函数并可以透明的进行 URL 片段的转换。

页面加载期间,当应用程序已经创建了所有的路由表,需要调用 Backbone.history.start(),或 Backbone.history.start({pushState : true}) 确保路由初始 URL。

 

路由器 Backbone.History

作为全局路由器,用于处理 hashchange 或 pushState事件,匹配适合的路由表,并触发回调函数。 
如果使用带有路由表的路由器,会自动创建一个History对象,此时不要再创建一个History对象,而是使用 Backbone.history。 
Backbone 会自动判断浏览器对 pushState 的支持,以做内部的选择。 不支持 pushState 的浏览器将会继续使用基于锚点的 URL 片段。 

 
 

视图 Backbone.View

视图的使用相当方便,不需要判断任何HTML、CSS,可以任意JavaScript模板引擎集成。

通用的做法是,将界面组织成基于模型的诗句,当模型改变时视图立即更新,而不需要重画整个页面。

不再需要纠结于JSON对象、查找DOM元素、手动更新HTML,只需把视图 render 方法绑定到模型的 change 事件,模型数据会立即显示到UI上。

 

扩展方法 extend

模型、集合、视图、路由器都一个extend方法,用于扩展原型属性和静态属性,创建自定义的视图、集合、视图、路由器类。
相关文章
|
7月前
|
PyTorch 算法框架/工具 C++
Bert Pytorch 源码分析:二、注意力层
Bert Pytorch 源码分析:二、注意力层
110 0
|
3月前
|
前端开发 IDE 数据库连接
ThinkPHP6 模型层的模型属性,表映射关系,以及如何在控制层中使用模型层和模型层中的简单CRUD
本文详细介绍了ThinkPHP6中模型层的使用,包括模型属性设置、表映射关系、以及如何在控制层中使用模型层进行CRUD操作。
ThinkPHP6 模型层的模型属性,表映射关系,以及如何在控制层中使用模型层和模型层中的简单CRUD
|
机器学习/深度学习 自然语言处理
深度剖析Transformer核心思想 "Attention Is All You Need"
深度剖析Transformer核心思想 "Attention Is All You Need"
265 1
|
6月前
|
机器学习/深度学习 测试技术 计算机视觉
【YOLOv8改进】DAT(Deformable Attention):可变性注意力 (论文笔记+引入代码)
YOLO目标检测创新改进与实战案例专栏探讨了YOLO的有效改进,包括卷积、主干、注意力和检测头等机制的创新,以及目标检测分割项目的实践。专栏介绍了Deformable Attention Transformer,它解决了Transformer全局感受野带来的问题,通过数据依赖的位置选择、灵活的偏移学习和全局键共享,聚焦相关区域并捕获更多特征。模型在多个基准测试中表现优秀,代码可在GitHub获取。此外,文章还展示了如何在YOLOv8中应用Deformable Attention。
|
6月前
|
计算机视觉 机器学习/深度学习 自然语言处理
【YOLOv8改进】CoTAttention:上下文转换器注意力(论文笔记+引入代码)
本文介绍了YOLO目标检测的创新改进,提出了一种名为Contextual Transformer (CoT)块的新型Transformer模块,用于增强视觉识别能力。CoT块通过3×3卷积编码上下文信息,并结合动态多头注意力矩阵,提高了视觉表示。此外,还提到了Large Separable Kernel Attention (LSKA)模块,它解决了大内核卷积的计算效率问题。CoTNet是基于CoT模块的Transformer风格骨干网络,可替代ResNet中的3×3卷积。CoTAttention类展示了如何在YOLOv8中集成此模块。文章还提供了源码链接和更多实战案例详情。
|
机器学习/深度学习 算法框架/工具 计算机视觉
|
机器学习/深度学习 数据可视化 计算机视觉
【即插即用/模块替换】向ResNet引入Adopting Dense Shortcuts,涨点明显!!!
【即插即用/模块替换】向ResNet引入Adopting Dense Shortcuts,涨点明显!!!
255 0
|
机器学习/深度学习
随笔:注意力机制Attention
随笔:注意力机制Attention
177 0
随笔:注意力机制Attention
|
机器学习/深度学习 算法
从零手写Resnet50实战—手写龟速卷积
从零手写Resnet50实战—手写龟速卷积
|
算法框架/工具 Caffe
Caffe Softmax 层的实现原理【细节补充】
Caffe Softmax 层的实现原理【细节补充】
174 0
Caffe Softmax 层的实现原理【细节补充】