booklet

A simple module initializer by creating view models. The main attitude of this module binding system is inspired by Nicholas Zakas's presentation here : http://www.slideshare.net/nzakas/scalable-javascript-application-architecture

Usage

Create a Booklet instance

var app = new Booklet('app', {someOption : 'some options'});

Generate a Page instance by invoking createView method with a page name

var page = app.createView('page', {somePageOption : 'some page options'});

Bind a module into the instance with an init method calling the inner functions

page.register('testModule', () => {
    return {
      init: () => {
        console.log('init invoked');
        this.testFunc();
      },
      testFunc: () => {
        console.log('testFunc invoked.');
      }
    }
  }
});

Bind a module into the instance with a Page instance in the callback

page.register('testModule', (page) => {
    return {
      init: () => {
        console.log('init invoked');
        var config = page.getConfig();
        console.dir(config.somePageOption); // logs 'some page options'
      },
      testFunc: () => {
        console.log('testFunc invoked.');
      }
    }
  }
});

Make the new module begin to work specifically mentioning its name

page.start('testModule');

Or make the all modules begin to work

page.startAll();

Binding Events for Elements

const elementCache = {
  body: document.getElementsByTagName('body'),
  footer: document.getElementsByTagName('footer')
}

page.register('testModule', {
  init: () => {
    this.bindEvents();
  },
  bindEvents: () => {
    page.bindEvent(elementCache.body, 'click', () => {
      console.log('clicked on body');
    });

    page.bindEvent(elementCache.footer, 'mouseout', () => {
      console.log('mouse out on footer');
    });
  }
});

Creating Services for Booklet Instance

Create a Booklet Service

app.createService('testService', () => 'testService invoked');

Invoke the Current Booklet Service

page.register('menu', {
  init: () => {
    console.log(this.getServiceWorked()); //logs "testService invoked"
  },
  getServiceWorked: () => {
    var testService = app.getService('testService');
    return testService();
  }
});

Creating Services for Page Instance

Create a Page Service

page.createService('testService', () => 'testService invoked');

Invoke the Current Page Service

page.register('menu', {
  init: () => {
    console.log(this.getServiceWorked()); //logs "testService invoked"
  },
  getServiceWorked: () => {
    var testService = page.getService('testService');
    return testService();
  }
});

Creating Services for Booklet Instance with an Inner Service Provider

Create a Booklet Service

app.createService('testService', () => 'testService invoked');

Invoke the Current Booklet Service by a Service Provider Method

page.register('menu', {
  init: () => {
    console.log(this.getServiceWorked()); //logs "testService invoked"
  },
  getServiceWorked: () => {
    var testService = this.getService('testService');
    return testService();
  },
  getService: (serviceName) => {
    return app.getService(serviceName);
  }
});

Creating Services for Page Instance with an Inner Service Provider

Create a Page Service

page.createService('testService', () => 'testService invoked');

Invoke the Current Page Service by a Service Provider Method

page.register('menu', {
  init: () => {
    console.log(this.getServiceWorked()); //logs "testService invoked"
  },
  getServiceWorked: () => {
    var testService = this.getService('testService');
    return testService();
  },
  getService: serviceName => page.getService(serviceName)
});

Creating Configuration Options for Booklet instance

Create a Booklet instance configuration option

var app = new Booklet('app', {
	appOption : 1
});

Create a Page instance configuration option

var page = app.createView('page', {
  pageOption : 2
})

Create a Module Using Configuration Options

page.register('testModule', {
  init: () => {
    this.logOptions();
  },
  logOptions: () => {
    console.dir(app.defaults);
    console.dir(page.defaults);
  }
});

Creating Custom Events

Subscribe for an Event with Page Instance

page.subscribe('testEvent', (data) => {
  console.log(data);
});

Publish an Event with Booklet Instance

app.publish('testEvent', {
  testData : 'test data...'
}); // logs Object {testData: "test data..."}

TODO

• The subscribe/publish structure to be implemented into modules like page instances