1.2.2 • Published 6 years ago
booklet.js v1.2.2
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