Stacking up methods in Javascript - javascript

I have an object I created with this snip-it that looks like this:
...
var steps = new Array();
this.createStep = function(){steps.push(new step()); return steps[steps.length-1];};
this.getSteps = function(){return steps;}; //returns Array
this.removeStep = function(pos){steps.splice(parseInt(pos), 1);}; // integer possition zero base
this.insertStep = function(pos){steps.splice(parseInt(pos),0, new step());};
And this works fine:
...
var newStep = wfObj.createStep();
newStep.setTitle('Step-'+i);
newStep.setStatus('New');
but this does not
var newStep = wfObj.createStep().setTitle('Step-'+i).setStatus('New');
Could someone please tell me how to fix this or even what to call it when you chain methods like this?

This is called a fluent interface. The way to make it work is to have every function return this.

As Ned said, this is sometimes called fluent interface. It's also sometimes called method chaining, as you have heard.
You probably have some code somewhere that looks like this:
this.setTitle = function(newTitle) {
title = newTitle;
};
Change that to this:
this.setTitle = function(newTitle) {
title = newTitle;
return this;
};
Do the same for setStatus.

Related

Separate a Javascript function to reuse it, how?

I see some javascript and try to implement the function seperated to reuse it.
This is the old code:
var ListRenderRenderWrapper = function(itemRenderResult, inCtx, tpl)
{
var iStr = [];
iStr.push('<li>');
iStr.push(itemRenderResult);
iStr.push('</li>');
return iStr.join('');
}
And I would like to make something like this:
function wrapItems(itemRenderResult, inCtx, tpl)
{
var iStr = [];
iStr.push('<li>');
iStr.push(itemRenderResult);
iStr.push('</li>');
return iStr.join('');
}
var ListRenderRenderWrapper = wrapItems(itemRenderResult, inCtx, tpl);
is this ok or do I need to do it in another way?
If you just want to assign that function to a new variable so you can call it with a different name, simply do:
var ListRenderRenderWrapper = wrapItems;
The confusion may be coming from the fact that in JavaScript a function can be stored inside a variable and called as a function later.
This means that:
function thing() { /* code */ }
is the same as:
var thing = function() { /* code */ }
(Aside: I know there are subtle differences with hoisting etc, but for the purposes of this example they are the same).

Get calling arguments for getter in javascript

Given a javascript object like this:
var myThing = {};
Object.defineProperty(myThing, 'gen', {
'get' : function() {
// access caller name here, so I can return cool/neat stuff
}
});
I want to be able to get children of myThing.gen, but know what is being asked for in the getter.
for example:
var coolThing = myThing.gen.oh.cool;
var neatThing = myThing.gen.oh.neat;
I want the "oh.cool" or "oh.neat" part in getter, so I can make decisions based on this, and return something specific to it. I am ok with solution not working in IE, or old browsers, as it is primarily for node.
The actual purpose of this is so that I can request myThing.gen.oh.neat and have the myThing.gen getter resolve to require('./oh/neat.js') and return it.
Since require cache's, this is an efficient way to dynamically load modular functionality, and have a tidy interface (rather than just dynamically building the require where needed) without having to know the structure ahead of time.
If there is no introspection-of-name function that can get this for me, I could just do something less elegant, like this:
myThing.gen = function(name){
return require('./' + name.replace('.', '/') + '.js');
}
and do this:
neatThing = myThing.gen('oh.neat');
I don't like this syntax as much, though. I looked at chai's dynamic expect(var).to.not.be.empty stuff, but couldn't figure out how to do it completely dynamically. Maybe there is not a way.
without actually solving the problem of dynamically discovering the caller, I can do this:
var myThing = {};
Object.defineProperty(myThing, 'gen', {
'get' : function() {
return {
'oh':{
'cool': require('./oh/cool.js'),
'neat': require('./oh/neat.js')
}
};
}
});
Is there a way to do this dynamically?
You can't see what the property gen will be used for in the future, so you would need to return an object with properties that react to what the object is used for when it actually happens:
var myThing = {};
Object.defineProperty(myThing, 'gen', {
'get' : function() {
var no = {};
Object.defineProperty(no, 'cool', {
get: function(){ alert('cool'); }
});
Object.defineProperty(no, 'neat', {
get: function(){ alert('neat'); }
});
return { oh: no };
}
});
Demo: http://jsfiddle.net/UjpGZ/1/

Create a string (text) that declares variable and its value, for use in Javascript

