Event in backbone

This article mainly describes the Event System in bacbone, first declaring a tool class:

 1 var slice = Array.prototype.slice; 2     _ = (function () { 3         var _ = function () { }; 4         _.extend = function (target) { 5             var sources = slice.call(arguments, 1); 6             sources.forEach(function (source) { 7                 if (source) { 8                     for (var prop in source) { 9                         target[prop] = source[prop];10                     }11                 }12             });13             return target;14         }15 16         var idCounter = 0;17         _.uniqueId = function (prefix) {18             var id = ++idCounter + ‘‘;19             return prefix ? prefix + id : id;20         };21         return _;22 })();

General framework of the Event System:

 1 jass=(function(){ 2 var bone={}; 3 bone.Events={ 4    on: function (event, callback, context) { 5    }, 6    off: function (event, callback, context) { 7    }, 8   listenTo: function (otherObj, event, callback) { 9   },10   stopListening: function (otherObj, event, callback) {11   },12   trigger: function (event) {13   }14 15 }16      return bone;17 })();

On/Off Method:

 1       on: function (event, callback, context) { 2           this._events || (this._events = {}); 3           var events = this._events[event] || (this._events[event] = []); 4           events.push({ callback: callback, context: context, ctx: context || this }); 5           return this; 6       }, 7       off: function (event, callback, context) { 8           if (!event && !callback) { 9               this._events = {};10               return this;11           }12           delete this._events[event];13       }

The principles of these two methods are similar to those of the on/off method in zepto. The difference is that the event on the DOM element is not processed here:

LISTENTO/stoplistening Method:

 1       listenTo: function (otherObj, event, callback) { 2             var listeners = this._listeners || (this._listeners = {}); 3             var id = otherObj._listenerId || (otherObj._listenerId = _.uniqueId(‘1‘)); 4             listeners[id] = otherObj; 5             var onlyListener = !event && !callback; 6             if (onlyListener) return this; 7  8             if (typeof event === ‘object‘) callback = this; 9 10             otherObj.on(event, callback, this);11 12             return this;13       },14       stopListening: function (otherObj, event, callback) {15             var listeners = this._listeners;16             if (!listeners) return;17             var deleteListener = !event && !callback;18             if (typeof name === ‘object‘) callback = this;19             if (otherObj) (listeners = {})[otherObj._listenerId] = otherObj;20             for (var id in listeners) {21                 listeners[id].off(event, callback, this);22                 if (deleteListener) delete this._listeners[id];23             }24             return this;25       }

We can see that LISTENTO registers an event for another object through this object. the on method is called internally, but other objects are recorded in the listeners attribute. The advantages of this method can be seen from the stoplistening method, and the events registered through the LISTENTO method, all events on other objects can be removed through the stoplistening method of the object to eliminate the impact on other objects.

Trigger Method:

1 trigger: function (event) {2 if (! This. _ Events) return this; 3 var ARGs = slice. call (arguments, 1); 4 var events = This. _ events [event]; 5 6 if (events) {7 events. foreach (function (EV) {8 eV. callback. apply (ev. CTX, argS); 9}); 10} 11 // process all events 12 var allevents = This. _ events. all; 13 if (allevents) {14 allevents. foreach (function (EV) {15 eV. callback. apply (ev. CTX, argS); 16}); 17} 18}

We know that in MVC, the view layer is frequently created and destroyed when it is created. After a view is closed, what should we do? Let's look at a familiar scenario:

1 myview = backbone. view. extend ({2 initialize: function () {3 this. LISTENTO (this. model, 'change', this); 4}, 5 render: function (){...} 6}); 7 8. The View class of backbone has a remove method:
9 remove: function () {10 this. $ El. Remove (); 11 this. stoplistening (); 12 return this; 13}

Do you have to clear the view when you see this method? Unfortunately, backbone won't call it. We need to add a (dispose/destroy) cleanup method to encapsulate this remove to help us deal with the aftermath after a view is destroyed.

Think about why LISTENTO instead of on!