Wednesday, September 26, 2012

Modular Javascript with RequireJS

<script data-main="/scripts/main" src="/scripts/require.js" type="text/javascript"></script>

main.js
(function(){
     requirejs.config(
            baseUrl: 'scripts',
            paths:{
                      'jquery': 'jquery-1.7.2'
            }
     );
     require(['alerter'],
            function(alerter){
                 alerter.showMessage();
            });
})();

alerter.js
define('alerter',
     ['jquery', 'dataservice'],
     function($, dataservice){
          var name = 'John',
               showMessage = function(){
                    var msg = dataservice.getMessage();
                    $('#messagebox').text(msg + ', ' + name);
                };
           return{
                 showMessage: showMessage
           };
      });

dataservice.js
define('dataservice',
      [],
      function(){
          var
               msg = 'Welcome to Code Camp',
               getMessage = function(){
                    return msg;
               };
          return{
               getMessage: getMessage
          };
      });

No comments: