Javascript OOP new object - javascript

**** EDIT *****
using the answer bellow I have created a new function and put my object into it's prototype.
var mySlider = new Slider();
mySlider.init({.......})
but now when I try to call another function from within a function (this.animate) on my Slider.prototype all I get is
"Uncaught TypeError: Cannot read property '0' of undefined"
cant seem to work out how to call get other functions to work, I've amended my code bellow with my new code
*****/ EDIT *****
I've tried to create my own slider using dojo.
I have an HTML page with the content and at the end of the page I have a script to start my slider
dojo.ready(function () {
var mySlider = new Slider();
mySlider.init({
frameId: "#sliderFrame",
slideClass: ".slide",
sliderImgClass: ".sliderImage",
captionClass: ".caption",
thumbsClass: ".thumb",
seconds: 1
});
});
then on my external js file I have my code
function Slider() {}
Slider.prototype = {
//Initialize all Elements
init: function (object) {
this.sliderFrame = dojo.query(object.frameId);
this.slideContainers = this.sliderFrame.query(".slide");
this.slideImg = this.sliderFrame.query(object.sliderImgClass) || '';
this.SlideCaption = this.sliderFrame.query(object.captionClass) || '';
this.thumbs = this.sliderFrame.query(object.thumbsClass) || '';
this.numOfSlides = this.slideImg.length || 0;
this.hovering = false;
this.time = object.seconds * 1000 || 3000;
this.myInterval = '';
this.playing = 0;
this.start();
},
// Starts animation on slide 0
start: function () {
this.animate(this.playing);
this.initLoop(true);
this.listener(this.thumbs, this.sliderFrame);
},
//EventListener for mouse events
listener: function (theThumb, theFrame) {
theThumb.connect('onclick', this.clicked);
theFrame.connect('mouseenter', this.mouseOn);
theFrame.connect('mouseleave', this.mouseOff);
},
mouseOn: function () {
this.initLoop(false);
},
mouseOff: function () {
this.initLoop(true);
},
clicked: function (e) {
this.playing = this.getAttribute("data-slide");
this.animate(this.playing);
},
// start interval if true, otherwise clear
initLoop: function (act) {
if (act === true) {
this.myInterval = setInterval(this.loopSlides, this.time);
} else {
clearInterval(this.myInterval);
}
},
// interval resets loops through to end and back to zero
loopSlides: function () {
if (this.playing < this.numOfSlides - 1) {
this.playing++;
this.animate(this.playing);
} else {
this.playing = 0;
this.animate(this.playing);
}
},
//the animation which makes changes css to active slide 'e' || this.playing
animate: function (e) {
for (var ii = 0; ii < this.numOfSlides; ii++) {
this.slideContainers[ii].className = "slide";
this.thumbs[ii].className = "thumb";
this.slideImg[ii].className = "sliderImage";
this.SlideCaption[ii].className = "caption";
}
this.slideContainers[e].className = "slide active";
this.thumbs[e].className = "thumb active";
this.slideImg[e].className = "sliderImage active";
this.SlideCaption[e].className = "caption active";
}
};
The object works fine by it self and everything does as need be, I'm sure I could make it better.
What I'd like to do is have the mySlider set up with a "new" or "Object.create".
This is so I can have multiple Sliders on one page each becoming their own object.
I just can't get my script to run once I implement "new" or "Object.create" as my Slider needs to be a function not an object! :(
Cn anyone point me to a good pattern that I could use to implement what I'm trying to do.
I've gone through "essential js design patterns" but can't seem to find a pattern that fits.
Thanks in advance :)

Without Object.create()--just so you can understand instances--you would do:
function Slider() {};
Slider.prototype = {
init: function() {...}
// ...
};
var mySlider = new Slider();
mySlider.init(...);
Then inside the functions just be sure to use "this.whatever" instead of "Slider.whatever".
This is essentially the same effect as using Object.create().

