zoukankan      html  css  js  c++  java
  • 暴力分析backbone.js(5)

    好,继续分析Backbone,写完上一节后,我们清晰的分析思路了,这节就按照思路来走。

      现在我来区分一下几大块的位置。

      作为实参function(root, Backbone, _, $){}函数,它包裹了Backbone的主要功能。

        从 line28 —— line1610。

      Backbone.Events(事件)

        从 line68 —— line236。

      Backbone.Model(模型)

        从 line238 —— line587。

      Backbone.Collection(控制器)

        从 line588 —— line982。

      Backbone.View(视图)

        从 line983 —— line1113

      Backbone.sync(同步)

        从 line1114 —— line1211

      Backbone.Router(路由)

        从 line1212 —— line1312

      Backbone.History(历史)

        从 line1313 —— line1551

    这样就没了?还有2部分:

      Initial Setup(初始设置)

        从 line30 —— line80

      Helpers(助手) 

        从 line1552 —— line1606

    这2部分,初始设置是留在我们用到说,而助手是最后说,或者是用到说。

      好,区块都分完了,我们从 Backbone.Events 事件开始说,说之前:

        1.先看一下官方文档的说明

        2.来试试看该怎么用

        3.分析它们是如何实现

        4.总结一下有什么用,想出不来的话就待以后结合其他实例

    我先复制一段中文说明:Events 是一个可以融合到任何对象的模块, 给予对象绑定和触发自定义事件的能力. Events 在绑定之前 不需要声明, 并且还可以传递参数

    我抓几个重点 (融合到任何对象的模块): 模块我们把它比喻成一大块功能,里面包涵一小块一小块功能。怎么融合?

           (给予对象绑定和触发自定义事件的能力):能给对象绑定自定义功能,能触发对象自定义功能。

           (在绑定之前 不需要声明):想想看我们如何给DOM元素绑定事件,DOMElement.onclick = funct(){},不需要声明待解?

           (还可以传递参数):

    我复制使用Events的Dome

    1 var object = {};
    2 
    3 _.extend(object, Backbone.Events);
    4 
    5 object.on("alert", function(msg) {
    6       alert("Triggered " + msg);
    7 });
    8 
    9 object.trigger("alert", "an event");

      1.定义一个名字叫object的对象,不要误会,内置的首字母都是大写。

      2.underscore的extend,_.extend(参数A, 参数B) : 复制 参数B(对象)的属性  到 参数A(对象)的属性。这就说得明白(融合到任何对象的模块)了,让我们创建的 object这个对象去复制Backbone.Event的功能,这就融合,我理解的。

      3.object这个对象融合了Backbone.Events的功能的就能使用它的功能了。

      4.object.on(绑定事件),绑定了一个自定义事件'alert'。这就说得明白(给对象绑定自定义功能)了

      5.object.trigger(执行事件),执行一个绑定过的自定义事件'alert'。这就说得明白(能触发对象自定义功能)了 (注意传参数) 

      上面是用underscore的extend,underscore又是Backbone的必备装备,所以用这种办法在好不过了,官方推荐,但是我们还是来头脑风暴一下,试试看别的方法。

      我创建一个对象cc,然后用创建的对象cc来调用Backbone.on 和 Backbone.trigger。但坏处一目了然咯。

    1var cc = {};
    2 
    3 Backbone.on.call(cc,'alert', function (evt) {
    4   alert('cc' + ' ' + evt)
    5 });
    6 
    7 Backbone.trigger.call(cc,'alert','alert');

      

      我们在尝试着用委托模式。我创建一个cc对象并且把它关联Backbone,委托模式是这样的,但A对象关联到B对象的时候,我们尝试on这个方法,它会先在A对象内寻找这个方法,如果没有这个方法,它会尝试的去B对象寻找,找到了就可以用了。它们是一个兄弟关系。其实cc.on是直接可以调用的,为什么我还给cc对象定义了方法,用指向来调用呢?因为.on并不是A对象的方法,这样做可以让大家可以清晰的理解委托模式。结果也是行得通的。

     1 var cc = Object.create(Backbone);
     2 
     3 cc.setEvent = function (EventName,callback) {
     4   this.on(EventName,callback);
     5 };
     6 
     7 cc.getEvent = function (EventName) {
     8   this.trigger(EventName);
     9 };
    10 
    11 cc.setEvent('alert', function () {
    12   alert('cc');
    13 });
    14 
    15 cc.getEvent('alert');

      

      好,下一节开始来分析 Backbone.Events是如何实现的!

  • 相关阅读:
    WebBrowser无法显示招商银行password输入控件的问题
    对流式计算模型的理解
    Dev BarManager使用方法
    创业的需求分析——创业杂记【1】
    使用Apktools反编译apk应用
    【JUnit4.10源码分析】3.4 Description与測试树
    基于KWIC 的keyword匹配算法(管道+过滤器模式下实现)
    纯CSS滑动效果
    PhotoSwipe简介
    包加载失败的解决办法
  • 原文地址:https://www.cnblogs.com/superjs/p/4479810.html
Copyright © 2011-2022 走看看