距离上一篇博客有一段时间了,期间各种琐事萦绕。最主要的一件是,当我差不多将整个dojo核心源码看完,惊讶的发现dojo1.*的设计以是老态龙钟之象,而我沉溺在dojo中太久,已经不知道前端世界变成了什么样。这无异于晴天霹雳,霹的我目瞪口呆、汗流满面,惶惶不可终日。索性亡羊补牢为时未晚,这段期间虽有各种烦心事,但还能于百烦之中腾出点时间,看看源码已经是万中之幸。各种前端类库如浩瀚星辰,面对它们才能感觉到自身技术的浅薄,自身能力的低微。初出茅庐天下无敌,再练三年寸步难行,这就是我当前最真切的体悟。现在的我只能找几个经典类库,悉心研究,戒骄戒躁,诚诚恳恳的去学习大牛的代码,今天为大家带来backbone的源码研究。能力浅薄,不足之处请各位大牛不吝斧正。

  从backbone的总体结构来看,是一个立即执行的函数表达式,参数是一个匿名函数。(function(){})()和(function(){}())的目的是将函数声明转换为函数表达式,消除Js引擎在识别函数声明和函数表达式上的歧义,除了小括号外还有其他运算符能够做到,详细介绍可以参照这篇文章:js中(function(){…})()立即执行函数写法理解

(function(factory) {
//模块定义
})(function(root, Backbone, _, $) {
//Backbone
});

  模块处理内容如下:

function(factory) {

  // Establish the root object, `window` (`self`) in the browser, or `global` on the server.
// We use `self` instead of `window` for `WebWorker` support.
//拿到当前环境中的全局对象;浏览器中为window,self也是浏览器提供的一个全局对象,始终指向window
//server端的运行环境则提供global这个全局对象
var root = (typeof self == 'object' && self.self === self && self) ||
(typeof global == 'object' && global.global === global && global); // Set up Backbone appropriately for the environment. Start with AMD.
//如果有amd加载器则将Backbone定义包装成amd加载器可识别的模块
if (typeof define === 'function' && define.amd) {
//AMD规范定义两个全局函数define和requrie,并且规定define有个amd属性,来区分amd的define和普通名为define的函数
define(['underscore', 'jquery', 'exports'], function(_, $, exports) {
// Export global even in AMD case in case this script is loaded with
// others that may still expect a global Backbone.
root.Backbone = factory(root, exports, _, $);
}); // Next for Node.js or CommonJS. jQuery may not be needed as a module.
//如果运行在Node端,则将Backbone包装成CommonJs的模块
} else if (typeof exports !== 'undefined') {
var _ = require('underscore'), $;
try { $ = require('jquery'); } catch (e) {}
factory(root, exports, _, $); // Finally, as a browser global.
//以上两种情况都没有,则以最简单的执行函数方式,将函数的返回值作为全局对象Backbone
} else {
root.Backbone = factory(root, {}, root._, (root.jQuery || root.Zepto || root.ender || root.$));
} }

  factory部分整体结构如下:

function(root, Backbone, _, $) {
// Backbone.Events
// --------------- // Backbone.Model
// -------------- // Backbone.Collection
// ------------------- // Backbone.View
// ------------- // Backbone.Router
// --------------- // Backbone.History
// ---------------- // Helpers
// -------
}

  本篇文章中,我们简单学习两个比较有用的工具方法:noConflict和extend。

  首先介绍noConflict模式。这是jquery发明的使用方法,之后大家争相相仿。主要原理是因为JavaScript采用的词法作用域(通过阅读变量定义在内的少数几行代码就能知道变量的作用域),函数的作用域由定义时决定而不是由函数调用时决定的,所以noConflict运行时能够访问到previousBackbone变量。如果已经有全局的Backbone变量,先将全局的Backbone变量暂存在previousBackbone内,当调用noConflict时,全局的Backbone指向之前暂存在previousBackbone中的Backbone,而返回的this关键字指向该factory函数中定义的Backbone对象。

// Save the previous value of the `Backbone` variable, so that it can be
// restored later on, if `noConflict` is used.
var previousBackbone = root.Backbone; // Runs Backbone.js in *noConflict* mode, returning the `Backbone` variable
// to its previous owner. Returns a reference to this Backbone object.
Backbone.noConflict = function() {
root.Backbone = previousBackbone;
return this;
};

  下面介绍extend方法,extend方法常见于大多数的JavaScript类库中,来实现继承父类创造子类。关于继承的文章,请看我的这篇文章JavaScript面向对象之我见,这里直接介绍源码了。

  // Helper function to correctly set up the prototype chain for subclasses.
