代码风格:
一、自执行匿名函数创建执行环境
var root = this; root保存全局执行环境的指针。浏览器端为window对象
二、依赖库
(1)、underscore 如果backbone的运行环境在服务端(nodeJs),则引入underscore库。
var _ = root._;
if (!_ && (typeof require !== 'undefined')) _ = require('underscore');
(2)、jQuery 
Backbone.$ = root.jQuery || root.Zepto || root.ender;
三、核心模块
Events、Model、Collection、View、Router、History
Events模块为JS对象,其他模块均为构造函数。Events对象扩展了Model.prototype、Collection.prototype、Router.prototype、View.prototype,因此这些模块的实例对象继承了Events对象的事件方法:on trigger等。
四、underscore的extend方法:_.extend 。用第2到第N个对象扩展第一个对象的属性。_extend(obj1, obj2,...,objn); 仅提供属性拷贝与覆盖的功能。注意事项:
业务层必须注意extend方法内部并没有判断第一个参数obj1是否为空,如果第一个参数为空,程序会报错,浏览器将捕获到该异常,JS代码将停止运行。
示例:
用Events对象与第三个参数对象扩展第一个参数对象Model.prototype 
五、重点讲一下backbone自己提供的extend方法。
通常我们在实际应用中并不满足new一个Backbone.Model 我们希望用自己提供的对象扩展backbone的model,这样我们new出来的实例,不仅继承了Backbone.Model的属性,也具备了完成具体业务操作的能力。backbone提供了extend方法来满足这样的应用场景。该方法放在源码的最下方。
看注释可知,凭借extend方法,我们可创建之类并设置正确的原型链。
(1)、方法支持传递两个参数:protoProps、staticProps 分别表示实例属性(扩展到原型上),类属性(扩展到构造函数上)
如上图:
实例属性(instance pros)必须通过语句:var indexRecommendModel = new Mpost.IndexRecommend.Model() 创建实例对象,然后通过indexRecommendModel.getRecommends(options)调用
类属性(class pros)可以直接这样调用:Mpost.IndexRecommend.Model.add() // 'i am a class Function!'
 
(2)、如果你传递进去的protoProps参数没有constructor属性,backbone将创建一个构造函数(匿名)并调用父类(通常为Backbone.Model等)的构造函数,这样当你new子类child的时候child实例就继承了父类的实例属性(如Backbone.Model实例属性:_changes、_events、attributes、_previousAttributes等)
 
(3)、子类的原型属性是构造函数Surrogate的实例对象,而Surrogate的原型指向了父类的原型(Backbone.Model.prototype):
var Surrogate = function(){ this.constructor = child; };
Surrogate.prototype = parent.prototype;
child.prototype = new Surrogate;
这样当你new子类的时候child实例的原型链就是这样的:
通过上图可知:
自定义的属性:apis、defaults、getRecommends、initialize等被添加到实例对象的原型对象Surrogate上,原型对象Surrogate也是一个实例对象,它的原型对象指向:Backbone.Model.prototype 下面我们看一下Backbone.Model.prototype都有哪些属性:
看源码可知:Backbone.Model.prototype除了包含核心的get、set等方法外,还包含Events模块的核心方法:on、trigger、off等
 
因此,当我们执行以下语句:
var indexRecommendModel = new Mpost.IndexRecommend.Model();
我们可以调用indexRecommendModel.on绑定自定义事件,调用indexRecommendModel.trigger触发事件(查找两次原型链)。
 
我们也可以调用扩展的实例属性indexRecommendModel.apis(查找一次原型链):
 
我们还可以直接调用扩展的类属性(静态属性)
Mpost.IndexRecommend.Model.add() // 'i am a class Function!' :

