JavaScript modules

gistfile1.txt

//Object Literal

var app = app || {};
 
//object literal
app = {
  init: function(){
    this.cache();
    this.bind();
  },
  cache: function(){
    this.anchor = $( 'a' );
  },
  bind: function(){
    this.anchor.on( 'click', this.doSomething )
  },
  doSomething: function(){
    console.log( "Simple app."  );
  }
}
 
app.init();

//------------------------------------------------
//http://css-tricks.com/how-do-you-structure-javascript-the-module-pattern-edition/
//------------------------------------------------

var s,
NewsWidget = {

  settings: {
    numArticles: 5,
    articleList: $("#article-list"),
    moreButton: $("#more-button")
  },

  init: function() {
    s = this.settings;
    this.bindUIActions();
  },

  bindUIActions: function() {
    s.moreButton.on("click", function() {
      NewsWidget.getMoreArticles(s.numArticles);
    });
  },

  getMoreArticles: function(numToGet) {
    // $.ajax or something
    // using numToGet as param
  }

};

//= require common/library.js

//= require module/news-widget.js
//= require module/some-other-widget.js

(function() {

  NewsWidget.init();

  SomeOtherModule.init();

})();


//------------------------------------ another way

/**
 * @name someFunction
 * @author 
 *
 * Basic usage:
 * someFunction();
 *
 * additionally you can use methods like someFunction.methodName();
 *
 * Advanced usage:
 * someFunction({
 *      "additionalOption": "thatCanOvervriteDefaults"
 * });
 */
function someFunction(opts) {
    //assign _root and config private variables
    var _root = this;
    var _cfg = $.extend({
        "someOption":       "some value"
    }, opts);

    /*
        INITIALIZE
    */
    this.init = function() {
        //some code
        _somePrivateMethod();
        _root.somePublicMethod();
    }
    /*
        Some Private Method (no "this")
    */
    _somePrivateMethod = function() {
        //some code
        console.log("_somePrivateMethod");
    }
    /*
        Some Public Method
    */
    this.somePublicMethod = function() {
        //some code
        console.log("somePublicMethod");
    }
    /*********************
     *   AUTO INITIALIZE
     **********************/
     this.init();
}

//declaration and initialization of someFunction
someFunction();

//someFunction._somePrivateMethod();
//returns: TypeError: someFunction._somePrivateMethod is not a function

//someFunction.somePublicMethod();
//returns: "somePublicMethod"


/**
 * @name someFunction
 * @author 
 *
 * Basic usage:
 * var someFunction = new SomeFunction();
 * someFunction.init();
 *
 * additionally you can use methods like someFunction.methodName();
 *
 * Advanced usage:
 * var someFunction = new SomeFunction({
 *      "additionalOption": "thatCanOvervriteDefaults"
 * });
 */
function SomeFunction(opts) {
    //assign _root and config private variables
    var _root = this;
    var _cfg = $.extend({
        "someOption":       "some value"
    }, opts);

    /*
        Some Private Method (no "this")
    */
    _somePrivateMethod = function() {
        //some code
        console.log("_somePrivateMethod");
    }
    /*
        Some Public Method
    */
    this.somePublicMethod = function() {
        //some code
        console.log("somePublicMethod");
    }
    
    /*
        INITIALIZE
    */
    var init = function() {
        //some code
        _somePrivateMethod();
        _root.somePublicMethod();
      return _root;
    }
    
    return init();
    
}

//declaration and initialization of someFunction
var someFunction = new SomeFunction();




ce a couple things about this html. First of the multiple script references. This can become a hassle. The controller has to come after Angular. The order of the scripts matter, when I create a lot of files and dependencies this becomes hard to manage. Will solve this later using RequireJs. Further more on line 8 I am using the as syntax to define a controller. This allows us to bind to properties defined on our class instead of properties defined on our $scope. Let’s have a look at the JavaScript:

   1: /// <reference path="..\..\Scripts\angular.js" />
   2:  
   3: var HelloWorldController = (function () {
   4:     function HelloWorldController() {
   5:     }
   6:     HelloWorldController.prototype.sayHello = function () {
   7:         return "Hello world!";
   8:     };
   9:     return HelloWorldController;
  10: })();
  11:  
  12: var module = angular.module('appModule', []);
  13:  
  14: module.controller('appController',HelloWorldController);