Javascript Module Architecture -


our web application built on zendframework has structured back-end. our current primary issue front end code comprises of hundreds of loose javascript functions. reading various articles across internet trying come structure @ least start group of functionality. current concept group functions within object.

starting div element in html:

<div id="rooflight-plan-svg"></div> 

i trying attach js object div , pass in initial options:

$('#rooflight-plan-svg').rooflightplangenerator({     height: 400,     width:  400, }); 

here main js:

$.fn.rooflightplangenerator = function(options) { var res = this; this.each(function(i, _element) {     var element = $(_element);     var rooflightplangenerator = element.data('rooflightplangenerator');     if(!rooflightplangenerator) {         rooflightplangenerator = new rooflightplangenerator(element, options);         element.data('rooflightplangenerator', rooflightplangenerator);     } }); return res; };  (function () { this.rooflightplangenerator = function(element, options) {     this.element = element;     this.svg     = document.createelementns("http://www.w3.org/2000/svg", "svg");     var defaults = {         height:     100,         width:      100,     }     // create options extending defaults passed in options     if (options && typeof options === "object") {         this.options = extenddefaults(defaults, options);     }     this.configuresvgcanvas(); }  rooflightplangenerator.prototype.configuresvgcanvas = function() {     //svg.setattribute('style', 'border: 1px solid black');     this.svg.setattribute('width', this.options.width);     this.svg.setattribute('height', this.options.height);     this.svg.setattributens("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");     this.element.append(this.svg); }  rooflightplangenerator.prototype.drawrooflightplan = function(span, width) {     var rect = document.createelementns(svgns, 'rect');     rect.setattributens(null, 'x', 100);     rect.setattributens(null, 'y', 100);     rect.setattributens(null, 'height', span);     rect.setattributens(null, 'width', width);     this.element.appendchild(this.svg); }  // overwrite defaults options function extenddefaults(source, properties) {     var property;     (property in properties) {         if (properties.hasownproperty(property)) {             source[property] = properties[property];         }     }     return source; }  }()); 

this working ok trying call next function , cannot work. configuresvgcanvas gets called in constructor function trying call drawrooflightplan nothing appears , not errors. using following code straight after initial rooflightplangenerator call:

$('#rooflight-plan-svg').rooflightplangenerator.drawrooflightplan(100, 100); 

any or tips on architecture , problem appreciated. thanks, james.


Comments

Popular posts from this blog

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

python Tkinter Capturing keyboard events save as one single string -

sql server - Why does Linq-to-SQL add unnecessary COUNT()? -