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方法,用于扩展原型属性和静态属性,创建自定义的视图、集合、视图、路由器类。
相关文章
|
域名解析 网络协议
kali2023.1 网络配置
kali2023.1 网络配置
538 0
|
人工智能 自然语言处理 开发者
AIGC创作活动 | 跟着UP主秋葉一起部署AI视频生成应用!
本次AI创作活动由 B 站知名 AI Up 主“秋葉aaaki”带您学习在阿里云 模型在线服务(PAI-EAS)中零代码、一键部署基于ComfyUI和Stable Video Diffusion模型的AI视频生成Web应用,快速实现文本生成视频的AI生成解决方案,帮助您完成社交平台短视频内容生成、动画制作等任务。制作上传专属GIF视频,即有机会赢取乐歌M2S台式升降桌、天猫精灵、定制保温杯等好礼!
|
7月前
|
人工智能 监控 数据可视化
智慧工地一体化信息管理平台源码
智慧工地一体化平台融合大数据、AI、物联网等技术,构建覆盖人、机、料、法、环的数字化管理体系,实现施工全过程可视化、智能化管理,提升效率,推动建筑产业信息化升级。
480 4
|
人工智能 API
新用户100万token免费额度!阿里云上线DeepSeek-R1满血版
阿里云推出DeepSeek-R1满血版,新用户可享100万免费Token额度。平台支持多种模型,包括671B参数的DeepSeek-R1和通义千问。结合开源工具Chatbox,用户能轻松对接API,体验高性能AI服务。访问[阿里云解决方案](https://www.aliyun.com/solution/tech-solution/deepseek-r1-for-platforms?utm_content=g_1000401616)了解更多详情并快速上手。
8415 36
|
人工智能 5G Windows
十分钟私有化部署DeepSeek R1
DeepSeek本地化部署支持下载1.5b、7b、8b、14b、32b等不同参数规模的大模型,适合逻辑推理和计算类问题。普通电脑建议选择1.5b模型以避免AI幻觉。部署需使用Ollama工具下载模型,并通过Chatbox AI等客户端进行配置,确保Ollama运行状态。显卡内存为主要资源占用,各模型占用情况不同,请确保硬盘空间充足。
1958 11
|
网络协议 Unix Linux
一个.NET开源、快速、低延迟的异步套接字服务器和客户端库
一个.NET开源、快速、低延迟的异步套接字服务器和客户端库
355 4
|
前端开发 JavaScript 数据管理
现代Web开发中的前端框架选择指南
选择合适的前端框架是现代Web开发中的关键决策之一。本文探讨了几种流行的前端框架,比较它们的特点和适用场景,帮助开发者在众多选项中做出理性的选择。
微信小游戏制作工具中,如何跨场景进行交互
微信小游戏制作工具中,如何跨场景进行交互
505 1
企业微信接入系列-上传附件资源
简述在API接口企业发表内容到客户的朋友圈时上传附件资源的操作
企业微信接入系列-上传附件资源
|
缓存 网络协议 Java
TCP的Window Size和Scale参数对传输效率的影响
目前大多数互联网数据通信都是通过TCP协议进行的,了解其通信方式对提高通信效率,排查通信效率问题有很重要的意义。一. TCP的滑动窗口机制1. 概述TCP协议是可靠的通信协议,数据发送方发送给数据接收方的每一个包必须需要数据接收方返回对应的ACK,否则数据发送方就需要重传这个包。这个模式就有点像我和你面对面聊天,你一句我一句。但这种方式的缺点是效率比较低的。如果你说完一句话,我在处理其他事情,没有
9043 0

热门文章

最新文章