Use AmplifyJS and JQuery to write better and more elegant javascript event processing code

Use AmplifyJS and JQuery to write better and more elegant javascript event processing code

Events (or messages) are a common software design model that can reduce the coupling between message handlers and message publishers, such as the JMS specification in J2EE. The observer mode (also called the publish/subscribe mode) in the design mode is also applicable to javascript code. In the previous JQuery blog, I described in detail the event processing mechanism and features of JQuery. For details, referThis directory.

 

JQuery event processing uses the publish/subscribe mode, including the namespace mechanism provided by JQuery and custom events. However, JQuery event processing has one defect: JQuery events are related to DOM elements, but many times we do not need DOM elements. We only want to use the event publishing/subscription mechanism.

Code 1: If a DOM element does not exist, you cannot rely on it to publish and subscribe to events.

 

// Not-exsit does not exist dom element, event processing is invalid $ (not-exsit ). bind (self-event, function () {alert (11) ;}); $ (not-exsit ). trigger (self-event );

Code 2: JQuery does not provide a global bind/trigger. The following code reports an error.

 

// An exception is thrown $. trigger is not a function $. bind (self-event, function () {alert (11) ;}); $. trigger (self-event );

 

 

Through code 1 and Code 2 above, we can see the shortcomings of JQuery events. We can use the AmplifyJS framework in the project to solve the above problems. AmplifyJS official website http://amplifyjs.com/and code http://www.bootcdn.cn/amplifyjs /.

 

<script src=amplify.js></script><script>amplify.subscribe( self-event, function(context){console.log(priority=5,data=+JSON.stringify(context));}, 5);amplify.subscribe( self-event, function(context){console.log(priority=6,data=+JSON.stringify(context));}, 6);   amplify.subscribe( self-event, function(context){console.log(priority=3,data=+JSON.stringify(context));}, 3);      amplify.publish(self-event,{data:11});  </script>

This code can run normally. It can be seen through the use of AmplifyJS that it just makes up for the shortcomings of JQuery event processing.

 

 

The following is an example of AmplifyJS source code amplify. core. js. You can see that the source code is very short and easy to understand.

 

/*! * Amplify Core 1.1.2 * * Copyright 2011 - 2013 appendTo LLC. (http://appendto.com/team) * Dual licensed under the MIT or GPL licenses. * http://appendto.com/open-source-licenses * * http://amplifyjs.com */(function( global, undefined ) {var slice = [].slice,subscriptions = {};var amplify = global.amplify = {publish: function( topic ) {if ( typeof topic !== string ) {throw new Error( You must provide a valid topic to publish. );}var args = slice.call( arguments, 1 ),topicSubscriptions,subscription,length,i = 0,ret;if ( !subscriptions[ topic ] ) {return true;}topicSubscriptions = subscriptions[ topic ].slice();for ( length = topicSubscriptions.length; i < length; i++ ) {subscription = topicSubscriptions[ i ];ret = subscription.callback.apply( subscription.context, args );if ( ret === false ) {break;}}return ret !== false;},subscribe: function( topic, context, callback, priority ) {if ( typeof topic !== string ) {throw new Error( You must provide a valid topic to create a subscription. );}if ( arguments.length === 3 && typeof callback === number ) {priority = callback;callback = context;context = null;}if ( arguments.length === 2 ) {callback = context;context = null;}priority = priority || 10;var topicIndex = 0,topics = topic.split( /s/ ),topicLength = topics.length,added;for ( ; topicIndex < topicLength; topicIndex++ ) {topic = topics[ topicIndex ];added = false;if ( !subscriptions[ topic ] ) {subscriptions[ topic ] = [];}var i = subscriptions[ topic ].length - 1,subscriptionInfo = {callback: callback,context: context,priority: priority};for ( ; i >= 0; i-- ) {if ( subscriptions[ topic ][ i ].priority <= priority ) {subscriptions[ topic ].splice( i + 1, 0, subscriptionInfo );added = true;break;}}if ( !added ) {subscriptions[ topic ].unshift( subscriptionInfo );}}return callback;},unsubscribe: function( topic, context, callback ) {if ( typeof topic !== string ) {throw new Error( You must provide a valid topic to remove a subscription. );}if ( arguments.length === 2 ) {callback = context;context = null;}if ( !subscriptions[ topic ] ) {return;}var length = subscriptions[ topic ].length,i = 0;for ( ; i < length; i++ ) {if ( subscriptions[ topic ][ i ].callback === callback ) {if ( !context || subscriptions[ topic ][ i ].context === context ) {subscriptions[ topic ].splice( i, 1 );// Adjust counter and length for removed itemi--;length--;}}}}};}( this ) );