首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Backbone.js在集合添加时触发两次渲染

Backbone.js是一种JavaScript框架,用于构建可扩展的单页面应用程序。当使用Backbone.js进行集合添加时,通常会触发两次渲染,这是因为Backbone.js的集合(Collection)和视图(View)之间的绑定机制。

在Backbone.js中,集合(Collection)和视图(View)之间的绑定是通过“事件监听”和“事件触发”来实现的。当集合中的模型(Model)发生变化时,集合会触发相应的事件,例如“add”、“remove”、“reset”等。而视图在初始化时,会监听这些事件,并在事件触发时执行相应的渲染操作。

因此,当集合添加新的模型时,通常会触发两次渲染:一次是在添加模型时触发的“add”事件,另一次是在集合重新排序或重新过滤后触发的“reset”事件。这样做的好处是可以确保视图始终与集合中的数据保持同步,但是在某些情况下,这可能会导致不必要的渲染操作,从而影响性能。

为了避免这种情况,可以使用Backbone.js的“silent”选项来禁止触发事件,或者使用自定义事件来控制渲染操作的触发时机。此外,也可以使用第三方插件,例如Backbone.Marionette或Backbone.CollectionView,来简化视图和集合之间的绑定操作,并提高性能。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

1.初识backbone.js

backbone,英文意思是:勇气, 脊骨,但是程序里面,尤其是backbone后面加上后缀js之后,它就变成了一个框架,一个js库。...backbone.js,不知道作者是以什么样的目的来对其命名的,可能是希望这个库会成为web端开发中脊梁骨。 好了,八卦完了开始正题。...当界面上的操作引起model中属性的变化时,model会触发change的事件;那些用来显示model状态的views会接受到model触发change的消息,进而发出对应的响应,并且重新渲染新的数据到界面...一个完整的backbone应用中,你不需要写那些胶水代码来从DOM中通过特殊的id来获取节点,或者手工的更新HTML页面,因为model发生变化时,views会很简单的进行自我更新。...查backbone资料的时候,发现没有很系统的中文入门资料和更多的实例,所以我打算自己边学边写,争取能让大家通过一系列文章能快速的用上backbone.js

85620

用 jest 单元测试改善老旧的 Backbone.js 项目

