I am preparing to write a widget for the browser that is both visual and interactive. I am a newbie to Javascript/Ecmascript and prototyping. I want to encapsulate the canvas element, abstract the data, and render visuals. A major design goal is to minimize developer effort. I am looking for direction and best practices. Nuff said here is what I have so far:
My WidgetLib.js
var WidgetFactory = WidgetFactory || (function() {
this.Kanvas = function(doid) {
this.domObjectID_ = doid;
this.domObject_ = document.getElementById(this.domObjectID_);
this.domObject_.addEventListener('click', Kanvas.onClick, false);
this.domObject_.addEventListener('mousedown', Kanvas.onMouseDown, false);
this.domObject_.widget_ = this;
this.domObject_.widget_.data_ = {};
this.domObject_.widget_.data_.cnt = 0;
// Get/Set canvas size, do other initialize stuff...
};
this.Kanvas.onClick = function() {
alert(this.widget_.domObjectID_ + " has been clicked " +
this.widget_.data_.cnt + " times");
};
this.Kanvas.onMouseDown = function(e) {
this.widget_.data_.cnt++;
};
return {
Kanvas: Kanvas
};
}()); // end of namespace
Put this in the HTML head section
<script src="WidgetLib.js">
Put this in HTML body section
<canvas id="C01"></canvas>
Put this in window.onLoad function
var k = new WidgetFactory.Kanvas("C01");
Is this a good design? I know there are good libraries (paper,easeljs,...) but I have specific requirements not to use them and implement specific/proprietary drawing functions.