oop in javascript is ugly. (at least until ES6 which supports the class and implements keywords) but even ES6 will not support multiple inheritance. I wrote a small class library (available on github) for javascript that makes creating classes and inheritance much easier to both develop and maintain. for example to create a class just do this:
ds.make.class({
type: 'a',
constructor: function (x) { this.val = x; },
mul: function (s) {
this.val *= s;
return this;
}
});
// now to inherit class a just do this...
ds.make.class({
type: 'b',
inherits: a,
constructor: function (x) { this.val = x; },
sub: function (s) {
this.val -= s;
return this;
}
});
var o = new b(5);
var output = o.mul(3).sub(5).val; // output = 10

Related

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

Checking div properties once page has loaded correctly

A couple times now I have wanted to check element sizes as the page loads. I've been doing that using $(document).ready();, but find that often the properties are null. The same is true if I use $(window).load();.
To get around this I have been using a bit of a hack, where I recursively recall the function if the element is not set.
Question: Is there a better approach in terms of professionalism?
var makeMusic = {
init: function() {
if ($('#bloc-1').height() == null) {
setTimeout(function() {
makeMusic.init() ########## THIS IS THE HACK ##########
}, 10)
} else {
makeMusic.height = $('#bloc-1').height();
makeMusic.width = $('#bloc-1').width();
}
makeMusic.watchExperience();
},
watchExperience: function() {
//Some stuff
}
}
var Main = {
run: function() {
makeMusic.init();
}
}
$(document).ready(Main.run());
You do not need a hack at all. The issue here is that Main.run function is invoked before document.ready() is fired. You should:
$(document).ready(Main.run);
Instead of
$(document).ready(Main.run());
When you add () to the function name interpeter invokes it as soon as the line is reached.
When passing a callback, you should only pass a reference to the function.
In terms of proffessionalism i think its better to put your code in a namespace like this:
var app = window.app || {};
app.set = {};
app.set.makeMusic = (function(){
// private members
this.height = "";
this.width = "";
var init = function() {
height = $('#bloc-1').height();
width = $('#bloc-1').width();
alert(height + " " + width);
};
//public interface
return {
init: init
};
})(); // self invoked
$(function(){
app.set.makeMusic.init();
});
fiddle

Custom object 'game' doesn't have specified method

