Backbone的写类方式
从两个角度去讨论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 = namethis.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)。
相关:
JavaScript的写类方式
JavaScript的继承方式
Backbone的写类方式相关推荐
- JavaScript的写类方式(4)——转
转自:http://www.cnblogs.com/snandy/archive/2011/03/07/1973241.html 工具函数如下 01 /** 02 * $class 写类工具函数之三 ...
- JavaScript中实现私有属性的写类方式(2)
上一篇写了个工具函数$class,这篇再完善以下.实现以下功能 1,继承 2,子类继承父类时,不继承父类的私有属性 /*** @param {String} className* @param {St ...
- 在JavaScript里写类层次结构?别那么做!
从理论上讲,JavaScript并没有类.在实践中,下面的代码片段被广泛认为是JavaScript"类"的一个例子: 1 2 3 4 5 6 7 8 9 10 11 12 13 1 ...
- (LINQ 学习系列)(6)Linq教程实例: 使用自写类代码来访问数据
1. 自定义一个和数据表相对应的类.例如建议StudentClass.cs /** * meetweb@sohu.com * Modify By 2012-3 ...
- update更新excel如何指定列为memo_Excel也能设计回写类报表
Excel也能设计回写类报表?没错啦,今天给大家介绍一个中国式报表软件--Smartbi企业报表软件(简称Smartbi Insight). Smartbi企业报表软件(简称Smartbi Insig ...
- python简介怎么写-python中如何写类
类的定义 Python中,定义类是通过class关键字,例如我们定义一个存储学生信息的类: class Student(object): pass class后面紧接着是类名,即Student,类名通 ...
- 【Java多线程】实现Runnable接口方式 / 继承Thread类方式;使用synchronized锁实现线程安全;线程安全的懒汉式单例模式;死锁问题示例
Thread 的生命周期 一.实现Runnable接口方式 1.在 run 方法中使用 synchronized 块 /*** 例子:创建三个窗口卖票,总票数为100张.使用实现Runnable接口的 ...
- 尽量使用写文本方式存储数据(pandas 和 file write效率对比)
对比:使用 pandas 存储数据 VS 使用写文本 方式存储数据 import pandas as pd import time def pandasWrite():t0 = time.time() ...
- Dubbo(八)使用配置类方式实现服务提供者消费者dubbo配置
本文章基于改dubbo系列前两篇文章中项目进行调整修改 Dubbo(六)使用SpringBoot搭建dubbo服务提供者工程 Dubbo(七)使用SpringBoot搭建dubbo消费者工程 主要调整 ...
最新文章
- 剑指offer:把数组排成最小的数
- Android--获取高清的app图标
- slickgrid 中ajax,slickgrid.js 一种高性能web数据表格组件的探讨
- power design教程
- go怎么用改变c语言程序位置,Go与C语言的互操作
- 脚本两则--用于快速部署HADOOP,SPARK这些(特别是VM虚拟机模板部署出来的)。。...
- Ghost安装之后,键盘出现字符出现乱码
- 【软件工程】第一次阅读作业
- 【语音处理】基于matlab GUI语音信号处理与滤波【含Matlab源码 1663期】
- python笔记-爬取豆瓣Top250排行
- 在pycharm内给自己的代码设置签名,附加时间
- 阅读笔记-HTTP返回状态码
- 浙大版《C语言程序设计》第四版(何钦铭颜晖) 第12章 文件 课后习题答案
- wlan网页登录认证原理
- 等额本金计算公式解析
- DEAP Example: One Max Problem
- JTAG,PLL ,ICE
- 服务器管理口安装系统,管理口安装服务器操作系统
- 192.168.2.0/24后面的/24表示什么意思
- 天津师范大学计算机专业排名,天津最好的10所大学公布:天津师范大学第三,各校就业率相差较大...
热门文章
- Github的创建及使用
- 除了缺少点创意,GPT-3写出了及格的大学毕业论文,只需20分钟
- 第一篇学术演讲准备两个月,去了谷歌却做不了深度学习,听Facebook田渊栋谈人生挑战与选择...
- 想不到,那些让我半夜偷偷收藏的沙雕表情包,竟是出自 AI 之手
- 女友让我破解植物大战僵尸!我干脆撸了一款一样的....翻身舔狗把歌唱呀
- 为什么阿里巴巴这一次能扛得起 11 亿的流量?
- 【免费福利】零AI基础,如何搭建聊天机器人:技术架构剖析
- 自然语言处理(NLP)之词义消歧(WSD)的简介与实现
- 爬虫之xml和html的区别
- ida 调试中call stack如何打开|修改数值