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
Post a Comment