Tuesday, June 26, 2012

AOP with JQuery

  • Create a JS named monitor.js
  • Add the following lines
            var monitor = {
      monitorFunction : function(instance){
jQuery.aop.before( {target: eval(instance.object), method: instance.method}, function(object) { 
                  console.log('Javascript function called : ' + instance.object + " function name: " + instance.method ); 
                  console.log("Method Inputs : "); 
                  console.log(object); 
                  console.log("object state : "); 
                  console.log(this); 
              }
);
              jQuery.aop.after( {target: eval(instance.object), method: instance.method},  function(result) { 
                     console.log('Function Completed : ' + instance.object + " method: " + instance.method );
    console.log('Returned: ' + result); 
                   return result;
                 } 
    );
          }
            }
               $(document).ready(function() {
                       monitor.monitorFunction({"object":"window","method":"testFunc1"})   
               });

        • Write a JS name testaop1.js place in the same location with the code

                       function testFunc1(elementId) {
                        console.log('testFunc1 executed');
                        return "Return value of testFunc1()"
                  }
          • Write a HTML file with following content

                          <html>
                                <head>
                                 <title>Page Title</title>
                                </head>
                                <body>
                                   <script type="text/javascript" src="jquery.js"></script>
                                   <script type="text/javascript" src="aop.min.js"></script>
                                   <script type="text/javascript" src="debug.js"></script>
                                   <script type="text/javascript" src="testaop1.js"></script>

                                  <button onclick="testFunc1()">Try it</button>
                               </body>
                         </html>

          So once Try it button press there will be console logs printed. This was test on Chrome 19.0.1084.56 m