This is a follow-up question to Javascript Serialization of Typed Objects. That solution works OK for objects whose type is known, but now I have an object of a type that is unknown by the code that will be performing the de-serialization. There's a base class "Sprite" that has a number of properties that need to be serialized. Any number of derived classes (such as "Player" and "Platform" etc) may derive from class Sprite and add their own properties. I also have a "MapLayer" object that contains a collection of Sprite-derived objects. How do I de-serialize the layer and all of its sprites such that each sprite will be of the correct derived type when de-serialization is complete. Do I need to use eval("new " + derivedTypeName + parameterList)? Is there a better way?
More details:
The Sprite base class is hard-coded, but all the derived classes are generated code. I can make the code generator generate deserialize functions for every derived class, but how do I call them appropriately from the generic base class deserialization function? There's only one MapLayer class, and somehow it has to potentially call the deserialize function on all the classes derived from Sprite.
In order to call the derived object's constructor function, you'll first need to know which constructor you want to call. You don't give details about how you're currently encoding that type information in your serialized payload, so let's say you've got something like the following:
var MyDerivedType = function () {...};
MyDerivedType.prototype.__derivedTypeName = 'MyDerivedType';
MyDerivedType.deserialize = function ( input ) {
var obj = JSON.parse( input );
return new MyDerivedType( obj );
};
If you're not assigning your derived types to the global scope then you'll need to be able to address them at the time of deserialization. Here's an example of storing them on the Sprite constructor itself:
Sprite.derivedTypes = Sprite.derivedTypes || {};
Sprite.derivedTypes['MyDerivedType'] = MyDerivedType;
Then you can avoid using eval and call the appropriate deserializer like this:
Sprite.deserialize = function(input) {
// json parse the data string to pull out our derived type
var o = JSON.parse(input);
// delegate to the derived type's deserialize method
return Sprite.derivedTypes[o.__derivedTypeName].deserialize(input);
};
There is nothing built-in to JavaScript/browser js environments which provides deserialization to "classes" in the sense that you're familiar with in .net.
Related
Don't do it
This question has some comments with a low opinion of the very notion of reconstructing the objects. The commenters either couldn't or wouldn't explain why they thought it was a bad idea, but since asking I have come the to same conclusion. Here's why.
If you think about MVVM, the purpose of having a model and a view-model is to separate behaviour from data. This is kind of funny, because the point of object-orientation is to combine them. But in a distributed world, the data has to be shipped around. If your code and data are all munged together then you have to either invent MVVM or keep de- and re-constructing objects.
The code to de- and re-construct objects is a testing and maintenance time-sink you don't need, and introduces two failure modes. Don't do it. Have a method-less class to hold the state and a stateless class that operates on the method-less class. This is the essence of MVVM, and really nothing more than application of Memento pattern.
Memento (283)
Without violating encapsulation, capture and externalize an object's internal state so that the object can be restored to this state later.
Design Patterns, Gamma et al, 1995
Original question
The data of my view models is passed back and forth between client JS and server Web APIs as JSON.
It is well understood that JSON.stringify(object) serialises only members that have a non-null value that is not a Function. Thus, JSON.parse(JSON.stringify(someObject)) will remove all the methods from the object.
My current implementation has each graph node implemented as a Typescript class with Serialise and Deserialise methods. JQuery.ajax calls a Web API and implicitly parses the resultant JSON into a DAG of object definitions, each of which has a Type property indicating which type of class it was prior to serialisation. I have a map of constructors indexed by name and the appropriate constructor is retrieved and the data passed as the constructor parameter.
Depending on type there may be children; if so things proceed recursively down the graph.
I have been wondering whether, rather than copy all the property values, I couldn't just assign an appropriate prototype. Bring the mountain to Mahomed, you might say. This would eliminate quite a bit of clutter in my codebase.
As I write it occurs to me that I could use $.extend, but I'm progressively weeding jQuery out of my codebase so this would be a retrograde step.
Is there any known peril in my proposition of diddling the prototype?
Does anyone have a better idea? Other than $.extend, I mean. Something TypeScripty, by preference.
It has been observed in comments that assigning the prototype means the constructor is never called. This is irrelevant. The object state is already set up, all that is required is to make the methods available.
I recently built object with methods which content could be serialized and then reconstructed.
I simply added an argument which could take a JSON object and assign it to itself.
Example using plain object:
function myObject() {
this.valueA = 1;
this.valueB = 2;
this.valueC = 3;
this.add = function() {
return this.valueA + this.valueB + this.valueC;
};
}
var o = new myObject();
console.log(o.add());
console.log(JSON.stringify(o));
If you serialized this you would get:
{"valueA":1,"valueB":2,"valueC":3}
Now, to reconstruct this you can add a Object.assign() to the object like this taking the argument and merge it with self:
function myObject(json) {
this.valueA = 0;
this.valueB = 0;
this.valueC = 0;
this.add = function() {
return this.value1 + this.value2 + this.value3;
};
Object.assign(this, json); // will merge argument with itself
}
If we now pass the parsed JSON object as argument it will merge itself with the object recreating what you had:
var json = JSON.parse('{"valueA":1,"valueB":2,"valueC":3}')
function myObject(json) {
this.valueA = 0;
this.valueB = 0;
this.valueC = 0;
this.add = function() {
return this.valueA + this.valueB + this.valueC;
};
Object.assign(this, json); // will merge argument with itself
}
var o = new myObject(json); // reconstruct using original data
console.log(o.add());
If you now have children via array you simply repeat the process recursively down the chain.
(A bonus is that you can also pass options this way).
I'm building a JS metadata generator so we have access to strongtyped entities and properties. I do this by generating a Metadata prototype and adding a Entities prototype into it. I then populate that prototype with all of our entities such as Metadata.Entities._Customer which returns 'Customer' as a string and Metadata.Entities.Customer which lists all of its properties.
However the issue becomes when you have nested properties like entity.entityRef.property. What I want to call is Metadata.Entities.Customer.Category.Description and have it return 'Category.Description'.
If possible I want to avoid generating every possible route since our metadata can get very extensive, so I was hoping to know if javascript is capable of fishing out the last bit without having to give it as a string literal (it kinda voids the purpose of wanting to make it more strongtyped) in which case I can simply have Metadata.Entities.Customer.Category point to Metadata.Entities.Category to access its properties.
var Metadata= {
Entities: {}
};
Metadata.Entities._Customer = 'Customer';
Metadata.Entities._Category = 'Category';
Metadata.Entities.Customer = {};
Metadata.Entities.Category = {};
Metadata.Entities.Customer.Category = Metadata.Entities.Category;
Metadata.Entities.Cateogry.Description = 'Description';
I have been coding in javascript for some time, but am fairly new to Node. I recently undertook a project that involves a complex object structure with multiple levels of prototypical inheritance and sub objects. This structure needs to be periodically saved / loaded. Saving and loading in JSON is desirable.
The Question
Is there a more elegant way of accomplishing the task of saving/loading these complex Javascript objects than my current method (outlined below)? Is it possible to design it in such a way where the constructors can initialize themselves as if they were normal objects without being bound by all of the restoring functionality?
My Solution
The base 'class' (from which, by design, all other objects under consideration inherit protoypically) has a function which processes an 'options' argument, adding all of it's properties to the current object. All deriving objects must include an options argument as the last argument and call the processing function in their constructor.
Each object also must add it's function name to a specific property so that the correct constructor function can be called when the object needs to be rebuilt.
An unpack function takes the saved object JSON, creates a plain object with JSON.parse and then passes that object in as the 'options' argument to the object's constructor.
Each object is given a unique id and stored in a lookup table, so that a function under construction with links to other objects can point to the right ones, or create them if it needs to.
Here is a plunker which demonstrates the idea (obviously in a non-Node way).
If you don't want to load the plunker, here's an excerpt which should hopefully provide the gist of what I'm trying to do:
function BaseClass(name, locale, options){
if(name) this.name = name;
if(locale) this.locale = locale;
// If options are defined, apply them
this.processOptions(options);
// create the classList array which keeps track of
// the object's prototype chain
this._classList = [arguments.callee.name];
// Create a unique id for the object and add it to
// the lookup table
if(!this.id) this.id = numEntities++;
lookupTable[this.id] = this;
if(!this.relations) this.relations = [];
// other initialization stuff
}
BaseClass.prototype = {
processOptions: function(options) {
if(options && !options._processed){
for(var key in options){
if(options.hasOwnProperty(key)){
this[key] = options[key];
}
}
options._processed = true;
}
},
addNewRelation: function(otherObj){
this.relations.push(otherObj.id);
}
// Other functions and such for the base object
}
function DerivedClassA(name, locale, age, options){
if(age) this.age = age;
this.processOptions(options);
if(options && options.connectedObj){
// Get the sub object if it already exists
if(lookupTable[options.subObj.id]){
this.subObj = lookupTable[options.subObj.id];
}
// Otherwise, create it from the options
else {
this.subObj = new OtherDerivedClass(options.subObj);
}
}
else {
// If no options then construct as normal
this.subObj = new OtherDerivedClass();
}
// If something needs to be done before calling the super
// constructor, It's done here.
BaseClass.call(this, name, locale, options);
this._classList.push(arguments.callee.name);
}
DerivedClassA.prototype = Object.create(BaseClass.prototype);
As mentioned, this gets the job done, but I can't help but feeling like this could be much better. It seems to impose a ridiculous amount of restrictions on the inheriting 'classes' and how their constructors must behave. It makes a specific order of execution critical, and requires that each object be deeply involved and aware of the restoration process, which is far from ideal.
I am serializing and storing an object that was created from a WinJS.Class like this:
var myClass = WinJS.Class.define(...);
var myObject = new myClass();
var serialized = JSON.stringify(myObject);
//store the object
And later I'm pulling the object out of storage and I want to deserialize it and cast it as a myClass. Is that possible with WinJS out of the box or do I need to create a constructor for my class that is capable of taking an object that can turn it into a new object?
I haven't broken into TypeScript yet, and I think that would help out in this situation, but until then I'm wondering how to do it with plain JavaScript/WinJS.
There are a few ways to handle this, and none are particularly special to WinJS. Simply put: JSON serialization only serializes and deserializes the obje values, not its methods, prototype, or other type information.
Option 1: Copy values to new instance of your class
This is usually best accomplished by having your constructor take the deserialized object as a parameter and copying the data to the new instance.
There are a variety of variations of this. Using the object constructor is generally the best for performance, as this typically enables the JS engine to apply the greater number of optimizations to the object.
WinJS.UI.setOptions can be helpful here, or you can just copy the data using a simple loop like this:
var keys = Object.keys(source);
for (var i = 0, len = keys.length; i < len; i++) {
var key = keys[i];
destination[key] = source[key];
}
Option 2: Setting __proto__
Warning: This can have significantly adverse performance effects, so it's not appropriate in some situations. But occasionally it can be handy.
Object.setPrototypeOf(myObject, myClass.prototype);
Note that setPrototypeOf is relatively new. It's there on Win8.1 for web apps (which I'm guessing this is about) and in IE 11, but not available in Safari, for example. On older browsers/ Safari, assigning to proto is the equivalent (but if available, setPrototypeOf is better).
This will attach methods from myClass to the object, but in addition to the negative performance effects, also does not run your constructor on the object - so it still may not be in exactly the same state as the object you originally serialized.
Other helpful thing: JSON "revivers"
JSON.parse takes an optional second parameter, called a "reviver". This lets you provide a function that gets the opportunity to transform each node of the JSON being deserialized. This can be useful for rehydrating serialized dates into JavaScript Date objects, for example. It also gets the opportunity to transform the top-most object, which could be useful in some cases to turn the deserialized object into the "class" you want.
Javascript is a dynamic language so I think you dont need to cast the deserialized object, just treat it as myClass type and that's it. Hope it helps you.
You should consider using the 'Options' constructor pattern, where the option value is the deserialized object:
// MovieModel Constructor
// ----------------------
function MovieModel(options) {
this._titleValue = options.title || "Sample Title";
}
Where the movie methods closure is something like this:
// MovieModel Methods
// ------------------
var movieModelMethods = {
title: {
get: function () {
return this._titleValue;
},
set: function (val) {
this._titleValue = val;
this.dispatchEvent("title");
}
}
};
Since WinJS class define can only specify one constructor function (as far as I understand it), you may use the static members to define a factory function that will take the serialized data as a parameter. This factory methdod will actually create a new instance and will set the values one by one and return the new object.
It as some advantages like the fact that you can actually manage the data structure changes over the time you enhance the app...
The drawback is that you cannot write new MySuperClass() all the time...
...
// let's suppose we already called JSON.parse(data);
create: function(serializedData) {
var newObj = new MySuperClass();
newObj.name = serializedData.name || "";
newObj.color = serializedData.color || "";
return newObj;
}
Then you will call somewhere else in the app :
var myInstance = MySuperClass.create(serializedDataFromfile);
You should just be able to call JSON.parse after pulling it out of local storage:
var myObject2;
myObject2 = JSON.parse(localStorage["mySeriazliedObject"];
I have decided (whether bravely or foolishly remains to be seen) decided to increase my javascript skills beyond the use of alerts and I've
been looking at using javascript business objects with the hope of creating a useful library of objects that I can then manipulate with JSON or XML
further on down the line.
The basic concepts are straightforward enough but I can't seem to find an example anywhere of how to expose a property of an object that is a collection of
a different type of object.
For instance if I have a "Department" object I would like to have an "Employees" property which is a collection of "Employee" objects.
I'm from a .Net background so I might be coming at this with the completely wrong mindset here but if I am I'd like to learn the right way to approach this.
Is the concept still applicable in javascript, can a property of a javascript object be a collection of another type of object? Does the concept of a collection even exist (I'd like to be able to enumerate through the collection too) or should I be thinking in terms of arrays or something else?
Here is some pseudo code which should illustrate what I'm aiming for:
function Department (Name)
{
this.DepartmentName=Name;
this.Employees = null; // How do I initialise a property to be a collection of Employee objects?
}
function Employee(FirstName, Surname)
{
this.EmployeeName = Firstname + ' ' + Surname;
}
Department.prototype.addEmployee = function (Firstname, Surname)
{
//In here I want to create an Employee object and add it to an
//'Employees' property of the department object
}
There is no real "list of objects of a specific type" in JavaScript. You seem to just want an array, which is a "collection" (basically an object) with numeric keys and values which can be everything (JavaScript is dynamic, so there is no easy way to force a collection to contain only items of one type, but you should never need to anyway):
function Department (Name)
{
this.DepartmentName = Name;
this.Employees = []; // empty array
}
Then in the prototype function, you can:
create a new instance (object) of type Employee
add it to this.Employees
Like:
Department.prototype.addEmployee = function (Firstname, Surname)
{
// adds to the end of the array
this.Employees.push(new Employee(Firstname, Surname));
};
You can access the Employee objects like this.Employees[0], etc.
Don't forget the semicolon at the end of the prototype function. It's a function expression, and it's good practice to terminate function expressions with a semicolon. Function declarations (like for Department and Employee), on the other hand, do not need those. The difference is that the prototype function is used as an expression in the assignment statement.
Moreover, CapitalCase is usually used for constructors (Employee); regular variable names are usually names in camelCase.