Refactor to use OOP MVC - javascript

How do I refactor this to use OOP , with MVC pattern:
function () {
var dataToImage = { 'a': 'a.gif', 'b': 'something.gif' };
var currentimage = dataToImage['a'];
function setCurrentImage(e){ currentImage = e.src; }
function getMousePosition(){ }
function drawToolbar {
for(i in dataToImage){
document.write('<img src="'+dataToImage[i]+'" onclick="setCurrentImage(this);">');
}
document.write('<div onclick="drawImage(this,getMousePosition())"></div>');
return;
}
function drawImage(div,xy) {
var img = document.createElement('div');
div.style["left"] = xy[0];
div.style["top"] = xy[1];
img.innerHTML='<img src="'+currentImage+'">');
div.appendChild(img);
return;
}
drawToolbar();
}());

There's a really good article on this here. I won't repeat what it says here. But to get you started you might extract a Model like this:
var Images {
get: function(id) {
return this.data[id];
},
del: function(id) {
delete this.data[id];
// might make an ajax call here to update the data serverside...
},
'data': {
'a': 'a.gif',
'b': 'something.gif'
}
};
And your controllers might be something like:
Controllers.DrawToolbar = function () {
// get the data for the images and pass it to the toolbar view
};
Controllers.DrawImage = function() {
// get the data for the image and pass it to the image view
};
Your views would be pretty much as your drawImage and drawToolbar functions are now, except the data they render would be passed as parameters. For example:
Views.Image = function (target, data, x, y) {
var imgContainer = document.createElement('div'),
img = document.createElement('img');
imgContainer.appendChild(img);
target.style["left"] = x;
target.style["top"] = y;
img.src = data;
target.appendChild(imgContainer);
};
Then you can wire things up with events as appropriate. (Use addEvent and don't set events with onclick attributes on html elements.)

Related

js function for multiple variables

So, I have two js variables that i use a lot:
var rhpp = jQuery(this).parents('.rhp');
var rhp_id = rhpp.data("pi");
For example:
function my_function_1 (){
jQuery(document).on('click', '.button_1', function (e) {
var rhpp_1= jQuery(this).parents('.rhp');
var rhp_id_1 = rhpp_1.data("pi");
//do something
});
}
function my_function_2 (){
jQuery(document).on('click', '.button_2', function (e) {
var rhpp_2 = jQuery(this).parents('.rhp');
var rhp_id_2 = rhpp_2.data("pi");
//do something
});
}
function my_function_3 (){
jQuery(document).on('click', '.button_3', function (e) {
var rhpp_3 = jQuery(this).parents('.rhp');
var rhp_id_3 = rhpp_3.data("pi");
//do something
});
}
Because of it, i want to make this into a function that I can reuse:
function RHP_PARENT(a, b) {
var a = jQuery(this).parents('.rhp');
var b = a.data("pi");
}
Then, RHP_PARENT("rhpp", "rhp_id");
of course, it is not right. I am not too familiar with how to make a function for variables.
Could someone show me?
Thanks!
You could create a function which returns both of those values.
function getRhpParent(element) {
var rhpp = jQuery(element).parents('.rhp');
return {
rhpp: rhpp,
rhpp_id: rhpp.data("pi")
};
}
// Usage
var temp = getRhpParent(this);
var rhpp = temp.rhpp;
var rhp_id = temp.rhp_id;
You could do something like this:
function RHP_PARENT(that) {
var a = jQuery(that).parents('.rhp');
var b = a.data("pi");
return { parents: a, data: b };
}
This allows you to write:
var rhp_id_1 = RHP_PARENT(this).data;
Do you intend to access those variables outside of RHP_PARENT?
If so you should instantiate a and b outside of the function.
Do you intend to access a and b as properties of RHP_PARENT?
In which case, you may want to do the following:
var RHP_PARENT = {
'a': (function(){
jQuery(this).parents('.rhp');
})(),
'b': (function(){
this.a.data("pi");
})()
}
It's not entirely clear based on your question what your use case is, so it's difficult to formulate a single answer.
EDIT:
It seems like you updated your question, here are two viable solutions to your problem.
The following code will loop over all elements which have classes that begin with "button". This solves for the homogenous use case:
$("[class^='button']").each(function(){
$(this).click(function (e) {
var rhpp = jQuery(this).parents('.rhp');
var rhp_id = rhpp.data("pi");
//do something
});
})
The following solution solves for a more general use case and is a bit more flexible. The advantage here is that the business logic for getting rhhp and rhp_id is broken out into helper functions, allowing it to be more reusable. You may also reference other functions within the same object by using this:
var my_functions = {
get_rhhp: function(el){
return jQuery(el).parents('.rhp');
},
get_rhp_id: function(rhhp){
return rhhp.data("pi");
},
"my_function_1": function(){
jQuery(document).on('click', '.button_1', function (e) {
var rhhp = get_rhhp();
var rhp_id = get_rhp_id(rhhp);
//do something
});
},
"my_function_2": function(){
jQuery(document).on('click', '.button_2', function (e) {
var rhhp = get_rhhp();
var rhp_id = get_rhp_id(rhhp);
//do something
});
},
"my_function_3": function(){
jQuery(document).on('click', '.button_3', function (e) {
var rhhp = get_rhhp();
var rhp_id = get_rhp_id(rhhp);
//do something
});
}
}

JavaScript functions is throwing Uncaught TypeError

I have a web page. In my web page I'm referencing some JavaScript I've written in a file called "spacer.js". spacer.js is more complicated, but the general setup is like this:
function spacer() {
// do stuff
console.log(spacer.options);
}
spacer.initialize = function(options) {
spacer.options = options;
};
Then, in my web page, I have:
<script type="text/javascript" src="./spacer.js"></script>
<script type="text/javascript">
spacer.initialize({ id:1 });
window.onresize = spacer();
</script>
When I load my web page, I get an error that says:
Uncaught TypeError: spacer.initialize is not a function.
I don't understand. What am I doing wrong.
function spacer() {
// do stuff
console.log(spacer.options);
}
spacer.initialize = function(options) { // needed an assignment operator and function keyword
spacer.options = options;
}
To create a method you need to use the function keyword.
To the browser, this
spacer.initialize(options) {
spacer.options = options;
}
is interpreted like this
spacer.initialize(options); // method evocation
{spacer.options = options;}; // anonymous object
Change the way it is defined
//from
spacer.initialize(options) {
spacer.options = options;
}
//to
spacer.initialize = function(options) {
spacer.options = options;
}
In your JS remove the () from window.resize call
spacer.initialize({ id:1 });
window.onresize = spacer;
As an aside it looks like you're trying to do one of two things and sitting uncomfortably in the middle. I'd personally go for 1) in this instance, but probably best to stick with one or the other.
1) Creating an object with methods
var spacer = {};
spacer.initialize = function (options) {
this.options = options;
}
spacer.getOptions = function () {
return this.options;
}
spacer.initialize({ name: 'spacer' });
spacer.getOptions(); // { name: spacer });
DEMO
2) Using a constructor function to build an space object instance:
function Spacer() {}
Spacer.prototype.initialize = function (options) {
this.options = options;
return this;
}
Spacer.prototype.getOptions = function () {
return this.options;
}
var spacer = new Spacer().initialize({ name: 'spacer' });
spacer.getOptions(); // { name: 'spacer' }
DEMO