对于这样的既有项目,之前的文章中也进行过分析,常常面临依赖不清、封装混乱,以及缺乏测试等问题;对之进行维护和新需求开发,结合其本身特点, TDD 的方式下进行渐进的改善,而非推倒重来,无疑是个可行的办法...Backbone.js / Require.js 技术栈回顾 Require.js 模块化 ? 首先说 Require.js,没有 webpack 的日子里,这是最常见的模块化管理工具。...其主要功能模块包括: Events:提供一系列事件的绑定和触发等功能 Model: 对数据或状态的转化、校验、计算派生值、提供访问控制等,也负责数据的远程同步等,并有事件触发机制;作用类似于 MobX...build 时运行测试 目标项目中,其实是用 babel 5 做的 ES6 转译;但是由于之前的源代码已经全部采用了 ES6 语法开发(部分初始 AMD 代码也做过自动转化),所以我们完全可以测试采用较新的...比之于测试 react 还需要 enzyme 等的支持,测试 Backbone.View 其实要简单许多,只需要获取到其 $el 属性,调用 jQuery 的惯有方法即可: it("应该在不显示门店渲染为空

3.4K10

浏览器的渲染流程--重排、重绘、合成

无疑, 重排需要更新完整的渲染流水线,所以开销也是最大的。 触发时机和影响范围: DOM节点信息更改,触发重排,这个DOM更改程度会决定周边DOM更改范围。...触发时机和影响范围: GUI渲染线程后执行,将GUI渲染线程生成的绘制列表转换为位图,然后发送绘制图块命令 DrawQuad 给浏览器进程,浏览器进程根据 DrawQuad 消息生成页面,将页面显示到显示器上...五、常见的触发重排、重绘的属性和方法 1.引发重排的操作: 页面首次渲染。 浏览器窗口大小发生改变——resize事件发生。 元素尺寸或位置发生改变——定位、边距、填充、边框、宽度和高度。...如果在一个局部方法中需要多次访问同一个dom,可以第一次获取元素用变量保存下来,减少遍历时间。 用事件委托来减少事件处理器的数量。...也就是获取到元素之后就和html中的这个元素没有关系了 getElementByXX():获取动态集合,通过函数获取元素之后,元素之后的改变还是会动态添加到已经获取的这个元素中。

92220

async 和 defer 的区别

标签的位置 按照惯例,所有的 都应该放入 中,但是这就意味着必须要等所有的 JavaScript 代码下载解析和执行完毕后才能开始呈现页面内容(浏览器遇到 body 标签...现实中,延迟脚本不一定会按照顺序执行,也不一定会在 DOMContentLoaded 事件触发之前执行,因此最好只包含一个延迟脚本。...异步脚本一定会在页面 load 事件之前执行,但可能会在 DOMContentLoaded 事件触发之前或之后执行。...defer vs async 下面这张图能很好地说明 defer 与 async 之间的关系: 从图中我们可以得出以下几点: defer 和 async 在下载是一样的,都是异步的(相较 HTML...,直到遇到 标签的时候,主进程才会停止渲染等待此资源加载完毕然后调用 V8 引擎对 js 解析,继而继续进行 DOM 解析。

4.9K60

15 个 JavaScript 框架的全面概述

优点 服务器端渲染:Nuxt.js 提供内置的服务器端渲染,允许页面交付给客户端之前服务器上进行初始渲染。通过向搜索引擎爬虫提供完全渲染的页面并提供更好的用户体验,可以提高性能和 SEO。...当集成多个数据源或处理复杂的数据转换,构建过程可能会变得复杂。 12....历史 Backbone.js 由 Jeremy Ashkenas 创建并于 2010 年发布。它作为最早引入模型、视图和集合概念的 JavaScript 框架之一迅速流行起来。...它通过将应用程序划分为数据模型、表示视图和管理模型组的集合,简化了分离关注点的过程。Backbone.js 还提供 RESTful 持久性以及与服务器的同步,使其非常适合需要实时数据更新的应用程序。...灵活的数据绑定:Backbone.js允许开发者模型和视图之间建立双向数据绑定,实现数据变化时的自动同步和更新。

4.1K10

从UI到AI——移动端H5生成技术漫谈

Css动画特点 Css动画是完整的DOM结构上实现的,所以便于同时添加各种事件触发,写起来也非常简单,只需要拼凑各种css属性就能达到效果。...但是当性能较差单帧所需的绘制时间就会变长,并且Canvas 2D这时会跳过中间帧,直接渲染最后一帧,也就造成我们所看到的卡顿现象。...用css给SVG添加的动画在多数浏览器是没有硬件加速支持的,画面复杂的时候渲染耗时相对也会更长。 WebGL 目前为3D场景添加交互的主流做法有三种。...第二种就是像素颜色,它会将场景渲染两次,第一次清除场景中所有的材质颜色,第二次为每一个物体渲染上不同的颜色,然后根据点击获取的颜色判断被触发的物体。...门槛在哪 非技术人员无法制作简单H5的门槛在于,无法将设计稿上的图文转成网页中的元素,以及为元素添加动画。还有面对繁多的手机分辨不能一一适配,无法为元素添加各种触发的问题。

1.8K50

浅曦 Vue 源码 - 43-patch 阶段 - 异步队列更新 & 性能优化

一个 tick 中多次修改同一个被渲染 watcher 依赖的响应式数据(或者修改多个不同的响应式数据)那么渲染 watcher 会被多次添加到 queue 队列中吗?...,用户 watcher 会在触发更新 imgFlag; 首先 forProp.a 变化,渲染 watcher 肯定会被 push 到 queue 队列,那么用户 watcher 执行时会不会再次把渲染...queue 中添加两次同一个渲染 watcher,同样我们假设渲染 watcher 的 watcher.id 为 5; <!...当渲染 watcher 真正触发重新求值的时候,已经是多次更新响应式数据的 tick 之后的下一个 tick 了,此时渲染 watcher 重新求值,获取到的就是上一个 tick 中响应式数据的最新值...this.imgFlag,这两个步骤都触发了各自的 setter,但是因为渲染 watcher 已经存在 queue 的原因,不会被重复添加渲染 watcher 最后还是只有一个; 四、总结 深入理解

50050

从Lisp到Vue、React再到 Qwit:响应式编程的发展历程

Flex 中,响应式有点麻烦,因为它容易创建更新风暴。更新风暴是指当单个属性变化触发许多其他属性(或模板)变化,从而触发更多属性变化,依此类推。有时,这会陷入无限循环。...脏检查通过浏览器执行任何异步工作读取模板中绑定的所有属性来工作。 <!...这意味着 Middle 和 Child 都需要在 state.count 改变重新渲染。我们失去了细粒度的响应性。理想情况下,只有 Count: 应该被更新。...响应性和渲染 让我们想象一个产品页面,有一个购买按钮和一个购物车。 在上面的示例中,我们有一个树形结构中的组件集合。用户可能采取的一种可能的操作是点击购买按钮,这需要更新购物车。...粗粒度响应式系统中,它是这样的: 我们必须找到 Buy 和 Cart 组件之间的共同根,因为状态很可能附加在那里。然后,更改状态,与该状态相关联的树必须重新渲染

1.6K20

一些前端框架的比较(上)——GWT、AngularJS 和 Backbone.js

上面,它总是知道请求从哪里来,找哪个 Model 要数据,最后又把数据送到哪个 View 上去渲染。...但是 Backbone.js 说了,它的 Controller 是 Router,那好吧……)写着写着,有一种只手遮天的感觉——什么东西它都知道,它都管,包括初始化、模板渲染、DOM 操纵、事件响应、绑定等等...对比 AngularJS 的通过 DOM 属性的方式来控制范围和绑定行为,Backbone.js 看起来更加容易理解, View 里面用 el 这个属性来建立和限定区域 DOM 树的联系。...但是需要写比 AngularJS 多得多的 JavaScript,尤其是其中的事件响应代码,还有模板渲染代码,比较多的时候,写起来并不愉快。...自由总有代价,它很多特性都是缺失的,除了上面说的双向绑定,还有缺少良好的模块之间的依赖管理工具,这些东西都需要在必要时候去寻找第三方的类库(比如 RequireJS)来完成,通常这一间和风险开销技术选型的时候需要特别考虑

1.7K10

剖析Vue原理&实现双向绑定MVVM

angular.js 是通过脏值检测的方式比对数据是否有变更,来决定是否更新视图,最简单的方式就是通过 setInterval() 定时轮询检测数据变动,当然Google不会这么low,angular只有指定的事件触发进入脏值检测...那么接下来就是实现Compile了 2、实现Compile compile主要做的事情是解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者...child); } return fragment; } }; compileElement方法将遍历所有节点及其子节点,进行扫描解析编译,调用对应的指令渲染函数进行数据渲染...监听数据、绑定更新函数的处理是compileUtil.bind()这个方法中,通过new Watcher()添加回调来接收数据变化的通知 至此,一个简单的Compile就完成了。...)里面添加自己 2、自身必须有一个update()方法 3、待属性变动dep.notice()通知,能调用自身的update()方法,并触发Compile中绑定的回调,则功成身退。

