Base Library in Scalable JavaScript Application Architecture
10 views
Skip to first unread message
Anton
Oct 29, 2018, 4:09:52 AM10/29/18
to Zakas Books
Hi. I dont understand, how Base Library must provide API for modules. As I can imagine it make a lot of duplicated code in Core and Sandbox. And also, as I can understand, then I can repeat all of Base library API in my own methods. I marked with (!!!!!!!!) interesting parts of code/ Look at this example with jQuery:
function Sandbox (core) {
return {
// !!!!!!!! duplicated methods
getElement: core.getElement,
addEventListener: core.addEventListener,
append: core.append,
canSay: function() {
return true;
},
notify: function(data) {
core.getListeners(data.type)
.forEach(item => {
item.notifyCb(data);
});
},
listen: function(eventTypes, notifyCb, moduleInstance) {
eventTypes.forEach(type => {
core.addListener({type, notifyCb, moduleInstance});
});
}
}
}
Core = function(){
var moduleData = {};
var listeners = [];
var $app = $('#app');
return {
// !!!!!!!!!!!! wrapped jQuery methods
getElement: function(selector) {
return $app.find(selector);
},
append: function(template) {
$app.append(template);
},
addEventListener: function(el, eventType, cb) {
el.on(eventType, cb);
},
// other methods
getListeners: function(type){
return listeners
.filter(item => item.type === type);
},
addListener: function(data){
listeners.push(data);
},
register: function(moduleId, creator){
moduleData[moduleId] = {
creator: creator,
instance: null
}
},
start: function(moduleId){
moduleData[moduleId].instance =
moduleData[moduleId].creator(new Sandbox(this));
moduleData[moduleId].instance.init();
},
stop: function(moduleId){
var data = moduleData[moduleId];
if (data.instance){
data.instance.destroy();
data.instance = null;
}
},
startAll: function(){
for (var moduleId in moduleData){
if (moduleData.hasOwnProperty(moduleId)){
this.start(moduleId);
}
}
},
stopAll: function(){
for (var moduleId in moduleData){
if (moduleData.hasOwnProperty(moduleId)){
this.stop(moduleId);
}
}
}
//другие методы не показаны
}
}();
Core.register("module_publish", function(sandbox){
return {
template: function(){
return '<input class="author" value="1">';
},
init: function(){
//initialization
if (sandbox.canSay()) {
// !!!!!!!!!!!! abstract api for DOM manipulation
sandbox.append(this.template());
var el = sandbox.getElement('.author');
sandbox.addEventListener(el, 'change', function(e){
console.log(e);
sandbox.notify({
type: "new-status",
data: el.val()
});
});
}
}
};
});
});
Core.startAll();
Please correct my code so it will be correct. Thank you!
Reply all
Reply to author
Forward
0 new messages