backbone的模块化开发,需要引入测试流程保证代码的质量,
同时,若为敏捷开发,单元测试必不可少。
在此我们项目使用backbone开发后,引入的是karma和jasmine
进行单元测试的,我们以此为例来说明backbone的单元
测试方法。
model和collection的测试较为简单,网上有较多的方法,jasmine格式的
测试用例如下:
describe('Todo model', function() {
describe('when instantiated', function() {
it('should exhibit attributes', function() {
var todo = new Todo({
title: 'Rake leaves'
});
expect(todo.get('title'))
.toEqual('Rake leaves');
});
});
});
view层的测试:
view层的测试需要先初始化一个view,将view实例加载到
测试环境,测试环境实际上是个单页的js应用,需要一定的
初始化。其次,测试view层的事件和方法,以及界面元素。
加载到测试环境有两种方式,一种是直接用View类初始化,
另一种是通过路由加载。
还要注意view的生命周期,view视图加载到界面上后
如果不使用view.remove方法,则view的事件一直有效,
会影响其它view的测试。
测试用例:
同时,若为敏捷开发,单元测试必不可少。
在此我们项目使用backbone开发后,引入的是karma和jasmine
进行单元测试的,我们以此为例来说明backbone的单元
测试方法。
model和collection的测试较为简单,网上有较多的方法,jasmine格式的
测试用例如下:
describe('Todo model', function() {
describe('when instantiated', function() {
it('should exhibit attributes', function() {
var todo = new Todo({
title: 'Rake leaves'
});
expect(todo.get('title'))
.toEqual('Rake leaves');
});
});
});
view层的测试:
view层的测试需要先初始化一个view,将view实例加载到
测试环境,测试环境实际上是个单页的js应用,需要一定的
初始化。其次,测试view层的事件和方法,以及界面元素。
加载到测试环境有两种方式,一种是直接用View类初始化,
另一种是通过路由加载。
还要注意view的生命周期,view视图加载到界面上后
如果不使用view.remove方法,则view的事件一直有效,
会影响其它view的测试。
var View = Backbone.View.extend({ tagName:'div', template:_.template('<form><input type="hidden" id="uid" value="1"/>\n\ <input name="user" type="text">\n\ <input type="radio" name="sex">\n\ <input type="radio" name="sex" value="1" checked="checked">\n\ <button type="button">测试</button>\n\ </form>'), events:{ 'click button':'btnClk' }, initialize:function(){ }, render:function(){ this.$el.html(this.template()); return this; }, getUser:function(){ return {name:'小王'}; }, btnClk:function(){ console.log('btn clicked'); } });
测试用例:
describe('视图测试',function(){ beforeEach(function(){ this.view = new View(); this.view.render(); }); afterEach(function(){ this.view.remove(); }); it('视图加载测试',function(){ expect(this.view).not.toBeUndefined(); //应该包含的元素 var myElement = this.view.$el.find('#uid').size(); expect(myElement).toBe(1); var input = this.view.$el.find('input[type="text"][name="user"]').size(); expect(input).toBe(1); var radio = this.view.$el.find('input[type="radio"][name="sex"]:checked').size(); expect(radio).toBe(1); }); it('视图静态方法测试',function(){ expect(this.view.getUser).not.toBeUndefined(); expect(this.view.getUser(1).name).not.toBeUndefined(); }); it('视图事件测试',function(){ spyOn(this.view,'btnClk').andCallThrough(); this.view.delegateEvents(); this.view.$el.find('button').trigger('click'); expect(this.view.btnClk).toHaveBeenCalled(); }); });
发表评论
-
解决eclipse在修改js卡顿现象
2018-02-09 15:49 1360新版eclipse编辑含有javascript内容的jsp时, ... -
chosen 数据的动态更新
2016-09-08 15:28 1766chosen是个不错的复合下拉组件,缺点是文档较少 源码在gi ... -
优秀的弹层组件
2016-04-20 18:19 659http://layer.layui.com/ -
googleapis.com域名访问慢的解决办法
2016-04-13 12:09 9681、安装火狐 2、安装插件ReplaceGoogleCDN -
国内常用前端公共库CDN服务
2015-11-15 14:00 943BAIDU http://cdn.code.baidu.co ... -
jquery validate 1.14
2015-10-12 20:14 794<!DOCTYPE html PUB ... -
jquery 事件处理handler函数的参数
2015-02-08 23:22 2582jquery 事件处理handler函 ... -
jquery tr rowindex
2014-11-30 13:42 902var tr = $(this).parents('tr' ... -
jqgrid please select row warning
2014-11-23 19:42 1722引入ui.jqgrid.css即可解决 -
改变多个jquery.ready的默认顺序
2014-11-23 15:37 1293$(document).ready 这个函数的解释: 引用 D ... -
javascript 错误的继承方式
2014-11-02 23:02 723var parent = {t:1,m:2,} pare ... -
JS图片格式验证
2014-07-03 16:48 902function pic(file){ var r ... -
更改underscorejs默认的匹配符
2014-06-14 11:51 845/** 修改underscore.js默认的< ... -
uglifyjs批量压缩js
2014-06-13 16:34 2426jquery官方使用uglifyjs进行压缩的,压缩比较高 ... -
html5 canvas作的手写板【兼容手机】
2014-05-21 15:56 5276<!DOCTYPE html> <ht ... -
由正则表达式html或xml标签配对说起【括号编组和正负向预查】
2014-05-15 14:17 2472经常会查找xml或HTM ... -
netbeans和karma进行单元测试二【jasmine入门】
2014-05-20 15:43 1689karma配好之后,默认使用的是jasmine作为测试框架: ... -
javascript的代理和切面
2014-05-15 13:39 738Java里有面向切面的实现方式,可以监控包、对象、函数 ... -
backbone.js路由Router的使用
2014-05-09 11:33 1581路由的使用很简单,路由的转向 router.navigate( ... -
backbone.js的View里的事件重复调用
2014-05-09 11:18 1991backbone的一个视图被初始化多次后,发现一个按钮事 ...
相关推荐
Backbone.js的View视图主要负责绑定和处理DOM事件,它还可以用来反映你应用程序中Model的模样。Backbone.js的视图不仅处理数据的显示,还要响应用户的交互事件。 在Backbone.js中,视图组件可以通过两种方式定义:...
它通过提供模型(Models)、视图(Views)、集合(Collections)和路由器(Routers)等核心概念,帮助开发者组织代码并实现MVC(Model-View-Controller)架构。1.1.2是Backbone.js的一个稳定版本,提供了许多改进和...
- **视图文件(View.js)**:实现Backbone.View类,包含视图的事件绑定、DOM操作和模板渲染。 - **路由器文件(Router.js)**:实现Backbone.Router类,定义路由规则并处理导航事件。 - **其他辅助文件**:可能包含...
Backbone.js是一款轻量级的JavaScript库,专为构建可维护性和结构化的Web应用而设计。它主要关注数据模型的管理、视图的渲染以及URL路由,为前端开发提供了强大的框架支持。本资源是关于"Backbone.js实战"的电子书,...
Backbone.js是一款轻量级的JavaScript库,专为构建复杂的Web应用而设计。它通过提供模型、视图、集合和路由器等概念,帮助开发者更好地组织和管理代码,实现MVC(Model-View-Controller)模式在前端的落地。陶国荣的...
Backbone.js是一个轻量级的JavaScript库,专为构建可维护和模块化的Web应用而设计。它基于MVC(Model-View-Controller)模式,帮助开发者组织和管理前端代码结构,使得复杂的应用程序更容易理解和扩展。在“Backbone...
在JavaScript的Backbone.js框架中,View视图扮演着至关重要的角色,它是连接应用程序逻辑与用户界面的关键。View主要用于响应用户交互,管理DOM元素,并与Model进行数据同步。以下是对Backbone.js View视图的详细...
在JavaScript的Backbone.js框架中,View视图是构建用户界面的关键组件,它负责与DOM交互,呈现数据模型(Model)的状态,并响应用户的交互。在本文中,我们将深入理解Backbone.View的工作原理以及如何利用它来创建...
Backbone.js 和 Underscore.js 是两个在JavaScript开发中广泛使用的库,它们为构建复杂的Web应用程序提供了强大的工具。这两个库都是基于jQuery库,其中jQuery-1.10.2.js是jQuery的一个版本,它为DOM操作、事件处理...
5. **测试**:由于Backbone.js应用通常包含大量的JavaScript代码,使用测试工具如Jasmine或Mocha进行单元测试和集成测试至关重要。 **文件名称分析** "Developing Backbone.js Applications -.htm"和"Developing ...
在Backbone.js中,模型(Model)用于管理数据和业务逻辑,视图(View)负责用户界面的更新,而控制器(Router)则处理应用的路由和导航。 标题中的"backbone.js.zip"表明这是一个包含Backbone.js库的压缩文件,可能...
Backbone.js是一款轻量级的JavaScript库,它引入了MVC(Model-View-Controller)设计模式,使得前端开发更加有组织和结构化。在Backbone.js中,View是负责处理DOM交互和用户事件的核心组件。以下是对Backbone.js框架...
总结起来,Backbone.Model和Backbone.View在Backbone.js中扮演了关键角色,它们协同工作,使开发者能更好地组织和管理JavaScript应用的结构,实现数据和视图的解耦,提高代码的可维护性。通过理解并熟练运用这两个...
Backbone.js是基于JavaScript的一种前端MVC框架,它的设计理念遵循了传统的模型-视图-控制器(Model-View-Controller)结构。相较于Angular.js等其他前端框架,Backbone.js显得更加轻巧,它专注于提供一组基础的工具...
8. **模块化和组织结构**: 为了保持代码的清晰和可维护性,Backbone.js项目通常会采用模块化的方式组织代码,每个模块对应一个单独的JavaScript文件,比如Model、View、Router等。这样的组织结构使得代码更容易理解...
Backbone.js是一款轻量级的JavaScript库,专为构建可扩展的、结构化的Web应用而设计。它提供了模型-视图-控制器(MVC)架构,帮助开发者在处理复杂的数据和用户交互时保持代码的组织性和可维护性。在"backbone.js ...
**Backbone.js** 是一款用于简化JavaScript应用结构的开源库,它基于MVC(Model-View-Controller)设计模式,旨在帮助开发者更好地组织代码,提高代码的可读性和可维护性。Backbone.js的一个重要特点是其轻量级的...