zafar-saleem / frame

Frame is a JavaScript framework. It consists frame.js file that has core functionality. At the moment, frame API offers some useful and handy functions such as registering new modules and starting(initializing). It also offers aggregated Events system(inspired from backbonejs events system) and pub/sub. Frame is completely scalable framework which separates modules and ensure loose coupling among modules. framejs file also acts like an interface between two modules.

How to use

In order to create/register new module, simply call FRAME.register() function and pass 'name' of the module as first parameter and object literal as second parameter.

Clone/Fork repo and run "npm install" command to install Grunt plugins. Once done, then execute "Grunt" command to parse JavaScript through .jshintrc and run tests.

FRAME.register('moduleName', {
  // rest of the code
});

The name of the module must be identical to the id of the component e.g.

<div id="Todo">
  <!-- rest of DOM elements -->
</div>
// JavaScript module with the name of Todo
FRAME.register('Todo', {
  // rest of the code
});

Above is mandatory, this way 'Todo' div element(component) is attached to this module thus, that element could be accessed like below, in entire module.

  this.$el;

Attaching DOM element, like above, also allows to access children nodes easy. For example,

  <div id="Todo">
    <h2>Title</h2>
  </div>

To access h2 inside 'Todo' module like below

  this.$h2

Every new module must contain one init function(which acts like a constructor). It is used to initialize the module.

FRAME.register('moduleName', {
  init: function () {
    //initialize this module.
  }
});

In order to use aggregatedEvents system, add an events object and pass name of the event and DOM elements on which that event is attached to as keys and callback function as values.

FRAME.register('moduleName', {
  events: {
    'click #button': 'callbackFunction'
  },
  
  init: function () {
    //initialize this module.
  },
  
  callbackFunction: function () {
    
  }
});

To use pub/sub events system, call FRAME.Events.trigger() function to trigger and event and FRAME.Events.listen() to listen the triggered events.

FRAME.register('moduleName', {
  events: {
    'click #button': 'callbackFunction'
  },
  
  init: function () {
    FRAME.Events.trigger('eventsName');
  }
});

FRAME.register('newModuleName', {
  init: function () {
    FRAME.Events.listen('eventsName', callback);
  },
  
  callback: function () {
    // callback function.
  }
});

A new method i.e. createElement() is added. It allows us to create DOM element by giving proper attributes and even children DOM elements with its own attribute. See example below in action.

$('body').append(FRAME.createElement('ul', {
    children: [
        this.createElement('li', { 'class': 'li', text: 'item' }),
        this.createElement('li', { 'class': 'li', text: 'Delete' }),
        this.createElement('li', { 'class': 'li', text: 'Update' })
    ]
}));

The above code will create below html markup.

<ul>
    <li>Item</li>
    <li>Delete</li>
    <li>Update</li>
</ul>

In order to initialize all modules call FRAME.startAll() method.

FRAME.startAll();

To start a single module simple call start() method and pass the name of module as parameter.

FRAME.start('moduleName');

In order to start a particular module then simply call start() method and pass the name of the module.

FRAME.start('moduleName');

Directory structure

example
  js
    scripts
        FRAME.js
        jquery.js
        todo.js
    styles
        bootstrap.min.css
        styles.css
  index.html
src
  FRAME.js
tests
  specs
    frame.js
.jshintrc
Gruntfile.js
README.md
package.json