`

Backbone事件相关

 
阅读更多



var Events = Backbone.Events = {

    // Bind an event to a `callback` function. Passing `"all"` will bind
    // the callback to all events fired.
    //上面的话就是说如果传递的事件名称是all的话,就会激活所有绑定在上下文上面的事件

    on: function(name, callback, context) {

      if (!eventsApi(this, 'on', name, [callback, context]) || !callback) 
             return this;
      //当通过正则匹配不到,就要建立一个事件对象,把传递进来的事件对象名称保存
      //如name为“alert的时候”  ||或运算符 检测对象是否有_events属性,没有就新建一个对象
      this._events || (this._events = {});

      // ||或运算符   this._events[name] 用来检测在该事件名称是否存在数组对象,如果没有那么就新建一个数组对象 
      var events = this._events[name] || (this._events[name] = []);
      //把新执行的函数体添加到数组里面
      /****
       callback:回调函数,用来具体的执行函数
       ctx:上下文 ||预算符其实就是用来初始化处理的context||this,
       如果没有传递上下文对象那么就是默认为this,而在javascript中我们知道this
      是当前执行本函数的对象在这个里面就是调用on函数的对象
       context:上下文
      ***/
      events.push({callback: callback, context: context, ctx: context || this});
      //返回当前对象
      return this;
    },

    // Bind an event to only be triggered a single time. After the first time
    // the callback is invoked, it will be removed.
    once: function(name, callback, context) {
      if (!eventsApi(this, 'once', name, [callback, context]) || !callback) return this;
      var self = this;
      //_为underscore的别称
      var once = _.once(function() {
        self.off(name, once);
        callback.apply(this, arguments);
      });
      once._callback = callback;
      //最终调用的是on方法
      return this.on(name, once, context);
    },

    // Remove one or many callbacks. If `context` is null, removes all
    // callbacks with that function. If `callback` is null, removes all
    // callbacks for the event. If `name` is null, removes all bound
    // callbacks for all events.
    //事件解绑
    off: function(name, callback, context) {
      //key 编码改善,使用的变量在方法前面声明
      var retain, ev, events, names, i, l, j, k;
      //如果没有事件绑定或者通过正则规则匹配那么就可以直接返回,
      //具体可以看eventsApi的方法分析
      if (!this._events || !eventsApi(this, 'off', name, [callback, context])) return this;
      
      if (!name && !callback && !context) {
        this._events = {};
        return this;
      }
      
      //
      names = name ? [name] : _.keys(this._events);
      
      for (i = 0, l = names.length; i < l; i++) {
        
        name = names[i];
        
        if (events = this._events[name]) {
          
          this._events[name] = retain = [];
          
          if (callback || context) {
            for (j = 0, k = events.length; j < k; j++) {
              ev = events[j];
              
              if ((callback && callback !== ev.callback && callback !== ev.callback._callback) ||
                  (context && context !== ev.context)) {
                retain.push(ev);
              }
            }
          }
          if (!retain.length)
           //关键点,删除事件
           delete this._events[name];
        }
      }

      return this;
    },

    // Trigger one or many events, firing all bound callbacks. Callbacks are
    // passed the same arguments as `trigger` is, apart from the event name
    // (unless you're listening on `"all"`, which will cause your callback to
    // receive the true name of the event as the first argument).
    //手动执行指定的事件
    trigger: function(name) {

      if (!this._events) return this;
      //如果传递多个参数,那么拆分参数作为入参
      var args = slice.call(arguments, 1);

      if (!eventsApi(this, 'trigger', name, args)) return this;

      var events = this._events[name];

      var allEvents = this._events.all;

      if (events) triggerEvents(events, args);

      if (allEvents) triggerEvents(allEvents, arguments);

      return this;
    },

    // Tell this object to stop listening to either specific events ... or
    // to every object it's currently listening to.
    //停止事件监听,核心是调用off
    stopListening: function(obj, name, callback) {
      var listeningTo = this._listeningTo;
      if (!listeningTo) return this;

      var remove = !name && !callback;

      if (!callback && typeof name === 'object') callback = this;

      if (obj) (listeningTo = {})[obj._listenId] = obj;

      for (var id in listeningTo) {
        obj = listeningTo[id];
        obj.off(name, callback, this);

        if (remove || _.isEmpty(obj._events))
        //
         delete this._listeningTo[id];

      }
      return this;
    }

  };




  // Regular expression used to split event strings.
  var eventSplitter = /\s+/;//定义事件分割的正则表达式默认是空格

  // Implement fancy features of the Events API such as multiple event
  // names `"change blur"` and jQuery-style event maps `{change: action}`
  // in terms of the existing API.
  //事件分割的api,类jquery风格
  /***
  @param obj     对象
  @param action  事件对象的值包含,on,once,off,trigger等
  @param name    事件的名称{}
  @param rest   包含回调以及上下文 eventsApi(this, 'on', name, [callback, context]) 
  ***/
  var eventsApi = function(obj, action, name, rest) {

    if (!name) return true;

    // Handle event maps.
    //name如果是一个map对象就是key-value形式
    if (typeof name === 'object') {
      for (var key in name) {
        //通过分析name对象,连接传递进来的参数作为调用对象的属性
        obj[action].apply(obj, [key, name[key]].concat(rest));
      }
      return false;
    }

    // Handle space separated event names.name如果不是key-value形式的但是满足正则规则    
    if (eventSplitter.test(name)) {
      //利用正则拆分成为一个数组
      var names = name.split(eventSplitter);
      //加入对象
      for (var i = 0, l = names.length; i < l; i++) {
        obj[action].apply(obj, [names[i]].concat(rest));
      }
      return false;
    }

    /***
      不满足的正则规则的
     例如:
         object.on("alert",function(){});
        例子中alert就是我们所取到的name
    ***/
    return true;
  };

  // A difficult-to-believe, but optimized internal dispatch function for
  // triggering events. Tries to keep the usual cases speedy (most internal
  // Backbone events have 3 arguments).
  //特殊情况激活事件的处理,用来激活所有的事件的时候使用
  var triggerEvents = function(events, args) {
    var ev, i = -1, l = events.length, a1 = args[0], a2 = args[1], a3 = args[2];
    switch (args.length) {
      case 0: while (++i < l) (ev = events[i]).callback.call(ev.ctx); return;
      case 1: while (++i < l) (ev = events[i]).callback.call(ev.ctx, a1); return;
      case 2: while (++i < l) (ev = events[i]).callback.call(ev.ctx, a1, a2); return;
      case 3: while (++i < l) (ev = events[i]).callback.call(ev.ctx, a1, a2, a3); return;
      default: while (++i < l) (ev = events[i]).callback.apply(ev.ctx, args);
    }
  };

  var listenMethods = {listenTo: 'on', listenToOnce: 'once'};

  // Inversion-of-control versions of `on` and `once`. Tell *this* object to
  // listen to an event in another object ... keeping track of what it's
  // listening to.
  _.each(listenMethods, function(implementation, method) {
    Events[method] = function(obj, name, callback) {
      var listeningTo = this._listeningTo || (this._listeningTo = {});
      var id = obj._listenId || (obj._listenId = _.uniqueId('l'));
      listeningTo[id] = obj;
      if (!callback && typeof name === 'object') callback = this;
      obj[implementation](name, callback, this);
      return this;
    };
  });

  // Aliases for backwards compatibility.别名
  Events.bind   = Events.on;
  Events.unbind = Events.off;

  // Allow the `Backbone` object to serve as a global event bus, for folks who
  // want global "pubsub" in a convenient place.
  //给所有的Backbone对象赋予事件对象的属性
  _.extend(Backbone, Events);

 

  • 大小: 181.9 KB
分享到:
评论

相关推荐

    Java 演示 backbone 基本用法

    这个"Java演示Backbone基本用法"的主题,虽然标题中有"Java",但实际上Backbone.js是与JavaScript紧密相关的,而非Java语言。它提供了一种结构化的框架,帮助开发者组织和管理前端代码,尤其是对于那些基于Model-...

    backbone官方Todo示例_修正

    Backbone.js是一个轻量级的JavaScript库,专为构建可维护和可扩展的单页应用程序(SPA)设计。它的核心理念是提供模型(Model)、...同时,结合其他Backbone相关资源,如官方文档和社区示例,你的技能将得到进一步提升。

    backbone_api_frame

    在Backbone_API_frame中,Backbone.js被用来构建可复用、可维护的组件,通过事件驱动的模式,使得代码更加模块化,降低了组件间的耦合度。 **ExtJS** ExtJS是一个完整的JavaScript UI框架,提供了丰富的组件库,...

    Backbone.js实战.zip

    5. Event:Backbone.js的事件系统是其强大功能之一,它允许对象之间进行通信,而无需直接引用彼此。任何Backbone对象都可以触发和监听事件,增强了代码的模块化和解耦。 "文前.pdf"通常会包含前言、目录等内容,...

    前端项目-backbone.radio.zip

    "前端项目"这个标签确认了这是一个与前端开发相关的项目,可能涉及到HTML、CSS、JavaScript等技术,并且重点在于Backbone.Radio的使用。 **压缩包子文件的文件名称列表:** "backbone.radio-master"通常表示这是...

    backbone.js入门教程

    它们支持 key-value 绑定和自定义事件,这意味着当模型的状态发生变化时,可以自动更新相关的视图或触发特定的行为。 - **Collections**:Collections 是一组模型的容器,提供了丰富的 API 来操作这些模型集合,例如...

    backbone实现的一个小demo

    3. **Backbone.Collection**: 如果应用需要管理一组相关的Model,Backbone.Collection就是一个理想的选择。Collection提供了对数据集合的高级操作,如排序、过滤和检索。在demo中,可能有一个Collection用来存储和...

    Backbone书合集(二).tar.gz

    它们可以监听并触发事件,使得数据更新时能自动通知相关的视图。 2. **集合(Collections)**:集合是一组模型的有序集合,提供了对这些模型进行操作的便利方法,如排序、过滤和遍历。 3. **视图(Views)**:视图...

    backbone 入门指南

    Backbone.js允许开发者为视图绑定事件处理器。这使得视图能够响应用户的交互行为,例如点击按钮或输入框变化。例如: ```javascript var MyView = Backbone.View.extend({ events: { 'click button': '...

    backbone实例demo

    Zepto是一个与jQuery类似的小型JavaScript库,专注于提供核心的DOM操作、事件处理和Ajax功能。对于移动设备或者对文件大小有严格要求的项目,Zepto是一个很好的替代选择,因为它比jQuery更轻巧。 在这个实战项目中...

    前端项目-backbone.epoxy.zip

    以上就是关于"前端项目-backbone.epoxy.zip"的详细知识点解析,涵盖了Backbone.js、Epoxy以及前端开发的相关内容。通过这个项目,开发者可以学习到如何使用数据绑定优化前端项目,提高代码的可维护性和效率。

    Backbone标准例子——通讯录

    5. **视图事件**:Backbone.js的事件绑定机制允许视图监听并响应模型或视图自身的事件,比如当模型数据改变时自动更新界面。 6. **模板引擎**:为了动态渲染视图,通常会用到模板引擎,如Underscore.js的模板功能,...

    前端开源库-backbone-callbacks

    在提供的压缩包`backbone-callbacks-master`中,很可能包含了Backbone.Callbacks的源码、示例、文档和其他相关资源。通过研究这些内容,你可以更深入地了解其内部实现细节和使用场景,从而更好地将其融入到你的项目...

    前端项目-backbone.eventbinder.zip

    Backbone.EventBinder 是一个专门为Backbone.js设计的扩展库,旨在帮助开发者更好地管理Backbone事件绑定,提高代码的可维护性和可读性。这个"前端项目-backbone.eventbinder.zip"包含了"backbone.eventbinder-...

    前端项目-backbone.stickit.zip

    回到这个项目,"backbone.stickit-master"很可能包含了源码、示例、文档和其他相关资源。开发者可以通过阅读这些资料来学习如何在自己的Backbone项目中集成和使用Stickit。这可能包括: 1. **源码分析**:理解...

    backboneApi英文版pdf

    当模型中的属性发生变化时,会触发“change”事件,通知所有相关的视图进行更新。 - **键值绑定**:模型能够自动跟踪其属性的变化,当属性变化时,模型可以触发相应的事件。 - **自定义事件**:除了默认提供的事件...

    Backbone fundamentals

    与Backbone.js相关的其他工具和项目包括Backbone.Marionette和Thorax。Backbone.Marionette是一个Backbone.js应用程序的框架,它通过提供一些额外的视图类型和区域管理等特性来提高Backbone应用程序的可维护性和灵活...

    BackBone图书源码.rar

    6. **事件系统**:BackBone的核心之一就是其事件系统。模型、视图和集合都有事件绑定和触发机制,使得组件间的通信变得简单而高效。例如,`listenTo()` 和 `trigger()` 方法用于监听和触发事件。 7. **RESTful API*...

Global site tag (gtag.js) - Google Analytics