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

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

本文将尝试用一个重构实例来抛砖引玉,讲解如何对其应用较新的 jest 测试框架,并用 ES6 class 等新手段升级 Backbone.View 视图组件和改善页面结构,希望能对类似项目的改善起到开启思路的作用...在实际的项目中,我们采用了 ES6 语法和 ESM 模块规范来编写源文件,并借助 babel 将其转译为 UMD 模块;最后通过 Require.js 提供的优化工具 r.js 来打包,并由 Require.js...Backbone 中的请求,包括 Backbone.sync / model.fetch() 等, 本质上还是调用的 jQuery 中的 $.ajax 方法(默认情况下),也就是传统的 xhr 方式,使用...要对 view 进行测试,就得将其拆分重构为功能明确、便于复用的各种小型组件。...$el.find('.multi').length).toEqual(0); }); 对方法调用的测试 自然还是用 sinon 来做: it('应正确响应事件回调并加载子模板', function()

3.5K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    4、backbone的collection实例

    collection.each(function(book){ alert(book.get('title')); }); },error:function(){ alert('error'); }}); 其中也定义了两个接受返回值的方法...,具体含义我想很容易理解,返回正确格式的数据,就会调用success方法,错误格式的数据就会调用error方法,当然error方法也看添加和success方法一样的形参。...对应的BookShelf的返回格式如下:[{'title':'book1'},{'title':'book2'}.....] 3、reset方法 这个方法的时候是要和上面的fetch进行配合的,collection...在fetch到数据之后,会调用reset方法,所以你需要在collection中定义reset方法或者是绑定reset方法。...}); } 绑定的步骤要在fetch之前进行。 下面给出关于collection的完整代码,需要服务器端支持才行,服务器端的搭建在后面会写到。 .. code:: html <!

    45620

    Backbone.js应用基础

    前言:   Backbone.js是一款JavaScript MVC应用框架,强制依赖于一个实用型js库underscore.js,非强制依赖于jquery;其主要组件有模型,视图,集合,路由;与后台的交互主要是通过...Restful JSON 进行数据传输; 基础Backbone.js知识:   1、引入js文件:如果依赖于第三方类库如jquery,则最好先引入;之后引入underscore.js 这是必须引入且在引入...backbone.js之前,其引入文档结构如下: Backbone <script src="3rd/jquery1.9.1...();   4、与服务器交互的模型对象:    调用模型对象的save方法是发送POST新建或PUT修改请求;fetch是调用GET方法;destroy方法是使用delete...请求方式向服务器发送对象的id,服务器做删除记录操作;    模型对象集合提供了fetch和create两个方法与服务器进行交互;create方法与以上save方法类似;

    66030

    3、backbone中的model实例

    首先需要为对象定义一个url属性,调用save方法时会post对象的所有属性到server端。...还是post来进行对应的操作。...man1.fetch(); //第二种情况,在fetch中加入参数,如下: man1.fetch({url:'/getmans/'}); //这样,就会发送get请求到/getmans...这里还要补充一点,就是关于服务器的异步操作都是通过Backbone.sync这个方法来完成的,调用这个方法的时候会自动的传递一个参数过去,根据参数向服务器端发送对应的请求。...比如你save,backbone会判断你的这个对象是不是新的,如果是新创建的则参数为create,如果是已存在的对象只是进行了改变,那么参数就为update,如果你调用fetch方法,那参数就是read

    70310

    BackboneJs入门学习—Model实践(2)

    默认set时不进行验证 man.set({name:''},{'validate':true});//No2 但手动触发验证set时会触发 man.save();//No3. save时触发验证,根据验证规则弹出错误提示...,注:save()会将改变的属性发送到服务器, 将立即触发一个"change"事件 }); 二、在于服务器进行交互时,对象的保存和获取 首先,在讲解示例前,需要明白一下几点: 在和服务器(server...,下同)交互时,需要为对象定义一个url属性; 调用save()方法,会post对象的所有属性到server; 调用fetch()方法,会发送get请求到server端; 接受的数据和发送的数据均为...([options]),如下所示: var man1=new Man; //fetch有带参数和不带参数的方式,写法上不同 man1.fetch(); //No1.不带参数的方式,会发送get请求到...model的url中 ,在server端可通过判断是get还是post方式,来进行对应的操作 man1.fetch({url:'/getmans/'}); //No2.带参数的方式,会发送get请求到

    15920

    BackboneJs入门学习—Sync

    BackboneJs入门学习之异步操作 前一篇中,我们介绍了Backbone中对Model对象的相关操作,了解了对象与server的交互,认识了fetch()的用法,url与urlRoot的区别,以及为对象添加相应的验证规则...在Backbone的官方文档中,对Sync是这样解释的: 使用 Backbone.sync 可以将一个模型的状态持续发送到服务器。 也可以自定义其他行为对Sync原有行为进行覆盖。...在Backbone中,Sync默认的异步方式,是使用Ajax的方式。...当调用Sync时,会自动传递一个参数,根据参数向服务器(Server)发送对应的请求; 例如: 当使用 save() 时,Backbone会判断这个对象是否是新的,是新的,则create就是要传递的参数...;不是新的,则update就是要传递的参数;由此可知,fetch()时,参数为read ; destory()时,参数为delete; 其实,以上的四种参数,即CRUD,对应的请求类型为Post、Get

    18110

    所历前端“姿势”更替记(其一)

    +key)); truetrue}); true} } 在页面请求得数据后,调用自定义方法像这样:system.addData(data); 在涉及到时间响应时候,现在看来,那时采取的办法也挺原始了:...阶段二:jQuery+Backbone+Underscore 大概在一两个月后,各平台才陆续迁移至新的机制: jQuery+Backbone+Underscore;现在看来,选择真是很重要;那时如何没有采用...如何优雅地使用Sublime Text;人谁想折腾呢?...阶段三:jQuery+Backbone+Underscore+RequireJs 在这个阶段有引入RequireJs,也是经历近两个多月才陆续迁移的;本身这倒可不列为一阶段,不过前端项目开发结构大改:前端后完全分离...(合并也不容易),造成十二分不爽后,才去研究下了,此时得知Gulp;为此学会gulp之后,有改善了整个流程:以gulp-tlp2mod来将tpl转化为js并借助gulp-concat进行合并打包;如此Sublime

    84460

    2.5 Git 基础 - 远程仓库的使用

    添加远程仓库 我在之前的章节中已经提到并展示了如何添加远程仓库的示例,不过这里将告诉你如何明确地做到这一点。...执行完成后,你将会拥有那个远程仓库中所有分支的引用,可以随时合并或查看。 如果你使用 clone 命令克隆了一个仓库,命令会自动将其添加为远程仓库并默认以 “origin” 为简写。...当准备好时你必须手动将其合并入你的工作。...运行 git pull 通常会从最初克隆的服务器上抓取数据并自动尝试合并到当前所在的分支。 推送到远程仓库 当你想分享你的项目时,必须将其推送到上游。...你必须先将他们的工作拉取下来并将其合并进你的工作后才能推送。 阅读 Git 分支 了解如何推送到远程仓库服务器的详细信息。

    64930

    git 那些事儿 —— 基于 Learn Git Branching

    多个 commit 如何合并成一条提交?如何定位分支上的一个提交(以便对比、回退、拉取新分支)?在一个分支上处理多个任务如何切换?如何调整一条分支上多个 commit 的顺序?...新建并切换分支 git branch bugFix git checkout bugFix git checkout -b bugFix 以上两个等价,都是在当前提交上创建分支并切换到新分支上准备工作...bugFix 在 git 中合并两个分支时会产生一个特殊的提交记录,它有两个父节点。...可以看到用户在这个界面通过调整 action 关键字来选择 commit 并调整它们的顺序,甚至可以对 commit 进行合并处理,合并方式也是比较丰富的,可以保留每条 commit 的提交信息,也可以忽略它们...beyondcompare 传递参数的顺序 早些时候一般使用 git external,首先准备一个 shell 脚本(extdiff.sh),它固定接收 6 个参数,将其中两个传递给要调用的 diff

    2K20

    8、backbone实例todos分析(二)view的应用

    在上一篇文章中我们把todos这个实例的数据模型进行了简单的分析, 有关于数据模型的操作也都知道了。接着我们来看剩下的两个view的模型,以及它们对页面的操作。...按照自己的想法,一个页面上的操作,直接用一个view来搞定不就行了吗,为何要用两个呢?...我觉得这里面的精华就是,将数据的展示和对数据的操作进行分离,也就是现在代码里面TodoView和AppView。...前者的作用是展示数据模型中的数据到界面,并对数据本身进行管理;后者是对整体的一个控制,如所有数据的显示(调用TodoView),添加一个任务、统计多少完成任务等。...= 13) return; Todos.create(this.newAttributes()); //创建一个对象之后会在backbone中动态调用Todos的add方法,该方法已绑定addOne

    57620

    【Web前端】Promise的使用

    除了基本的状态管理,Promise还提供了链式调用的能力,使得开发者可以以更加清晰和可读的方式进行异步操作的组合。...通过调用 ​​resolve​​ 来标记Promise对象状态为已兑现(fulfilled),而通过调用 ​​reject​​​ 则将其标记为已拒绝(rejected)。...链式调用 下面示例中,展示了如何使用 Promise 的链式调用来依次请求两个不同的数据资源: fetch('https://api.example.com/data1') .then(response...在第一个 ​​.then()​​ 处理程序中,我们输出第一个数据并返回另一个 ​​fetch()​​ 请求,以发起第二个异步操作。...使用 ​​finally()​​ 下面的示例展示了如何使用 ​​finally()​​ 方法来进行清理工作,无论 Promise 是成功还是失败,​​finally()​​​ 中的回调都会被执行: fetch

    6800

    Git 中文参考(三)

    更确切地说, git pull 使用给定参数运行 git fetch 并调用 git merge 将检索到的分支头合并到当前分支中。...--edit -e --no-edit 在提交成功的机械合并之前调用编辑器以进一步编辑自动生成的合并消息,以便用户可以解释并证明合并。...recursive 这只能使用 3 向合并算法解析两个磁头。当有多个可用于 3 向合并的共同祖先时,它会创建共同祖先的合并树,并将其用作 3 向合并的参考树。...subtree[=] 此选项是 _ 子树 _ 策略的更高级形式,其中策略猜测两个树在合并时必须如何移位以相互匹配。相反,指定的路径是前缀(或从头开始剥离),以使两个树的形状匹配。...使用三向合并的策略(包括默认的 _ 递归 _),如果在两个分支上进行了更改,但稍后在其中一个分支上进行了更改,则该更改将出现在合并结果中;有些人发现这种行为令人困惑。

    19910

    Go singleflight:防缓存击穿利器

    设置互斥锁:为了防止缓存失效时所有请求同时查询数据库,可以采用锁机制确保仅有一个请求查询数据库并更新缓存,而其他请求则在缓存更新后再进行访问。...Do 方法:Group 结构体提供了 Do 方法,这是实现合并请求的主要方法,该方法接收两个参数:一个是字符串 key(用于标识请求资源),另一个是函数 fn,用来执行实际的任务。...在调用 Do 方法时,如果已经有一个相同 key 的请求正在执行,那么 Do 方法会等待这个请求完成并共享结果,否则执行 fn 函数,然后返回结果。...Do 方法有三个返回值,前两个返回值是 fn 函数的返回值,类型分别为 interface{} 和 error,最后一个返回值是一个 bool 类型,表示 Do 方法的返回结果是否被多个调用共享。...一致性:对于相同的请求,无论何时调用,生成的 key 应该保持一致,以便 Group 正确地合并相同的请求,防止非预期的错误。

    47244

    Git实用技巧31招

    新建分支并切换到该分支上 $ git checkout -b 分支A 该语句是下面两句的简写: $ git branch 分支A $ git checkout 分支A 15.合并目标分支(将目标分支合并到当前分支上...如果你想使用图形化工具来解决冲突,你可以运行 git mergetool,该命令会为你启动一个合适的可视化合并工具,并带领你一步一步解决这些冲突. 18. git branch 命令如何使用?...执行完成后,你将会拥有那个远程仓库中所有分支的引用,可以随时合并或查看。 必须注意 git fetch 命令只会将数据下载到你的本地仓库——它并不会自动合并或修改你当前的工作。...当准备好时你必须手动将其合并入你的工作 用 git pull 命令来自动抓取后合并该远程分支到当前分支 $ git pull 22.如何推送到远程仓库?...如何统计最新的领先与落后数字? 使用命令 git fetch --all; git branch -vv 31. 如何删除远程分支?

    74020
    领券