It seems that this is not possible. Is there another neat way of accomplishing this?
// Our transitions class
function Transitions() {
this.fade = function() {
this.create = function() {
alert('you have arrived at the create method of the fade class');
}
}
}
This is possible. The way you are using it now.
You can do this to call a create function:
var x = new Transitions();
// Here .create does not exists
x.fade(); // Here the create function will be generated to the this object
x.create(); // Does alert
But you probably want something like this:
function Transitions() {
// Create an object with an sub object
this.fade = {
create : function() {
alert('you have arrived at the create method of the fade class');
}
}
}
var x = Transitions();
x.fade.create(); // Call the sub object
Related
I am making a simple hmtl/js game. I'd like to have all the data of the Game in DataofGame. It is like tennis, it is simpler than tennis: there is only set and match. changeinSet is called on click.
But I think i have a problem with private variable so it doesn't work.
Uncaught TypeError: Cannot read property 'WordsoftheGame' of undefined
//Added
document.getElementById('playboutton').addEventListener('click', newGame);
function newGame() {
var DataofGame = new newGameData();
}
// New game
function newGameData() {
this.pointTeam1 = 0;
this.pointTeam2 = 0;
this.WordsoftheGame = ShuffleListe();
this.ASet = new aSet();
}
//How the set is manage ********************
function aSet() {
var oneWord = DataofGame.ListeMot;
// display the word and delete it from the list
document.getElementById('jouer').innerHTML = oneWord[0];
DataofGame.WordsoftheGame.shift();
this.turn = true;
this.score = 0;
}
function changeinSet() {
DataofGame.ASet.score += 1;
//This is the other team's turn:
DataofGame.ASet.turn = !DataofGame.ASet.turn;
};
//shuffle liste
ListOfWords = ['Artiste', 'Appeler', 'Cheval', 'Choisir', 'Ciel', 'Croire', 'Dormir'];
function ShuffleListe() {
data = shuffle(ListOfWords);
return data;
}
function newGameData(){
this.pointTeam1=0;
this.pointTeam2=0;
this.WordsoftheGame= ShuffleListe();
this.ASet=new aSet();
}
//How the set is manage ********************
function aSet(){
var oneWord=DataofGame.ListeMot;
// display the word and delete it from the list
document.getElementById('jouer').innerHTML=oneWord[0];
DataofGame.WordsoftheGame.shift(); // << DataofGame not assigned yet
this.turn=true;
this.score=0;
}
Here when you're accessing DataofGame, it's not yet assigned because you're inside the constructor when calling aSet().
What you want to achieve is not completely clear, but if it's adding an ASet method to your object, you could write something like this:
function newGameData(){
this.pointTeam1=0;
this.pointTeam2=0;
this.WordsoftheGame= ShuffleListe();
this.ASet = function() {
// your code
};
}
NB your coding style for names is a bit messy, you should use uppercases consistently. The usage is to start constructor names with uppercases, the rest in lower cases.
You can let the function return an object with the data or just set the object.
function newGameData(){
return {
pointTeam1 : 0,
pointTeam2 : 0,
WordsoftheGame : ShuffleListe(),
ASet : new aSet()
}
}
But I would recommend to search for how to work with objects in javascript. Maybe this helps:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript
I'm trying to reuse an object I created to dynamically create more than one slider on a page.
My idea was to create an array and push my slider object there as often as needed, so I could access it by id. Unfortunatelly it doesn't work. Hope someone can point me in the right direction ...
So what I have is this;
var slider = {
"init":function(slide_it){
this.parent = $(slide_it);
/Count Elements and create a navigation depending on the count etc./
},
"otherstuff":{...}
}
In my (document).ready function I create an array and fill it up with different slider objects, add Ids to an accordion and call the init function:
var slide_array = [];
var accordion_sections = $('#accordion > div').length;
for(var i = 0; i < accordion_sections; i++){
slide_array.push(slider);
$('#accordion').children('div').eq(i).attr('id', 'slide_it_'+ i);
slide_array[i].init($('#slide_it_' + i).find('.slider'));
}
Then I have a button with class="next" and I call a function within the slider
$('.next').click(function(){
slide_array[0].otherstuff();
});
My plan is to get the parent of .next and its id so that I can use slide_array[parentID].otherstuff();
But ... it's not working propperly when I call the init function inside the for loop more then once.
More weird, some functions calls seem to work, other have no effect.
What am I doing wrong?
You can use Object.create.
var s1 = Object.create(slider),
s2 = Object.create(slider);
s1.init(...);
s2.init(...);
If you return this from init your will be able to chain like:
var s1 = Object.create(slider).init(...);
However at this point I would just ditch the object literal and use constructors, since this is what you need.
function Slider(slide_it) {
this.parent = $(slide_it);
}
Slider.prototype = {
constructor: Slider,
otherStuff: function () {}
};
var s1 = new Slider(...),
s2 = new Slider(...);
Write a function to return the object:
function slider() {
return {
"init":function(slide_it){
this.parent = $(slide_it);
/Count Elements and create a navigation depending on the count etc./
},
"otherstuff":{...}
};
}
Then:
slide_array.push( slider() );
That'll give you a separate object every time. In you're version, you're filling the array with references to the same single object.
Why not just turn that into a jQuery plugin ?
jQuery.fn.slider = function(options) {
return this.each(function() {
var sliderElem = $(this),
settings = $.extend({
speed : 3000,
something : 'other thing'
}, options);
otherStuff(sliderElem);
});
function otherStuff(elem) {
}
}
$('#accordion > div').slider();
No iteration or jumping through hoops, just call it on the collection and it creates a new slider for each element ?
I have a situation here.
Let's show an example:
function ScrewDriver(){
var data = ...;
this.driving = function(){
//Some Stuff Here
}
}
function Hammer(){
var data = ...;
this.stomp = function(){
//Some Stuff Here
}
}
function MultiTools(){
this.screwDriver = new ScrewDriver();
this.hammer = new Hammer();
}
Here is the base of our example.
Now I would like redirect the tools functions from the multiTools but dynamicaly.
Let's explain myself:
function Work(){
this.tools = new MultiTools();
this.tools.screw(); // I want to user directly the function of the proper object
this.tools.hammer.stomp(); // Not like this;
}
I was thinking of something like that:
function MultiTools(){
this.screwDriver = new ScrewDriver();
this.hammer = new Hammer();
for(var prop in this.screwDriver){
this[prop] = this.screwDriver[prop];
}
//Same for each object
}
But it's not working like I want because if I acces to the child object data in the child object function I'll get an error.
When im calling this.tools.screw(); I want in reality this.tools.screwDriver.screw();
In finally I just want a redirection.
Someone know how to do this?
Thanks in advance.
You can use .bind():
this[prop] = this.screwDriver[prop].bind(this.screwDriver);
That ensures that when the functions are called, they'll have the correct value of this.
You could write a general function for your MultiTools object:
function MultiTools() {
var multitool = this;
function promoteMethods(subobj) {
for (var prop in subobj)
if (typeof subobj[prop] == 'function')
multitool[prop] = subobj[prop].bind(subobj);
else
multitool[prop] = subobj[prop];
}
promoteMethods(this.hammer = new Hammer());
promoteMethods(this.screwDriver = new ScrewDriver());
// ...
}
I'd like to create an event for each function in a script, then inject the event trigger into the end of the function.
This way I can see exactly when each function has completed and use the events like hooks for other functions
If I can do it dynamically, I can add as many new functions as I like without having to create and append these events.
Here's a basic example of what I'm trying to do, this won't actually work, but it gives you an idea. I have been using jQuery, but I'll accept any JavaScript framework at all, and any method.
var obj = {};
(function()
{
this.init = function()
{
// loop through every function
$.each(this, function(k, v)
{
// create an event for every function
$('body').bind(v, function()
{
console.log('Event: ' + v + ' Finished');
});
// Add a event trigger into each specific function in the loop
this[v].call($('body').trigger(v));
});
}
this.another_function = function()
{
// do something
}
this.some_function = function()
{
/do something
}
}).apply(obj);
obj.init();
(edit) The script itself basically renders a Calendar, but there are a lot of callbacks, ajax requests, buttons. etc... If I could tie each feature down to an event, it would make my life easier when extending it, adding new features etc...
Loop through every function, replace it with new one, which calls original function on the same object and triggers event on body.
var obj = { };
(function()
{
this.init = function()
{
var self = this;
foreach(var name in this) {
if (typeof k !== 'Function') continue;
if (name ==='init') continue;
var original = this[name];
var newFunc = function() {
original.apply(self, arguments);
$('body').trigger(name);
}
this[name] = newFunc;
}
}
this.another_function = function()
{
// do something
}
this.some_function = function()
{
/do something
}
}).apply(obj);
obj.init();
//namespace
if (!window.SlidePanel) {
window.SlidePanel = (function () {
var SlidePanel = {};
return SlidePanel;
})();
}
SlidePanel.panel = function (el) {
this.$ = el;
}
SlidePanel.panel.prototype = {
insert: function () {
},
show: function () {
},
hide: function () {
}
}
SlidePanel.up = new SlidePanel.panel($('div#up-panel'));
SlidePanel.bottom = new SlidePanel.panel($('div#bottom-panel'));
SlidePanel.left = new SlidePanel.panel($('div#left-panel'));
SlidePanel.right = new SlidePanel.panel($('div#right-panel'));
I want to be able to set show and hide functions in some place of code. I thought to add setShowFn and setHideFn function to SlidePanel.panel.prototype like this
SlidePanel.panel.prototype = {
...
setShowFn: function (fn) {
this.show = fn;
},
setHideFn: function (fn) {
this.hide = fn;
}
}
Is this a good approach or there is more elegant way to do this?
If you want to override the show or hide function on just one instance of a SlidePanel.panel, you're free to just update that instance:
SlidePanel.up.show = function() { /* ... */ };
That breaks the inheritance of show for that specific instance, without changing any other instances that still use the show property from the prototype.
If you want to update show for all instances that are using the inherited version, you can do this at any time:
SlidePanel.panel.prototype.show = function() { /* ... */ };
...since the instances have a reference back to the prototype, and so changes to the prototype happen "live." Note that any instance on which you've done the first example above will be unaffected, because it's not using the version of show from the prototype anymore.
And yes, you're free to encapsulate this in your setShowFn and setHideFn functions if you want to; just be aware that there's nothing other than convention/documentation preventing code from assigning to the properties directly even if you do.