欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

透过源码学前端 之 Backbone 一

程序员文章站 2022-07-13 16:54:56
...

透过源码学前端 之 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;