从两个角度去讨论Backbone的写类方式

  1. Backbone内部的写类方式,Backbone自身的类如Model、Collection、View等是如何定义的
  2. 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

  1. 它接受两个参数,都是对象类型
  2. 它返回一个类(构造器,函数),怎么叫都行
  3. 第一个参数的所有属性、方法都会拷贝到类的原型上(实例对象上)
  4. 第二个参数的所有属性、方法都会拷贝的类上(类静态属性、方法)
  5. 第一个参数中如果有constructor属性,那么最后就返回它,否则返回内部提供的child
  6. 返回的类有个特殊属性 __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的写类方式相关推荐

  1. JavaScript的写类方式(4)——转

    转自:http://www.cnblogs.com/snandy/archive/2011/03/07/1973241.html 工具函数如下 01 /** 02  * $class 写类工具函数之三 ...

  2. JavaScript中实现私有属性的写类方式(2)

    上一篇写了个工具函数$class,这篇再完善以下.实现以下功能 1,继承 2,子类继承父类时,不继承父类的私有属性 /*** @param {String} className* @param {St ...

  3. 在JavaScript里写类层次结构?别那么做!

    从理论上讲,JavaScript并没有类.在实践中,下面的代码片段被广泛认为是JavaScript"类"的一个例子: 1 2 3 4 5 6 7 8 9 10 11 12 13 1 ...

  4. (LINQ 学习系列)(6)Linq教程实例: 使用自写类代码来访问数据

    1.    自定义一个和数据表相对应的类.例如建议StudentClass.cs     /**     *  meetweb@sohu.com       *  Modify By 2012-3   ...

  5. update更新excel如何指定列为memo_Excel也能设计回写类报表

    Excel也能设计回写类报表?没错啦,今天给大家介绍一个中国式报表软件--Smartbi企业报表软件(简称Smartbi Insight). Smartbi企业报表软件(简称Smartbi Insig ...

  6. python简介怎么写-python中如何写类

    类的定义 Python中,定义类是通过class关键字,例如我们定义一个存储学生信息的类: class Student(object): pass class后面紧接着是类名,即Student,类名通 ...

  7. 【Java多线程】实现Runnable接口方式 / 继承Thread类方式;使用synchronized锁实现线程安全;线程安全的懒汉式单例模式;死锁问题示例

    Thread 的生命周期 一.实现Runnable接口方式 1.在 run 方法中使用 synchronized 块 /*** 例子:创建三个窗口卖票,总票数为100张.使用实现Runnable接口的 ...

  8. 尽量使用写文本方式存储数据(pandas 和 file write效率对比)

    对比:使用 pandas 存储数据 VS 使用写文本 方式存储数据 import pandas as pd import time def pandasWrite():t0 = time.time() ...

  9. Dubbo(八)使用配置类方式实现服务提供者消费者dubbo配置

    本文章基于改dubbo系列前两篇文章中项目进行调整修改 Dubbo(六)使用SpringBoot搭建dubbo服务提供者工程 Dubbo(七)使用SpringBoot搭建dubbo消费者工程 主要调整 ...

最新文章

  1. 剑指offer:把数组排成最小的数
  2. Android--获取高清的app图标
  3. slickgrid 中ajax,slickgrid.js 一种高性能web数据表格组件的探讨
  4. power design教程
  5. go怎么用改变c语言程序位置,Go与C语言的互操作
  6. 脚本两则--用于快速部署HADOOP,SPARK这些(特别是VM虚拟机模板部署出来的)。。...
  7. Ghost安装之后,键盘出现字符出现乱码
  8. 【软件工程】第一次阅读作业
  9. 【语音处理】基于matlab GUI语音信号处理与滤波【含Matlab源码 1663期】
  10. python笔记-爬取豆瓣Top250排行
  11. 在pycharm内给自己的代码设置签名,附加时间
  12. 阅读笔记-HTTP返回状态码
  13. 浙大版《C语言程序设计》第四版(何钦铭颜晖) 第12章 文件 课后习题答案
  14. wlan网页登录认证原理
  15. 等额本金计算公式解析
  16. DEAP Example: One Max Problem
  17. JTAG,PLL ,ICE
  18. 服务器管理口安装系统,管理口安装服务器操作系统
  19. 192.168.2.0/24后面的/24表示什么意思
  20. 天津师范大学计算机专业排名,天津最好的10所大学公布:天津师范大学第三,各校就业率相差较大...

热门文章

  1. Github的创建及使用
  2. 除了缺少点创意,GPT-3写出了及格的大学毕业论文,只需20分钟
  3. 第一篇学术演讲准备两个月,去了谷歌却做不了深度学习,听Facebook田渊栋谈人生挑战与选择...
  4. 想不到,那些让我半夜偷偷收藏的沙雕表情包,竟是出自 AI 之手
  5. 女友让我破解植物大战僵尸!我干脆撸了一款一样的....翻身舔狗把歌唱呀
  6. 为什么阿里巴巴这一次能扛得起 11 亿的流量?
  7. 【免费福利】零AI基础,如何搭建聊天机器人:技术架构剖析
  8. 自然语言处理(NLP)之词义消歧(WSD)的简介与实现
  9. 爬虫之xml和html的区别
  10. ida 调试中call stack如何打开|修改数值