// Similar to `goog.inherits`, but uses a hash of prototype properties and
// class properties to be extended.
//protoProps放置到子类原型上的属性
//staticProps模拟静态属性,直接放置到子类上
var extend = function(protoProps, staticProps) {
var parent = this;//利用局部变量保存this关键字
var child; // The constructor function for the new subclass is either defined by you
// (the "constructor" property in your `extend` definition), or defaulted
// by us to simply call the parent constructor.
//如果protoProps中有constructor属性,则将constructor指向的函数作为构造函数
if (protoProps && _.has(protoProps, 'constructor')) {
child = protoProps.constructor;
} else {//没有构造函数,则利用一个默认的函数作为构造函数。
//基本上属于组合式继承
child = function(){ return parent.apply(this, arguments); };
} // Add static properties to the constructor function, if supplied.
//underscore中的方法,与常见的mixin函数类似
_.extend(child, parent, staticProps); // Set the prototype chain to inherit from `parent`, without calling
// `parent`'s constructor function and add the prototype properties.
//将child的原型链与parent.prototype关联。
//_.create函数,的作用类似Object.create,第一个参数是要被继承的原型对象,第二个参数是要混入到新对象的键值对
child.prototype = _.create(parent.prototype, protoProps);
child.prototype.constructor = child;//原型中的constructor属性指向child // Set a convenience property in case the parent's prototype is needed
// later.
child.__super__ = parent.prototype;//设置一个私有属性指向父类的原型 return child;
};

  而后将所有Backbone对外的提供的构造函数的extend属性都指向上文的extend函数,这样大家都有了派生子类的功能。

// Set up inheritance for the model, collection, router, view and history.
Model.extend = Collection.extend = Router.extend = View.extend = History.extend = extend;

  以上就是本文的主要内容,稍后将为大家带来Model与Collection的解析。

Backbone源码分析(一)的更多相关文章

  1. Backbone源码分析(三)

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

  2. Backbone源码分析-Backbone架构+流程图

    作者:nuysoft/高云/nuysoft@gmail.com 声明:本文为原创文章,如需转载,请注明来源并保留原文链接. Backbone0.9.1源码分析分析系列 jQuery1.6.1源码分析系 ...

  3. Backbone源码分析(二)

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

  4. Backbone.js源码分析(珍藏版)

    源码分析珍藏,方便下次阅读! // Backbone.js 0.9.2 // (c) 2010-2012 Jeremy Ashkenas, DocumentCloud Inc. // Backbone ...

  5. Backbone设计思路和关键源码分析

    一. Backbone的江湖地位: backbone作为一个老牌js框架为大规模前端开发提供了新的开发思路:前端MVC模式,这个模式也是前端开发演变过程中的一个重要里程碑,也为MVVM和Redux等开 ...

  6. Backbone.js 0.9.2 源码分析收藏

    Backbone 为复杂Javascript应用程序提供模型(models).集合(collections).视图(views)的结构.其中模型用于绑定键值数据和自定义事件:集合附有可枚举函数的丰富A ...

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

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

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

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

  9. Yolov3&Yolov4网络结构与源码分析

    Yolov3&Yolov4网络结构与源码分析 从2018年Yolov3年提出的两年后,在原作者声名放弃更新Yolo算法后,俄罗斯的Alexey大神扛起了Yolov4的大旗. 文章目录 1. 论 ...

随机推荐

  1. myeclipse一直卡在loading workbench解决方法

    删除工作空间下.metadata中的org.eclipse.ui.workbench org.eclipse.ui.workbench.texteditor

  2. js 倒计时

    /** * 启动,秒杀倒计时. time格式:DDHH24MISS 例如: time="11223344"; * */function timer(time) { var d = ...

  3. View动画和属性动画

    在应用中, 动画效果提升用户体验, 主要分为View动画和属性动画. View动画变换场景图片效果, 效果包括平移(translate), 缩放(scale), 旋转(rotate), 透明(alph ...

  4. Qt中 QString 和int, char等的“相互”转换

    转载:http://blog.csdn.net/ei__nino/article/details/7297791 Qt中 int ,float ,double转换为QString 有两种方法 1.使用 ...

  5. filefiter

    1.写一个类继承与FileFilter package com.dream.musicplayer; import <a href="http://lib.csdn.net/base/ ...

  6. FZU 1914 单调队列

    题目链接:http://acm.fzu.edu.cn/problem.php?pid=1914 题意: 给出一个数列,如果它的前i(1<=i<=n)项和都是正的,那么这个数列是正的,问这个 ...

  7. python学习4 常用内置模块

    logging os 路径处理 // 获取当前路径 os.path.abspath(__file__) //获取当前文件夹路径 os.path.dirname(os.path.abspath(__fi ...

  8. delphi 步长不等于 1 的方法

    i:=; do begin ... INC(i,); end; 不能用for循环,只能用像上面的方法折衷一下

  9. STDIN(0), STDOUT(1), STDERR(2), 2 > &1

    当我们在 shell 中执行命令的时候,每个进程都和三个打开的文件相联系,并使用文件描述符(文件描述符是一个简单的整数,用以标明每一个被进程所打开的文件和socket.第一个打开的文件是0,第二个是1 ...

  10. java基础-注释

    注释是一种形式的元数据,提供了非程序自身的数据,注释对于被注释的代码没有直接的影响. 本文主要概括注释的使用,java平台(SE)预定义的注释,类型注释是如跟可插入类型系统连用达到更强的类型检查的,以 ...