I am messing with Javascript code that needs to have variable dynamic part.
I am trying to substitute this piece of Javascript code:
var data = document.getElementById('IDofSomeHiddenField').value;
var print = document.getElementById('IDofOutputField');
print.value = data;
with something like:
var encapsulatedData = "var data = document.getElementById('IDofSomeHiddenField').value;";
var encapsulatedPrint = "var print = document.getElementById('IDofOutputField');";
so that when I use somewhere in Javascript code:
encapsulatedData;
encapsulatedPrint;
this will work:
print.value = data;
But it does not work.
Is there a way how to declare:
var encapsulatedData
var encapsulatedPrint
in similar manner like I wrote above, so that:
print.value = data;
works?
Do you mean magically create global variables?
function encapsulatedData() {
window.data = document.getElementById('IDofSomeHiddenField').value;
}
function encapsulatedPrint() {
window.print = document.getElementById('IDofOutputField');
}
encapsulatedData();
encapsulatedPrint();
print.value = data;
This is not very sanitary code, and what you want is probably not what you should be doing. Could you step back and say what your goal is, rather than the means to that goal? I suspect what you really want to be using are closures or returning first-class functions for delayed evaluation.
For example:
function makePrinter(id) {
var outputfield = document.getElementById(id);
return function(value) {
outputfield.value = value;
}
}
function getValue(id) {
return document.getElementById('IDofSomeHiddenField').value;
}
var data = getValue('IDofOutputField');
var print = makePrinter('IDofOutputField');
print(data);
You have a syntax error I think. You're not closing the parentheses on the first and second lines.
var data = document.getElementById('IDofSomeHiddenField').value;
var print = document.getElementById('IDofOutputField');
print.value = data;
It is also bad form to use JS evaluation like you're attempting to do. If anything you really want to create a function for each of the page elements that returns the page element. ECMAScript 5 has properties which I think is sort of what you're looking for with what you're trying to do but that isn't how ECMAScript 3 JS can work.

Access object in array which is a property of another object - Javascript

It's been a long time since I learned OOP and I'm new to JS, so things might look weird for more advanced users - sorry :)
function page(title) {
this.subPages = [];
this.title = title;
}
page.prototype.addToSubPages = function(subPage) {
this.subPages.push(subPage);
}
page.prototype.getSubPages = function() {
return this.subPages;
}
Now I create 2 objects:
startPage = new page("start");
somePage = new page("foo");
...and try to add somePage into the array in startPage:
startPage.addToSubPages(somePage);
Now this doesn't seem to work, although it should be correct, if I'm not mistaken.
console.log(startPage.getSubPages());
This shows me that something is in the array, but the object appears to be empty. What am I doing wrong?
Also: How would I access a certain element in that array? Like this: startPage.getSubPages()[0].getFoo();?
Edit: Holy Mackerel, Batman! This is more like my actual code: http://jsfiddle.net/pZHKS/2/
You're all right, the code I posted actually works. As soon as inheritance comes into play, it doesn't work anymore. Why, though? It should work exactly like the code above, right?
function page(title) {
this.title = title;
}
function subPage() {
this.contentPages = [];
}
subPage.prototype = new page;
There are two problems.
your not calling page in subPage.
your using Child.prototype = new Parent; that's wrong, use Object.create instead
So the fixed code would be.
function page(title) {
this.title = title;
}
function subPage(title) {
page.call(this, title);
this.contentPages = [];
}
subPage.prototype = Object.create(page.prototype);

detecting object-reference duplication across JavaScript files

I have a number of files with contents like this:
function hello() {
...
element1.text = foo.locale.lorem;
element2.text = foo.locale.ipsum;
...
elementn.text = foo.locale.whatever;
...
}
function world() {
...
var label = bar.options.baz.blah;
var toggle = bar.options.baz.use_toggle;
...
}
This could be written more efficiently, and also be more readable, by creating a shortcut to the locale object:
function hello() {
var loc = foo.locale;
...
element1.text = loc.lorem;
element2.text = loc.ipsum;
...
elementn.text = loc.whatever;
...
}
function world() {
var options = bar.options.baz;
...
var label = options.blah;
var toggle = options.use_toggle;
...
}
Is there a simple way to detect occurrences of such duplication for any arbitrary object (it's not always as simple as "locale", or foo.something)?
Basically, I wanna know where lengthy object references appear two or more times within a function.
Thanks!
Are you talking about something like LINT? e.g. something externally that can report such object references or internally like looping over the window object
Javascript minifiers will do this for you. Not sure if thats what you're looking for. Heres a good js minifier http://jscompress.com/

Categories