I'm trying to call a method cardSelection() from a function game() but instead I'm getting an error report which throws back to me the whole function with a "has no method cardSelection()" The idea is to access the method through the click of a button, which HTML tag is as follows:
<img id="PlayerCard0" class="card" src="images/Cards/Mario.png" alt="Mario" title="Mario" onclick="game.cardSelection('PlayerCard0')">
I'm not posting the whole Javascript as I believe this to be the case of a mere declaration error, anyhow, game() and cardSelection() were declared as follows:
function game()
{
...
this.cardSelection = function(card)
{
var cardElem = document.getElementById(card);
var id = cardElem.getAttribute("id");
var call = document.getElementById("call");
var select = function(card)
{
var found = 0;
for (var card = 0, totalCards = 5; card < totalCards; card++)
{
if (document.getElementById("PlayerCard" + card + "selected"))
{found++}
}
if (found == 0)
{
call.setAttribute("onclick", "changeHand()");
call.childNodes[0].nodeValue = "Change";
}
if (found < 3)
{
id += "selected"
setAttributes(cardElem,
{
"id" : id,
"style": "position: relative; top: 1em;",
"onclick" : "cardSelection('" + id + "')"
});
}
else { return; }
}
var unselect = function (card)
{
cardElem.removeAttribute("style");
id = id.replace("selected","");
setAttributes(cardElem,
{
"id" : id,
"onclick" : "cardSelection('" + id + "')"
});
var cardNumber = 0;
var found = false;
while (cardNumber < 5 && !found)
{
if (document.getElementById("playerCard" + cardNumber + "selected"))
{found = true;}
cardNumber++;
}
if (!found)
{
call.setAttribute("onclick", "compareHands()");
call.childNodes[0].nodeValue = "Hold";
}
}
if (id.indexOf("selected") >= 0){unselect(card);}
else {select(card);}
}
...
}
How game() is called:
window.onload = function openingScreen()
{
var startGame = document.createElement("a");
startGame.setAttribute("onclick", "game()");
startGame.appendChild(document.createTextNode("Play"));
window.table = document.getElementById("table");
table.appendChild(startGame);
}
The problem you are experiencing is the result of confusion about Objects/Classes/Instances in javascript.
The critical point for you on this issue is the difference between new game() and game();
var foo = new game()
tells the JS engine to create a new object
point that object's Prototype (not prototype) at game's prototype
and then invoke the function game, but for the sake of the body of that function this will refer to the created object.
If the function doesn't return an object, assign our created object to foo (otherwise assign the function's return value to foo
Inside the body of your game function, you have this.cardSelection = function (....
If you simply invoke game as a function, so just game(), without the new keyword, this inside the body of the function will be the window object! So you'll add cardSelection to the window object.
Also importantly: game.cardSelection() is looking for a function named cardSelection as a property on the function game.
Here's an example of using that style that would work:
var foo = function () {
//do interesting stuff
}
foo.bar = function () {
//do interesting stuff related to foo
}
foo.bar();
What you seem to be expecting would need to be written this way:
var game = function () {
this.cardSelection = function () {
//perform card selection!
}
}
var aGame = new game();
aGame.cardSelection();
Or, if cardSelection does not need access to any private properties of the game, it could be written more efficiently as
var game = function () {
//setup the game
};
game.prototype.cardSelection = function () {
//perform card selection
};
var aGame = new game();
aGame.cardSelection();

Deep nesting functions in JavaScript

I cannot find an proper example for the love of my life on how to do this or even if this is possible. Based on my pieced together understanding from fragments of exmaples, I have come up with the following structure
var t = function()
{
this.nestedOne = function()
{
this.nest = function()
{
alert("here");
}
}
}
t.nestedOne.nest();
However this is not working (obviously). I would greatly appreciate if someone could point me in the right direction!
That is simply done with:
var t = {
nestedOne: {
nest: function() {
alert('here');
}
}
};
Your code otherwise doesn't make sense. this inside function doesn't refer to the function itself, it refers to the object context that the function is invoked in. And you are not even invoking the functions in your code.
If I say obj.func() then this inside func will be obj for that call. So assigning this.asd = true will assign true to that object's "asd" property.
If you wanted to do a nested class, it looks very different:
ClassA = (function() {
function ClassA() {
}
ClassA.prototype.method1 = function() {
};
function ClassB() {
}
ClassB.prototype.method1 = function() {
};
return ClassA;
}())
only ClassA can now make instances of ClassB. This should achieve same goals as nested classes in java.
See http://jsfiddle.net/CstUH/
function t(){
function f(){
this.nest = function()
{
alert("here");
}
}
this.nestedOne = new f();
}
var myt=new t();
myt.nestedOne.nest()
Edit 1:
You can also use
new t().nestedOne.nest()
instead of
var myt=new t();
myt.nestedOne.nest()
(http://jsfiddle.net/CstUH/1/)
Edit 2:
Or even more condensed:
function t(){
this.nestedOne = new function(){
this.nest = function(){
alert("here");
}
}
}
new t().nestedOne.nest()
http://jsfiddle.net/CstUH/2/
In JS functions are prime class objects, and you can access them directly in the code [i.e. without using reflection or so].
The code you put inside t body would be performed when actually executing t:
t();
You wrote t.nestedOne,nest(), but t has no nestedOne property - you should do like this:
var t = {
nestedOne : {
nest : function()
{
alert("here");
}
}
};
t.nestedOne.nest(); ​
I advice you to have a trip on John Resig's Learning Advanced JavaScript tutorial, it was very enlightening for me.
A simple callback handler I wrote today as an example of how I do deep nesting. I apologize if it's not the bees knees when it comes to code style, it made the concept a little clearer for me.
function test () {
this.that = this;
this.root = this;
this.jCallback = new Array(new Array()); // 2d
this.jCallbackCount = -1;
this.str = "hello";
// Callback handler...
this.command = {
that : this, // let's keep a reference to who's above us on the food chain
root : this.root, // takes us back to the main object
// add : function() { var that = this; console.log(that.that.str); },
add : function(targetFnc, newFunc) {
var that = this;
var home = that.that; // pretty much root but left in as an example of chain traversal.
var root = this.root; // useful for climbing back up the function chain
// console.log(that.that.str);
home.jCallbackCount++;
// target, addon, active
home.jCallback[home.jCallback.length] = { 'targetFunc' : targetFnc, 'newFunc' : newFunc, 'active' : true, 'id': home.jCallbackCount};
console.log('cbacklength: ' + home.jCallback.length);
console.log('added callback targetFunction:[' + targetFnc + ']');
return home.jCallbackCount; // if we want to delete this later...
},
run : function(targetFnc) {
var that = this;
var home = that.that;
console.log('running callback check for: ' + targetFnc + ' There is : ' + (home.jCallbackCount + 1) + 'in queue.');
console.log('length of callbacks is ' + home.jCallback.length);
for(i=0;i < home.jCallback.length - 1;i++)
{
console.log('checking array for a matching callback [' + targetFnc + ']...');
console.log('current item: ' + home.jCallback[i]['targetFunc'] );
if( home.jCallback[i]['targetFunc'] == targetFnc )
{
// matched!
home.jCallback[i]['newFunc']();
}
// console.log(that.that.jCallback[i].targetFunction);
}
}
};
}
test.prototype = {
say : function () {
var that = this;
console.log('inside');
// that.command('doSay');
that.command.run('doSay');
console.log(that.str);
}
} // end proto
// BEGIN TESTING **************************************************************************
// BEGIN TESTING **************************************************************************
// BEGIN TESTING **************************************************************************
var testing = new test();
testing.command.add('doSay', function () { console.log('213123123'); } );
testing.command.add('doSay', function () { console.log('12sad31'); } );
testing.command.add('doSay', function () { console.log('asdascccc'); } );
testing.say();
live:
http://jsfiddle.net/Ps5Uf/
note: to view console output, just open inspector in chrome and click on the "console" tab.

jQuery plugin development and the contexts

I'm trying to develop a jQuery plugin. Here's the code snippet I've written so far:
var MYNAMESPACE = MYNAMESPACE || {};
MYNAMESPACE.MyPlugin = function (inputElement, options) {
var element = $(inputElement),
oldValue = element.val(),
container = null,
init = function () {
container = $('<div class="container"></div>').hide().insertAfter(element);
//the suggest method is called from within the anonymous function
//called by getJSON...
},
suggest = function (resp) {
for (var i = 0; i < len; i++) {
var item = $('<div/>')
.html('whatever')
.mouseover(function (index) {
return function () {
activateItem(index);
};
} (i));
container.append(item);
}
},
activateItem = function (index) {
//container doesn't include those appended items.
//why???
};
init();
};
(function ($) {
$.fn.myplugin = function (options) {
return new MYNAMESPACE.MyPlugin(this.get(0), options);
};
} (jQuery));
Within the activateItem function, the container doesn't have any children!!! Why is that?
Any help would be highly appreciated,
container is already a defined jQuery object, but you are redefining to 'xxxx'. I'm guessing you want to insert the value? Try using container.html('xxxx')?
Also, it appears your mouseover function is returning a function where the index will be undefined (I haven't test it), but try this instead:
.mouseover(function () {
container.html('xxxx');
activateItem(i);
});
Update: Ok, now that I have time to look at the code, it appears len is not defined inside the suggest function. I made a rudimentary demo to test it all and it seems to work as expected.

Categories