I have a simple OOP code I started:
(function(window,document){
var _data = {
get:function(d){ return _data.data[d] },
set:function(prop,param){ _data.data[prop]=param },
remove:function(d){ delete _data.data[d] },
data:{}
};
window._data = _data.hasOwnProperty() ? _data.data : _data;
})(window);
What I want done when I type _data alone it'll return _data.data then if I do _data.get(... it'll do what each property needs to do. How is this done?
OR
(function(window,document){
var _data = {
get:function(d){ if(!d){return _data.data } else { return _data.data[d] } },
set:function(prop,param){ _data.data[prop]=param },
remove:function(d){ delete _data.data[d] },
data:{}
};
window._data = _data;
})(window);
It sounds like you're asking for _data to represent two different things depending upon whether a property was used with it or not. You can't do that in javascript.
You can do this in the global scope:
var _data = {
get:function(d){ return _data.data[d] },
set:function(prop,param){ _data.data[prop]=param },
remove:function(d){ delete _data.data[d] },
data:{}
};
Then, _data.get() will call that method and return data.
But, when you just refer to _data, you're going to get the whole _data object above, not just _data.data.
The only thing remotely like what you're asking for I can think of would be to make _data be a function like this:
function _data() {
return _data.data;
}
_data.get = function(d){ return _data.data[d] };
_data.set = function(prop,param){ _data.data[prop]=param };
_data.remove = function(d){ delete _data.data[d] };
_data.data = {};
This works because a function is an object that can have properties.
Then, you could do:
_data()
And that would give you _data.data.
Or, you could do :
_data.get(x)
And that would call the get method.
If you offered some explanation for why you're trying to do this, we could probably offer other ideas.
Related
In my Ionic app I've added the plugin 'ngStorage' and it comes with a little demo code:
var add = function (thing) {
$localStorage.things.push(thing);
}
This works exactly as told. I add("foo") it, and do getAll() and the value is there. I remove the add(), but keep the getAll(), I still have the value "foo" (as expected).
This isn't very usefull for me, I want to access it with keys, so I've made the following:
var addByKey = function (key, value) {
$localStorage.things[key] = value;
// Or, I've also tried:
$localStorage.things.key = value;
}
When I do the addByKey("foo","bar") and then the getAll() I get the values exactly as I want. When I remove the addByKey() and reload, I expect it to still remember the set information, but it doesn't exist. However, the first attempt via the add() function still exists, "foo" is still there (meaning the array doesnt reset).
How do I make a key->value type of structure?
In case it's usefull:
.factory ('StorageService', function ($localStorage) {
$localStorage = $localStorage.$default({
things: []
});
var _getAll = function () {
return $localStorage.things;
};
var _add = function (thing) {
$localStorage.things.push(thing);
}
var _addByKey = function (thing, value) {
$localStorage.things[key] = value;
// Or, I've also tried:
$localStorage.things.key = value;
}
return {
getAll: _getAll,
add: _add,
addByKey: _addByKey
};
})
Assuming that you want a key value storage system you can simply use an object instead of an array so that every key can be set as a property of this object.
.factory('StorageService', function($localStorage) {
$localStorage = $localStorage.$default({
things: {}
});
var _getAll = function() {
return $localStorage.things;
};
var _addByKey = function(thing, value) {
$localStorage.things[thing] = value;
}
return {
getAll: _getAll,
addByKey: _addByKey
};
})
However, assuming that you want to keep a reference of all values on the main collection and access them through keys, you can consider using an object to store the things intead of an array. So that you can use a property to store all items (you can store in a different place as well) and use this object to store your keys by referencing the to a desired value on your collection.
You may need to implement the deletion logic to maintain the consistence between the collection and the dictionary.
Your factory would look like this:
.factory('StorageService', function($localStorage) {
$localStorage = $localStorage.$default({
things: {
items: []
}
});
var _getAll = function() {
return $localStorage.things.items;
};
var _add = function(thing) {
$localStorage.things.items.push(thing);
}
var _addByKey = function(thing, value) {
var i = $localStorage.things.items.push(value) - 1;
$localStorage.things[thing] = $localStorage.things.items[i];
}
return {
getAll: _getAll,
add: _add,
addByKey: _addByKey
};
})
I'm trying to make an object as a mock to pass into a test.
I don't know if I'm constructing it correctly - I'm getting Error: User() method does not exist.
injectedUser = {
set: function(key, val){
this[key] = val;
}
};
injectedParse = {
Parse: {
User: function() {
return injectedUser;
}
}
};
Parse = function() {
return injectedParse;
};
The desired behavior I'm looking for is for function Parse.User to be called with user = new Parse.User and be able to do user.set("key", "value");
But it seems like I'm not building this object properly? I have another issue but since it is more a javascript thing potentially, I made a new, more general issue about building objects
I also tried
set = function (key, val) {
this[key] = val;
}
mockParse = function(){
this.User()
};
mockParse.prototype.User = function(){
return set
};
$provide.value('Parse', mockParse);
That gave me the same error.
All the information you should know about constructing objects are at: http://ericleads.com/2013/02/fluent-javascript-three-different-kinds-of-prototypal-oo/
I need some help in understanding something, that propably is easy for serious jquery and javascript programmers.
Lets say I have a code like this:
jQuery.fn.extend({
myNameSpace: {
myPlugIn: function (o) {
var o = { variable : o.variable || false };
var myfunction = function(v) {
o.variable = v;
};
return {
myfunction : myfunction
};
}
});
and now I am able to call that with:
x = new $.myNameSpace.myPlugIn({variable : 99}) ;
and then I call my function myfunction like this
x.myfunction(20);
I can understand that, now the question: how can I get the value of variable inside my plug in.
I tried something like alert(x.o[variable]); etc. but I just cant get it - It must be easy...
What I try to accomplish is a value I could call if something inside the plugin is finished, or calculated.
You can not get the variables inside with your current code, unless you change it to:
var myfunction = function(v) {
o.variable = v;
return v; //or o.variable
};
//...
x.myfunction(20) //20;
Added
It seems like you are trying to make a plugin for jQuery. To create a plugin, you do not use $.extend. $.extend is only used to preset default settings. [1] Normally this is how you set up a plugin:
(function($) {
var methods = {
getVar: function(){
return $.extend({
data: data,
}, methods);
},
setVar: function(d){
data = d;
return methods;
}
},
data = {};
$.fn.myPlugin = function(options) {
//do stuff
data = $.extend( data , options );
return methods;
};
})(jQuery);
http://jsfiddle.net/DerekL/wv5QH/1/
Given these snippets (hopefully complete enough for this question)...
ModelA.js (has many modelBs):
ModelBs = (function(_super) {
ModelB.prototype.bWithName = function(name) {
return this.find(function (b) {
return b.name == name;
});
}
})(Backbone.Collection);
return ModelA = (function(_super) {
...
ModelA.prototype.initialize = function() {
this.modelbs = new ModelBs(this.modelbs, {});
};
ModelA.prototype.bWithName = function(name) {
return this.modelbs.bWithName(name);
};
return modelA;
})(BaseModel);
ModelC.js (has one modelA):
ModelC.prototype.toString = function(opts) {
...
console.log(this.modelA); // defined...
console.log(this.modelA.modelBs); // defined...
console.log(this.modelA.bWithName("foo")); // undefined
...
}
In ModelC.js, why are this.modelA and this.modelA.modelBs defined, but this.modelA.bWithName() undefined, and how can I fix it?
This works: this.modelA.modelBs.first().
This returns undefined: this.modelA.modelBs.where({name:"foo"}).
In the web console, this works: modelZ.modelAs.first().bWithName("foo").attributes.
Are accessors or methods in general not available through other models?
Thanks-
Bah. The method was in fact available, but the strict equals (===) was killing the search. In one instance I was trying to search with the wrong typeof name.
Thanks for the input though!
Ok I'm not sure the title of this post is the correct way to refer to what I mean and I'm pretty sure I already know the answer to this question but I just wanted some clarification.
If I have an oject like this
var myObj = {
settings : {
domObj = document.getElementById('elem1');
},
myFunc1 : function () {
return this.domObj;
},
myFunc2 : function () {
return this.domObj;
}
}
myObj.myFunc1();
myObj.myFunc2();
Is the domObj cached the first time it is accessed or is the dom traversed in both functions? I am attempting to access the Dom only once but not sure if this is a possible solution.
Assuming you really meant this:
var myObj = {
settings : function() {
domObj = document.getElementById('elem1');
},
myFunc1 : function() {
return this.domObj;
},
myFunc2 : function() {
return this.domObj;
}
};
the answer is that "domObj" is a global variable because you forgot the var keyword. Now, you may have meant this:
var myObj = {
domObj: null,
settings : function() {
this.domObj = document.getElementById('elem1');
},
myFunc1 : function() {
return this.domObj;
},
myFunc2 : function() {
return this.domObj;
}
};
in which case "domObj" is just a property of "myObj". It'd get set if you call
myObj.settings();
Assuming your doing "this.domObj =" and the other corrections you've noted; yes; the DOM element is cached in this.domObj. The only time the DOM is actually traversed is when you're calling DOM traversal methods. Assigning a DOM element to a variable/object property works exactly the same as any other assignment.