Backbone源码风格的更多相关文章

  1. Backbone源码分析(三)

    Backbone源码分析(一) Backbone源码分析(二) Backbone中主要的业务逻辑位于Model和Collection,上一篇介绍了Backbone中的Model,这篇文章中将主要探讨C ...

  2. Backbone源码解读(一)事件模块

    Backbone源码浅读: 前言: Backbone是早起的js前端MV*框架之一,是一个依赖于underscore和jquery的轻量级框架,虽然underscore中基于字符串拼接的模板引擎相比如 ...

  3. 【 js 基础 】【 源码学习 】backbone 源码阅读(一)

    最近看完了 backbone.js 的源码,这里对于源码的细节就不再赘述了,大家可以 star 我的源码阅读项目(https://github.com/JiayiLi/source-code-stud ...

  4. 【 js 基础 】【 源码学习 】backbone 源码阅读(二)

    最近看完了 backbone.js 的源码,这里对于源码的细节就不再赘述了,大家可以 star 我的源码阅读项目(source-code-study)进行参考交流,有详细的源码注释,以及知识总结,同时 ...

  5. 【 js 基础 】【 源码学习 】backbone 源码阅读(三)浅谈 REST 和 CRUD

    最近看完了 backbone.js 的源码,这里对于源码的细节就不再赘述了,大家可以 star 我的源码阅读项目(https://github.com/JiayiLi/source-code-stud ...

  6. 【 js 基础 】【 源码学习 】backbone 源码阅读(三)

    最近看完了 backbone.js 的源码,这里对于源码的细节就不再赘述了,大家可以 star 我的源码阅读项目(https://github.com/JiayiLi/source-code-stud ...

  7. Backbone源码解析(六):观察者模式应用

    卤煮在大概一年前写过backbone的源码分析,里面讲的是对一些backbone框架的方法的讲解.这几天重新看了几遍backbone的源码,才发现之前对于它的理解不够深入,只关注了它的一些部分的细节和 ...

  8. Backbone源码学习之extend

    extend函数在backbone大概就20来行代码包括注释,对学习Javascript中"类"的继承很是好的学习资料. 下面先贴出Backbone中的源码,其中涉及到unders ...

  9. Backbone源码分析(二)

    在传统MVC框架模式中,Model承担业务逻辑的任务.Backbone作为一个mvc框架,主要的业务逻辑交由Model与Collection来实现.Model代表领域对象,今天主要学一下Model源码 ...

随机推荐

  1. Centos6.5安装JDK8教程(一)

    [原] 转载请注明原文地址, 保持对知识基本尊重,谢谢!   Win7宿主系统 VmWareWorkstation 11应用下的 Centos6.5系统.   /******************* ...

  2. pig 入门教程(1)

    出处:http://www.codelast.com/ 本文可以让刚接触pig的人对一些基础概念有个初步的了解. 本文大概是互联网上第一篇公开发表的且涵盖大量实际例子的Apache Pig中文教程(由 ...

  3. 阶段2-新手上路\项目-移动物体监控系统\Sprint2-摄像头子系统开发\第2节-V4L2图像编程接口深度学习

    参考资料: http://www.cnblogs.com/emouse/archive/2013/03/04/2943243.htmlhttp://blog.csdn.net/eastmoon5021 ...

  4. 6.7 使用IDEA导入工程

    打开IDEA->File->new -> Project from existing ..->选择你的工程,导入: 请注意,在130或者40上面的项目并不是最新的,sunny也 ...

  5. raspberry是个什么玩意

    今天Wilson同学取回一个书本大小的包裹,说买回来一台小电脑,只有信用卡大小! 这是第一次听说和看见raspberry Pi. 一块开发板上有四个USB.一个视频接口.一个音频接口.一个网线接口和电 ...

  6. 关于js模板引擎template的使用记录

    引言 有一天在群里有一个人发了这么一个图片 看到这个就会发现2个问题,一个是后期如果html结构改变了,这一大块都要重写.还有一个就是写的时候自己都看不清,很容易出错. 然后还有一个人写的清楚一点,但 ...

  7. windows下编译Boost库

    下载源码 boost_1_66_0.7z 生成编译工具 D:\Project\boost_1_66_0> bootstrap.bat 配置Python环境变量(使用VS2017自带的32位pyt ...

  8. nginx 安装遇到的问题

    今天想学学 nginx,于是先把它安装起来.按照 http://nginx.org/en/linux_packages.html 上面的方法,在我的 ubuntu 虚拟机上很容易地就安装好了.可是要运 ...

  9. AT2672 Coins

    传送门 按理说想到转化问题之后就不难了吧,可是我还是不会写 一个很容易想到的转化就是差分,将银币数和铜币数都减去金币数,这样就转化为\(x+y+z\)个钱币选\(y\)个银币和\(z\)个铜币的最大数 ...

  10. AT2341 Increasing Numbers

    传送门 还是猜结论呢 然后我们就想我们可以每次去掉尽量多的位数来保证次数最小,假装这是对的,先写一发,A了 考虑如何去掉尽量多的位数,我们可以找到最大的几位的不下降序列,把最后一个-1,后面全部改成9 ...