3.1K70

6种技术将使您成为理想的前端开发人员

Javascript用于Web应用程序上创建和控制动态内容。Jquery用于加速Javascript任务。所有前端都从这些技能开始。 但仅有这些是还不能够设计出引人入胜网站的。...Backbone.js由六个组件组成 - 模型,视图,集合,事件,路由器和同步。它还可以用于构建桌面和移动应用程序以及简单的网站。...相比之下,Backbone.js的主要缺点是速度慢,调试需要花费大量时间。总而言之,Backbone.js重量轻且易于使用。因此,它成为过去几年非常流行的框架。...除了这些高级框架之外,掌握基础知识,您应该学习以下框架。 5.CSS框架 Semantic UI,Foundation,Bootstrap,Pure,Skelton,这些都是最苛刻的CSS框架。...添加其中一个或一些以使前端开发更具创造性。 6. CSS预处理器 预处理器有助于加快CSS编码速度。预处理器为CSS添加了额外的功能,以保持CSS的可扩展性和易用性。

1.1K30

一些前端框架的比较(下)——Ember.js 和 React

Ember.js Ember.js 的 extend 的写法很类似于 JQuery 或者是 Backbone.js,创建 Application,然后它下面创建相应的 Model(Object)、Controller...我拿它不知不觉地和 Backbone.js 比较,最初还是因为 API 长得像的关系,后来才知道,其实这并不奇怪,因为核心开发人员 Tom Dale 说,灵感就是来自于 Cocoa、RoR 和 Backbone.js...说到状态,React 引入的状态机机制,即通过事件监听来更新状态(setState),从而自动调用 render 来渲染组件的方式,也实现了绑定。...传统的 MVC 架构中(左图),分层清晰,但是存在的一个缺陷是,如果有多个 view,它们都要和同一个 model 交互,之间的关系错综复杂,于是一致性关系就很难处理,每添加一个 view,就要给每一个交互的关系去增加一个逻辑去解决...对于 view 的更新难免会有大量的 rerender,但是是否一点点修改要把整个 component 全部渲染一遍?

