Every time I need a static variable, I end up tacking it on as a property to the object that uses it and needs it to persist.
Particularly, this index here(MT.MAOrb.startR.index) I need to be static or hold it's value until the function is called again by a callback.
Is using this form the best way to do this?
MT.MAOrb.startR.index
/**
** MAOrb
*/
MT.MAOrb =
{
pre : function() {
var o_p = {
model : 'MAOrb'
};
return o_p;
},
post : function( o_p ) {
MT.MAOrb.startR( o_p );
},
startR: function( o_p ){
var sky = document.getElementById( 'Ab1' );
if( MT.MAOrb.startR.index === undefined ) {
var size = Object.size( o_p );
console.log( 'size' + size );
var index1 = MT.MAOrb.random( 0, size - 1 );
console.log( 'index1' + index1 );
MT.MAOrb.startR.index = index1;
MT.MAOrb.startR.o_p = o_p;
}else{
MT.MAOrb.startR.index++;
}
var image_element = MT.MAOrb.makeElement( MT.MAOrb.startR.o_p[ MT.MAOrb.startR.index ] );
sky.appendChild( image_element );
MT.MAOrb.moveLinear( image_element );
},// ....more code here
};
If you are trying to emulate a public static property, then that's a totally A-OK way to do it.
JavaScript is not a classical object oriented language. It is prototypical.
One ramification is that there really isn't a concept of static in the language.
The way you're doing it is totally fine, as long as you don't mind that another object can directly read and modify the property.
Javascript has no concept of static vs. non-static variables: everything is just a property of an object. As such, there is no right or wrong way of doing static variables, only right or wrong ways of doing static-like variables.
That being said, adding the variable as a property of a fixed (module-like) object, as you're doing, is pretty much your best bet (ie. best practice). Unless you're using a library like Backbone.js that is, which actually does add support for static variables to its "models" (ie. it's class system).
I'd say that it's actually a rather strange way to do it. Javascript provides function level scope, and you can use that to your advantage by using an immediately-invoked-function-expression (IIFE):
myObject = {
count: (function () { // this function is invoked immediately
var staticCounter = 0;
return function () { // this is the actual 'count' function
return ++staticCounter;
};
}())
};
myObject.count(); // 1
myObject.count(); // 2
One reason that this could be considered a better approach is that it completely hides the static variable. If you were to do myObject.count.staticCounter, some other code might be reading or writing to that variable. Obviously you wouldn't want that to happen, but if you do this, you are completely guaranteed of that variable's scope, which leads to easier debugging and refactoring in the future.
Related
Okay, so I have a problem.
SHORT VERSION:
I want to do this:
const createThing = function( behaviours(intensities) ){
return {
behaviour1: behaviour1(intensity1),
behaviour2: behaviour2(intensity2)
and so on for each behaviour(intensity) passed as an argument
}
}
//so when doing:
const wtf = createThing( cat(loud), dog(whereistheball), bird(dee) );
// wtf should be:
{
cat: cat(loud),
dog: dog(whereistheball),
bird: bird(dee)
}
I've tryied among other things something like this:
const createThing = function( behaviours(intensities) ){
return {
for(a in arguments){
[a.name]: a;
}
}
}
I've been trying a lot of different ways to do this on the past week with no success. Can anyone help me?
LONG VERSION:
Okay so I have a magnet behaviour factory function and a particle factory function, it looks like this
const magnet = funtion(intensity) {
// returns a magnetic object with that intensity
}
const createParticle = function( location, static or dynamic, behaviours ){
// returns a particle object with the properties and behaviours listed above
}
The problem is I can't get the behaviours part to work. By now I have a magnetic behaviour factory, but I also want to have an eletrical, gravitacional, random etc. I want the particle object to get the behavior name as a new property key and the object it creates as this property value when this behaviour is passed as an argument to the particle factory function, something like this:
const particle1 = createParticle ( location, dynamic, magnet(intensity) )
//should return
{
location,
dynamic,
magnet: magnet(intensity)
}
or even
const particle2 = createParticle ( location, dynamic, magnet(intensity), eletric(intensity) )
//should return
{
location,
dynamic,
magnet: magnet(intensity),
eletric: eletric(intensity)
}
and so on.
I tried using the method function.name, but it is not possible since when I pass the behaviour function as a parameter to the particle, it evaluates into an object. I tried using a callback function and then using function.name but it doesn't do anything since I still need to pass the behavior function along with its parameters to the particle factory.
Is it even possible??? How???
No, this is not possible. Not unless cat/dog/bird/magnet/eletric all return an object that contains the name of the respective factory.
In particular:
function createParticle(...args) {
const particle = { kind: 'particle' };
for (const element of args)
particle[element.kind] = element;
return particle;
}
If you are using classes/constructors+prototypes, you can of course use the implicit .constructor.name instead of the .kind property that I chose in the example above.
I'd like to 'proxy' (not sure if that's the term at all) a function inside a function object for easy calling.
Given the following code
function Soldier() {
this.el = $("<div></div>").addClass('soldier');
this.pos = this.el.position; // $(".soldier").position(), or so I thought
}
In the console:
s = new Soldier();
$("#gamemap").append(s.el); // Add the soldier to the game field
s.pos === s.el.position // this returns true
s.el.position() // Returns Object {top: 0, left: 0}
s.pos() // Returns 'undefined'
What am I doing wrong in this scenario and is there an easy way to achieve my goal (s.pos() to return the result of s.el.position()) ?
I thought about s.pos = function() { return s.el.position(); } but looks a bit ugly and not apropriate. Also I'd like to add more similar functions and the library will become quite big to even load.
When you're calling s.pos(), its this context is lost.
You can simulate this behavior using call():
s.pos.call(s); // same as s.pos()
s.pos.call(s.el); // same as s.el.position()
This code is actually ok:
s.pos = function() { return s.el.position(); }
An alternative is using bind():
s.pos = s.el.position.bind(el);
You can use the prototype, that way the functions will not be created separately for every object:
Soldier.prototype.pos = function(){ return this.el.position(); }
I'd recommend to use the prototype:
Soldier.prototype.pos = function() { return this.el.position(); };
Not ugly at all, and quite performant actually.
If you want to directly assign it in the constructor, you'll need to notice that the this context of a s.pos() invocation would be wrong. You therefore would need to bind it:
…
this.pos = this.el.position.bind(this.el);
It's because the context of execution for position method has changed. If you bind the method to work inside the element context it will work.
JS Fiddle
function Soldier() {
this.el = $("<div></div>").addClass('soldier');
this.pos = this.el.position.bind(this.el);
}
var s = new Soldier();
$("#gamemap").append(s.el);
console.log(s.pos());
I'd like to be able to store the addresses of a bunch of different variables in an array. This allows me to access the variables by name or iterate through them if I need to. Is this possible in JS?
(function(ns){
ns.obj = new function(){
var foo = "foo";
var bar = "bar";
//i really want this:
//var ary = [&foo, &bar];
var ary = [foo, bar];
this.print = function() {
console.log( foo );
console.log( bar );
}
this.setFoo = function( newFoo ) {
//i really want this:
//*(ary[0]) = newFoo;
ary[0] = newFoo;
}
this.printAry = function() {
for( var i=0; i < ary.length; ++i ) {
console.log( ary[i] );
}
}
};
}(window.ns = window.ns || {}) );
ns.obj.print();
ns.obj.setFoo("newfoo!");
ns.obj.printAry();
ns.obj.print();
I looked at this:
JavaScript array of pointers like in C++
But I'd like to be able to use an element of ary on the LHS of an assignment and I don't think that example works in this situation.
WHY ON EARTH DO I WANT TO DO THIS?
A lot of comments so far have (rightfully) asked why I'd want to do this. I'm dealing with a proprietary API that involves an asynchronous object initialization mechanism. Basically I create an instance of an object and then pass it to this initializer to be able to actually use it. The initializer includes a field for an onSuccess handler to notify of successful initialization. My fully initialized object is passed as an argument into this success handler so that I can grab a reference to it.
I'm then free to initialize my next object. It looks kinda like this:
var a = new api.ApiObject();
var b = new api.ApiObject();
var c = new api.ApiObject();
var d = new api.ApiObject();
//omg this is ugly
api.initializeObject( {
objToInit: a,
onSuccess: function(args) {
a = args.obj;
api.initializeObject( {
objToInit: b,
onSuccess: function(args) {
b = args.obj;
api.initializeObject( {
objToInit: c,
onSuccess: function(args) {
c = args.obj;
api.initializeObject( {
objToInit: d,
onSuccess: function(args) {
d = args.obj;
}
} );
}
} );
}
} );
}
} );
a.doCoolStuff();
//and so on
This deeply nested mess just gets worse as I add more api.ApiObjects(). So what do I do to fix this? I can't change the API, but maybe a recursive function could help:
//maybe a recursive function could make this more concise?
function doInitialize( ary ) {
api.initializeObject( {
objToInit: ary[0];
onSuccess: function(args) {
//i'd like to assign this passed in reference to my local
//reference outside this function (var a, b, etc).
//An array of pointers would be useful here.
//how else can I get this assigned out, cuz this doesn't work...
ary[0] = args.obj;
if( ary.length > 1 ) {
ary.splice( 0, 1 );
doInitialize( ary );
}
}
}
}
doInitialize( [a,b,c,d] );
//this won't work because I don't have a reference to the fully initialized object
a.doCoolStuff();
So maybe the better question is: is there an established pattern to deal with asynchronous success chaining like this? I think I've seen other public JS frameworks (like dojo) use this sort of onSuccess chaining... how do I make this not ugly?
I might suggest that if your primary purpose for this is convenience as regards nesting of asynchronous callbacks, that you should consider a deferred/promise system.
I've written a couple of different promise libraries by hand.
jQuery comes with one built in (as do most "ajax libraries").
Here's what this might look like, in a better world:
doThingOne()
.then(doThingTwo)
.then(doThingThree)
.then(launch);
Assuming that doThingOne returns a promise.
A more familiar looking interface for people who use jQuery (or most other promise-using large libraries), might look like this:
var imageLoader = $.Deferred(),
loading = imageLoader.promise();
loading
.done(gallery.render.bind(gallery))
.done(gallery.show.bind(gallery));
var img = new Image(),
url = "...";
img.onload = function () { imageLoader.resolve(img); };
img.onerror = function () { imageLoader.reject("error message"); };
img.src = url;
Very basically, the Deferred above will hold two private arrays (one for "success", one for "failure"), and will extend an interface which allows the async part of the application to "succeed" or "fail", and will pass in whatever is chosen to be data/a callback/etc.
It also extends a promise method, which returns a promise object, containing subscription functions for the two private arrays. So you pass the promise object around to interested parties, and they subscribe callbacks to be iterated through, on success/failure of the async operation (and passed anything which is passed to the .resolve/.reject method of the operation).
This might seem like an inversion or extension of just adding a custom-event/listener/etc...
And it is.
The benefit of the abstraction is that the interface is cleaner.
Hiding this stuff inside of object interfaces, and just passing async promise-objects around can make your code look 100% synchronous:
var images = ImageLoader(),
gallery = ImageGallery(),
photo;
photo = images.load("//url.com/image.png"); // assuming `.load` returns a promise object
gallery.show(photo); // just a promise object, but internally,
//`.show` would subscribe a private method to the promise object
And doing things like having three separate async operations, which can arrive in any order, but must all be successful before advancing, then you can have something like this (again jQuery, but doing it by hand is possible, too).
$.when(promise_obj_1, promise_obj_2, promise_obj_3)
.done(nextPhase);
nextPhase, of course, being a callback which you anticipate to be fired if all three promises are successfully completed.
I'd be happy to provide implementation details for a barebones promise system, if you're like me, and don't like using different libraries without first understanding how each piece works on its own, and being able to replicate its functionality, without copying code.
The answer to the first part of your question is to use an object. You're thinking in C which doesn't have iteratable structs so C programmers reach for arrays. In JS objects are iteratable. So you should write it as:
ary = {
foo : 'foo',
bar : 'bar'
}
Or if we look at your second example:
var apis = {
a : new api.ApiObject(),
b : new api.ApiObject(),
c : new api.ApiObject(),
d : new api.ApiObject()
}
Now, as for the second part of your question. Your pseudo recursive code (pseudo because it's not really recursive in the stack sense since it's async) will now work with the apis object above. But you pass the keys instead of the object:
doInitialize( ['a','b','c','d'] );
Obviously, the bit above can be done dynamically by iterating through the apis object. Anyway, in the onSuccess part of the code you assign the result like this:
apis[ary[0]] = args.obj;
Oh, and obviously the objToInit should now be apis[ary[0]].
Now doing this should work as you expect:
apis.a.doCoolStuff();
In my init I have set some variables and one animate that uses those variables.
What if I want to use that same animate/variables in my clickSlide?
http://jsfiddle.net/lollero/4WfZa/ ( This obviously wouldn't work. )
I could make it global http://jsfiddle.net/lollero/4WfZa/1/ ( by removing the var )
Question is: Is there a better way, or is this perfectly ok way of doing it?
Put the variable outside the function and than get the value
var getWidth ;
var getHeight ;
$(function(){
var slideBox = {
gb: $('#box'),
init: function() {
sb = this,
getBox = sb.gb,
getWidth = getBox.width(),
getHeight = getBox.height();
getBox.animate({ marginLeft: '+='+getWidth }, 600 );
$("#button").on("click", this.clickSlide);
},
clickSlide: function() {
getBox.animate({ marginLeft: '+='+getWidth }, 600 );
}
};
slideBox.init();
});
than make use in the function so that you can get the vlue in you clickside function
If you are gonna use them a lot, I would made them a property of the object.
Your variables seem unnecessary, you can access everything you need to like this:
http://jsfiddle.net/4WfZa/6/. If you do need to store them you can always add them to the slideBox object and then populate them in init. This way the variables are stored against the object and can be used in any of the functions within it.
For a great article on javascript namespacing, including how to set up private and public variables see this article.
Im wondering if someone might be able to help me with something that i think it fairly straight forward:
Essentially i want to extend the prototypes of all datatypes (including intrinsic types), to allow some kind of custom functions, consider:
var x = "some string";
var y = 101;
x = "some other value";
y++;
x.onChange();
y.onChange();
This is the basic idea im after, but really what i want is to actually have the onChange (in this example) to be different so a new function for the actual variable (rather than a stardard prototype extension), ie:
x.onChange = function() {
alert("x.onChange");
}
y.onChange = function() {
alert("y.onChange");
}
This doesnt seem to work but i must be missing something quite simple no? I mean surely i can extend all object and types and add on new functions... no?
Any help would be greatly appreciated!
I might be tempted to approach this not by trying to add methods to existing types, but to create an object that can wrap a primative type. I would call this "observing" a value, and might implement it something like this:
function observable(v){
this.value = v;
this.valueChangedCallback = null;
this.setValue = function(v){
if(this.value != v){
this.value = v;
this.raiseChangedEvent(v);
}
};
this.getValue = function(){
return this.value;
};
this.onChange = function(callback){
this.valueChangedCallback = callback;
};
this.raiseChangedEvent = function(v){
if(this.valueChangedCallback){
this.valueChangedCallback(v);
}
};
}
This can then be used to observe changes in any value (so long as that value is then changed only by methods on the observable class - a small detraction IMO).
Something like this would work with the above code:
var obs = new observable(123);
obs.onChange(function(v){
alert("value changed to: " + v);
});
// the onChange callback would be called after something like obs.setValue(456);
Live example here --> http://jsfiddle.net/MeAhz/
Extend the object prototype:
Object.prototype.foo = function() { alert('hello world'); };
var a = 1;
a.foo();
The standard DEPRECATED way : Object.observe()
The Object.observe() method was used for asynchronously observing the
changes to an object. It provided a stream of changes in the order in
which they occur. However, this API has been deprecated and removed
from browsers.
let myObservdObject = Object.observe( { a : 'foo' }, e=>console.log('change!', e) );
myObservdObject.a = 'bee';
// callback gets executed
// and prints 'changed! in console, with the change event data
But proxies arrived to the Standard (ES6) an Object.Observe became deprecated and, in consecuence, unsupported by the browsers.
Proxies are the new way to observe... but implement a generic observer requires a more complex implementation, in comparsion with the way Object.observe used to provide us.
Observe value changes with third party libraries
You can find arround many implementations based in proxies.
Some of them implement the Observer pattern, wich forces you to set or get the values using specific methods :
Observe :
https://www.npmjs.com/package/observe
// define your object
var object = {a:'bee'};
// generate an observer
var observer = observe(object);
// declare the onchange event handler
observer.on( 'change', change=> console.log(change) );
// ready!
// set the value of 'a' and see how the callback is executed...
observer.set('a', 'foo')
// get the new value
observer.get('a') // returns 'foo'
Other libraries instead, let you interact with your variables using a more natural way:
WatchJS :
https://github.com/melanke/Watch.JS/
// define your object
var object = {a:'bee'};
// generate an observer and declare de hadler
watch(object , "a" , e=>console.log(e) );
// ready!
// set the value of 'a' and see how the callback is executed...
object.a = 'foo';
// get the new value
object.a // returns 'foo'
My own apprach : deep-observer
All the implementaions have their own caveats, and none of them was working for my purposes, so i had to implement my own approach.
The result is a highly customizable Observer method with a really small footprint ( <100 bytes gziped)
Deep-observer : https://www.npmjs.com/package/deep-observer
// create an observable object
const myObserved = new Observer( { a : 'bee' } , e=>console.log(e) ),
// perform a modification
myObserved.a = 'foo';
// console : { action:'update', oldValue:'bee', object:{a:'foo'}, name:'a' }
myObserved.a; // returns 'foo'