从两个角度去讨论Backbone的写类方式
- Backbone内部的写类方式,Backbone自身的类如Model、Collection、View等是如何定义的
- Backbone外部的写类方式,如何使用Backbone提供的类来定义自己的类
一、Backbone内部的写类方式
Backbone提供给客户端程序员的类都是通过 构造函数+原型 的方式写的,Backbone.Model的代码大致如下
// 定义构造器 var Model = Backbone.Model = function(attributes, options) { // ... this.set(attrs, options); this.changed = {}; this.initialize.apply(this, arguments); }; // 扩展原型,往原型上添加了很多方法,如Events _.extend(Model.prototype, Events, { // ... });
这种写法很传统,Backbone.Collection / Backbone.View / Backbone.Router / Backbone.History 都是通过这种方式定义的。
二、Backbone的外部写类方式
说外部的写类方式,不得不提 extend 方法,该方法定义在Backbone.js的底部。不到30行代码,它是私有的,外部并不能访问。
也就是说,这个方法只在Backbone内部使用,为其它模块服务。
其实这个说法不严谨,虽然extend不能直接访问,但它通过仅一行代码
Model.extend = Collection.extend = Router.extend = View.extend = History.extend = extend;
转身变为以下方法
- Backbone.Model.extend
- Backbone.Collection.extend
- Backbone.View.extend
- Backbone.Router.extend
- Backbone.History.extend
这时,外部还是可以访问得到。
在一个闭包内,写一个私有的函数,然后把该函数赋值给多个类或类原型。这些写法并不少见,这样写节省了内存,函数实例其实只有一份。
此外,不要把这里的extend 和 _.extend 搞混了。_.extend是underscore提供的较底层的方法,用来Mixin对象。这里的extend则是用来写类。
介绍下extend
- 它接受两个参数,都是对象类型
- 它返回一个类(构造器,函数),怎么叫都行
- 第一个参数的所有属性、方法都会拷贝到类的原型上(实例对象上)
- 第二个参数的所有属性、方法都会拷贝的类上(类静态属性、方法)
- 第一个参数中如果有constructor属性,那么最后就返回它,否则返回内部提供的child
- 返回的类有个特殊属性 __super__。
上面的第六点,使用它很方便的取得父类原型,进而取到父类构造器,进而在子类中去调用父类,这类似于Java里的super关键字。
拿示例详细说说
1. 两个参数,都是对象类型,第一个扩展为原型方法,第二个扩展为类方法
var instanceObj = { name: '', getName: function() {}, setName: function(name) {} } var classObj = { trim: function(str) {}, mix: function() {} } // 生成一个新类CustomModel,它具有Backbone.Model的所有方法 var CustomModel = Backbone.Model.extend(instanceObj, classObj) // instanceObj属性都拷贝到了CustomModel.prototype 上 _.each(['name','getName', 'setName'], function(attr) { console.log(attr in CustomModel.prototype) }) // classObj属性都拷贝到了 CustomModel 上 _.each(['trim','mix'], function(attr) { console.log(attr in CustomModel) })
2. 参数中如果有constructor属性,那么最后就返回它,否则返回内部提供的child
这实际上告诉使用者可以自定义构造器,而不使用内部的child。
function MyConstructor(name, age) { this.name = name; this.age = age; } var CustomModel = Backbone.Model.extend({ constructor: MyConstructor, getName: function(){}, setName: function(){} }) var m1 = new CustomModel('John', 30) console.log(m1.constructor === MyConstructor) // true
3. 返回的类有个特殊属性 __super__,用它很方便的取得父类原型,进而取到父类构造器,最后在子类中去调用父类。
function Person(name, age) { this.name = name this.age = age } Person.extend = Backbone.Model.extend // 把Backbone的extend拿出来用,O(∩_∩)O~ function ManConstructor(name, age) { ManConstructor.__super__.constructor.call(this, name, age) // 调用父类构造器 this.gender = 'male' } var Man = Person.extend({ constructor: ManConstructor }) var man = new Man('John', 30) console.log(man) // ManConstructor { name="John", age=30, gender="male"}
总结下Backbone的写类方式
Backbone内部的写类方式是 构造函数+原型。外部写类则是通过extend,写类和继承同时存在。
1. 通过Model(View/Router等)的extend方法写类,产生的类直接继承了Model(View/Router等)
2. 如果写的类不是Backbone提供的类,那么可以象3那样,把extend方法拿出来
使用Backbone开发,多数时候都采用方式1,它强制要求把代码分为了几层,一些实用工具函数由underscore提供。
如果是浏览器端开发,DOM及HTTP通讯操作一般由jQuery或zepto等提供。你写的代码几乎都集中在业务处理,无非就是模型(Model)、集合(Collection)、视图(View)、路由(Router)、历史管理(History)。
相关:
相关推荐
在"用Backbone.js写的小项目"中,我们可以深入理解如何利用Backbone.js来实现一个基础的增删改查(CRUD)功能。 1. **Model**: Backbone.js的核心是Model,它代表了应用中的数据模型。在这个小项目中,每个Model...
5. **Events**:事件系统是Backbone的一个重要特性,它允许任何对象(包括Model、View、Collection)之间通过发布/订阅的方式来通信,增强了代码的解耦性。 **二、Backbone的使用** 在实际项目中,我们可以按照...
Backbone.Collection是一个保存模型的集合类,提供了许多工具方法,例如增加元素、删除元素、获取长度、排序、比较等。集合类可以从服务器端获取初始值,并可以对每个模型进行增加、删除等操作。 Views(视图) ...
在"用Backbone.js写的增删改查列表"这个项目中,我们将深入探讨如何利用Backbone.js来创建一个基本的数据管理应用。 首先,Backbone.js的核心是Model,它是应用程序的数据模型,负责存储和管理数据。在这个增删改查...
这个框架的核心理念是帮助开发者维护数据和界面之间的同步,同时提供了一种组织代码的方式,使得大型应用的管理更为有序。 在Backbone中,Model是数据的容器,它封装了业务逻辑和数据状态。你可以将服务器端的数据...
Backbone.js的核心在于提供了一种结构化的前端开发方式,避免了仅依赖jQuery或MooTools等库时可能出现的代码混乱和维护困难。 【标签】"backbone"直接指出了讨论的主题。在【部分内容】中,首先提到Backbone.js的...
在IT行业中,Backbone.js是一个非常著名的JavaScript库,它主要用于构建客户端的Web应用程序。这个"Java演示Backbone基本用法"的主题,虽然标题中有"Java",但实际上Backbone.js是与JavaScript紧密相关的,而非Java...
, 如果你想使用单页应用程序(spa)模型创建前端站点,本书向你展示了如何使用backbone.js完成这类工作。你将学会使用backbone自有风格的模型-视图-控制器(mvc)架构,来创建结构化的javascript应用程序。, ...
**标题解析:** "backbone整合require例子" 这个标题表明我们将讨论如何将Backbone.js框架与RequireJS模块加载器结合使用。Backbone.js是一个轻量级的JavaScript库,用于构建可维护的前端应用程序,而RequireJS则是...
它涵盖了Backbone的主要组件和它们之间的协作方式,通过实践这些示例,开发者可以更好地理解和应用这个强大的前端框架,提升构建复杂Web应用的能力。同时,配合官方文档,可以深入理解每个功能的细节,为实际开发...
然后在JavaScript中,我们通过Backbone.View.extend()创建一个视图类SearchView,并在其中定义initialize()方法和render()方法。initialize()方法中调用render()来渲染视图,render()方法使用jQuery将模板内容加载到...
, 如果你想使用单页应用程序(spa)模型创建前端站点,本书向你展示了如何使用backbone.js完成这类工作。你将学会使用backbone自有风格的模型-视图-控制器(mvc)架构,来创建结构化的javascript应用程序。, ...
Backbone_API_frame是一个基于Backbone.js和ExtJS开发的API框架,主要目的是为了提供一个高效、结构化的Web应用开发解决方案。这个框架结合了Backbone.js的模型-视图-控制器(MVC)架构和ExtJS的组件化能力,旨在...
集合(Collections)是一组模型的容器,它们拥有自己的方法,如排序、过滤和检索,同时集合并提供了一种与服务器通信的方式,用于批量操作模型。 路由器(Routers)在Backbone.js中用于实现客户端路由,它可以监听...
Backbone.js是一个轻量级的JavaScript库,专为构建可维护和可扩展的单页应用程序(SPA)设计。它的核心理念是提供模型(Model)、视图(View)和集合(Collection)等概念,帮助开发者实现数据和界面的解耦,增强代码的组织...
在实际项目中,你可以根据需求选择更多的Backbone插件,如Backbone.sync替代默认的Ajax通信方式,或者使用Backbone.Radio进行事件广播等。总之,Backbone提供了一套强大的框架,帮助开发者构建结构清晰、易于维护的...
Backbone.js是一款轻量级的JavaScript库,专为构建丰富的Web应用程序而设计。它通过提供模型(Models)、视图(Views)、集合(Collections)和路由器(Routers)等核心概念,帮助开发者组织代码并实现MVC(Model-...
- **验证提示**:Bootstrap的警告或错误类(如`.alert.alert-danger`)可以方便地在用户输入无效时显示错误信息。 - **响应式设计**:Bootstrap的栅格系统(Grid System)允许开发者轻松创建响应式布局,确保登录...
总之,"require+backbone结合开发"是一种高效组织和管理Backbone应用的方式,它利用RequireJS的模块化特性,解决了JavaScript的依赖注入问题,使得Backbone.js的组件可以有序、独立地工作。这种方式提高了代码的...