透过源码学前端 之 Backbone 一

透过源码学前端 之 Backbone  -- 江潇 

 

赘言：

机缘之下，11年4月从设计转型专职做前端，经过半年的摸索、迷惑 和 知识储备，11年12月 开始通过学习框架的源码来学习js。

最初学习的是ext 3.4.0，公司前端组主要是对ext进行二次封装的组件开发。最初因起点太低而步履维艰，其中ext_base里的代码了写四遍才对其作用，有了初步的了解。

Observable部分也是敲了四五遍才明白了 观察者模式... 夜以继日的敲了半年后，能力提升也是显而易见，从一个不明白 this 为何物的菜鸟到现在勉强可以独挡一面。

至今主要看过了 ext / jquery / backbone / goog / bootStrap / seaJs 框架的源码。

现在和诸位分享下这种学习经历，欢迎大家批评、指正 以期 达到共同提高。

 

相比之下backbone的源码最少，先用这个试试水，如果效果还好，再继续分析其它框架。

我是通过源码学习js，这里主要不讲框架怎么用，而是分析里面的代码实现，以及我们如何借鉴这些大牛的先进经验，当然源码理解透彻了，使用时自然是轻车熟路。

这个是我为学习backbone而写的一个范例【 跳棋游戏】

框架只是一种工具，比如 $('#id')，用document.getElementById( 'id' )也可以实现，单实现这一功能，后者效率更高，对于专业的前端来讲，我们用框架应该只是让其帮助我们完成原本就会的功能，以提高效率，

纯粹的对其使用并不能真实表现出个人能力，前端主要还是在于对其工作中个性化的业务逻辑的分析能力，以及如何通过原生的代码简洁、高效的优雅实现。

比如我写的 【跳棋游戏】，能不能写出、写的怎样 和 用不用 jquery / backbone 没有直接关系，只是用其代做了基础的部分，以提高开发效果。

建议大家可以先看 【跳棋实例】 及其 源码，其大致表现我的水平，可以判断是否需要花费时间看下面的文章。

建议大家使用 谷歌的 chrome 浏览器查看 以及 调试后面的代码。

 

Backbone概述：

Backbone 是对 M-V-C 使用结构的一种包装，提供了一种使用模式，以合理的方式关联了三者之间的相互引用，旨在开发者可以更简便的使用 MVC 。

其主要提供的类有：[ 稍知道就好 ]

 

Events     : 提供 观察者模式，方便组件使用过程中的事件定义。

Model   : 包装单个元素，为数据提供了简洁却又强大的存、取、改、删方法

Collection : 作为一组Model的集合，可以方便的对一组数据进行操作。其与 model 的相互关系是，model都保存在collction.models 及 collection._byId内

             而collection被 model.collection 指向

View       : 视图生成。通常是定义一个模板，将其中的个性化的信息变量化，然后将model导入，以model里的值替换 view里的个性化变量，以生成一组类似而又信息不同的视图

其与 model的关系 是 new View({ model: model })。model 就被 view.model 指向。

Sync   : 通过ajax异步获取数据，其主要是在 jQuery.ajax 基础上做了进一步的封装，以便更符合 Backbone 里的调用习惯

Router     : 路由，这个概念似乎很高深，但其作用 及 原理很简单，就是通过监听url的变化，决定触发已定义好的操作。

History    : 辅助 Router，以对各浏览器兼容的形式监听url变化，其中对最低级浏览器的处理是用了一个 50 毫秒的定时器，定时去获取url判断是否变化，从这点也可以看出其原理多单纯。

#######################################################

( function(){

 

/***********************************

* 第一部分 前期准备，------ 前期对各代码都做了较繁琐的注释，后面对同样的功能将不在说明

* 概述：定义了一些基础变量 以及 对变量名冲突的处理

************************************/

 

var root = this;

        作用：将this保存为变量root，以避免和后面的某局部环境中的this冲突，通常也可以用me、self，此处用root更能表现其作根环境的意义。

 

 

var previousBackbone = root.Backbone;  

        作用：保存可能已存在的window.Backbone 变量，避免此处定义的Backbone而引发的使用冲突，其使用见后面的noConfig方法

 

 

var arrar = [];
var push = array.push;
var slice = array.slice;
var splice = array.splice;

 作用：保存后面将会被多次使用的方法，以简化每次使用时的代码书写。 * 引申：1、此处多个变量同时定义，特别在变量较多时，为保整齐易读，可如下书写，空格最后可以用打包工具压缩，无需担心增大文件。  

 

 

//对比写法
var array    = [],
    push     = array.push,
    slice    = array.slice,
    splice   = array.splice;

 

var backbone;

 作用：定义该闭包里唯一对外开放变量，后面定义的功能都以该变量的属性输出，类型于jQuery 的 $ /或 EXT 的 Ext 

 

 

if( typeof exports !== 'undefined' ){
	Backbone = exports;
} else {
	Backbone = root.Backbone = {};
}

 作用：如果已经定义了 exports 输出方法，则Backbone延用，否则开放Backbone到 根变量即 window 下，并指定其类型为 OBJECT

 

引申：1、exports 常见于requireJS 、seaJS等具模块化加载功能的框架，此处不需用到，后续单独说明。

如果使用了，在引用文件可以这样使用

var Backbone = require('Backbone');//这样可以在引用页面直接使用Backbone变量

 

Backbone.VERSION = '1.0.0';				//版本号，行业规范写法

 

var _ = root._;
if( !_ && ( typeof require !== 'undefined' )){
	_ = require( 'underscore' );
} 

 作用： Backbone 必须依赖于underscore.js所定义的底层方法，如果通过script引用，underscore对外出口变量名为 _，则可以直接使用。如果未直接引用underscore.js即无 _ 变量，则判断是否有全局的require方法，如有则通过require进行模块化加载。此处，作者考虑开发者可能使用的直接加载 或 模块化加载两种方式。

 

引申： require 同 exports 分属模块化引用的 调用入口及出口，后续分析seaJS时再说明

 

Backbone.$ = root.jQuery || root.Zepto || root.ender || root.$;

 

作用： Backbone未提供基础dom、ajax等基础工具的封装，需依赖于 jQuery 等基础框架提供的方法，开发者可以使用jQuery / Zepto / ender 任意一个JS框架Backbone 都会将于转为统一入口 Backbone.$ 使用

 

Backbone.noConfig = function(){
	root.Backbone = previousBackbone;
	return this;
}

 

 

作用：解决对外变量名冲突，即已定义了非本框架提供的Backbone，将'Backbone'变量名还给原定义，seajs 及 jQuery 也用了类似的方法

示例：

var newNS = Backbone.noConfig();   // newNS 即具有Backbone的功能，而 'Backbone' 即指向原已定义的功能引用

 

Backbone.emulateHTTP = false;		//Backbone.sync里使用，定义ajax数据传输方式，后续sync里说明
Backbone.emulateJSON = false;

 

 

 

评论

1 楼 hlj317 2013-06-25  

大师，从你的谈吐之间，不难发现你对前端框架有着很深的理解。
我只希望刻苦努力三年，达到你十分之一的水平便足矣。