How to organise this module pattern and elegantly deal with ajax calls

I have couple of modules that do their own thing, but need them to sometimes access a property of one another (not that intertwined, just one json obj). Like so
var Bananas = (function() {
// Bananas.properties would look like this
// Bananas.properties = { 'color' : 'yellow' };
var methodToGetProperties = function() {
API.get('bananas')
.done(function(data) {
Bananas.properties = data;
}
};
var publiclyReturnProperties = function() {
if (!Bananas.properties) {
methodToGetProperties();
} else {
return Bananas.properties;
}
};
var doSomethingBananas = function() {
bananas.doing.something;
bananaHolder.innerHTML = Bananas.properties;
}
var init = function() {
doSomethingBananas
}
return {
init: init,
properties: publiclyReturnProperties,
};
})();
var Apples = (function() {
var doSomethingApples = function() {
apple.innerHTML = Bananas.properties.color;
};
var init = function() {
doSomethingApples();
};
return {
init: init
};
})();
Bananas.init(); Apples.init();
Now, the way I do it now is by simply revealing the methodToGetProperties, which returns the API call, and then work on using jQueries deferred method wherever I call it. But I feel this ruins my code by putting .done everywhere.
I've been reading up to singleton pattern and feel it might be the solution to my problem, but I'm not sure how to implement it. Or maybe implement a callback function in methodToGetProperties, but again not confident as to how.
Would kindly appreciate advice on how to organise my app.

How to create a javascript library using a closure

I have written some javascript that I would to encapsulate in a closure so I can use it elsewhere. I would like do do this similar to the way jQuery has done it. I would like to be able to pass in an id to my closure and invoke some functions on it, while setting some options. Similar to this:
<script type="text/javascript">
_snr("#canvas").draw({
imageSrc : someImage.png
});
</script>
I have read a lot of different posts on how to use a closure to do this but am still struggling with the concept. Here is where I left off:
_snr = {};
(function (_snr) {
function merge(root){
for ( var i = 1; i < arguments.length; i++ )
for ( var key in arguments[i] )
root[key] = arguments[i][key];
return root;
}
_snr.draw = function (options) {
var defaults = {
canvasId : 'canvas',
imageSrc : 'images/someimage.png'
}
var options = merge(defaults, options)
return this.each(function() {
//More functions here
});
};
_snr.erase = function () {};
})(_snr);
When ever I try to call the draw function like the first code section above, I get the following error, '_snr is not a function'. Where am I going wrong here?
EDIT
Here is what I ended up doing:
function _snr(id) {
// About object is returned if there is no 'id' parameter
var about = {
Version: 0.2,
Author: "ferics2",
Created: "Summer 2011",
Updated: "3 September 2012"
};
if (id) {
if (window === this) {
return new _snr(id);
}
this.e = document.getElementById(id);
return this;
} else {
// No 'id' parameter was given, return the 'about' object
return about;
}
};
_snr.prototype = (function(){
var merge = function(root) {
for ( var i = 1; i < arguments.length; i++) {
for ( var key in arguments[i] ) {
root[key] = arguments[i][key];
}
}
return root;
};
return {
draw: function(options) {
var defaults = {
canvasId : 'canvas',
imageSrc : 'images/someimage.png'
};
options = merge(defaults, options);
return this;
},
erase: function() {
return this;
}
};
})();
I can now call:
<script type="text/javascript">
_snr("#canvas").draw({
imageSrc : someImage.png
});
</script>
Because you declared _snr as an object and not a function. Functions can have properties and methods, so there's various ways to achieve what you want, for example one of them would be say...
_snr = function(tag) {
this.tag = tag;
}
_snr.foo = function() {
//Code goes here
}
You can also pass the outer context into a closure to hide your variables from accidentally polluting the global namespace, so like...
(function(global) {
var _snr = function(tag) {
this.tag = tag;
}
_snr.foo = function() {
//Code goes here
}
//export the function to the window context:
global._snr = _snr;
})(window);
window._snr('#tag').foo('wat');
Happy coding.
Because your _snr is an object, not a function. You have to call it like this:
_snr.draw({
canvasId: '#canvas',
imageSrc: 'someImage.png'
});
When you do _snr('#canvas') that is a function call which is why you're getting that error. _snr is an object with some methods attached to it such as draw() and erase(). The reason jQuery is able to pass arguments into the $ is because they return the $ as a function object which is why we're able to pass it various selectors as arguments.
You are going wrong at the first line _snr = {}
It needs to be
_snr = function(){
selector = arguments[0]||false;
//snr init on dom object code
return _snrChild;
}
Im on a mobile phone but when im on a pc I will maybe fix the whole code c:
Here you have a snr object and that has erase and draw methods. What you intend to do is to write a _snr function which will get an id and return a wrapper object. That returned object should have erase and draw methods. so you can do
var returnedObject = _snr("my_id");
returnedObject.draw("image.png");

Can you pass an objects method as a callback in JavaScript?

So I have an object lets call it A with a sub object which I'll call B which has a method/function called "CallMe" which I wish to be called when and object loads but I can't seem to get it to work. Is it even possible?
Example:
var A = {
B: {
CallMe: function() {
alert('I\'ve been Called!');
}
}
}
var objImage = new Image();
objImage.onLoad = A.B.CallMe;
objImage.src = '/img/some_image.png';
you should bind it to .onload property not .onLoad - this should fix it, silly typo - such are the worst
It works fine... you just need to need to call it (objImage.onLoad();):
var A = {
B: {
CallMe: function() {
alert('I\'ve been Called!');
}
}
}
var Image = function(){
}
Image.prototype.onLoad = null;
$(document).ready(function() {
var objImage = new Image();
objImage.onLoad = A.B.CallMe;
objImage.onLoad();
});
Test code here:
http://www.jsfiddle.net/yAJfd/1/

Categories