2.1K20

有关网页渲染,每个前端开发者都该知道的那点事

这些改变通常由以下事件触发: DOM操作(元素添加、删除、修改或者元素顺序的改变); 内容变化,包括表单域内的文本改变; CSS属性的计算或改变; 添加或删除样式表; 更改“类”的属性; 浏览器窗口的操作...另一种优化技巧是,在运行几段JavaScript代码,浏览器会缓存这些改变,代码运行完毕后再将这些改变经一次通过加以应用。举个例子,下面这段代码只会触发一个reflow和repaint: ?...然而,如前所述,改变元素的属性会触发强制性的重排。如果我们在上面的代码块中加入一行代码,用来访问元素的属性,就会发生这种现象。 ? 其结果就是,重排发生了两次。...执行这一改变,处在DOM渲染树的位置越深越好(这还有助于将逻辑与表象脱离)。 尽量只给位置绝对或者固定的元素添加动画效果。...使用滚动禁用复杂的悬停动效(比如,添加一个额外的不悬停类)。读者可以阅读关于这个问题的[一篇文章](http://habrahabr.ru/post/204238/)。

1.3K80

Backbone.js

Backbone.js 是一个前端 MVC 框架,model 能够绑定键值对和自定义事件,集合具备可枚举方法的富 API,视图具备事件处理能力,并且可以通过 RESTful 的 JSON 接口和你已有的...“el” 属性就是浏览器创建的一个 DOM 对象的引用,是供 backbone 渲染的画布,每一个 view 都会有这样一个属性,如果不存在,backbone 就会自己定义一个空的 div 来作为 el...script> 然后模板+数据来生成结果: var template = _.template( $(“#search_template”).html(), variables ); 然后再把结果渲染到画布上...创建好所有的 router 之后,一定要调用一下 Backbone.history.start() 方法来 route 你的 URL。...Collection Collection 其实就是一组 Model 的有序集合

86520

前端一面react面试题指南_2023-03-01

添加事件this.store.subscribe(this.handleChange),实现页面交互 shouldComponentUpdate判断是否有避免进行渲染,提升页面性能,并得到nextState...组件 D 之前 集合(A,B,D)中,但集合变成新的集合(A,B)了,D 就需要被删除。...移动:组件D已经集合(A,B,C,D)里了,且集合更新,D没有发生更新,只是位置改变,如新集合(A,D,B,C),D第二个,无须像传统diff,让旧集合的第二个B和新集合的第二个D 比较,并且删除第二个位置的...setState ,就会触发一次额外的渲染,多调用了一次 render 函数,由于它是浏览器刷新屏幕前执行的,所以用户对此是没有感知的,但是我应当避免这样使用,这样会带来一定的性能问题,尽量是 constructor...注意: 添加 shouldComponentUpdate 方法,不建议使用深度相等检查(如使用 JSON.stringify()),因为深比较效率很低,可能会比重新渲染组件效率还低。

1.3K10
领券